:root {
    --bg: #f6f8fb;
    --surface: #ffffff;
    --text: #1f2937;
    --muted: #667085;
    --line: #dde3ea;
    --point: rgb(38, 84, 124);
    --point-soft: rgba(38, 84, 124, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
}

a {
    color: inherit;
    text-decoration: none;
}

.site-wrap {
    min-height: 100vh;
}

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-inner {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--point);
}

.top-nav a {
    color: var(--muted);
    font-size: 14px;
}

.site-main {
    width: min(1200px, calc(100% - 32px));
    margin: 32px auto 60px;
}

.hero,
.topic-hero,
.section-block {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: var(--point);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.hero h1,
.topic-hero h1 {
    margin: 0 0 12px;
    font-size: 32px;
    line-height: 1.3;
}

.hero-desc,
.topic-status,
.status-text,
.article-meta {
    color: var(--muted);
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-head h2 {
    margin: 0;
    font-size: 22px;
}

.section-tag {
    font-size: 12px;
    font-weight: 700;
    color: var(--point);
    background: var(--point-soft);
    padding: 6px 10px;
    border-radius: 999px;
}

.live-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.live-main-card,
.live-side-card,
.issue-card,
.flow-item,
.article-item,
.detail-box {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.live-main-card,
.issue-card,
.flow-item,
.article-item,
.detail-box {
    padding: 18px;
}

.live-side-list {
    display: grid;
    gap: 12px;
}

.live-side-card {
    padding: 16px;
}

.rank-badge {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--point-soft);
    color: var(--point);
    font-weight: 700;
    margin-bottom: 10px;
}

.rank-badge.small {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.flow-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.keyword-tags.compact {
    margin-top: 10px;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475467;
    font-size: 13px;
}

.article-list {
    display: grid;
    gap: 12px;
}

.article-item h3,
.issue-card h3,
.flow-item h3,
.live-main-card h3,
.live-side-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.4;
}

.status-text.small {
    font-size: 14px;
}

@media (max-width: 900px) {
    .live-grid,
    .card-grid,
    .flow-list {
        grid-template-columns: 1fr;
    }

    .hero h1,
    .topic-hero h1 {
        font-size: 26px;
    }
}
.brand-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand-desc {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.explore-bar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.explore-search {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.explore-search input {
    flex: 1;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0 14px;
    font-size: 15px;
    outline: none;
    background: #fff;
}

.explore-search button {
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--point);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.recommend-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.recommend-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

@media (max-width: 900px) {
    .explore-search {
        flex-direction: column;
    }

    .explore-search button {
        width: 100%;
    }
}
.site-footer {
    margin-top: 40px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.footer-inner {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 20px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-brand strong {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 16px;
    color: var(--text);
}

.footer-brand p,
.footer-contact p,
.footer-contact a,
.footer-bottom p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.footer-contact p {
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--text);
}

.footer-contact a:hover {
    color: var(--point);
}

.footer-bottom {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    padding: 0 0 24px;
}

@media (max-width: 900px) {
    .footer-inner {
        flex-direction: column;
    }
}
.explore-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.update-time {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.live-main-card {
    min-height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.info-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
}

.info-label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

.info-value {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
}

.subtle-tag {
    background: #f8fafc;
    color: #667085;
}

@media (max-width: 900px) {
    .explore-top {
        flex-direction: column;
        align-items: stretch;
    }

    .update-time {
        white-space: normal;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   2026-08 Home UI refresh
   ========================================================= */


/* ---------- 전체 ---------- */

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;
}

.header-inner,
.site-main,
.footer-inner,
.footer-bottom {
    width: calc(100% - 48px);
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.site-main {
    margin-top: 0;
    margin-bottom: 60px;
    padding-top: 28px;
    padding-bottom: 20px;
    font-size: 16px;
}


/* ---------- Header ---------- */

.site-header {
    background: #fff;
    border-bottom: 1px solid #e3e8ee;
}

.header-inner {
    min-height: 78px;

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

    gap: 48px;
}

.brand-area {
    flex: 0 0 auto;
}

.logo {
    display: inline-block;

    font-size: 32px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.brand-desc {
    margin: 7px 0 0;

    font-size: 12px;
    color: #8a96a3;
}


/* ---------- 헤더 랜덤 이슈 ---------- */

.header-random {
    flex: 1;

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

    gap: 14px;
}

.header-random-label {
    flex: 0 0 auto;

    font-size: 12px;
    font-weight: 700;
    color: #8a96a3;
}

.header-topic-rotator {
    position: relative;

    width: 320px;
    height: 28px;

    overflow: hidden;
}

.header-topic-item {
    position: absolute;
    inset: 0;

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

    font-size: 15px;
    font-weight: 700;
    line-height: 28px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    color: var(--text);
    text-decoration: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.header-topic-item[hidden] {
    display: none !important;
}

.header-topic-item:hover {
    color: var(--point);
}


/* ---------- 섹션 ---------- */

.section-block {
    margin: 0 !important;
    padding: 30px 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.section-block + .section-block {
    border-top: 1px solid #dde4eb !important;
}

.section-head {
    margin-bottom: 18px;

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

    gap: 20px;
}

.section-title-row {
    display: flex;
    align-items: center;

    gap: 10px;
}

.section-head h2 {
    margin: 0;

    font-size: 25px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.7px;
}

.section-tag {
    padding: 5px 9px;

    font-size: 11px;
    font-weight: 700;
}

.update-time {
    margin: 0;

    font-size: 12px;
    color: #8a96a3;
}


/* ---------- 실시간 급상승 ---------- */

.live-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(330px, 0.85fr);

    gap: 16px;

    /* 1위 카드가 오른쪽 전체 높이까지 늘어나는 것 방지 */
    align-items: start;
}


/* 1위 */

.live-main-card {
    min-height: 190px;

    padding: 25px;

    align-self: start;

    background: #f8fbfe;

    border: 1px solid #cbdbea;
    border-radius: 14px;
}

.live-main-card .rank-badge {
    margin-bottom: 13px;
}

.live-main-card h3 {
    margin: 0 0 12px;

    font-size: 26px;
    line-height: 1.35;

    font-weight: 800;
    letter-spacing: -0.7px;
}

.live-main-card .status-text {
    max-width: 720px;

    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #657384;
}


/* 2~4위 */

.live-side-list {
    display: grid;

    gap: 10px;
}

.live-side-card {
    padding: 15px 17px;

    background: #fff;

    border: 1px solid #dde4eb;
    border-radius: 12px;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.live-side-card .rank-badge {
    margin-bottom: 7px;
}

.live-side-card h3 {
    margin: 0 0 6px;

    font-size: 17px;
    line-height: 1.4;

    font-weight: 750;
}

.live-side-card .status-text {
    margin: 0;

    font-size: 14px;
    line-height: 1.55;
}


/* ---------- 이어지는 이슈 ---------- */

.card-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.issue-card {
    min-height: 145px;

    padding: 19px;

    background: #fff;

    border: 1px solid #dde4eb;
    border-radius: 12px;
}

.issue-card h3 {
    margin: 0 0 9px;

    font-size: 18px;
    line-height: 1.4;

    font-weight: 750;
    letter-spacing: -0.35px;
}

.issue-card .status-text {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;
}


/* ---------- 오늘의 큰 흐름 ---------- */

.flow-list {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.flow-item {
    min-height: 125px;

    padding: 20px 22px;

    background: #fff;

    border: 1px solid #dde4eb;
    border-radius: 12px;
}

.flow-item h3 {
    margin: 0 0 9px;

    font-size: 18px;
    line-height: 1.4;

    font-weight: 750;
    letter-spacing: -0.35px;
}

.flow-item .status-text {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;
}


/* ---------- 카드 효과 ---------- */

.issue-card,
.flow-item,
.live-side-card {
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.issue-card:hover,
.flow-item:hover,
.live-side-card:hover {
    transform: translateY(-2px);

    border-color: #c7d3df;

    box-shadow:
        0 7px 22px
        rgba(31, 49, 67, 0.07);
}


/* ---------- 글 ---------- */

.status-text {
    color: #657384;
}

.live-main-card h3 a,
.live-side-card h3 a,
.issue-card h3 a,
.flow-item h3 a {
    color: inherit;
    text-decoration: none;
}

.live-main-card h3 a:hover,
.live-side-card h3 a:hover,
.issue-card h3 a:hover,
.flow-item h3 a:hover {
    color: var(--point);
}


/* ---------- 키워드 ---------- */

.keyword-tags:not(:has(.tag)) {
    display: none;
}


/* ---------- Footer ---------- */

.site-footer {
    margin-top: 0;
}


/* ---------- Tablet ---------- */

@media (max-width: 900px) {

    .header-inner,
    .site-main,
    .footer-inner,
    .footer-bottom {
        width: calc(100% - 32px);
    }

    .header-random {
        min-width: 0;
    }

    .header-topic-rotator {
        width: 230px;
    }

    .live-grid {
        grid-template-columns: 1fr;
    }

    .live-main-card {
        min-height: 0;
    }

    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ---------- Mobile ---------- */

@media (max-width: 640px) {

    .header-inner {
        min-height: 70px;

        gap: 20px;
    }

    .logo {
        font-size: 26px;
    }

    .brand-desc,
    .header-random-label {
        display: none;
    }

    .header-topic-rotator {
        width: 160px;
    }

    .header-topic-item {
        font-size: 13px;
    }

    .site-main {
        padding-top: 18px;
    }

    .section-block {
        padding: 24px 0 !important;
    }

    .section-head h2 {
        font-size: 21px;
    }

    .live-main-card h3 {
        font-size: 22px;
    }

    .card-grid,
    .flow-list {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Topic article preview
   ========================================================= */


/* 순위 + 토픽 제목 한 줄 */

.topic-title-row {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 7px;
}

.topic-title-row .rank-badge {
    flex: 0 0 auto;

    margin: 0;
}

.topic-title-row h3 {
    margin: 0;
}


/* 1위도 번호를 제목 옆으로 */

.main-title-row {
    margin-bottom: 12px;
}

.live-main-card .main-title-row h3 {
    margin: 0;
}


/* ---------- 기사 목록 ---------- */

.preview-articles {
    list-style: none;

    margin: 12px 0 0;
    padding: 0;

    border-top: 1px solid #e7ecf1;
}

.preview-articles li {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 7px 0;

    border-bottom: 1px solid #edf1f5;

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

.preview-articles li:last-child {
    border-bottom: 0;
}

.preview-articles li a {
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #3f4c5c;
}

.preview-articles li a::before {
    content: "·";

    margin-right: 6px;

    color: #9aa6b2;
}

.preview-articles li a:hover {
    color: var(--point);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.preview-articles li span {
    flex: 0 0 auto;

    font-size: 11px;
    color: #98a2b3;
}


/* 1위는 기사 제목을 약간 더 잘 보이게 */

.main-preview-articles {
    margin-top: 16px;
}

.main-preview-articles li {
    padding: 8px 0;

    font-size: 13px;
}


/* 2~4위는 더 촘촘하게 */

.side-preview-articles {
    margin-top: 9px;
}

.side-preview-articles li {
    padding: 5px 0;

    font-size: 12px;
}


/* 일반 카드 2개 기사 */

.compact-preview-articles {
    margin-top: 10px;
}

.compact-preview-articles li {
    padding: 5px 0;

    font-size: 12px;
}


/* 기존 카드 최소 높이는 조금 풀기 */

.issue-card,
.flow-item {
    min-height: 0;
}

/* =========================================================
   2026-08-09 Main dashboard
   오늘의 이슈 + 실시간 이슈
   ========================================================= */


/* =========================================================
   전체 2분할
   ========================================================= */

.main-dashboard {
    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(340px, 0.85fr);

    gap: 28px;

    align-items: start;

    padding: 30px 0 38px;

    border-bottom: 1px solid #dde4eb;
}


/* =========================================================
   양쪽 컬럼
   ========================================================= */

.today-column,
.realtime-column {
    min-width: 0;
}


.dashboard-section-head {
    min-height: 40px;

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

    gap: 16px;

    margin-bottom: 17px;
}


.dashboard-section-head h2 {
    margin: 0;

    font-size: 25px;
    line-height: 1.25;

    font-weight: 800;
    letter-spacing: -0.7px;
}


/* =========================================================
   오늘의 이슈 1 / 2
   ========================================================= */

.today-featured-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 14px;
}


.today-feature-card {
    min-width: 0;

    min-height: 285px;

    padding: 21px;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #d6e0e9;
    border-radius: 14px;
}


.today-feature-card:first-child {
    background: #f8fbfe;

    border-color: #c6d9e9;
}


.today-feature-card h3 {
    min-width: 0;

    margin: 0;

    font-size: 19px;
    line-height: 1.4;

    font-weight: 800;

    letter-spacing: -0.4px;
}


.today-feature-card .status-text {
    min-height: 44px;

    margin: 11px 0 4px;

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


/* =========================================================
   오늘의 이슈 3 ~ 8
   ========================================================= */

.today-ranking-list {
    border-top: 1px solid #dfe6ed;
}


.today-ranking-item {
    padding: 18px 4px;

    border-bottom: 1px solid #e2e8ee;
}


.today-ranking-item:last-child {
    border-bottom: 0;
}


.today-ranking-topic {
    margin-bottom: 9px;
}


.today-ranking-item h3 {
    margin: 0;

    font-size: 17px;
    line-height: 1.4;

    font-weight: 750;

    letter-spacing: -0.3px;
}


.today-ranking-item .status-text {
    margin: 6px 0 0 29px;

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


.rank-number {
    width: 20px;

    flex: 0 0 auto;

    font-size: 13px;
    line-height: 1;

    font-weight: 800;

    color: var(--point);
}


/* =========================================================
   제목 + 순위
   ========================================================= */

.main-dashboard .topic-title-row {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;

    margin: 0;
}


.main-dashboard .topic-title-row h3 {
    min-width: 0;
}


.main-dashboard .rank-badge {
    flex: 0 0 auto;

    margin: 0;
}


/* =========================================================
   기사 공통
   ========================================================= */

.dashboard-article-list {
    list-style: none;

    margin: 12px 0 0;
    padding: 0;

    border-top: 1px solid #e5ebf0;
}


.dashboard-article-list li {
    min-width: 0;

    min-height: 33px;

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

    gap: 10px;

    padding: 7px 0;

    border-bottom: 1px solid #edf1f4;
}


.dashboard-article-list li:last-child {
    border-bottom: 0;
}


.dashboard-article-title {
    min-width: 0;

    flex: 1;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 12px;
    line-height: 1.45;

    color: #465568;
}


.dashboard-article-title::before {
    content: "·";

    margin-right: 6px;

    color: #9ca8b5;
}


.dashboard-article-title:hover {
    color: var(--point);

    text-decoration: underline;
    text-underline-offset: 2px;
}


/* =========================================================
   언론사 + 파비콘
   ========================================================= */

.source-meta {
    min-width: 72px;

    flex: 0 0 auto;

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

    gap: 5px;

    overflow: hidden;

    white-space: nowrap;

    font-size: 11px;
    line-height: 1;

    color: #98a2af;
}


.source-favicon {
    width: 13px;
    height: 13px;

    flex: 0 0 13px;

    object-fit: contain;

    border-radius: 2px;
}


/* =========================================================
   오늘의 이슈 3~8 기사
   ========================================================= */

.compact-dashboard-list {
    margin-top: 8px;
}


.compact-dashboard-list li {
    min-height: 29px;

    padding: 5px 0;
}


/* =========================================================
   실시간
   ========================================================= */

.realtime-column {
    padding-left: 5px;
}


.live-tag {
    padding-left: 8px;
    padding-right: 8px;
}


.realtime-list {
    display: grid;

    gap: 10px;
}


.realtime-item {
    padding: 16px 17px;

    background: #ffffff;

    border: 1px solid #dce4eb;
    border-radius: 12px;
}


.realtime-item:first-child {
    background: #f8fbfe;

    border-color: #c7d9e9;
}


.realtime-item h3 {
    min-width: 0;

    margin: 0;

    font-size: 16px;
    line-height: 1.4;

    font-weight: 750;

    letter-spacing: -0.25px;
}


.realtime-status {
    margin: 7px 0 0;

    font-size: 12px;
    line-height: 1.55;
}


.realtime-articles {
    margin-top: 9px;
}


.realtime-articles li {
    min-height: 28px;

    padding: 5px 0;
}


.realtime-articles .dashboard-article-title {
    font-size: 11.5px;
}


.realtime-articles .source-meta {
    min-width: 65px;

    font-size: 10.5px;
}


/* 살짝 반응 */

.today-feature-card,
.realtime-item {
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.today-feature-card:hover,
.realtime-item:hover {
    border-color: #bdccd9;

    box-shadow:
        0 6px 18px
        rgba(31, 49, 67, 0.05);
}


/* =========================================================
   태블릿
   ========================================================= */

@media (max-width: 1000px) {

    .main-dashboard {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .realtime-column {
        padding-left: 0;
    }

}


/* =========================================================
   모바일
   ========================================================= */

@media (max-width: 640px) {

    .today-featured-grid {
        grid-template-columns: 1fr;
    }

    .today-feature-card {
        min-height: 0;
    }

    .source-meta {
        min-width: auto;
    }

    .source-meta > span {
        display: none;
    }

}
/* =========================================================
   2026-08-09 Visual polish
   기능 변경 없음 / 화면 위계만 강화
   ========================================================= */


/* ---------------------------------------------------------
   상단 전체 : 좌우 영역 구분
   --------------------------------------------------------- */

.main-dashboard {
    gap: 32px;
}

.today-column {
    padding-right: 4px;
}

.realtime-column {
    padding: 18px 18px 20px;

    background: rgba(255, 255, 255, 0.48);

    border: 1px solid #e2e8ef;
    border-radius: 16px;
}


/* ---------------------------------------------------------
   섹션 타이틀
   --------------------------------------------------------- */

.dashboard-section-head {
    margin-bottom: 20px;
}

.dashboard-section-head h2,
.section-head h2 {
    font-size: 26px;
    font-weight: 800;

    letter-spacing: -0.8px;
}

.dashboard-section-head .section-tag {
    padding: 4px 8px;

    font-size: 10px;
}


/* ---------------------------------------------------------
   오늘의 이슈 1 / 2
   --------------------------------------------------------- */

.today-featured-grid {
    gap: 16px;

    margin-bottom: 8px;
}

.today-feature-card {
    position: relative;

    min-height: 290px;

    padding: 23px 22px;

    overflow: hidden;

    border-radius: 16px;

    box-shadow:
        0 3px 14px
        rgba(31, 49, 67, 0.035);
}


/* 1위만 아주 약하게 차별화 */

.today-feature-card:first-child {
    background:
        linear-gradient(
            145deg,
            #f5faff 0%,
            #ffffff 70%
        );

    border-color: #bcd3e5;
}


/* 카드 위 얇은 강조선 */

.today-feature-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: #d9e4ed;
}

.today-feature-card:first-child::before {
    background: var(--point);
}


/* 순위 배지 */

.today-feature-card .rank-badge {
    width: 28px;
    height: 28px;

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

    padding: 0;

    font-size: 12px;
    font-weight: 800;
}


/* 토픽 제목 */

.today-feature-card h3 {
    font-size: 20px;
    font-weight: 800;

    letter-spacing: -0.5px;
}


/* 상태 문구 */

.today-feature-card .status-text {
    margin-top: 12px;

    color: #697788;
}


/* ---------------------------------------------------------
   기사 줄
   --------------------------------------------------------- */

.dashboard-article-list {
    margin-top: auto;
}

.dashboard-article-list li {
    transition: background 0.12s ease;
}

.dashboard-article-list li:hover {
    background: rgba(38, 84, 124, 0.035);
}

.dashboard-article-title {
    padding-left: 2px;

    font-size: 12.5px;
}

.dashboard-article-title::before {
    content: none;
}


/* favicon 조금 더 또렷하게 */

.source-favicon {
    width: 14px;
    height: 14px;

    flex-basis: 14px;
}

.source-meta {
    gap: 6px;

    font-size: 11px;
}


/* ---------------------------------------------------------
   오늘의 이슈 3 ~ 8
   --------------------------------------------------------- */

.today-ranking-list {
    margin-top: 4px;

    border-top: 0;
}

.today-ranking-item {
    position: relative;

    padding: 17px 8px 17px 40px;

    border-bottom: 1px solid #e0e7ee;

    transition:
        background 0.12s ease,
        padding-left 0.12s ease;
}

.today-ranking-item:hover {
    padding-left: 44px;

    background: rgba(255, 255, 255, 0.45);
}


/* 3~8 순위를 왼쪽 고정 */

.today-ranking-item .rank-number {
    position: absolute;

    left: 9px;
    top: 20px;

    width: auto;

    font-size: 15px;
    font-weight: 800;

    color: #537493;
}


.today-ranking-item h3 {
    font-size: 17px;
    font-weight: 800;
}


/* 기존 rank 만큼 밀어놓았던 상태문구 제거 */

.today-ranking-item .status-text {
    margin-left: 0;

    color: #778494;
}


/* 기사 목록도 토픽 아래 정렬 */

.today-ranking-item .compact-dashboard-list {
    margin-top: 8px;
}


/* ---------------------------------------------------------
   실시간 우측
   --------------------------------------------------------- */

.realtime-column .dashboard-section-head {
    margin-bottom: 13px;
}

.realtime-column .dashboard-section-head h2 {
    font-size: 23px;
}


/* LIVE 표시가 더 살아나도록 */

.live-tag {
    position: relative;

    padding-left: 18px;
}

.live-tag::before {
    content: "";

    position: absolute;

    left: 7px;
    top: 50%;

    width: 6px;
    height: 6px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #d84b4b;

    box-shadow:
        0 0 0 3px
        rgba(216, 75, 75, 0.08);
}


/* 실시간 각 토픽 */

.realtime-list {
    gap: 8px;
}

.realtime-item {
    padding: 15px 15px 14px;

    border-radius: 11px;

    box-shadow: none;
}

.realtime-item:first-child {
    border-color: #b9d0e2;

    box-shadow:
        inset 3px 0 0
        var(--point);
}


/* 우측 1위 제목 조금 강조 */

.realtime-item:first-child h3 {
    font-size: 17px;
}


/* 실시간 순위 */

.realtime-item .rank-badge {
    width: 24px;
    height: 24px;

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

    padding: 0;

    font-size: 11px;
}


/* 실시간 상태문 */

.realtime-status {
    color: #748191;
}


/* ---------------------------------------------------------
   이어지는 이슈
   위쪽 영역과 성격이 달라 보이도록
   --------------------------------------------------------- */

.section-block {
    margin-top: 6px;
}

.section-block > .section-head {
    margin-bottom: 20px;
}

.flow-list {
    gap: 12px;
}

.flow-item {
    border-radius: 10px;

    box-shadow: none;
}

.flow-item:hover {
    transform: none;

    border-color: #bdcad6;

    box-shadow:
        0 4px 14px
        rgba(31, 49, 67, 0.045);
}


/* ---------------------------------------------------------
   공통 제목 링크
   --------------------------------------------------------- */

.today-feature-card h3 a,
.today-ranking-item h3 a,
.realtime-item h3 a,
.flow-item h3 a {
    transition: color 0.12s ease;
}

.today-feature-card h3 a:hover,
.today-ranking-item h3 a:hover,
.realtime-item h3 a:hover,
.flow-item h3 a:hover {
    color: var(--point);
}


/* ---------------------------------------------------------
   Desktop에서 메인 전체 조금 더 여유 있게
   --------------------------------------------------------- */

@media (min-width: 1100px) {

    .main-dashboard {
        padding-top: 36px;
        padding-bottom: 42px;
    }

}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 1000px) {

    .realtime-column {
        padding: 18px;
    }

}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 640px) {

    .dashboard-section-head h2,
    .section-head h2 {
        font-size: 22px;
    }

    .today-ranking-item {
        padding-left: 34px;
    }

    .today-ranking-item .rank-number {
        left: 5px;
    }

    .realtime-column {
        padding: 14px;
    }

}
/* =========================================================
   Topic badge
   ========================================================= */

.topic-badge-row {
    display: flex;
    align-items: center;

    min-height: 24px;
    margin: 8px 0 5px;
}

.topic-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 22px;
    padding: 0 8px;

    border: 1px solid #cfdae4;
    border-radius: 999px;

    background: #f3f7fa;

    color: #496984;

    font-size: 11px;
    line-height: 1;
    font-weight: 700;

    white-space: nowrap;
}


/* 1~2위는 살짝 크게 */

.today-feature-card .topic-badge {
    height: 24px;
    padding: 0 9px;

    font-size: 11px;
}


/* 실시간은 작게 */

.realtime-item .topic-badge-row {
    margin: 6px 0 3px;
}

.realtime-item .topic-badge {
    height: 20px;
    padding: 0 7px;

    font-size: 10px;
}


/* 3~8위 */

.today-ranking-item .topic-badge-row {
    margin: 5px 0 3px;
}

/* =========================================================
   IssueArc image badges
   ========================================================= */

.topic-badge-row {
    display: flex;
    align-items: center;

    height: 24px;

    margin: 7px 0 5px;
}

.topic-badge-image {
    display: block;

    width: auto;
    height: 22px;

    object-fit: contain;
}


/* 오늘의 이슈 1~2위 */

.today-feature-card .topic-badge-image {
    height: 24px;
}


/* 3~8위 */

.today-ranking-item .topic-badge-row {
    height: 22px;

    margin: 5px 0 3px;
}

.today-ranking-item .topic-badge-image {
    height: 20px;
}


/* 실시간 */

.realtime-item .topic-badge-row {
    height: 20px;

    margin: 5px 0 3px;
}

.realtime-item .topic-badge-image {
    height: 18px;
}


/* 이어지는 이슈 */

.flow-item .topic-badge-image {
    height: 20px;
}
/* =========================================================
   2026-08-09 Header refresh
   ========================================================= */


/* ---------------------------------------------------------
   Header shell
   --------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;

    background: rgba(255, 255, 255, 0.96);

    border-bottom: 1px solid #e1e7ed;
}

.header-inner {
    width: calc(100% - 48px);
    max-width: 1280px;

    height: 76px;

    margin: 0 auto;

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

    gap: 48px;
}


/* ---------------------------------------------------------
   Brand
   --------------------------------------------------------- */

.brand-lockup {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    flex: 0 0 auto;

    color: inherit;
    text-decoration: none;
}


/* 작은 Arc 심볼 */

.brand-symbol {
    position: relative;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;
}


/*
    세 개의 짧은 호를 겹쳐
    흐름 / 파동 / Arc 느낌만 줌
*/

.brand-symbol span {
    position: absolute;

    border: 3px solid var(--point);
    border-left-color: transparent;
    border-bottom-color: transparent;

    border-radius: 50%;

    transform: rotate(45deg);
}

.brand-symbol span:nth-child(1) {
    width: 32px;
    height: 32px;

    left: 0;
    top: 0;

    opacity: 0.35;
}

.brand-symbol span:nth-child(2) {
    width: 23px;
    height: 23px;

    left: 5px;
    top: 5px;

    opacity: 0.65;
}

.brand-symbol span:nth-child(3) {
    width: 14px;
    height: 14px;

    left: 10px;
    top: 10px;

    opacity: 1;
}


.brand-text {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


/* IssueArc */

.logo {
    display: block;

    font-size: 29px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: -1.2px;

    color: #172433;
}


/* Arc만 포인트 */

.logo > span {
    color: var(--point);
}


.brand-desc {
    display: block;

    margin: 0;

    font-size: 10px;
    line-height: 1;

    font-weight: 500;

    letter-spacing: 0.05em;

    color: #8c98a5;
}


/* ---------------------------------------------------------
   Random issue ticker
   --------------------------------------------------------- */

.header-random {
    min-width: 0;

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

    gap: 12px;
}


/* NOW */

.header-random-label {
    height: 22px;

    display: inline-flex;
    align-items: center;

    padding: 0 8px;

    border-radius: 999px;

    background: #172433;

    color: #fff;

    font-size: 9px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.08em;
}


/* 랜덤 토픽 영역 */

.header-topic-rotator {
    position: relative;

    width: 290px;
    height: 34px;

    overflow: hidden;

    border-left: 1px solid #dfe5eb;

    padding-left: 15px;
}


/* 개별 토픽 */

.header-topic-item {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 15px;

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

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: #273849;

    font-size: 13px;
    line-height: 34px;

    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.15s ease,
        opacity 0.25s ease;
}


.header-topic-item[hidden] {
    display: none !important;
}


.header-topic-item::after {
    content: "→";

    margin-left: 8px;

    color: #a1adb8;

    font-size: 12px;

    transition: transform 0.15s ease;
}


.header-topic-item:hover {
    color: var(--point);
}


.header-topic-item:hover::after {
    transform: translateX(3px);
}


/* ---------------------------------------------------------
   아주 얇은 그림자
   sticky일 때 본문과 분리
   --------------------------------------------------------- */

.site-header {
    box-shadow:
        0 1px 8px
        rgba(28, 44, 60, 0.025);
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .header-inner {
        width: calc(100% - 32px);

        gap: 24px;
    }

    .header-topic-rotator {
        width: 220px;
    }

}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 640px) {

    .header-inner {
        height: 66px;

        gap: 14px;
    }

    .brand-symbol {
        width: 28px;
        height: 28px;

        flex-basis: 28px;

        transform: scale(0.82);
        transform-origin: left center;
    }

    .brand-lockup {
        gap: 5px;
    }

    .logo {
        font-size: 23px;
    }

    .brand-desc {
        display: none;
    }

    .header-random-label {
        display: none;
    }

    .header-topic-rotator {
        width: 140px;

        border-left: 0;

        padding-left: 0;
    }

    .header-topic-item {
        left: 0;

        justify-content: flex-end;

        font-size: 11px;
    }

}
/* =========================================================
   2026-08-09 Main UI final polish
   ========================================================= */


/* ---------------------------------------------------------
   오늘의 이슈 1 / 2
   고정 높이를 버리고 실제 내용 + 여백으로 결정
   --------------------------------------------------------- */

.today-feature-card {
    min-height: 0;

    /* 위/아래 동일하게 조금 넉넉하게 */
    padding: 27px 22px;
}


/*
기존 margin-top:auto 때문에
제목과 기사 사이에 큰 공백이 생겼음.
1/2위에서는 일반 여백으로 되돌림.
*/

.today-feature-card .dashboard-article-list {
    margin-top: 18px;
}


/*
두 카드가 같은 grid row에 있으므로
내용이 조금 달라도 둘의 높이는 자연스럽게 같아짐.
*/


/* ---------------------------------------------------------
   배지 약간 확대
   --------------------------------------------------------- */

/* 1 / 2 */

.today-feature-card .topic-badge-row {
    height: 28px;

    margin: 7px 0 3px;
}

.today-feature-card .topic-badge-image {
    height: 27px;
}


/* 3 ~ 8 */

.today-ranking-item .topic-badge-row {
    height: 24px;
}

.today-ranking-item .topic-badge-image {
    height: 22px;
}


/* 실시간 */

.realtime-item .topic-badge-row {
    height: 23px;

    margin: 5px 0 4px;
}

.realtime-item .topic-badge-image {
    height: 21px;
}


/* 이어지는 이슈 */

.flow-item .topic-badge-row {
    height: 24px;
}

.flow-item .topic-badge-image {
    height: 22px;
}


/* ---------------------------------------------------------
   이어지는 이슈 언론사 표시
   --------------------------------------------------------- */

.continuing-articles li {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.continuing-articles li > a {
    min-width: 0;
    flex: 1;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.continuing-articles .source-meta {
    min-width: 74px;

    flex: 0 0 auto;

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

    gap: 5px;

    font-size: 10.5px;
    color: #98a2af;
}

.continuing-articles .source-favicon {
    width: 13px;
    height: 13px;

    flex: 0 0 13px;

    object-fit: contain;
}


/* ---------------------------------------------------------
   24시간 배지
   조금 더 텍스트로 읽히게
   --------------------------------------------------------- */

.today-column .section-tag {
    padding-left: 9px;
    padding-right: 9px;

    letter-spacing: -0.2px;
}

/* =========================================================
   2026-08-09 Topic detail redesign
   ========================================================= */


/* =========================================================
   전체
   ========================================================= */

.topic-detail-page {
    padding-top: 8px;
}


/* =========================================================
   HERO
   ========================================================= */

.topic-detail-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        180px;

    gap: 30px;

    padding: 34px 36px;

    margin-bottom: 26px;

    background: #fff;

    border: 1px solid #dce4eb;
    border-radius: 16px;
}


.topic-hero-main {
    min-width: 0;
}


.topic-breadcrumb {
    margin: 0 0 10px;

    font-size: 12px;
    font-weight: 700;

    color: var(--point);
}


.topic-detail-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}


.topic-detail-title-row h1 {
    margin: 0;

    font-size: 34px;
    line-height: 1.3;

    font-weight: 800;
    letter-spacing: -1px;

    color: #172433;
}


.topic-detail-badge {
    width: auto;
    height: 27px;

    object-fit: contain;
}


.topic-detail-intro {
    margin: 13px 0 0;

    font-size: 14px;
    line-height: 1.6;

    color: #6e7c8c;
}


/* =========================================================
   HERO 통계
   ========================================================= */

.topic-detail-metrics {
    display: flex;
    flex-wrap: wrap;

    gap: 0;

    margin-top: 24px;

    padding-top: 18px;

    border-top: 1px solid #e5ebf0;
}


.topic-metric {
    min-width: 135px;

    padding-right: 24px;
    margin-right: 24px;

    border-right: 1px solid #e6ebf0;
}


.topic-metric:last-child {
    border-right: 0;
}


.topic-metric-label {
    display: block;

    margin-bottom: 5px;

    font-size: 11px;

    color: #8b97a4;
}


.topic-metric strong {
    font-size: 13px;

    color: #304255;
}


/* =========================================================
   공유
   ========================================================= */

.topic-share-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding-left: 28px;

    border-left: 1px solid #e6ebf0;

    text-align: center;
}


.topic-share-button {
    height: 42px;

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

    gap: 7px;

    padding: 0 15px;

    border: 1px solid #cfdae4;
    border-radius: 9px;

    background: #fff;

    color: #385773;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.topic-share-button:hover {
    background: #f4f8fb;

    border-color: #b9cad8;
}


.share-link-icon {
    font-size: 14px;
}


.topic-share-box p {
    margin: 10px 0 0;

    font-size: 11px;
    line-height: 1.6;

    color: #8a96a3;
}


/* =========================================================
   메인 2분할
   ========================================================= */

.topic-detail-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(330px, 0.85fr);

    gap: 22px;

    align-items: start;

    margin-bottom: 24px;
}


/* =========================================================
   공통 panel head
   ========================================================= */

.topic-panel-head,
.topic-side-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}


.topic-panel-head {
    margin-bottom: 22px;
}


.topic-side-head {
    margin-bottom: 16px;
}


.topic-panel-head h2,
.topic-side-head h2 {
    margin: 0;

    font-size: 21px;
    line-height: 1.3;

    font-weight: 800;

    letter-spacing: -0.5px;
}


.topic-panel-head p,
.topic-side-head p {
    margin: 5px 0 0;

    font-size: 12px;
    line-height: 1.5;

    color: #82909d;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.topic-timeline-panel {
    padding: 28px 26px 30px;

    background: #eef6fc;

    border: 1px solid #d6e5f0;
    border-radius: 16px;
}


.timeline-date-group + .timeline-date-group {
    margin-top: 28px;
}


.timeline-date {
    display: inline-flex;

    margin-bottom: 12px;

    padding: 5px 9px;

    background: #fff;

    border: 1px solid #bfd5e6;
    border-radius: 7px;

    color: #345d7f;

    font-size: 12px;
    font-weight: 800;
}


.timeline-day {
    position: relative;
}


.timeline-day::before {
    content: "";

    position: absolute;

    left: 57px;
    top: 6px;
    bottom: 6px;

    width: 1px;

    background: #b9d0e3;
}


.timeline-item {
    position: relative;

    display: grid;

    grid-template-columns:
        44px
        18px
        minmax(0, 1fr);

    gap: 10px;

    align-items: start;
}


.timeline-item + .timeline-item {
    margin-top: 12px;
}


.timeline-time {
    padding-top: 17px;

    font-size: 11px;

    color: #81909d;

    text-align: right;
}


.timeline-marker {
    position: relative;

    min-height: 50px;
}


.timeline-marker span {
    position: absolute;

    top: 18px;
    left: 50%;

    width: 9px;
    height: 9px;

    transform: translateX(-50%);

    background: #fff;

    border: 3px solid var(--point);
    border-radius: 50%;

    z-index: 2;
}


.timeline-news-card {
    min-width: 0;

    padding: 16px 17px;

    background: #fff;

    border: 1px solid #dce5ed;
    border-radius: 11px;
}


.timeline-news-title {
    display: block;

    font-size: 14px;
    line-height: 1.5;

    font-weight: 750;

    color: #26384a;
}


.timeline-news-title:hover {
    color: var(--point);

    text-decoration: underline;
    text-underline-offset: 2px;
}


.timeline-source {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 9px;

    font-size: 11px;

    color: #8995a2;
}


.primary-article-label {
    padding: 2px 6px;

    border-radius: 999px;

    background: #edf4fa;

    color: #4c718f;

    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   오른쪽
   ========================================================= */

.topic-side-column {
    display: grid;

    gap: 14px;
}


.topic-side-panel {
    padding: 21px 20px;

    background: #fff;

    border: 1px solid #dce4eb;
    border-radius: 14px;
}


/* =========================================================
   최신 기사
   ========================================================= */

.topic-latest-list {
    display: grid;
}


.topic-latest-item {
    min-width: 0;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        72px;

    gap: 9px;

    align-items: center;

    padding: 9px 0;

    border-bottom: 1px solid #edf1f4;
}


.topic-latest-item:last-child {
    border-bottom: 0;
}


.topic-latest-time {
    font-size: 10px;

    color: #8b98a5;
}


.topic-latest-title {
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 12px;

    color: #405164;
}


.topic-latest-item:hover .topic-latest-title {
    color: var(--point);
}


.topic-latest-source {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 5px;

    overflow: hidden;

    white-space: nowrap;

    font-size: 10px;

    color: #939eaa;
}


/* =========================================================
   연결 이슈
   ========================================================= */

.topic-related-list {
    display: grid;
}


.topic-related-item {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 9px 0;

    border-bottom: 1px solid #edf1f4;
}


.topic-related-item:last-child {
    border-bottom: 0;
}


.topic-related-item strong {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 12px;

    color: #435365;
}


.topic-related-item:hover strong {
    color: var(--point);
}


.relation-type {
    flex: 0 0 auto;

    padding: 4px 6px;

    border-radius: 5px;

    background: #edf5fb;

    color: #3d6f95;

    font-size: 9px;
    font-weight: 800;
}


.relation-type.subtle {
    background: #f2f4f7;

    color: #6f7c89;
}


/* =========================================================
   키워드
   ========================================================= */

.topic-keyword-list {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.topic-keyword {
    display: inline-flex;

    padding: 6px 9px;

    background: #f3f6f9;

    border-radius: 7px;

    color: #657586;

    font-size: 11px;
}


/* =========================================================
   전체 기사
   ========================================================= */

.topic-all-articles {
    padding: 26px 28px 30px;

    background: #f6f5fb;

    border: 1px solid #e2e0ee;
    border-radius: 16px;
}


.article-count-label {
    display: inline-flex;

    padding: 5px 9px;

    background: #fff;

    border: 1px solid #dfdeea;
    border-radius: 999px;

    color: #7a7888;

    font-size: 11px;
    font-weight: 700;
}


.topic-all-article-list {
    overflow: hidden;

    background: #fff;

    border: 1px solid #e2e4ea;
    border-radius: 10px;
}


.topic-all-article-item {
    min-width: 0;

    display: grid;

    grid-template-columns:
        82px
        minmax(0, 1fr)
        95px
        20px;

    gap: 12px;

    align-items: center;

    padding: 10px 13px;

    border-bottom: 1px solid #edf0f3;
}


.topic-all-article-item:last-child {
    border-bottom: 0;
}


.topic-all-article-item:hover {
    background: #fafbfc;
}


.all-article-time {
    font-size: 10px;

    color: #8995a1;
}


.all-article-title {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 12px;

    color: #384a5d;
}


.all-article-source {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 5px;

    overflow: hidden;

    white-space: nowrap;

    font-size: 10px;

    color: #8e99a4;
}


.external-arrow {
    color: #98a5b1;

    font-size: 12px;
}


.topic-empty {
    margin: 0;

    color: #8c98a4;

    font-size: 12px;
}


/* =========================================================
   반응형
   ========================================================= */

@media (max-width: 950px) {

    .topic-detail-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .topic-detail-hero {
        grid-template-columns: 1fr;

        padding: 25px 22px;
    }

    .topic-share-box {
        align-items: flex-start;

        padding: 18px 0 0;

        border-left: 0;
        border-top: 1px solid #e6ebf0;

        text-align: left;
    }

    .topic-share-box p {
        display: none;
    }

    .topic-detail-title-row h1 {
        font-size: 26px;
    }

    .topic-detail-metrics {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 15px;
    }

    .topic-metric {
        min-width: 0;

        padding: 0;
        margin: 0;

        border-right: 0;
    }

    .topic-timeline-panel {
        padding: 22px 16px;
    }

    .timeline-day::before {
        left: 48px;
    }

    .timeline-item {
        grid-template-columns:
            35px
            16px
            minmax(0, 1fr);

        gap: 7px;
    }

    .topic-all-articles {
        padding: 22px 16px;
    }

    .topic-all-article-item {
        grid-template-columns:
            65px
            minmax(0, 1fr)
            18px;
    }

    .all-article-source {
        display: none;
    }

}
/* =========================================================
   2026-08-15 Topic detail compact flow
   ========================================================= */


/* =========================================================
   HERO 간단 메타 정보
   ========================================================= */

.topic-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 18px;
    padding-top: 16px;

    border-top: 1px solid #e5ebf0;

    font-size: 12px;
    line-height: 1.5;

    color: #7d8996;
}


.topic-detail-meta strong {
    margin-left: 3px;

    font-weight: 750;

    color: #405367;
}


.topic-detail-meta-divider {
    color: #b1bbc5;
}


/* =========================================================
   hidden
   ========================================================= */

.timeline-date-group[hidden],
.timeline-item[hidden],
.timeline-more-days-wrap[hidden] {
    display: none !important;
}


/* =========================================================
   날짜 내부 기사 더보기
   ========================================================= */

.timeline-day-more-wrap {
    margin-top: 12px;
    margin-left: 82px;
}


.timeline-day-more {
    padding: 7px 11px;

    border: 1px solid #c9dce9;
    border-radius: 7px;

    background: rgba(255, 255, 255, 0.78);

    color: #52738e;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.timeline-day-more:hover {
    background: #ffffff;

    border-color: #adc9dc;
}


/* =========================================================
   이전 날짜 더보기
   ========================================================= */

.timeline-more-days-wrap {
    display: flex;
    justify-content: center;

    margin-top: 28px;
    padding-top: 20px;

    border-top: 1px solid #d8e6f0;
}


.timeline-more-days-button {
    min-width: 190px;

    padding: 10px 16px;

    border: 1px solid #bfd4e3;
    border-radius: 9px;

    background: #ffffff;

    color: #456b88;

    font-size: 12px;
    font-weight: 750;

    cursor: pointer;

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


.timeline-more-days-button:hover {
    background: #f8fbfe;

    border-color: #a9c6da;

    transform: translateY(-1px);
}


/* =========================================================
   관련 기사 Pagination
   ========================================================= */

.topic-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 20px;
}


.topic-page-numbers {
    display: flex;
    align-items: center;

    gap: 5px;
}


.topic-page-number,
.topic-page-nav {
    min-width: 34px;
    height: 34px;

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

    padding: 0 10px;

    border: 1px solid #d9dce6;
    border-radius: 7px;

    background: #ffffff;

    color: #677283;

    font-size: 11px;
    font-weight: 700;
}


.topic-page-number:hover,
.topic-page-nav:hover {
    border-color: #bccbd8;

    color: var(--point);
}


.topic-page-number.current {
    border-color: var(--point);

    background: var(--point);

    color: #ffffff;
}


.topic-page-nav.disabled {
    opacity: 0.4;

    pointer-events: none;
}


.topic-page-ellipsis {
    min-width: 20px;

    text-align: center;

    color: #939daa;

    font-size: 12px;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {

    .topic-detail-meta {
        gap: 6px;

        margin-top: 15px;
    }


    .timeline-day-more-wrap {
        margin-left: 58px;
    }


    .timeline-more-days-button {
        width: 100%;
    }


    .topic-pagination {
        gap: 7px;
    }


    .topic-page-numbers {
        gap: 3px;
    }


    .topic-page-number,
    .topic-page-nav {
        min-width: 30px;
        height: 32px;

        padding: 0 8px;
    }

}

/* =========================================================
   2026-08-15 News radar
   단독 / 특징주
   ========================================================= */

.news-radar {
    margin-top: 28px;
    padding-top: 17px;

    border-top: 1px solid #dde5ec;
}


.news-radar-head {
    display: flex;
    align-items: center;

    margin-bottom: 7px;
}


.news-radar-title {
    font-size: 10px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: 0.02em;

    color: #8a96a3;
}


/* ---------------------------------------------------------
   한 줄
   --------------------------------------------------------- */

.news-radar-row {
    min-width: 0;
    min-height: 34px;

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    gap: 9px;

    align-items: center;

    border-bottom: 1px solid #edf1f4;
}


.news-radar-row:last-child {
    border-bottom: 0;
}


/* ---------------------------------------------------------
   단독 / 특징주 label
   --------------------------------------------------------- */

.news-radar-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 22px;

    padding: 0 6px;

    border-radius: 5px;

    font-size: 10px;
    line-height: 1;

    font-weight: 800;

    white-space: nowrap;
}


.news-radar-label.is-exclusive {
    background: #f8eeee;
    color: #9a5656;
}


.news-radar-label.is-stock {
    background: #eef5f8;
    color: #4e7188;
}


/* ---------------------------------------------------------
   롤링 기사
   --------------------------------------------------------- */

.news-radar-rotator {
    position: relative;

    min-width: 0;
    height: 26px;

    overflow: hidden;
}


.news-radar-item {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 12px;
    line-height: 26px;

    color: #536273;
}


.news-radar-item[hidden] {
    display: none !important;
}


.news-radar-item:hover {
    color: var(--point);

    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 640px) {

    .news-radar {
        margin-top: 15px;
        padding-top: 13px;
    }


    .news-radar-row {
        grid-template-columns:
            45px
            minmax(0, 1fr);
    }


    .news-radar-item {
        font-size: 11.5px;
    }

}

/* =========================================================
   2026-08-24 Main readability + header alignment polish
   배포 전 가독성 정리
   ========================================================= */


/* ---------------------------------------------------------
   전체 폭
   1920px 데스크톱에서 조금 더 시원하게 사용
   --------------------------------------------------------- */

.header-inner,
.site-main,
.footer-inner,
.footer-bottom {
    max-width: 1360px;
}


/* ---------------------------------------------------------
   Header
   로고와 랜덤 토픽을 한 덩어리처럼 보이게 정렬
   --------------------------------------------------------- */

.header-inner {
    justify-content: flex-start;
    gap: 52px;
}

.header-random {
    flex: 0 1 500px;
    justify-content: flex-start;
    min-width: 0;
}

.header-topic-rotator {
    width: 360px;
    max-width: 100%;
}

.header-topic-item {
    justify-content: flex-start;
    font-size: 13.5px;
}


/* ---------------------------------------------------------
   오늘의 이슈 3~8
   순위 / 토픽 제목의 시각적 위계 강화
   --------------------------------------------------------- */

.today-ranking-item {
    padding-top: 19px;
    padding-bottom: 19px;
}

.today-ranking-item .rank-number {
    top: 21px;
    font-size: 16px;
}

.today-ranking-item h3 {
    font-size: 18.5px;
    line-height: 1.42;
    font-weight: 800;
    letter-spacing: -0.35px;
}

.today-ranking-item .status-text {
    margin-top: 7px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #687788;
}


/* ---------------------------------------------------------
   기사 목록
   시력이 좋지 않아도 편하게 읽히도록 한 단계 확대
   --------------------------------------------------------- */

.dashboard-article-list li {
    min-height: 35px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.dashboard-article-title {
    font-size: 13.5px;
    line-height: 1.5;
    color: #35475a;
}

.compact-dashboard-list li {
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.source-meta {
    font-size: 11.5px;
    color: #7f8c99;
}

.today-feature-card .status-text {
    font-size: 13.5px;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   지금 뜨는
   기사 제목은 카드 폭을 넘지 않고 반드시 한 줄 말줄임
   --------------------------------------------------------- */

.realtime-item {
    min-width: 0;
    overflow: hidden;
}

.realtime-articles {
    min-width: 0;
}

.realtime-articles li {
    min-width: 0;
    overflow: hidden;
}

.realtime-articles .dashboard-article-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 12.5px;
    line-height: 1.5;
}

.realtime-articles .source-meta {
    flex: 0 0 68px;
    min-width: 68px;
    font-size: 10.75px;
}


/* ---------------------------------------------------------
   이어지는 이슈
   현재 카드 구조는 유지하고 글자만 약간 또렷하게
   --------------------------------------------------------- */

.flow-item h3 {
    font-size: 18.5px;
    line-height: 1.45;
}

.flow-item .status-text {
    font-size: 13.5px;
    line-height: 1.65;
}

.continuing-articles li > a {
    font-size: 13px;
    line-height: 1.5;
    color: #405164;
}


/* ---------------------------------------------------------
   Desktop
   넓어진 본문 폭에 맞춰 상단 비율도 조금 안정화
   --------------------------------------------------------- */

@media (min-width: 1100px) {

    .main-dashboard {
        grid-template-columns:
            minmax(0, 1.72fr)
            minmax(360px, 0.88fr);
    }

}


/* ---------------------------------------------------------
   Tablet / Mobile
   데스크톱용 헤더 정렬이 작은 화면을 밀지 않도록 복원
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .header-inner {
        justify-content: space-between;
        gap: 24px;
    }

    .header-random {
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    .header-topic-rotator {
        width: 220px;
    }

}

@media (max-width: 640px) {

    .dashboard-article-title {
        font-size: 13px;
    }

    .today-ranking-item h3 {
        font-size: 17.5px;
    }

    .realtime-articles .dashboard-article-title {
        font-size: 12px;
    }

}

/* =========================================================
   Header - main dashboard column alignment
   ========================================================= */

@media (min-width: 1001px) {

    .header-inner {
        display: grid;

        grid-template-columns:
            minmax(0, 1.72fr)
            minmax(360px, 0.88fr);

        gap: 32px;

        align-items: center;
    }

    .brand-lockup {
        justify-self: start;
    }

    .header-random {
        width: 100%;
        min-width: 0;

        justify-self: start;
        justify-content: flex-start;
    }

    .header-topic-rotator {
        width: 100%;
        max-width: 310px;
    }

}

/* 지금 뜨는 - 배지가 없는 카드 제목 아래 여백 */

.realtime-item:not(:has(.topic-badge-image))
.realtime-articles {
    margin-top: 14px;
}

/* =========================================================
   2026-08-24 Topic detail readability polish
   디테일 페이지 가독성 + 날짜별 daily_title 표시 슬롯
   ========================================================= */

.topic-detail-page .timeline-news-title {
    font-size: 15px;
    line-height: 1.55;
    font-weight: 750;
    color: #26384a;
}

.topic-detail-page .timeline-time,
.topic-detail-page .timeline-source,
.topic-detail-page .topic-latest-time,
.topic-detail-page .topic-latest-source,
.topic-detail-page .all-article-time,
.topic-detail-page .all-article-source {
    font-size: 11px;
}

.timeline-daily-title {
    margin: -2px 0 14px;
    padding: 0 2px 11px;
    border-bottom: 1px solid rgba(185, 208, 227, 0.75);

    font-size: 15px;
    line-height: 1.5;
    font-weight: 750;
    letter-spacing: -0.25px;
    color: #38536b;
}

.timeline-daily-title:empty {
    display: none;
}

.topic-detail-page .topic-latest-title,
.topic-detail-page .topic-related-item strong,
.topic-detail-page .all-article-title {
    font-size: 13px;
    line-height: 1.45;
    color: #35485a;
}

.topic-detail-page .topic-all-article-item {
    min-height: 39px;
    padding-top: 11px;
    padding-bottom: 11px;
}

.topic-detail-page .topic-panel-head p,
.topic-detail-page .topic-side-head p {
    font-size: 12.5px;
    line-height: 1.55;
}

@media (max-width: 700px) {
    .timeline-daily-title {
        margin-bottom: 12px;
        padding-bottom: 9px;
        font-size: 14px;
    }

    .topic-detail-page .timeline-news-title {
        font-size: 14px;
    }

    .topic-detail-page .topic-latest-title,
    .topic-detail-page .topic-related-item strong,
    .topic-detail-page .all-article-title {
        font-size: 12.5px;
    }
}

/* =========================================================
   Mobile - 이어지는 이슈 가로 overflow 수정
   ========================================================= */

@media (max-width: 640px) {

    /* 섹션 자체가 viewport를 넘지 않게 */
    .section-block,
    .flow-list {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* 모바일에서는 무조건 1열 */
    .flow-list {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 카드가 내부 콘텐츠 때문에 늘어나지 않게 */
    .flow-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        overflow: hidden;
    }

    /* 제목 */
    .flow-item h3,
    .flow-item h3 a {
        min-width: 0;
        max-width: 100%;
    }

    /* 기사 목록 */
    .continuing-articles,
    .continuing-articles li {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .continuing-articles li > a {
        min-width: 0;
        flex: 1 1 auto;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* 언론사 영역은 고정폭으로 두고 기사 제목만 줄어들게 */
    .continuing-articles .source-meta {
        flex: 0 0 62px;
        min-width: 62px;
        max-width: 62px;
    }

}

/* =========================================================
   2026-08-24 Mobile readability final polish
   ========================================================= */

@media (max-width: 640px) {

    /* -----------------------------------------------------
       Header
       ----------------------------------------------------- */

    .header-topic-item {
        font-size: 11.5px;
    }


    /* -----------------------------------------------------
       오늘의 이슈 3 ~ 8
       ----------------------------------------------------- */

    .today-ranking-item {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .today-ranking-item h3 {
        font-size: 18px;
        line-height: 1.45;
        letter-spacing: -0.3px;
    }

    .today-ranking-item .status-text {
        font-size: 13px;
        line-height: 1.6;
    }

    .today-ranking-item
    .dashboard-article-title {
        font-size: 13px;
        line-height: 1.5;
    }

    .today-ranking-item
    .compact-dashboard-list li {
        min-height: 31px;
        padding-top: 6px;
        padding-bottom: 6px;
    }


    /* -----------------------------------------------------
       지금 뜨는
       ----------------------------------------------------- */

    .realtime-articles li {
        min-height: 30px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .realtime-articles
    .dashboard-article-title {
        font-size: 12.5px;
    }


    /* -----------------------------------------------------
       이어지는 이슈
       ----------------------------------------------------- */

    .flow-item {
        padding: 17px 16px;
    }

    .flow-item h3 {
        font-size: 18px;
        line-height: 1.45;
    }

    .continuing-articles li > a {
        font-size: 13px;
        line-height: 1.5;
    }

}

/* =========================================================
   Header actions + issue ticker
   ========================================================= */

.header-inner {
    justify-content: space-between;
}


/* 우측 버튼 영역 */

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;
}


.home-install-button,
.header-login-button {
    height: 34px;

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

    padding: 0 13px;

    border: 1px solid #ccd7e1;
    border-radius: 8px;

    background: #fff;

    color: #40566a;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;
}


.home-install-button:hover,
.header-login-button:hover {
    background: #f5f8fa;
    border-color: #afc1d0;

    color: var(--point);
}


/* ---------------------------------------------------------
   헤더 아래 랜덤 이슈
   --------------------------------------------------------- */

.header-issue-bar {
    border-top: 1px solid #edf1f4;

    background: #fff;
}


.header-issue-inner {
    width: calc(100% - 48px);
    max-width: 1360px;

    height: 38px;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}


.header-issue-bar .header-topic-rotator {
    flex: 1;

    width: auto;
    max-width: none;

    height: 30px;

    padding-left: 12px;

    border-left: 1px solid #dfe5eb;
}


.header-issue-bar .header-topic-item {
    left: 12px;

    justify-content: flex-start;

    font-size: 12.5px;
    line-height: 30px;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 640px) {

    .header-inner {
        height: 62px;
    }


    .home-install-button {
        height: 32px;

        padding: 0 10px;

        font-size: 11px;
    }


    .header-issue-inner {
        width: calc(100% - 28px);

        height: 36px;

        gap: 8px;
    }


    .header-issue-bar .header-random-label {
        display: inline-flex;
    }


    .header-issue-bar .header-topic-rotator {
        width: auto;

        padding-left: 9px;
    }


    .header-issue-bar .header-topic-item {
        left: 9px;

        justify-content: flex-start;

        font-size: 12px;
    }

}

/* 기본 PC에서는 숨김 */

.home-install-button {
    /*display: none;*/
}


/* 모바일에서만 표시 */

@media (max-width: 768px) {

    .home-install-button {
        height: 32px;

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

        padding: 0 10px;

        border: 1px solid #ccd7e1;
        border-radius: 8px;

        background: #ffffff;

        color: #40566a;

        font-size: 11px;
        font-weight: 700;

        cursor: pointer;

        white-space: nowrap;
    }

}

/* ---------------------------------------------------------
   Info pages
   --------------------------------------------------------- */

.info-page {
    width: calc(100% - 48px);
    max-width: 900px;

    margin: 48px auto 80px;
}

.info-page-header {
    padding-bottom: 24px;
    margin-bottom: 32px;

    border-bottom: 1px solid #dfe5eb;
}

.info-page-header h1 {
    margin: 0;

    font-size: 32px;
    color: #172433;
}

.info-section {
    margin-bottom: 36px;
}

.info-section h2 {
    margin: 0 0 14px;

    font-size: 20px;
    color: #172433;
}

.info-section p {
    margin: 0 0 12px;

    line-height: 1.8;
    color: #536273;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;

    gap: 8px 18px;

    margin-top: 12px;
}

.footer-links a {
    font-size: 13px;
    color: #788695;
}