/* ══════════════════════════════════════
   KOBC Home – 3-Banner Entry Portal
   ══════════════════════════════════════ */

.home-body {
    overflow: hidden;
    height: 100vh;
    background-color: var(--bg-darker);
    transition: background-color 0.3s;
}

.home-viewport {
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 12px 40px 12px;
}

/* ⓪ Minimal Brand Header */
.home-brand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.home-brand-header .brand-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}
.home-brand-header .brand-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-secondary);
    background: var(--bg-surface);
    padding: 6px 14px;
    border-radius: 30px;
    border: 1px solid var(--glass-border);
}
.home-brand-header .brand-badge .badge-dot {
    width: 7px;
    height: 7px;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 6px #10B981;
    animation: badgePulse 2s infinite;
}
@keyframes badgePulse {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16,185,129,0.7); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 6px rgba(16,185,129,0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* ══════════════════════════════════════
   Hero Banner System (3-section portal)
   ══════════════════════════════════════ */
.hero-banner {
    display: flex;
    flex: 1;
    min-height: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
}

.hb-left {
    width: 36%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 22px 28px;
    position: relative;
    overflow: hidden;
}

/* Lift all direct children above the bg image layer */
.hb-left > * { position: relative; z-index: 1; }

/* Background image layer — subtle, low-opacity representative visual */
.hb-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

/* Banner 1: large KOBC logo watermark at bottom-right */
.hb-kobc .hb-left::before {
    background-image: url('/assets/img/kobc-logo.png');
    background-size: 58%;
    background-position: right -10px bottom -12px;
    opacity: 0.07;
    filter: grayscale(100%) brightness(10);
}

/* Banner 2: maritime AI scene, covers full left panel */
.hb-maritime .hb-left::before {
    background-image: url('/assets/images/hero_maritime_ai.png');
    background-size: cover;
    background-position: center;
    opacity: 0.10;
    filter: grayscale(20%) blur(0.5px);
}

/* Banner 3: AI workspace mockup as atmospheric bg */
.hb-ai .hb-left::before {
    background-image: url('/assets/img/ai_workspace_mockup.png');
    background-size: cover;
    background-position: center top;
    opacity: 0.10;
    filter: grayscale(15%) blur(0.5px);
}

.hb-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    border-left: 1px solid rgba(255,255,255,0.06);
}

