@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');

    :root {
        --navy: #1a365d;
        --light-navy: #2c4a7c;
        --off-white: #f0f4f8;
        --gold: #ffd700;
    }

    body {
        font-family: 'Noto Sans KR', sans-serif;
        background-color: var(--off-white);
        color: #333;
        line-height: 1.6;
        margin: 0;
        padding: 0;
        overscroll-behavior-x: none;
        touch-action: pan-y;
    }

    .container {
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
        display: block;
    }

    .section-content {
        padding: 0 20px;
    }

    header {
        background-color: var(--navy);
        color: #fff;
        text-align: center;
        padding: 40px 0 15px;
        <!-- margin-bottom: 30px; -->
        position: relative;
        overflow: hidden;
    }

    .title-header {
        margin-top: -30px;
    }

    h1 {
        font-size: 3em;
        margin: 0;
        position: relative;
        animation: cloudFireAnimation 5s infinite;
    }

    h1::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        width: 100%;
        height: 50px;
        background: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.1));
        transform: translateX(-50%);
        animation: smokeAnimation 3s infinite;
    }

    .subtitle {
		color: #f0f4f8;
		font-size: 0.9em;
		margin-top: 15px;
		text-align: center;
		background-color: var(--navy);
		font-weight: 400;
		display: inline-block;
		width: fit-content;
		padding: 0 10px;
		position: relative;
	}

	.subtitle::before {
		content: '';
		position: absolute;
		bottom: -2px; /* 하단에 위치 */
		left: -2px;
		right: -2px;
		height: 1px; /* 얇은 선 두께 */
		background: linear-gradient(to right, rgba(255, 215, 0, 0), rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0)); /* 빛나는 그라데이션 */
		z-index: 0;
		opacity: 0;
		animation: glowFade 4s ease-in-out infinite; /* 빛나는 잔상, 4초 주기 */
	}

	.subtitle::after {
		content: '';
		position: absolute;
		bottom: -2px; /* 하단에 위치 */
		left: -2px;
		width: 0; /* 시작 시 폭 0 */
		height: 1px; /* 얇은 선 */
		background: #ffd700; /* 선 색상 */
		z-index: 0;
		animation: drawLine 10s ease-in-out 3/*infinite; /* 좌에서 우로 선 그리기, 4초 주기 */
	}

	.subtitle span {
		position: relative;
		z-index: 1; /* 텍스트가 위에 오도록 */
	}

    h2, h3 {
        color: var(--navy);
    }

    .section {
        background-color: #fff;
        border-top: 2px solid #ccc;
        border-bottom: 2px solid #ccc;
        padding: 20px 0;
        margin-bottom: 20px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        width: 100%;
        box-sizing: border-box;
    }

    .section:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .section ul {
        padding-left: 20px;
        list-style-type: disc;
    }

    .section ul li {
        font-size: 0.9em;
    }

    .section ul li::marker {
        font-size: 0.3em;
        animation: silverShine 2s infinite;
    }

    .info-category {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }

    .info-item {
        background-color: var(--light-navy);
        color: #fff;
        padding: 15px;
        border-radius: 8px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .info-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        opacity: 0.5;
        filter: blur(5px);
        transition: all 0.3s ease;
        z-index: -1;
    }

    .war-bg::before {
        background-image: url('../images/war.jpg');
    }

    .situation-bg::before {
        background-image: url('../images/situation.jpg');
    }

    .disaster-bg::before {
        background-image: url('../images/disaster.jpg');
    }

    .info-item:hover::before {
        opacity: 0.8;
        filter: blur(1.2px);
    }

    .info-item * {
        position: relative;
        z-index: 1;
    }

    .info-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .info-item h3 {
        color: #fff;
        text-align: center;
    }

    .info-item:hover h3 {
        color: var(--gold);
    }

    .info-item:hover ~ .info-item {
        opacity: 0.5;
    }

    .info-item ul {
        text-align: left;
        padding-left: 20px;
    }

    footer {
        background-color: var(--navy);
        color: #fff;
        position: relative;
        z-index: 101;
        margin-top: 0;
    }

    .footer-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .footer-section {
        flex: 1;
        margin: 10px;
        min-width: 200px;
    }

    .footer-section h3 {
        color: #fff;
        border-bottom: 2px solid #fff;
        padding-bottom: 10px;
    }

    .footer-section ul {
        list-style-type: none;
        padding: 0;
    }

    .footer-section ul li {
        margin-bottom: 10px;
    }

    .footer-section ul li a {
        color: #fff;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .footer-section ul li a:hover {
        color: var(--gold);
    }

    .footer-section details[open] {
        border-bottom: 1px solid #fff;
        padding-bottom: 10px;
    }

    #back-to-top {
        display: none;
        background-color: var(--navy);
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        margin: 30px auto 50px;
        display: block;
    }

    #back-to-top:hover {
        color: var(--gold);
        text-shadow: 0 0 5px var(--gold);
        background-color: var(--light-navy);
    }

	#exchange-content {
		width: 100%;
		margin: 0 auto;
		position: relative;
		z-index: 10; /* #current-time보다 낮지만 footer와 겹치지 않게 */
	}
	#toggle-exchange .details-button {
		margin-top: 0;
	}

    #current-time {
		background-color: var(--navy);
		color: #fff;
		font-weight: 700;
		height: 40px; 
		display: flex; 
		align-items: center; 
		justify-content: center; 
		width: 100%;
		margin: 0;
	}
	#news-ticker-container {
		position: sticky;
		top: 0;
		z-index: 999; /* 대사관(998)보다 높게 설정 */
	}

    .special-link {
        color: #043d69;
        font-weight: bold;
        text-decoration: none;
        transition: all 0.5s ease;
        padding: 2px 5px;
        background-color: rgba(255, 215, 0, 0.1);
        border-radius: 3px;
    }

    .special-link:hover {
        text-shadow: 0 0 5px var(--gold);
        background-color: rgba(255, 215, 0, 0.2);
    }

    .sub-section {
        background-color: rgba(26, 54, 93, 0.1);
        padding: 15px;
        border-radius: 8px;
        margin-top: 10px;
    }

    /* 수정할 코드 */
	.progress-container {
		width: 100%;
		height: 5px;
		background: #ccc;
	}

    .progress-bar {
        height: 5px;
        background: var(--navy);
        width: 0%;
        transition: width 0.3s ease;
    }

    footer a {
        text-decoration: none;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .lazy-load {
        opacity: 0;
        transition: opacity 0.3s;
    }

    .lazy-load.loaded {
        opacity: 1;
    }

    .footer-background::before {
        content: "";
        background-image: url('../images/light.png');
        background-size: cover;
        background-position: center;
        opacity: 0.2;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
    }

    .custom-link {
        color: #2c4a7c;
        text-decoration: none;
        padding: 2px 4px;
        border-radius: 3px;
        transition: background-color 0.3s ease;
    }

    .custom-link:hover {
        background-color: rgba(44, 74, 124, 0.1);
    }

    .button-container {
        text-align: center;
        margin: 15px 0;
        width: 100%;
        display: block;
		justify-content: center; /* 좌우 중앙 정렬 */
		align-items: center; /* 상하 중앙 정렬 */
    }

    .details-button {
        background-color: var(--navy);
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 5px;
        text-decoration: none;
        display: inline-block;
    }

    .details-button:hover {
        color: var(--gold);
        text-shadow: 0 0 5px var(--gold);
        background-color: var(--light-navy);
    }

    /* 글자색 및 배경색 */
    .bg-light-red-2 { background-color: #ea9999; }
    .bg-light-yellow { background-color: #fff2cc; }
    .bg-light-blue { background-color: #d0e0e3; }
    .bg-very-light-green { background-color: #d9ead3; }
    .text-red { color: #c53929; }
    .text-deep-blue { color: #253b4d; }
    .bg-light-orange { background-color: #fce5cd; }
    .bg-light-purple { background-color: #d9d2e9; }
    .bg-light-green { background-color: #b7e1cd; }

    /* 모달 스타일 */
	.modal {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		justify-content: center; /* 모달 중앙 정렬 */
		align-items: center;
	}
	.modal-content {
		position: relative; /* 닫기 버튼 위치를 위해 */
		width: 100%; /* 모달 크기 조정 */
		max-width: 1300px; /* dashboard.html의 max-width와 일치 */
		height: 100%; 
		background-color: white;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
	}

    .modal iframe {
        width: 100%;
        height: 100%;
        border: none;
    }
	.close {
		position: absolute;
		right: 20px;
		top: 20px;
		font-size: 30px;
		cursor: pointer;
		z-index: 1002;
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		color: #fff; /* 기본 색상: 흰색 */
		transition: color 0.3s ease; /* 색상 전환에 부드러운 효과 유지 */
		animation: xgoldShine 2s infinite; /* 반짝이는 애니메이션 추가 */
	}
	.close:hover {
		color: var(--gold); /* 호버 시 금색 유지 */
		animation: xgoldShineHover 1.5s infinite; /* 호버 시 더 빠르고 강한 반짝임 */
	}

    /* 툴팁 스타일 */
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted #666;
        cursor: help;
    }

    .tooltip .tooltip-text {
        visibility: hidden;
        width: 300px;
        background-color: #2c3e50;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1000;
        bottom: 125%;
        transform: translateX(-5%);
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 0.9em;
        line-height: 1.4;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .tooltip .tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #2c3e50 transparent transparent transparent;
    }

    .tooltip:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }

    .tooltip .tooltip-text ul {
        padding-left: 20px;
        margin: 5px 0;
    }

    .tooltip .tooltip-text li {
        margin-bottom: 10px;
    }

    .tooltip .tooltip-text .text-deep-blue {
        color: #0000FF;
        font-weight: bold;
    }

    .tooltip .tooltip-text .text-red {
        color: #FF0000;
        font-weight: bold;
    }

    .tooltip .tooltip-text .bg-very-light-green {
        background-color: #E8F5E9;
        padding: 2px 4px;
    }

    /* 접기 스타일 */
    .collapsible, .collapsible-header {
        cursor: pointer;
        border-bottom: 1px dotted #666;
        color: #2c3e50;
        position: relative;
        display: inline-block;
    }

    .collapsible-header {
        left: 12px;
    }

    .collapsible:hover, .collapsible-header:hover {
        color: #1a252f;
    }

    .collapsible::after, .collapsible-header::after {
        content: '▼';
        font-size: 0.7em;
        margin-left: 5px;
        transition: transform 0.3s;
    }

    .collapsible.active::after, .collapsible-header.active::after {
        transform: rotate(180deg);
    }

    .collapse-content {
        max-height: 0;
        overflow: hidden;
        background-color: #f9f9f9;
        border-radius: 5px;
        margin-top: 5px;
        padding: 0 15px;
        visibility: hidden;
        opacity: 0;
        transition: max-height 0.3s ease-out, visibility 0s linear 0.3s, opacity 0.3s ease-out, padding 0.3s ease-out;
    }

    .collapse-content.show {
        max-height: 500px;
        padding: 15px;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        visibility: visible;
        opacity: 1;
        transition: max-height 0.3s ease-in, visibility 0s linear 0s, opacity 0.3s ease-in, padding 0.3s ease-in;
    }

    .collapse-content .section-content {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }

    /* 푸터 접기 스타일 */
    .footer-section .collapsible {
        color: #fff;
        border-bottom: 2px solid #fff;
        display: block;
        padding-bottom: 10px;
        transition: color 0.3s ease;
    }

    .footer-section .collapsible:hover {
        color: var(--gold);
    }

    .footer-section .collapsible::after {
        color: #fff;
    }

    .footer-section .collapse-content {
        background-color: transparent;
        border: none;
        padding: 0;
        margin: 0;
    }

    .footer-section .collapse-content.show {
        padding: 0;
    }

    .footer-section .collapse-content p {
        margin: 0;
        padding: 5px 0;
        background: none;
        border: none;
    }

    .footer-section .collapse-content .separator {
        border-bottom: 2px solid #fff;
        margin: 10px 0;
        display: none;
    }

    .footer-section .collapse-content.show .separator {
        display: block;
    }
	.footer-section .name a.silver-shine {
	  color: inherit !important;
	  text-shadow: inherit !important;
	}

    /* 상태 바 스타일 */
    .status-bars {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 10px;
        font-size: 0.8em;
    }

    .status-bar {
        display: flex;
        align-items: center;
    }

    .status-label {
        margin-right: 5px;
        color: #fff;
    }

    .status-level {
        padding: 2px 5px;
        border-radius: 3px;
        cursor: help;
        transition: all 0.3s ease;
        position: relative;
    }

    .status-level[data-level="원활"] { background-color: #4CAF50; }
    .status-level[data-level="혼잡"] { background-color: #FFC107; }
    .status-level[data-level="비상"] { background-color: #F44336; }
    .status-level[data-level="평시"] { background-color: #4CAF50; }
    .status-level[data-level="주의"] { background-color: #FFC107; }
    .status-level[data-level="경계"] { background-color: #FF9800; }
    .status-level[data-level="위기"] { background-color: #F44336; }

    .status-level.active {
        <!-- box-shadow: 0 0 10px #FFD700; -->
        <!-- animation: pulse 4s infinite; -->
        opacity: 1;
    }

    .status-level:not(.active) {
        opacity: 0.5;
        filter: grayscale(50%);
        transition: opacity 0.3s ease, filter 0.3s ease;
    }

    .status-level .tooltip-text {
        visibility: hidden;
        width: 300px;
        background-color: #f9f9f9;
        color: #333;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1000;
        bottom: 125%;
        left: -50px;
        opacity: 0;
        transition: opacity 0.3s, visibility 0.3s;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        border: 1px solid #ddd;
    }

    .status-level:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }

    /* 알림 툴팁 */
    .notification-tooltip {
        position: fixed;
        top: -100px;
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        background-color: #2c3e50;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 5px;
		padding-left: 0px;
        z-index: 2000;
        opacity: 0;
        transition: opacity 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        font-size: 0.8em;
        line-height: 1.2;
        pointer-events: none;
    }

    .notification-tooltip.show {
        opacity: 1;
        animation: slideDown 0.5s ease-out forwards;
    }

    .notification-tooltip.hide {
        animation: slideUp 0.5s ease-out forwards;
    }

    .notification-tooltip .admin-action {
        color: #ffd700;
        font-weight: bold;
    }
	
	.name-tools {
	  display: inline-flex;
	  align-items: center;
	  gap: 5px;
	}

	.name-tool-btn {
	  background-color: #f0f0f0;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  padding: 2px 6px;
	  cursor: pointer;
	  font-size: 14px;
	  transition: background-color 0.2s;
	}

	.name-tool-btn:hover {
	  background-color: #e0e0e0;
	}

	.delete-btn {
	  color: #d00;
	}

	.add-btn {
	  color: #080;
	}

	.edit-btn {
	  color: #00d;
	}

    /* 애니메이션 */
    @keyframes blueShine {
        0%, 100% { color: #fff; text-shadow: none; }
        50% { color: #4d79ff; text-shadow: 0 0 10px #4d79ff; }
    }

    @keyframes whiteShine {
        0%, 100% { color: #fff; text-shadow: none; }
        50% { color: #ff6b6b; text-shadow: 0 0 10px #ff6b6b; }
    }

    @keyframes ColorChange {
        0%, 100% { color: #333; }
        50% { color: #c53929; }
    }

    @keyframes cloudFireAnimation {
        0% { text-shadow: 0 0 5px #ff6b6b, 0 0 10px #4d79ff; }
        50% { text-shadow: 0 0 10px #4d79ff, 0 0 15px #ff6b6b; }
        100% { text-shadow: 0 0 5px #ff6b6b, 0 0 10px #4d79ff; }
    }

    @keyframes goldShine {
        0% { color: #ffd700; text-shadow: 0 0 5px #ffd700; }
        50% { color: #ffec8b; text-shadow: 0 0 10px #ffec8b; }
        100% { color: #ffd700; text-shadow: 0 0 5px #ffd700; }
    }

    @keyframes silverShine {
        0% { color: #C0C0C0; text-shadow: 0 0 5px #C0C0C0; }
        50% { color: #E8E8E8; text-shadow: 0 0 10px #E8E8E8; }
        100% { color: #C0C0C0; text-shadow: 0 0 5px #C0C0C0; }
    }

    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
    }

    @keyframes colorChange {
        0%, 100% { color: #333; }
        50% { color: #fff; }
    }

    @keyframes slideDown {
        0% { top: -100px; opacity: 0; }
        70% { top: 20px; opacity: 1; }
        100% { top: 10px; opacity: 1; }
    }

    @keyframes slideUp {
        0% { top: 10px; opacity: 1; }
        30% { top: 20px; opacity: 0.7; }
        100% { top: -100px; opacity: 0; }
    }
	/* 빛나는 잔상 효과 */
	@keyframes glowFade {
		0% {
			opacity: 0;
		}
		25% {
			opacity: 0.5; /* 선이 지나가며 빛남 */
		}
		50% {
			opacity: 0.3; /* 잔상이 약해짐 */
		}
		100% {
			opacity: 0; /* 완전히 사라짐 */
		}
	}

	/* 좌에서 우로 선이 느리게 지나가는 애니메이션 */
	@keyframes drawLine {
		0% {
			width: 0; /* 시작 시 보이지 않음 */
			opacity: 1;
		}
		50% {
			width: 100%; /* 중간에 선이 완성 */
			opacity: 1;
		}
		83.33% { /* 10초 시점까지 유지 (10/12 = 약 83.33%) */
			width: 100%;
			opacity: 0; /* 선이 사라짐 */
		}
		100% { /* 12초 시점, 다음 사이클 준비 */
			width: 0; /* 초기 상태로 리셋 */
			opacity: 0;
		}
	}
	/* 모달 닫기 버튼 반짝이는 애니메이션 정의 */
	@keyframes xgoldShine {
		0% { 
			color: #fff; 
			text-shadow: 0 0 2px #fff; 
		}
		50% { 
			color: #ffd700; /* 금색 */
			text-shadow: 0 0 10px #ffd700, 0 0 20px rgba(255, 215, 0, 0.5); 
		}
		100% { 
			color: #fff; 
			text-shadow: 0 0 2px #fff; 
		}
	}

	@keyframes xgoldShineHover {
		0% { 
			color: #ffd700; 
			text-shadow: 0 0 5px #ffd700; 
		}
		50% { 
			color: #ffec8b; /* 더 밝은 금색 */
			text-shadow: 0 0 15px #ffec8b, 0 0 25px rgba(255, 215, 0, 0.7); 
		}
		100% { 
			color: #ffd700; 
			text-shadow: 0 0 5px #ffd700; 
		}
	}
	/* ===== [신규] 대사관 모니터링 티커 CSS 시작 ===== */
    /* 수정 후 코드 (이것으로 교체) */
	.embassy-news-container {
    width: 100%;
    text-align: center;
    position: sticky;
    top: 40px; /* 이전 단계에서 맞춘 값 */
    z-index: 998;
    
    /* [수정] 네이비 테마 적용 */
    background: var(--navy);
    border-top: 1px solid var(--light-navy);
    border-bottom: 1px solid var(--light-navy);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}
 
	.embassy-news-flipper {
		perspective: 1000px;
		height: 40px; 
		overflow: hidden;
		position: relative;
	}
	
	.embassy-update-time {
		position: absolute; /* 레이아웃에서 분리 */
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 9.5px; /* 년도, 날짜, 시간의 기본 크기 */
		z-index: 5;
		transition: color 0.5s ease;
		
		/* [!! 바로 이 부분입니다 !!] "흐린 회색" 대신 "노란색"으로 변경 */
		color: #ffd700; 
		
		/* 2줄 표시에 따른 정렬 및 줄간격 */
		text-align: right;
		line-height: 1.2;
	}
		
	/* [!! 신규 !!] "update" 텍스트(span)만 작게 만들기 */
	.embassy-update-time span {
		font-size: 7.5px;
		text-transform: uppercase;
		/* [!! 신규 !!] "UPDATE" 텍스트만 옅은 회색(기존 흐린 회색)으로 설정 */
		color: rgba(240, 244, 248, 0.7);
	}

	/* "긴급" 상태일 때 업데이트 시간 텍스트 색상 (흰색) */
	.embassy-alert .embassy-update-time {
		color: #ffffff;
	}
    .embassy-news-item {
        position: absolute;
        width: 100%;
        /* padding: 10px 20px; [!! 수정 !!] 삭제 */
        font-size: 16px;
        transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
        transform-style: preserve-3d;
        opacity: 0;
        box-sizing: border-box; 

        /* [!! 신규 !!] 수직 중앙 정렬 및 애니메이션 기준 */
        top: 50%;
        transform: translateY(50%) rotateX(90deg); /* [!! 수정 !!] Default state (from bottom) */
        
        /* [!! 신규 !!] 높이 및 내부 정렬 */
        height: 40px; /* [!! 신규 !!] 높이를 플리퍼와 동일하게 */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px; /* [!! 신규 !!] 좌우 패딩만 */
    }
    .embassy-news-item.active {
        opacity: 1;
        transform: translateY(-50%) rotateX(0deg); /* [!! 수정 !!] Active state (centered) */
    }
    .embassy-news-item.exit {
        opacity: 0;
        transform: translateY(-150%) rotateX(-90deg); /* [!! 수정 !!] Exit state (to top) */
    }
    /* 수정 후 코드 (이것으로 교체) */
	.embassy-news-item a,
	.embassy-news-item span {
		text-decoration: none;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		transition: color 0.5s ease;
		cursor: default;
		font-weight: 500;
		
		/* [!! 수정 !!] 네이비 배경에 맞게 흰색 계열로 변경 */
		color: var(--off-white); 
	}
    .embassy-news-item a {
        cursor: pointer; /* 링크일 때는 포인터 커서 */
    }
    .embassy-news-item a:hover {
        text-decoration: underline;
    }
    .embassy-news-popup {
        display: none;
        position: absolute;
        /* [!! 수정 !!] 팝업 위치를 아래로 변경 (bottom: 100% -> top: 100%) */
        top: 100%; 
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #ffffff, #f0f4f8);
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 0 5px 5px; /* [!! 이렇게 수정 !!] */
        max-width: 90vw;
        width: 500px;
        max-height: 300px;
        overflow-y: auto;
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        z-index: 10;
        transition: opacity 0.3s ease-in-out;
        opacity: 0;
    }
    .embassy-news-container:hover .embassy-news-popup {
        display: block;
        opacity: 1;
    }
    
	.embassy-news-popup h3 {
		margin: 0 0 10px;
		font-size: 18px;
		color: #333;
		font-weight: 600;
		border-bottom: 1px solid #e5e7eb;
		
		/* [!! 수정 !!] 
		   padding-bottom을 삭제하고, 
		   대신 padding-top을 주어 상하 여백 균형을 맞춥니다.
		   이제 top: 50% 계산이 정확해집니다.
		*/
		/* padding-bottom: 5px; (삭제) */
		padding-top: 5px; /* (신규) */

		position: relative; /* 자식 요소(시간)의 기준점이 됨 */
		text-align: center; /* "주한 대사관 현황"을 중앙 정렬 */
	}
	/* 팝업창 헤더의 '업데이트 시간' 스타일 */
	.popup-header-update-time {
		font-size: 9.5px; 
		color: var(--navy); 
		text-align: right;
		line-height: 1.2;
		padding-left: 10px; 

		/* [!! 신규 !!] 레이아웃 흐름과 관계없이 우측에 배치 */
		position: absolute;
		right: 0; /* h3 영역의 오른쪽 끝에 붙임 */
		top: 50%; /* 세로 중앙 정렬 */
		transform: translateY(-50%); /* 세로 중앙 정렬 */
	}

	/* 팝업창 헤더의 'UPDATE' 텍스트 스타일 */
	.popup-header-update-time span {
		font-size: 8px;
		text-transform: uppercase;
	/* [!! 신규 !!] 덜 거슬리도록 70% 투명도 적용 (색상은 부모의 네이비색 상속) */
		opacity: 0.7;
	}
	/* ===== [수정] 대사관 팝업 국가 목록 스타일 (실제 이미지 태그 반영) ===== */
    .embassy-popup-item .country-list-container {
        margin-top: 8px; 
    }

    .embassy-popup-item .country-list-label {
        font-size: 13px;
        font-weight: bold;
        color: #333;
        margin-top: 10px;
        margin-bottom: 5px;
        display: block;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 3px;
    }

    .embassy-popup-item .country-list-container .country-list-label:first-child {
        margin-top: 0;
    }

    .embassy-popup-item .country-grid {
        display: flex;
        flex-wrap: wrap; 
        gap: 6px; 
        margin-top: 5px;
    }

    .embassy-popup-item .country-grid.main-grid {
        justify-content: center; /* 주요 국가는 중앙 정렬 */
    }

    /* [신규] 국기 이미지 스타일 */
	.embassy-popup-item .country-flag-img {
        width: 20px;
        height: 15px; /* 4:3 비율 */
        object-fit: cover; /* 이미지가 찌그러지지 않게 */
        border: 1px solid #ddd; /* 옅은 테두리 */
        border-radius: 2px;
        
        /* display: block; <-- 이 속성을 삭제해 주세요. (줄바꿈의 원인입니다) */
        /* vertical-align: middle; <-- flex 정렬을 사용하므로 이것도 삭제합니다. */
        
        /* ▼ 미세 조정을 위한 코드 ▼ */
        position: relative; /* 위치 조정을 위한 기준 설정 */
        top: 3px;           /* 1px만큼 아래로 내립니다. */
    }

    .embassy-popup-item .country-btn {
        display: inline-flex;  
        align-items: center;    
        gap: 7px; /* [수정] 이미지와 텍스트 간격 조정 */
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 13px;
        background-color: #f0f4f8; 
        border: 1px solid #d1d5db; 
        color: #333;
        font-weight: 500;
        cursor: default;
    }

    .embassy-popup-item .country-btn.main {
        background-color: var(--light-navy); 
        color: #fff;
        border-color: var(--navy); 
        font-weight: 700;
        padding: 5px 10px; 
        font-size: 14px;
    }
    /* ===== [수정] 스타일 끝 ===== */
	
    .embassy-news-popup .embassy-popup-item {
        padding: 8px 0;
        border-bottom: 1px solid #e5e7eb;
    }
    .embassy-news-popup .embassy-popup-item:nth-child(odd) {
        background-color: #f9fafb;
    }
    .embassy-news-popup .embassy-popup-item:nth-child(even) {
        background-color: #ffffff;
    }
    .embassy-news-popup .embassy-popup-item a,
    .embassy-news-popup .embassy-popup-item span {
        color: #1e40af;
        text-decoration: none;
        font-size: 14px;
        display: block;
        white-space: normal; 
        overflow: visible;
        text-overflow: clip;
        cursor: default;
    }
    .embassy-news-popup .embassy-popup-item a {
        cursor: pointer;
    }
    .embassy-news-popup .embassy-popup-item a:hover {
        color: #3b82f6;
        text-decoration: underline;
    }
    .embassy-news-popup .embassy-popup-item span.status-normal {
        color: #333; 
        font-size: 14px;
    }
    .embassy-news-popup .embassy-popup-item:last-child {
        border-bottom: none;
    }
    .embassy-popup-item a.status-withdrawal {
        color: #e74c3c; 
        font-weight: bold;
    }

    /* ===== [신규] 대사관 티커 디자인 개선 추가 코드 ===== */

    /* [개선] 2. 긴급 (철수) 상태 디자인 (.embassy-alert 클래스 추가 시) */
    .embassy-news-container.embassy-alert {
        background: #e74c3c; /* 기존의 강조 빨간색 */
        border-color: #c0392b; /* 더 어두운 빨간색 테두리 */
        box-shadow: 0 2px 8px rgba(231, 76, 60, 0.5); /* 빨간색 글로우 효과 */
    }

    /* [개선] 긴급 상태 텍스트 색상 */
    .embassy-alert .embassy-news-item a,
    .embassy-alert .embassy-news-item span {
        color: #ffffff; /* 텍스트는 흰색 */
        font-weight: bold;
    }

    /* [개선] 긴급 상태일 때 텍스트가 살짝 반짝이도록 */
    .embassy-alert .embassy-news-item a {
        animation: pulseWhiteText 1.5s infinite;
    }

    /* [개선] 텍스트 반짝임 애니메이션 */
    @keyframes pulseWhiteText {
        0% { text-shadow: 0 0 3px rgba(255,255,255,0.7); }
        50% { text-shadow: 0 0 10px #ffffff; }
        100% { text-shadow: 0 0 3px rgba(255,255,255,0.7); }
    }
    /* ===== 대사관 티커 디자인 개선 끝 ===== */

    @media (max-width: 600px) {
        /* --- [기존 규칙] --- */
        .embassy-news-flipper {
            height: 36px;
        }
        .embassy-news-item {
            font-size: 14px;
            height: 36px; /* 플리퍼와 높이 일치 */
        }
        .embassy-news-popup {
            width: 85vw;
            padding: 0 5px 5px; /* 상단 패딩 0, 좌우/하단 5px */
            max-height: 250px;
        }
        .embassy-news-popup h3 {
            font-size: 16px;
            /* 데스크톱의 relative, text-align: center 상속 (Good) */
        }
        .embassy-news-popup .embassy-popup-item a,
        .embassy-news-popup .embassy-popup-item span {
            font-size: 13px;
        }
		.embassy-popup-item .country-list-label {
            font-size: 12px; /* 라벨 폰트 크기 축소 */
        }
        
        .embassy-popup-item .country-flag-img {
            width: 18px; /* 국기 이미지 너비 축소 */
            height: 13.5px; /* 국기 이미지 높이 축소 (비율 유지) */
        }

        .embassy-popup-item .country-btn {
            font-size: 12px; /* 기본 버튼 폰트 크기 축소 */
            padding: 3px 6px; /* 기본 버튼 여백 축소 */
            gap: 5px; /* 기본 버튼 내 간격 축소 */
        }

        .embassy-popup-item .country-btn.main {
            font-size: 13px; /* 주요 버튼 폰트 크기 축소 */
            padding: 4px 8px; /* 주요 버튼 여백 축소 */
            gap: 5px; /* 주요 버튼 내 간격 축소 */
        }

        /* --- [!! 신규/수정 !!] --- */
        
        /* 1. [수정] 대사관 티커 'top' 위치 조정 */
        .embassy-news-container {
            /* 데스크톱 뉴스 티커(40px)와 달리,
              모바일 뉴스 티커의 높이를 확인해야 합니다.
              만약 모바일 뉴스 티커도 36px로 줄어든다면, 
              이 값을 '37px' (36px + 1px 틈)로 설정하세요.
            */
            top: 37px; /* (모바일 뉴스 티커 높이 + 1px) */
        }

        /* 2. [신규] 대사관 티커 '업데이트 시간' 여백 조정 */
        .embassy-update-time {
            right: 8px; /* 오른쪽 여백을 12px -> 8px로 줄임 */
            /* 폰트 크기(9.5px)는 데스크톱과 동일하게 유지 (이미 작음) */
        }

        /* 3. [신규] 팝업 '업데이트 시간' 여백 및 폰트 조정 */
        .popup-header-update-time {
            padding-left: 5px; /* 제목과의 간격을 10px -> 5px로 줄임 */
            /* 폰트 크기(9.5px)는 데스크톱과 동일하게 유지 */
        }
        .popup-header-update-time span {
             /* 폰트 크기(7.5px)는 데스크톱과 동일하게 유지 */
        }
    }
    /* ===== [신규] 대사관 모니터링 티커 CSS 끝 ===== */
    /* ===== [신규] 대사관 모니터링 티커 CSS 끝 ===== */
	
	.bottom-sticky-wrapper {
		position: sticky;
		bottom: 0;
		z-index: 100;
	}
    /* ===== [신규] 대사관 모니터링 티커 CSS 끝 ===== */

    /* 미디어 쿼리 */
    @media (max-width: 768px) {
        h1 { font-size: 2em; }
        .container { padding: 0; }
        .section { padding: 15px 0; margin-bottom: 15px; }
        .section-content { padding: 0 15px; }
        .info-category { grid-template-columns: 1fr; }
        .footer-section { flex-basis: 100%; }
        #current-time { font-size: 0.9em; height: 36px; /* 이 줄을 추가 */}
        .close { right: 10px; top: 10px; font-size: 24px; width: 30px; height: 30px; }
        .status-level .tooltip-text, .tooltip .tooltip-text { width: 200px; font-size: 0.8em; }
        .collapse-content.show { max-height: 1000px; }
		.nav-bar .details-button {
            padding: 10px 5px; /* 좌우 여백을 8px에서 5px로 더 줄입니다. */
            font-size: 0.8em;  /* 폰트 크기를 0.85em에서 0.8em으로 더 줄입니다. */
            margin: 5px 2px 0 2px; /* 버튼간 간격은 유지합니다. */
            white-space: nowrap; /* 버튼 내의 텍스트가 길어도 줄바꿈되지 않도록 합니다. */
        }
    }

    @font-face {
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/notosanskr/v13/PbykFmXiEBPT4ITbgNA5Cgm203Tq4JJWq209pU0DPdWuqxJFA4GNDCBYtw.0.woff2) format('woff2');
        unicode-range: U+f9ca-fa0b, U+ff03-ff05, U+ff07, U+ff0a-ff0b, U+ff0d-ff19, U+ff1b, U+ff1d, U+ff20-ff5b, U+ff5d, U+ffe0-ffe3, U+ffe5-ffe6;
    }

    /* 클래스 애니메이션 적용 */
    .title-part1 { animation: blueShine 4s infinite; }
    .title-part2 { animation: whiteShine 4s infinite 2s; }
    .subtitle-part1 { animation: ColorChange 4s infinite 1.8s; }
    .gold-shine { animation: goldShine 2s infinite; }
    .silver-shine { animation: silverShine 2s infinite; }