/* ==========================================================================
   마켓 V2 공통 (웹)
   figma : 마켓상세 종합/뉴스/차트/커뮤니티 1280 (23266:28923 외)
          970 대응 (23282:27530 외) → @media (max-width: 1399px)
   ========================================================================== */

.section_market_common {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #FFF;
    border-top:1px solid #EBEBF0;
}

.section_market_view_inner,
#section_market_index_inner {
    width: 1280px;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
}

.section_market_common .up   { color: #F65252 !important; }
.section_market_common .down { color: #4294FF !important; }
.section_market_common .even { color: #969EAE !important; }


/* ==========================================================================
   왼쪽 영역
   ========================================================================== */

.market_left_wrap {
    display: flex;
    width: 413px;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 20px;
    padding: 32px 20px 20px;

    border-right: 1px solid #EBEBF0;
    box-sizing: border-box;
}

/* ------------------------------ 공포·탐욕 지수 */

.market_left_wrap .left_index_fear_greed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;

    border-radius: 8px;
    background: #F5F6F9;
    box-sizing: border-box;
}
.market_left_wrap .left_index_fear_greed .fear_greed_text .title {
    color: #111;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.45px;
}
.market_left_wrap .left_index_fear_greed .fear_greed_text .title .fear   { color: #EA3943; }
.market_left_wrap .left_index_fear_greed .fear_greed_text .title .greed  { color: #16C784; }
.market_left_wrap .left_index_fear_greed .fear_greed_text .description {
    color: #6E7686;
    font-size: 13px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.325px;
    margin-top: 2px;
}
.market_left_wrap .left_index_fear_greed .fear_greed_gauge {
    position: relative;
    width: 144px;
    height: 78px;
    flex: 0 0 auto;
}
.market_left_wrap .left_index_fear_greed .fear_greed_gauge img {
    display: block;
    width: 100%;
    height: 100%;
}
.market_left_wrap .left_index_fear_greed .fear_greed_gauge .gauge_value {
    position: absolute;
    top: 35px;
    left: 0;
    width: 100%;

    color: #0D1421;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    line-height: 130%;
}

/* ------------------------------ 토큰포스트 미디어 지수 */

.market_left_wrap .left_index_media {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;

    border-radius: 8px;
    background: #F5F6F9;
    box-sizing: border-box;
}
.market_left_wrap .left_index_media .media_index_text .title {
    color: #111;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.45px;
}

/* 구간별 색상. 긍정 빨강 · 중립 회색 · 부정 파랑 (국내 시세 표기 관례) */
.market_left_wrap .left_index_media .media_index_text .title .strongly_negative { color: #4294FF; }
.market_left_wrap .left_index_media .media_index_text .title .negative          { color: #4294FF; }
.market_left_wrap .left_index_media .media_index_text .title .neutral           { color: #6E7686; }
.market_left_wrap .left_index_media .media_index_text .title .positive          { color: #F65252; }
.market_left_wrap .left_index_media .media_index_text .title .strongly_positive { color: #F65252; }

.market_left_wrap .left_index_media .media_index_text .description {
    color: #6E7686;
    font-size: 13px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.325px;
    margin-top: 2px;
}
.market_left_wrap .left_index_media .media_index_gauge {
    position: relative;
    width: 144px;
    height: 84px;
    flex: 0 0 auto;
}
.market_left_wrap .left_index_media .media_index_gauge svg {
    display: block;
    width: 100%;
    height: 100%;
}
.market_left_wrap .left_index_media .media_index_gauge .gauge_value {
    position: absolute;
    top: 42px;
    left: 0;
    width: 100%;

    color: #0D1421;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    line-height: 130%;
}

.market_left_wrap .left_index_media .gauge_value.strongly_negative { color: #4294FF; }
.market_left_wrap .left_index_media .gauge_value.negative          { color: #4294FF; }
.market_left_wrap .left_index_media .gauge_value.neutral           { color: #6E7686; }
.market_left_wrap .left_index_media .gauge_value.positive          { color: #F65252; }
.market_left_wrap .left_index_media .gauge_value.strongly_positive { color: #F65252; }

/* ------------------------------ 전체/관심목록 탭 */

/* 전체 / 관심목록 탭. 오른쪽 탭과 같은 버튼(pill) 형태다. */
.market_left_wrap .left_crypto_tab_wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}
.market_left_wrap .left_crypto_tab_wrap .crypto_tab_item {
    display: flex;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;

    border-radius: 8px;
    border: 1px solid #EBEBF0;
    background: #FFF;

    color: #6E7686;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.38px;

    transition: background-color .15s ease, color .15s ease;
}
.market_left_wrap .left_crypto_tab_wrap .crypto_tab_item:hover {
    background: #F5F6F9;
}
.market_left_wrap .left_crypto_tab_wrap .crypto_tab_item.active,
.market_left_wrap .left_crypto_tab_wrap .crypto_tab_item.active:hover {
    border-color: #2B2D36;
    background: #2B2D36;
    color: #FFF;
    font-weight: 700;
}

/* ------------------------------ 검색 */

.market_left_wrap .left_crypto_search_wrap {
    display: flex;
    height: 40px;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;

    border-radius: 4px;
    border: 1px solid #EBEBF0;
    background: #FFF;
    box-sizing: border-box;
}
.market_left_wrap .left_crypto_search_wrap img {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}
.market_left_wrap .left_crypto_search_wrap input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;

    color: #111;
    font-size: 13px;
}
.market_left_wrap .left_crypto_search_wrap input::placeholder {
    color: #BEC3D0;
}

/* ------------------------------ 가상자산 목록 */

/*
   목록이 길어지면 왼쪽 영역만 스크롤한다.
   좌우가 flex(align-items:stretch) 라 컨테이너 높이가 두 컬럼 중 큰 쪽으로 잡힌다.
   즉 오른쪽 높이에 자동으로 맞출 수가 없어 최대 높이를 직접 준다.
*/
.market_left_wrap .left_crypto_list_wrap {
    width: 100%;
    height:100%;
    max-height: 500px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 스크롤해도 헤더는 남긴다.
   border-collapse:collapse 에서는 sticky th 의 border 가 같이 안 붙어서
   border-bottom 대신 box-shadow 로 선을 그린다. */
.market_left_wrap .left_crypto_list_wrap .left_crypto_table thead th {
    position: sticky;
    top: 0;
    z-index: 2;

    background: #fff;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 #EBEBF0;
}

/* 스크롤바 */
.market_left_wrap .left_crypto_list_wrap::-webkit-scrollbar {
    width: 6px;
}
.market_left_wrap .left_crypto_list_wrap::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #D8DAE0;
}
.market_left_wrap .left_crypto_list_wrap::-webkit-scrollbar-track {
    background: transparent;
}

/*
   링크복사용 숨김 input.
   execCommand('copy') 가 선택 가능한 요소를 요구해서 display:none 은 쓸 수 없다.
   기사페이지는 list_new/article.css 에 같은 규칙이 있는데 마켓은 그 CSS 를 로드하지 않는다.
*/
#copyLinkHidden {
    position: absolute;
    top: -9999em;
}

/* 관심목록 빈 상태 / 검색 결과 없음 */
.market_left_wrap .left_crypto_empty,
.market_left_wrap .left_crypto_no_result {
    padding: 48px 20px;
    text-align: center;

    color: #969EAE;
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
    letter-spacing: -0.35px;
}
.market_left_wrap .left_crypto_table {
    width: 100%;
    border-collapse: collapse;
}
.market_left_wrap .left_crypto_table thead th {
    padding: 0 8px 10px;
    border-bottom: 1px solid #EBEBF0;

    color: #6E7686;
    font-size: 13px;
    font-weight: 400;
    line-height: 130%;
    text-align: left;
    white-space: nowrap;
}
.market_left_wrap .left_crypto_table thead th img {
    width: 12px;
    height: 12px;
    vertical-align: middle;
}
.market_left_wrap .left_crypto_table thead .th_star  { width: 28px; padding: 0 4px 10px; }
.market_left_wrap .left_crypto_table thead .th_price { text-align: right; }
.market_left_wrap .left_crypto_table thead .th_mood  { width: 65px; text-align: right; padding: 0 4px 10px; }

/* ------------------------------ 정렬 헤더 (가상자산명 / 현재가)
   화살표는 market/_sortArrow.volt 의 인라인 svg 다.
   img 로 두면 위/아래 삼각형 중 한쪽만 강조할 수 없어 인라인으로 쓴다. */

[data-sort] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.sort_arrow {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    vertical-align: middle;
}
.sort_arrow svg {
    display: block;
}

/* 기본은 위아래 모두 흐리게, 정렬중인 방향만 진하게 */
.sort_arrow .arrow_up,
.sort_arrow .arrow_down {
    fill: #BEC3D0;
}
[data-sort].is_sort_asc .sort_arrow .arrow_up {
    fill: #111;
}
[data-sort].is_sort_desc .sort_arrow .arrow_down {
    fill: #111;
}

.market_left_wrap .left_crypto_table .left_crypto_table_item {
    cursor: pointer;
}
.market_left_wrap .left_crypto_table .left_crypto_table_item:hover {
    background: #F8F9FB;
}
.market_left_wrap .left_crypto_table .left_crypto_table_item td {
    height: 60px;
    padding: 10px 4px;
    box-sizing: border-box;
    vertical-align: middle;
}
.market_left_wrap .left_crypto_table .cell_star {
    width: 28px;
}

.market_left_wrap .left_crypto_table .cell_star .btn_star {
    display: none;
    width: 20px;
    height: 20px;
}
.market_left_wrap .left_crypto_table .cell_star .btn_star.active {
    display: block;
}
.market_left_wrap .left_crypto_table .cell_name {
    max-width: 0; /* flex ellipsis용 */
}
.market_left_wrap .left_crypto_table .cell_name {
    width: 40%;
}
.market_left_wrap .left_crypto_table .cell_name .crypto_icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    float: left;
    margin-right: 4px;
}
.market_left_wrap .left_crypto_table .cell_name .crypto_name_wrap {
    overflow: hidden;
}
.market_left_wrap .left_crypto_table .cell_name .crypto_name {
    color: #111;
    font-size: 14px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.35px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.market_left_wrap .left_crypto_table .cell_name .crypto_symbol {
    color: #969EAE;
    font-size: 12px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.3px;
}
.market_left_wrap .left_crypto_table .cell_price {
    text-align: right;
}
.market_left_wrap .left_crypto_table .cell_price .price {
    color: #000;
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.325px;
    white-space: nowrap;
}
.market_left_wrap .left_crypto_table .cell_price .percent {
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.325px;
    white-space: nowrap;
}
.market_left_wrap .left_crypto_table .cell_price .percent.up::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 7px;
    margin-right: 4px;
    background: url("/assets/images/tokenpost_new/market/coin_up.svg") no-repeat center / contain;
}
.market_left_wrap .left_crypto_table .cell_price .percent.down::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 7px;
    margin-right: 4px;
    background: url("/assets/images/tokenpost_new/market/coin_down.svg") no-repeat center / contain;
}
.market_left_wrap .left_crypto_table .cell_mood {
    width: 65px;
    text-align: right;
}
.market_left_wrap .left_crypto_table .cell_mood .mood {
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.35px;
    white-space: nowrap;
}
.market_left_wrap .left_crypto_table .cell_mood .mood.positive { color: #F65252; }
.market_left_wrap .left_crypto_table .cell_mood .mood.positive::after { content: '긍정적'; }
.market_left_wrap .left_crypto_table .cell_mood .mood.negative { color: #4294FF; }
.market_left_wrap .left_crypto_table .cell_mood .mood.negative::after { content: '부정적'; }

/* 분위기 점수. 정렬 근거가 보이도록 분위기 아래에 붙인다.
   sentiment_status(span)가 inline 이라 block 으로 줄을 내린다. */
.market_left_wrap .left_crypto_table .cell_mood .sentiment_status {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.35px;
    white-space: nowrap;
}
.market_left_wrap .left_crypto_table .cell_mood .mood_score {
    display: block;
    margin-top: 1px;

    font-size: 12px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.3px;
}

/* 점수 색은 분위기 텍스트와 맞춘다.
   tr 에 sentiment_* 가 붙어 있어 행 단위로 제어한다. */
.market_left_wrap .left_crypto_table_item.sentiment_strongly_positive .mood_score,
.market_left_wrap .left_crypto_table_item.sentiment_positive          .mood_score { color: #F65252; }
.market_left_wrap .left_crypto_table_item.sentiment_neutral           .mood_score { color: #6E7686; }
.market_left_wrap .left_crypto_table_item.sentiment_negative          .mood_score,
.market_left_wrap .left_crypto_table_item.sentiment_strongly_negative .mood_score { color: #4294FF; }


/* ==========================================================================
   오른쪽 영역
   ========================================================================== */

.market_right_wrap {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 32px;
    padding: 32px 0 32px 20px;
    box-sizing: border-box;
}

/* ------------------------------ 코인 헤더 */

.market_right_wrap .market_crypto_header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #EBEBF0;
}
.market_right_wrap .market_crypto_header .crypto_header_left {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 58px;
}
.market_right_wrap .market_crypto_header .crypto_title_wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.market_right_wrap .market_crypto_header .crypto_title_wrap .crypto_icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.market_right_wrap .market_crypto_header .crypto_title_wrap .crypto_title {
    color: #111;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.4px;
}
.market_right_wrap .market_crypto_header .crypto_price_wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
.market_right_wrap .market_crypto_header .crypto_price_wrap .crypto_price {
    font-size: 24px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.6px;
}
.market_right_wrap .market_crypto_header .crypto_percent_badge {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 4px;
    border-radius: 4px;

    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.4px;
}
.market_right_wrap .market_crypto_header .crypto_percent_badge.up   { background: #FFF2F2; color: #F65252; }
.market_right_wrap .market_crypto_header .crypto_percent_badge.down { background: #E6F1FF; color: #4294FF; }
.market_right_wrap .market_crypto_header .crypto_percent_badge img {
    width: 9px;
    height: 7px;
}
.market_right_wrap .market_crypto_header .crypto_sparkline {
    width: 120px;
    height: 40px;

    /* svg 가 currentColor 를 쓰므로 여기서 색을 정한다. 기본은 보합. */
    color: #969EAE;
}
.market_right_wrap .market_crypto_header .crypto_sparkline.up   { color: #F65252; }
.market_right_wrap .market_crypto_header .crypto_sparkline.down { color: #4294FF; }

.market_right_wrap .market_crypto_header .crypto_sparkline svg,
.market_right_wrap .market_crypto_header .crypto_sparkline img {
    display: block;
    width: 100%;
    height: 100%;
}
.market_right_wrap .market_crypto_header .crypto_header_right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 58px;
}
.market_right_wrap .market_crypto_header .crypto_action_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.market_right_wrap .market_crypto_header .crypto_action_wrap img {
    width: 20px;
    height: 20px;
    cursor: pointer;
}
/* 우측 헤더 관심 별. on/off 두 장을 겹쳐두고 active 만 노출한다. (좌측 목록과 동일) */
.market_right_wrap .market_crypto_header .crypto_action_wrap .btn_star {
    display: none;
}
.market_right_wrap .market_crypto_header .crypto_action_wrap .btn_star.active {
    display: block;
}
.market_right_wrap .market_crypto_header .crypto_base_info {
    color: #6E7686;
    font-size: 12px;
    line-height: 150%;
}

/* ------------------------------ 탭 */

/* 탭. 밑줄형이 아니라 버튼(pill) 형태다.
   active = 어두운 채움, inactive = 연회색 채움 */
.market_right_wrap .market_tab_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    margin-top: -24px; /* 코인헤더와 8px 간격 */
}
.market_right_wrap .market_tab_wrap .market_tab_item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;

    border-radius: 8px;
    border: 1px solid #EBEBF0;
    background: #FFF;

    color: #6E7686;
    font-size: 15px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.38px;

    transition: background-color .15s ease, color .15s ease;
}
.market_right_wrap .market_tab_wrap .market_tab_item:hover {
    background: #F5F6F9;
}
.market_right_wrap .market_tab_wrap .market_tab_item.active {
    border-color: #2B2D36;
    background: #2B2D36;
    color: #FFF;
    font-weight: 700;
}
.market_right_wrap .market_tab_wrap .market_tab_item.active:hover {
    background: #2B2D36;
}

.market_right_wrap .market_tab_content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* 탭 컨텐츠 공통 */
.market_right_wrap .tab_content_title {
    color: #111;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.45px;
}

/* 제목 + 우측 안내문구 한 줄 배치 */
.market_right_wrap .tab_content_title_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.market_right_wrap .tab_content_notice {
    display: flex;
    align-items: center;
    gap: 4px;

    color: #6E7686;
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.325px;
    text-align: right;
}

.market_right_wrap .tab_content_notice .notice_icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.market_right_wrap .tab_content_more_wrap {
    display: flex;
    justify-content: center;
}
.market_right_wrap .tab_content_more_wrap .btn_more {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 24px;

    border-radius: 4px;
    border: 1px solid #EBEBF0;
    box-sizing: border-box;
    cursor: pointer;

    color: #4B5363;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.35px;
}


/* ==========================================================================
   탭 : 종합
   ========================================================================== */

.tab_summary .summary_ai_card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;

    border-radius: 12px;
    border: 1px solid #EBEBF0;
    background: linear-gradient(180deg, rgba(151, 102, 255, 0.2) 0%, rgba(255, 255, 255, 0) 67px), #FFF;
    box-sizing: border-box;
    overflow: hidden;
}
.tab_summary .summary_ai_card .ai_card_title_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tab_summary .summary_ai_card .ai_card_title_wrap .title_left {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ------------------------------ 10초 요약 AI 아이콘
   market/_aiSummaryIcon.volt 의 인라인 SVG.

   블롭 3개가 아이콘 중심(28,28)을 각기 다른 주기로 돌면서 크기가 미세하게 변한다.
   주기를 서로 나누어떨어지지 않게 잡아 같은 배치가 잘 반복되지 않는다.

   transform-box: view-box 라야 transform-origin 을 viewBox 좌표로 줄 수 있다.
   (기본값 border-box 는 SVG 도형에서 의도대로 동작하지 않는다) */

.ai_summary_icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: block;
    overflow: visible;
}

.ai_summary_icon .ai_blob {
    transform-box: view-box;
    transform-origin: 28px 28px;
    will-change: transform;
}

.ai_summary_icon .ai_blob1 { animation: ai_blob_drift_1  7s ease-in-out infinite; }
.ai_summary_icon .ai_blob2 { animation: ai_blob_drift_2  9s ease-in-out infinite; }
.ai_summary_icon .ai_blob3 { animation: ai_blob_drift_3 11s ease-in-out infinite; }

/* 유리 덮개는 은은하게 밝아졌다 어두워진다 */
.ai_summary_icon .ai_glass {
    animation: ai_glass_pulse 4s ease-in-out infinite;
}

@keyframes ai_blob_drift_1 {
    0%   { transform: rotate(0deg)   scale(1); }
    50%  { transform: rotate(180deg) scale(1.08); }
    100% { transform: rotate(360deg) scale(1); }
}

/* 2번은 반대로 돈다 */
@keyframes ai_blob_drift_2 {
    0%   { transform: rotate(360deg) scale(1.04); }
    50%  { transform: rotate(180deg) scale(0.94); }
    100% { transform: rotate(0deg)   scale(1.04); }
}

@keyframes ai_blob_drift_3 {
    0%   { transform: rotate(0deg)   scale(0.96); }
    50%  { transform: rotate(180deg) scale(1.06); }
    100% { transform: rotate(360deg) scale(0.96); }
}

@keyframes ai_glass_pulse {
    0%, 100% { fill-opacity: 0.20; }
    50%      { fill-opacity: 0.08; }
}

/* 모션 최소화 설정을 켠 사용자에게는 움직이지 않는다 */
@media (prefers-reduced-motion: reduce) {
    .ai_summary_icon .ai_blob,
    .ai_summary_icon .ai_glass {
        animation: none;
    }
}

/* 제목은 --ai 그라데이션을 글자에 입힌다.
   background-clip:text 라 color 는 transparent 여야 하고,
   미지원 브라우저를 위해 단색 color 를 먼저 선언해 둔다. */
.tab_summary .summary_ai_card .ai_card_title_wrap .title {
    color: #8080FF;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.45px;

    background: linear-gradient(135deg, #4294FF 16.67%, #8080FF 52.08%, #D480FF 87.5%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tab_summary .summary_ai_card .ai_card_title_wrap .ai_badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;

    border-radius: 40px;
    background: linear-gradient(135deg, #4294FF 16.67%, #8080FF 52.08%, #D480FF 87.5%);

    color: #FFF;
    font-size: 13px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.325px;
}
.tab_summary .summary_ai_card .ai_card_title_wrap .ai_badge img {
    width: 10px;
    height: 10px;
}
.tab_summary .summary_ai_card .ai_card_title_wrap .title_right {
    display: flex;
    align-items: center;
    gap: 4px;

    color: #969EAE;
    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
}
.tab_summary .summary_ai_card .ai_card_title_wrap .title_right img {
    width: 12px;
    height: 12px;
}

.tab_summary .summary_ai_card .ai_card_crypto_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;

    border-radius: 6px;
    background: #F5F6F9;
    box-sizing: border-box;
}

/* 뉴스 분위기별 배경. 미분석이면 클래스가 안 붙어 위의 기본 회색이 그대로 쓰인다.
   긍정 = 빨강 계열, 부정 = 파랑 계열 (국내 시세 표기 관례) */
.tab_summary .summary_ai_card .ai_card_crypto_bar.sentiment_positive { background: #FFEBEB; }
.tab_summary .summary_ai_card .ai_card_crypto_bar.sentiment_neutral  { background: #F5F6F9; }
.tab_summary .summary_ai_card .ai_card_crypto_bar.sentiment_negative { background: #E6F1FF; }
.tab_summary .summary_ai_card .ai_card_crypto_bar .crypto_bar_left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tab_summary .summary_ai_card .ai_card_crypto_bar .crypto_bar_left .crypto_icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
.tab_summary .summary_ai_card .ai_card_crypto_bar .crypto_bar_left .crypto_title {
    color: #111;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.4px;
}
.tab_summary .summary_ai_card .ai_card_crypto_bar .crypto_bar_left .crypto_percent {
    display: flex;
    align-items: center;
    gap: 3px;

    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.3px;
}
.tab_summary .summary_ai_card .ai_card_crypto_bar .crypto_bar_left .crypto_percent img {
    width: 9px;
    height: 7px;
}
.tab_summary .summary_ai_card .ai_card_crypto_bar .crypto_bar_right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tab_summary .summary_ai_card .ai_card_crypto_bar .crypto_bar_right .mood_text {
    color: #565E6A;
    font-size: 12px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.25px;
}
.tab_summary .summary_ai_card .ai_card_crypto_bar .crypto_bar_right .mood_base {
    color: #969EAE;
    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.25px;
}

.tab_summary .summary_ai_card .ai_card_crypto_bar .crypto_bar_right span.positive{
    color: #F65252;
}
.tab_summary .summary_ai_card .ai_card_crypto_bar .crypto_bar_right span.neutral{

    color: #6E7686;
}
.tab_summary .summary_ai_card .ai_card_crypto_bar .crypto_bar_right span.negative{
    color: #4294FF;

}




.tab_summary .summary_ai_card .ai_card_news_list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tab_summary .summary_ai_card .ai_card_news_list .news_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EBEBF0;
    cursor: pointer;
}
.tab_summary .summary_ai_card .ai_card_news_list .news_item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.tab_summary .summary_ai_card .ai_card_news_list .news_item .item_left {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: flex-start;
    gap: 8px;
}
/*//.tab_summary .summary_ai_card .ai_card_news_list .news_item .mood_badge {*/
.tab_summary .summary_ai_card .ai_card_news_list .sentiment_wrap .sentiment_status {
    display: inline-flex;
    height: 22px;
    align-items: center;
    padding: 2px 6px;
    flex: 0 0 auto;

    border-radius: 20px;
    box-sizing: border-box;

    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.25px;
}
.tab_summary .summary_ai_card .ai_card_news_list .sentiment_wrap .sentiment_positive,
.tab_summary .summary_ai_card .ai_card_news_list .sentiment_wrap .sentiment_strongly_positive {
    background: #FFEBEB; color: #F65252;
}
.tab_summary .summary_ai_card .ai_card_news_list .sentiment_wrap .sentiment_neutral{
    background: #F5F6F9; color: #6E7686;
}
.tab_summary .summary_ai_card .ai_card_news_list .sentiment_wrap .sentiment_negative,
.tab_summary .summary_ai_card .ai_card_news_list .sentiment_wrap .sentiment_strongly_negative {
    background: #E6F1FF; color: #4294FF;
}
.tab_summary .summary_ai_card .ai_card_news_list .sentiment_wrap .sentiment_status {
    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tab_summary .summary_ai_card .ai_card_news_list .news_item .item_right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.tab_summary .summary_ai_card .ai_card_news_list .news_item .item_right .time {
    color: #969EAE;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.tab_summary .summary_ai_card .ai_card_news_list .news_item .item_right img {
    width: 10px;
    height: 10px;
}

.tab_summary .summary_ai_card .ai_card_disclaimer {
    color: #969EAE;
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.25px;
}

/* ------------------------------ 주요 지표 */
/* 주요 지표(2x2) + 등락률 을 한 줄에 나란히 둔다. */
.tab_summary .summary_middle_wrap {
    display: flex;
    align-items: stretch;
    gap: 20px;
}
.tab_summary .summary_middle_wrap .summary_stats_card {
    flex: 1;
    min-width: 0;
}


.tab_summary .summary_stats_card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;

    border-radius: 12px;
    border: 1px solid #EBEBF0;
    background: #FFF;
    box-sizing: border-box;
}
.tab_summary .summary_stats_card .card_title {
    color: #111;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.45px;
}
.tab_summary .summary_stats_card .stats_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
}
.tab_summary .summary_stats_card .stats_grid .stats_item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 0;
    border-bottom: 1px solid #EBEBF0;
}
.tab_summary .summary_stats_card .stats_grid .stats_item:nth-child(-n+2) {
    padding-top: 0;
}
.tab_summary .summary_stats_card .stats_grid .stats_item:nth-last-child(-n+2) {
    padding-bottom: 0;
    border-bottom: 0;
}
.tab_summary .summary_stats_card .stats_grid .label {
    color: #919AA6;
    font-size: 13px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.25px;
}
.tab_summary .summary_stats_card .stats_grid .value {
    color: #15181D;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.25px;
}
.tab_summary .summary_stats_card .stats_grid .value .gap {
    color: #919AA6;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.3px;
}
.tab_summary .summary_stats_card .stats_grid .value .rank {
    color: #919AA6;
    font-size: 10px;
    font-weight: 700;
}

/* ------------------------------ 수익률 / 많이 보는 코인 */

.tab_summary .summary_bottom_wrap {
    display: flex;
    align-items: stretch;
    gap: 20px;
}
.tab_summary .summary_return_card,
.tab_summary .summary_popular_card {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 20px;
    padding: 20px 20px 4px;

    border-radius: 12px;
    border: 1px solid #EBEBF0;
    background: #FFF;
    box-sizing: border-box;
}
.tab_summary .summary_return_card .card_title,
.tab_summary .summary_popular_card .card_title {
    color: #111;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.45px;
}
.tab_summary .summary_popular_card .card_title_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tab_summary .summary_popular_card .card_title_wrap .card_description {
    color: #969EAE;
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.325px;
}

.tab_summary .summary_return_card .return_list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #EBEBF0;
}
.tab_summary .summary_return_card .return_list li:first-child { padding-top: 0; }
.tab_summary .summary_return_card .return_list li:last-child  { border-bottom: 0; }
.tab_summary .summary_return_card .return_list .label {
    color: #919AA6;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.25px;
}
.tab_summary .summary_return_card .return_list .value {
    color: #15181D;   /* 보합(0.00%)일 때 기본색. up/down 클래스가 붙으면 덮인다. */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.25px;
}

/* li 안의 a 가 실제 행이다. a 가 없으면 rank/이름/가격이 세로로 쌓인다. */
.tab_summary .summary_popular_card .popular_list li > a,
.tab_summary .summary_sentiment_card .sentiment_rank_list li > a {
    display: flex;
    width: 100%;
    align-items: center;
    text-decoration: none;
}

/* ------------------------------ 분위기 좋은 코인 */

/* 많이 보는 코인 / 분위기 좋은 코인 을 주요지표·등락률과 같은 5:5 로 맞춘다.
   margin-top 은 두 카드가 세로로 쌓이던 때의 잔재라 제거한다. */
.tab_summary .summary_sentiment_card {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 20px;
    padding: 20px 20px 4px;

    border-radius: 12px;
    border: 1px solid #EBEBF0;
    background: #FFF;
    box-sizing: border-box;
}
.tab_summary .summary_sentiment_card .card_title {
    color: #111;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.45px;
}
.tab_summary .summary_sentiment_card .card_title_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tab_summary .summary_sentiment_card .card_title_wrap .card_description {
    color: #969EAE;
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.325px;
}
.tab_summary .summary_sentiment_card .sentiment_rank_list li {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #EBEBF0;
    cursor: pointer;
}
.tab_summary .summary_sentiment_card .sentiment_rank_list li:first-child { padding-top: 0; }
.tab_summary .summary_sentiment_card .sentiment_rank_list li:last-child  { border-bottom: 0; }
.tab_summary .summary_sentiment_card .sentiment_rank_list .rank {
    width: 20px;
    flex: 0 0 auto;

    color: #6E7686;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.35px;
}
.tab_summary .summary_sentiment_card .sentiment_rank_list .crypto_wrap {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
}
.tab_summary .summary_sentiment_card .sentiment_rank_list .crypto_wrap .crypto_icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.tab_summary .summary_sentiment_card .sentiment_rank_list .crypto_wrap .crypto_name {
    color: #111;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.35px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tab_summary .summary_sentiment_card .sentiment_rank_list .crypto_wrap .crypto_symbol {
    color: #969EAE;
    font-size: 12px;
    letter-spacing: -0.3px;
}
.tab_summary .summary_sentiment_card .sentiment_rank_list .sentiment_wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    white-space: nowrap;
}
.tab_summary .summary_sentiment_card .sentiment_rank_list .sentiment_text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.325px;
}

/* Util::getSentiment 5단계와 대응된다. 좌측 미디어 지수와 같은 팔레트. */
.tab_summary .summary_sentiment_card .sentiment_text.strongly_negative { color: #EA3943; }
.tab_summary .summary_sentiment_card .sentiment_text.negative          { color: #FF7A00; }
.tab_summary .summary_sentiment_card .sentiment_text.neutral           { color: #6E7686; }
.tab_summary .summary_sentiment_card .sentiment_text.positive          { color: #16C784; }
.tab_summary .summary_sentiment_card .sentiment_text.strongly_positive { color: #0EA05E; }

.tab_summary .summary_sentiment_card .sentiment_rank_list .sentiment_score {
    color: #6E7686;
    font-size: 13px;
    letter-spacing: -0.325px;
}
.tab_summary .summary_sentiment_card .sentiment_rank_list .sentiment_count {
    width: 80px;
    flex: 0 0 auto;

    color: #969EAE;
    text-align: right;
    font-size: 13px;
    letter-spacing: -0.325px;
    white-space: nowrap;
}

.tab_summary .summary_popular_card .popular_list li {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #EBEBF0;
    cursor: pointer;
}
.tab_summary .summary_popular_card .popular_list li:first-child { padding-top: 0; }
.tab_summary .summary_popular_card .popular_list li:last-child  { border-bottom: 0; }
.tab_summary .summary_popular_card .popular_list .rank {
    width: 20px;
    flex: 0 0 auto;

    color: #6E7686;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.35px;
}
.tab_summary .summary_popular_card .popular_list .crypto_wrap {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
}
.tab_summary .summary_popular_card .popular_list .crypto_wrap .crypto_icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.tab_summary .summary_popular_card .popular_list .crypto_wrap .crypto_name {
    color: #111;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.35px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tab_summary .summary_popular_card .popular_list .crypto_wrap .crypto_symbol {
    color: #969EAE;
    font-size: 12px;
    letter-spacing: -0.3px;
}
.tab_summary .summary_popular_card .popular_list .price {
    font-size: 13px;
    letter-spacing: -0.325px;
    white-space: nowrap;
    padding: 0 4px;
}
.tab_summary .summary_popular_card .popular_list .percent_wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 80px;
    flex: 0 0 auto;

    font-size: 13px;
    letter-spacing: -0.325px;
    white-space: nowrap;
}
.tab_summary .summary_popular_card .popular_list .percent_wrap img {
    width: 10px;
    height: 8px;
}


/* ==========================================================================
   탭 : 뉴스
   ========================================================================== */

.tab_news .news_filter_wrap,
.tab_community .community_filter_wrap {
    display: flex;
    gap: 4px;
    align-items: flex-start;
    margin-top: -12px;
}
.tab_news .news_filter_wrap .filter_item,
.tab_community .community_filter_wrap .filter_item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;

    border-radius: 4px;
    box-shadow: inherit;
    box-sizing: border-box;
    cursor: pointer;

    color: #969EAE;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.35px;
}
.tab_news .news_filter_wrap .filter_item.active,
.tab_community .community_filter_wrap .filter_item.active {
    background: #F5F6F9;
    box-shadow: none;
    color: #4B5363;
}

.tab_news .market_news_list {
    display: flex;
    flex-direction: column;
}
.tab_news .market_news_list .market_news_item {
    padding: 17px 0;
    border-bottom: 1px solid #EBEBF0;
}
.tab_news .market_news_list .market_news_item .item_link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    cursor: pointer;
}
.tab_news .market_news_list .market_news_item:first-child { padding-top: 0; }
.tab_news .market_news_list .market_news_item:last-child  { border-bottom: 0; }

.tab_news .market_news_list .market_news_empty {
    padding: 40px 0;
    text-align: center;

    color: #969EAE;
    font-size: 14px;
    letter-spacing: -0.35px;
}
.tab_news .market_news_list .item_content {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}
.tab_news .market_news_list .item_label {
    color: #6E7686;
    font-size: 12px;
    font-weight: 700;
    line-height: 100%;
}
.tab_news .market_news_list .item_label.label_alpha {
    background: linear-gradient(97deg, #916CFF 0.57%, #5D95FB 40.02%, #69B1FF 63.19%, #5787FF 98.42%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tab_news .market_news_list .item_title {
    color: #111;
    font-size: 18px;
    font-weight: 600;
    line-height: 160%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tab_news .market_news_list .item_date {
    color: #BEC3D0;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.35px;
}
.tab_news .market_news_list .item_thumbnail {
    width: 106px;
    height: 71px;
    flex: 0 0 auto;
    border-radius: 6px;
    overflow: hidden;
    background: #F5F6F9;
}
.tab_news .market_news_list .item_thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================================================
   탭 : 차트
   ========================================================================== */

.tab_chart .market_chart_wrap {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #EBEBF0;
    background: #FFF;
    box-sizing: border-box;
    margin-top: -12px;
}
.tab_chart .market_chart_wrap #marketChartContainer {
    width: 100%;
    height: 467px;
}


/* ==========================================================================
   탭 : 커뮤니티
   ========================================================================== */

.tab_community .market_community_list {
    display: flex;
    flex-direction: column;
}
.tab_community .market_community_list .market_community_item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 0;
    border-bottom: 1px solid #EBEBF0;
    cursor: pointer;
}
.tab_community .market_community_list .market_community_item:first-child { padding-top: 0; }
.tab_community .market_community_list .item_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tab_community .market_community_list .writer_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tab_community .market_community_list .writer_wrap .writer_profile {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.tab_community .market_community_list .writer_wrap .writer_name {
    color: #4B5363;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.325px;
}
.tab_community .market_community_list .writer_wrap .write_time {
    color: #969EAE;
    font-size: 12px;
    letter-spacing: -0.3px;
}
.tab_community .market_community_list .writer_wrap .write_time::before {
    content: '|';
    color: #EBEBF0;
    margin-right: 8px;
}
.tab_community .market_community_list .item_category {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.3px;
    background-color: #fff !important;
}
.tab_community .market_community_list .item_category.category_normal   { color: #4294FF; }
.tab_community .market_community_list .item_category.category_info     { color: #16C784; }
.tab_community .market_community_list .item_category.category_issue    { color: #F65252; }
.tab_community .market_community_list .item_category.category_forecast { color: #9769FF; }
.tab_community .market_community_list .item_title {
    color: #111;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.4px;
}
.tab_community .market_community_list .item_content {
    color: #4B5363;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.35px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tab_community .market_community_list .item_count_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tab_community .market_community_list .item_count_wrap .count_item {
    color: #969EAE;
    font-size: 12px;
    letter-spacing: -0.3px;
    display: flex;
    gap:4px;
}


/* ==========================================================================
   970 대응 (1399px 이하)
   ========================================================================== */


/* ==========================================================================
   지금 많이 보는 코인 (좌우 컬럼 아래 전체폭)
   ========================================================================== */

.section_market_popular_inner {
    width: 1280px;
    padding: 40px 0 60px;
    box-sizing: border-box;
}

.section_market_popular_inner .popular_now_title_wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}
.section_market_popular_inner .popular_now_title_wrap .title {
    color: #111;
    font-size: 20px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.5px;
}
.section_market_popular_inner .popular_now_help {
    display: inline-flex;
    align-items: center;
    cursor: help;
}
.section_market_popular_inner .popular_now_help img {
    width: 16px;
    height: 16px;
    opacity: .5;
}

/* 5등분. gap 을 뺀 나머지를 균등 분배한다 */
.section_market_popular_inner .popular_now_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 16px;
}
.section_market_popular_inner .popular_now_item {
    flex: 1 1 0;
    min-width: 0;
}
.section_market_popular_inner .popular_now_item > a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 16px 18px;
    box-sizing: border-box;

    border-radius: 12px;
    border: 1px solid #EBEBF0;
    background: #FFF;
    text-decoration: none;
    color: inherit;

    transition: border-color .15s ease, box-shadow .15s ease;
}
.section_market_popular_inner .popular_now_item > a:hover {
    border-color: #D8DAE0;
    box-shadow: 0 2px 8px rgba(17, 17, 17, .06);
}

.section_market_popular_inner .popular_now_item .rank {
    flex: 0 0 auto;
    color: #111;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.4px;
}

.section_market_popular_inner .popular_now_item .crypto_wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section_market_popular_inner .popular_now_item .crypto_icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: contain;
}
.section_market_popular_inner .popular_now_item .crypto_text_wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.section_market_popular_inner .popular_now_item .crypto_name {
    color: #111;
    font-size: 15px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.38px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.section_market_popular_inner .popular_now_item .crypto_symbol {
    /*font-style: normal;
    font-weight: 700;
    color: #969EAE;*/
}

.section_market_popular_inner .popular_now_item .crypto_price_wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.section_market_popular_inner .popular_now_item .price {
    color: #6E7686;
    font-size: 13px;
    font-weight: 500;
    line-height: 150%; /* 19.5px */
    letter-spacing: -0.325px;
}
.section_market_popular_inner .popular_now_item .percent {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 500;
    line-height: 150%; /* 19.5px */
    letter-spacing: -0.325px;
}
.section_market_popular_inner .popular_now_item .percent img {
    width: 9px;
    height: 9px;
}
.section_market_popular_inner .popular_now_item .percent em {
    font-style: normal;
}
@media all and (max-width: 1399px) {

    .section_market_popular_inner,
    .section_market_view_inner,
    #section_market_index_inner {
        width: 970px;
    }

    .market_left_wrap {
        width: 350px;
        padding: 32px 16px 80px 0;
    }

    .market_right_wrap {
        padding-left: 16px;
    }

    /* 주요 지표 + 등락률 : 세로 스택 */
    .tab_summary .summary_middle_wrap {
        flex-direction: column;
    }

    /* 수익률 / 많이 보는 코인 : 세로 스택 */
    .tab_summary .summary_bottom_wrap {
        flex-direction: column;
    }

    /* 공포탐욕 게이지 축소 */
    .market_left_wrap .left_index_fear_greed {
        padding: 12px 16px;
    }
    .market_left_wrap .left_index_fear_greed .fear_greed_gauge {
        width: 120px;
        height: 65px;
    }
    .market_left_wrap .left_index_fear_greed .fear_greed_gauge .gauge_value {
        top: 28px;
        font-size: 21px;
    }

    /* 미디어 지수 게이지 축소 */
    .market_left_wrap .left_index_media {
        padding: 12px 16px;
    }
    .market_left_wrap .left_index_media .media_index_gauge {
        width: 120px;
        height: 70px;
    }
    .market_left_wrap .left_index_media .media_index_gauge .gauge_value {
        top: 35px;
        font-size: 21px;
    }

}

/* ==========================================================================
   토스트 (관심목록 추가/해제 안내)
   body 직속으로 붙으므로 마켓 전용 선택자를 쓰지 않는다.
   ========================================================================== */

.market_toast {
    position: fixed;
    left: 50%;
    bottom: 88px;
    transform: translate(-50%, 8px);
    z-index: 99999;

    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    max-width: calc(100% - 40px);

    border-radius: 8px;
    background: rgba(17, 17, 17, 0.85);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;

    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.35px;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.market_toast.is_show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.market_toast .toast_icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* ==========================================================================
   공유 팝업 : 링크복사
   기사 리모컨과 같은 24px 라인 아이콘이라
   48px 원형 SNS 아이콘과 나란히 두면 높이가 안 맞는다. 박스를 48px 로 맞춘다.
   ========================================================================== */

.shareModalWrap .share_item_sns {
    /* 인라인 img(SNS)와 flex 박스(링크복사)는 높이가 미세하게 달라
       center 정렬이면 라벨 위치가 어긋난다. 하단 기준으로 맞춘다. */
    align-items: flex-end;
}

.shareModalWrap .sns_item.copyLink {
    cursor: pointer;
}

.shareModalWrap .sns_item.copyLink > a:first-child {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.shareModalWrap .sns_item.copyLink > a:first-child img {
    width: 24px;
    height: 24px;
    margin-bottom: 0;
}