/* Banner 1 – KOBC 공사 소식 (Navy Blue) */
.hb-kobc   .hb-left  { background: linear-gradient(140deg, #06192E 0%, #0D2B4A 100%); }
.hb-kobc   .hb-right { background: linear-gradient(140deg, #091E38 0%, #0C2442 100%); }

/* Banner 2 – 해양정보서비스 (Dark Indigo) */
.hb-maritime .hb-left  { background: linear-gradient(140deg, #0C0A26 0%, #1B1850 100%); }
.hb-maritime .hb-right { background: linear-gradient(140deg, #100D2E 0%, #1C1A48 100%); }

/* Banner 3 – AI 해양산업정보서비스 (Dark Teal) */
.hb-ai   .hb-left  { background: linear-gradient(140deg, #042720 0%, #0B4035 100%); }
.hb-ai   .hb-right { background: linear-gradient(140deg, #052F28 0%, #0C3C33 100%); }

/* ── Left panel components ── */
.hb-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    width: fit-content;
}
.hb-kobc     .hb-cat-badge { color: #38BDF8; background: rgba(14,165,233,0.1);  border: 1px solid rgba(14,165,233,0.22); }
.hb-maritime .hb-cat-badge { color: #818CF8; background: rgba(99,102,241,0.1);  border: 1px solid rgba(99,102,241,0.22); }
.hb-ai       .hb-cat-badge { color: #34D399; background: rgba(16,185,129,0.1);  border: 1px solid rgba(16,185,129,0.22); }

.hb-service-title {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin: 0;
}

.hb-service-desc {
    font-size: 12.5px;
    color: rgba(255,255,255,0.5);
    line-height: 1.65;
    margin: 0;
    font-weight: 500;
}

.hb-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    width: fit-content;
    margin-top: 2px;
}
.hb-cta-light  { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); color: #fff; }
.hb-cta-light:hover  { background: rgba(255,255,255,0.18); }
.hb-cta-indigo { background: rgba(99,102,241,0.14);  border: 1px solid rgba(99,102,241,0.32); color: #818CF8; }
.hb-cta-indigo:hover { background: rgba(99,102,241,0.24); }
.hb-cta-green  { background: rgba(16,185,129,0.12);  border: 1px solid rgba(16,185,129,0.28); color: #34D399; }
.hb-cta-green:hover  { background: rgba(16,185,129,0.22); }

/* ── Right panel header ── */
.hb-content-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.hb-content-label {
    font-size: 10.5px;
    font-weight: 800;
    color: rgba(255,255,255,0.45);
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
}
.hb-tag-badge { font-size: 9.5px; padding: 2px 8px; border-radius: 12px; font-weight: 700; }
.hb-tag-blue { background: rgba(14,165,233,0.14); color: #38BDF8; border: 1px solid rgba(14,165,233,0.25); }
.hb-tag-live { background: rgba(239,68,68,0.12);  color: #F87171; border: 1px solid rgba(239,68,68,0.25); }
.hb-tag-new  { background: rgba(16,185,129,0.12); color: #34D399; border: 1px solid rgba(16,185,129,0.25); }

/* ── News rows (Banner 1, shared) ── */
.hb-news-list { display: flex; flex-direction: column; gap: 8px; }

.hb-news-row,
.hb-report-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.hb-news-row:hover,
.hb-report-link:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.13);
}
.hb-news-icon {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hb-news-icon i { font-size: 13px; }
.hb-news-body { flex: 1; }
.hb-news-title { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.82); line-height: 1.4; margin-bottom: 4px; }
.hb-news-meta  { font-size: 10.5px; color: rgba(255,255,255,0.32); }
.hb-news-cat {
    font-size: 9px; padding: 1px 6px;
    background: rgba(255,255,255,0.07); border-radius: 4px;
    margin-right: 5px; font-weight: 700;
}
.hb-news-arrow { font-size: 10px; color: rgba(255,255,255,0.22); flex-shrink: 0; }

/* ── Index grid (Banner 2) ── */
.hb-index-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.hb-index-cell {
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s;
}
.hb-index-cell:hover { background: rgba(255,255,255,0.08); }
.hb-index-name { font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,0.38); margin-bottom: 6px; }
.hb-index-val  { font-size: 19px; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 4px; letter-spacing: -0.4px; }
.hb-index-chg  { font-size: 11px; font-weight: 800; }
.hb-index-chg.up { color: #34D399; }
.hb-index-chg.dn { color: #F87171; }

/* ── AI Brief (Banner 3) ── */
.hb-ai-brief {
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.14);
    border-left: 3px solid #10B981;
}
.hb-ai-text { font-size: 13px; color: rgba(255,255,255,0.68); line-height: 1.65; margin: 0; }
.hb-ai-text strong { color: #fff; }

/* ── Quick links (Banner 3) ── */
.hb-quick-links { display: flex; gap: 10px; }
.hb-quick-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s;
}
.hb-quick-link:hover { background: rgba(255,255,255,0.09); }
.hb-quick-link i { font-size: 18px; }
.hb-ql-name  { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.78); }
.hb-ql-count { font-size: 10px; color: rgba(255,255,255,0.38); }

/* ── Report summaries (Banner 2 right) ── */
.hb-report-summaries {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.hb-rpt-more {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: rgba(99,102,241,0.65);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: color 0.15s;
}
.hb-rpt-more:hover { color: #818CF8; }

.hb-rpt-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.hb-rpt-row:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(99,102,241,0.25);
}
.hb-rpt-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 1px;
}
.hb-rpt-date { font-size: 10px; color: rgba(255,255,255,0.3); font-weight: 600; }
.hb-rpt-tag {
    font-size: 9px; padding: 1px 6px;
    background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2);
    color: #818CF8; border-radius: 4px; font-weight: 700;
}
.hb-rpt-title   { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.82); line-height: 1.4; }
.hb-rpt-summary { font-size: 11px; color: rgba(255,255,255,0.38); line-height: 1.5; margin: 0; }

/* ── 실시간 해운지수 strip ── */
.hb-impact-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    background: var(--bg-surface, rgba(255,255,255,0.03));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    flex-shrink: 0;
}

/* impact strip 안 index cell — 수평 분할 레이아웃 + 색상 오버라이드 */
.hb-impact-stats .hb-index-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--bg-darker);
    border-color: var(--glass-border);
    padding: 8px 14px;
}
.hb-index-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.hb-impact-stats .hb-index-name { color: var(--text-muted); font-size: 9px; }
.hb-impact-stats .hb-index-val  { color: #0f172a; font-size: 15px; margin-bottom: 0; }
[data-theme="dark"] .hb-impact-stats .hb-index-val { color: var(--text-main); }
.hb-impact-stats .hb-index-chg  { font-size: 11px; font-weight: 800; text-align: right; }

.hb-impact-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: var(--primary, #0EA5E9);
    font-size: 16px;
}
.hb-impact-title {
    font-size: 11px;
    font-weight: 900;
    color: var(--text-main);
    white-space: nowrap;
}
.hb-impact-sub {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    margin-top: 1px;
}

.hb-impact-divider {
    width: 1px;
    height: 36px;
    background: var(--glass-border);
    flex-shrink: 0;
}

.hb-impact-stats {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    justify-content: space-between;
}

.hb-impact-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
}
.hb-stat-val {
    font-size: 20px;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.hb-stat-val em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-left: 1px;
}
.hb-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.hb-impact-sep {
    width: 1px;
    height: 28px;
    background: var(--glass-border);
    flex-shrink: 0;
}

@media (max-width: 1100px) {
    .hb-impact-strip { gap: 14px; padding: 16px 20px; }
    .hb-stat-val { font-size: 17px; }
}
@media (max-width: 820px) {
    .hb-impact-strip { flex-wrap: wrap; }
    .hb-impact-divider { display: none; }
    .hb-impact-stats { flex-wrap: wrap; gap: 10px; }
    .hb-impact-sep { display: none; }
    .hb-impact-stat { flex: 0 0 calc(33% - 10px); }
    .hb-impact-stats .hb-index-cell { flex: 0 0 calc(50% - 5px) !important; }
}

/* ── Footer ── */
.home-bottom-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid var(--glass-border);
    font-size: 10px;
    color: var(--text-dim);
    flex-shrink: 0;
}

/* ── Entrance fade animation ── */
.hero-fade {
    opacity: 0;
    transform: translateY(10px);
    animation: slideUpIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideUpIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .home-viewport { padding: 16px 24px 20px; }
    .hb-left { padding: 28px 30px; }
    .hb-service-title { font-size: 24px; }
    .hb-index-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
    .hero-banner { flex-direction: column; min-height: auto; }
    .hb-left { width: 100%; padding: 28px 24px; }
    .hb-right { border-left: none; border-top: 1px solid rgba(255,255,255,0.06); padding: 24px; }
    .hb-index-grid { grid-template-columns: repeat(2, 1fr); }
    .hb-quick-links { flex-direction: column; }
}