@charset "utf-8";
@import url("../css/font.css");



/* ========== Base Styles ========== */
body {
    background-color: #F0F7FF;
    font-family: 'Pretendard';
    color: #222;
}

a {
    text-decoration: none;
    color: #222;
}

.color-red {
    color: #DE0000;
}



/* ========== header ========== */
.header_inner {
    height: 100px;
    margin: auto;
    max-width: 1600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}
.header .header_inner nav .nav-menu {
    display: flex;
    gap: 50px;
    font-size: 20px;
}
.header .header_inner nav .nav-menu li a:hover {
    color: #197DFF;
}



/* ========== footer ========== */
.footer {
    background-color: #fff;
    border-top: 1px solid #D7D9DD;
}
.footer-box {
    height: 170px;
    max-width: 1600px;
    display: flex;
    margin: auto;
    gap: 60px;
    align-items: center;
    padding: 0 40px;
}
.footer-text {
    flex: 1;
    line-height: 30px;
}
.footer-text p span {
    color: #20429A;
}



/* ========== main ========== */
.main .main-img {
    max-width: 1600px;
    margin: auto;
    padding: 0 40px;
}
.main .main-img img {
    width: 100%;
}

.container {
    margin: auto;
    max-width: 1200px;
    margin-bottom: 40px;
    padding: 0 40px;
}

.service-btn {
    margin-top: 40px;
}
.service-btn ul {
    display: flex;
    gap: 20px;
}
.service-btn ul li {
    overflow: hidden;
    flex: 1 1;
    border-radius: 10px;
}
.service-btn ul li a {
    display: block;
    background-color: #4294FF;
    color: #fff;
    font-weight: bold;
    height: 120px;
    display: flex;
    align-items: center;
    font-size: 24px;
    padding: 0 40px;
    background-size: contain;
}
.service-btn ul li a:hover {
    transform: scale(1.05);
}
.service-btn ul li:nth-child(2n) a {
    background-color: #256BC8;
}
.service-btn ul li:nth-child(1) a {
    background-image: url(../images/service_01.png);
}
.service-btn ul li:nth-child(2) a {
    background-image: url(../images/service_02.png);
}
.service-btn ul li:nth-child(3) a {
    background-image: url(../images/service_03.png);
}
.service-btn ul li:nth-child(4) a {
    background-image: url(../images/service_04.png);
}

.contents-wrap {
    display: flex;
    gap: 20px;
}
.contents-wrap .contents {
    flex: 1;
}
.contents-wrap .contents .content-title {
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: 600;
}

.update-list {
    border-radius: 15px;
    background-color: #fff;
    padding: 20px 25px;
    height: 230px;
    max-height: 230px;
    /*overflow-y: scroll;*/
    border: 1px solid #ddd;
}
.update-list::-webkit-scrollbar {
    width: 10px;
}
.update-list::-webkit-scrollbar-track {
    margin: 8px;
}
.update-list::-webkit-scrollbar-thumb {
    background: #D0DBF7;
    border-radius: 10px;
    border: 2px solid #fff;
}
.update-list li a {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 20px;
    font-size: 16px;
    color: #222;
    position: relative;
}
.update-list li a:hover {
    color: #000;
    cursor: default;
}
.update-list li:last-child a {
    border-bottom: none;
}
.update-list li a span {
    width: 110px;
    color: #777;
}
.update-list li a:hover span {
    color: #555;
}
.update-list li a p  {
    flex: 1;
    min-width: 0;
}
.u-ellipsis-1{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.u-ellipsis-1:hover::after{
    content: attr(data-alt);
    position: absolute;
    left: 150px;
    top: 30px;
    margin-top: 8px;
    z-index: 1000;
    max-width: 520px;
    padding: 8px 10px;
    background:  #19305C;
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    white-space: normal;     
    word-break: break-word;
}

.guide .guide-card {
    background-image: url(../images/guide-img.png);
    background-color: #19305C;
    border-radius: 15px;
    padding: 20px 30px;
    height: 230px;
    position: relative;
}
.guide .guide-card .guide-title {
    font-size: 28px;
    color: #BAC7E5;
    font-weight: bold;
    line-height: 40px;
    letter-spacing: 0.5px;
    margin-top: 20px;
}
.guide .guide-card .guide-title span {
    color: #fff;
}
.guide .guide-card p {
    color: #BAC7E5;
    margin-top: 20px;
    font-size: 16px;
}
.guide .guide-card .guide-btn a{
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #8CC800;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    gap: 10px;
    line-height: 20px;
    position: absolute;
    bottom: 30px;
    right: 30px;
}
.guide .guide-card .guide-btn span {
    height: 20px;
}




/* === Guide panel: 좌측 고스트 버튼 === */
.guide .guide-card .guide-download a{
	position:absolute;
	bottom:30px; left:30px;
	display:inline-flex; align-items:center; gap:10px;
	padding:10px 16px;
	border-radius:10px;
	background: rgba(255,255,255,.12);
	border:1px solid rgba(255,255,255,.25);
	color:#e2e8f0;
	font-size:16px; line-height:20px; font-weight:600;
	transition: background .15s ease, transform .15s ease;
}
.guide .guide-card .guide-download a:hover{
	background: rgba(255,255,255,.18);
	transform: translateY(-1px);
}
.guide .guide-card .guide-download a .meta{
	font-size:12px; opacity:.85; margin-left:4px;
}
.guide .guide-card .guide-download svg{ flex:0 0 auto; }

/* 기존 초록 버튼은 우측 하단 고정이라 그대로 사용함(.guide-btn) */

/* 모바일 폴백: 폭 좁을 때 겹치지 않게 세로 스택 */
@media (max-width: 680px){
	.guide .guide-card{ height:auto; padding-bottom:100px; }
	.guide .guide-card .guide-download a{
		position:static; display:inline-flex; margin-top:14px;
	}
	.guide .guide-card .guide-btn a{
		position:static; display:inline-flex; margin-top:10px;
	}
	/* 버튼 두 개가 자연스레 줄바꿈되도록 */
}

/* === Tweak: Guide 고스트 버튼(높이↓, hover효과 제거, 불투명도↑) === */
.guide .guide-card .guide-download a{
	padding:8px 14px;                         /* 높이 살짝 낮춤 */
	background: rgba(255,255,255,.22);        /* 불투명도 ↑ */
	border:1px solid rgba(255,255,255,.35);   /* 테두리도 살짝 또렷하게 */
	color:#e6edf5;
	transition: none;                         /* hover 애니메이션 제거 */
}

/* hover/active/focus 모두 같은 상태 유지 (오버 액션 제거) */
.guide .guide-card .guide-download a:hover,
.guide .guide-card .guide-download a:active,
.guide .guide-card .guide-download a:focus{
	background: rgba(255,255,255,.22);
	border-color: rgba(255,255,255,.35);
	transform: none;
}

/* 아이콘 살짝 정렬 */
.guide .guide-card .guide-download svg{
	flex:0 0 auto;
	margin-top:1px;
}



/* ========== sub page(공통) ========== */
.sub-container {
    margin: 0 auto;
    max-width: 1600px;
    gap: 20px;
    padding: 0 40px 40px;
}
.section {
    background-color: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.section-title {
    color: #20429A;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}



/* ========== table ========== */
.section-table table {
    background-color: #fbfbff;
    width: 100%;
    text-align: center;
}
.section-table table thead {
    background-color: #BAC7E5;
}
.section-table table tr {
    border: 1px solid #eee;
}
.section-table table th {
    height: 40px;
    vertical-align: middle;
    border: 1px solid #eee;
}
.section-table table td  {
    border: 1px solid #eee;
    height: 37px;
    vertical-align: middle;
    padding: 0;
}



/* ========== btn ========== */
.section-btn button {
    background-color: #fff;
    outline: none;
    border: 1px solid #ccc;
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}
.section-btn button.active {
    background-color: #19305c;
    color: #fff;
}
.result-btn {
    display: flex;
    gap: 10px;
}
.result-btn button {
    background-color: #1A456D;
    border-radius: 10px;
    color: #fff;
    border: 0px;
    outline: none;
    width: 80px;
    height: 40px;
    cursor: pointer;
}
.result-btn button:hover {
    background-color: #1c4c79;
}



/* ========== 대화형 챗봇 ========== */
.chat-wrap {
    display: flex;
    width: 100%;
    gap: 20px;
    margin-bottom: 20px;
}
.chat-container {
    flex: 1;
    overflow: hidden;
    height: 400px;
    padding: 0 !important;
}
.chat-header {
    background: #fff;
    height: 70px;
    position: relative;
    display: flex;
    border-bottom: 1px solid #eee;
    align-items: center;
    padding: 0 30px;
    font-size: 22px;
    font-weight: bold;
    color: #20429A;
    line-height: 70px;
}
.chat-messages {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    background: #f8f9ff;
}
.chat-messages::-webkit-scrollbar {
    width: 10px;
}
.chat-messages::-webkit-scrollbar-track {
    margin: 8px;
}
.chat-messages::-webkit-scrollbar-thumb {
    background: #D0DBF7;
    border-radius: 10px;
    border: 2px solid #fff;
}
.message {
    display: flex;
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.3s ease;
    align-items: center;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.message.user {
    justify-content: flex-end;
}
.message-content {
    max-width: 70%;
    padding: 1rem 1.5rem;
    border-radius: 18px;
    position: relative;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    white-space: pre-wrap;
}
.message.user .message-content {
    background: linear-gradient(45deg, #20429A, #73C6F0);
    color: white;
    border-bottom-right-radius: 4px;
}
.message.ai .message-content {
    background: #fff;
    color: #333;
    border-bottom-left-radius: 4px;
}
.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.message.user .message-avatar {
    background: linear-gradient(45deg, #20429A, #73C6F0);
}
.message.ai .message-avatar {
    background: linear-gradient(45deg, #a8edea, #fed6e3);
}

.input-container {
    background: white;
    border-top: 1px solid #e9ecef;
    padding: 1rem;
}
.input-wrapper {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    max-width: 100%;
}
.message-input {
    overflow: hidden;
    line-height: 1.5; 
    flex: 1;
    border: 2px solid #e9ecef;
    border-radius: 24px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    resize: none;
    min-height: 60px;
    max-height: 120px;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}
.message-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* 타이핑 애니메이션 */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    white-space: nowrap;
}
.typing-dots {
    display: flex;
    gap: 4px;
    white-space: nowrap;
}
.typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #667eea;
    animation: typing 1.4s infinite ease-in-out;
}
.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}
.send-btn {
    width: 60px;
    height: 60px;
    background: #19305C;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
    font-size: 1.2rem;
}
.send-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.send-btn::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid white;
}
.send-btn.typing::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border: none;
    background-color: #fff;
    border-radius: 2px;
}



/* ========== history ========== */
.sidebar {
    width: 280px;
    background: #fff;
    overflow-y: hidden;
    max-height: 350px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 0 !important;
}
.logo-content {
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 70px;
    border-bottom: 1px solid #eee;
    color: #20429A;
    font-size: 22px;
    font-weight: bold;
}
.chat-history {
    color: #222;
    flex: 1;
    overflow: hidden;
	display: flex;	/* 남은 높이를 정확히 채우게 */
}
.chat-history h3 {
    margin-bottom: 1rem;
    opacity: 0.9;
}
.chat-item-wrap {
    overflow-y: scroll;
    height: 100%;
    padding: 20px 30px;
}

.chat-item-wrap li:hover {
    cursor: pointer;
    text-decoration: underline;
}

.chat-item-wrap::-webkit-scrollbar {
    width: 4px;
}
.chat-item-wrap::-webkit-scrollbar-track {
    background: none;
}
.chat-item-wrap::-webkit-scrollbar-thumb {
    background: #e9ecef;
    border-radius: 4px;
}
.chat-item-wrap::-webkit-scrollbar-thumb:hover {
    background: #73C6F0;
}
.chat-item {
    padding: 10px 0px;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 1rem;
    opacity: 0.8;
    text-decoration: none;
    color: #222;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.chat-item:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

/* ========== 응답결과 ========== */
.play-icon {
    background-color: #8CC800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    height: auto;
    box-sizing: border-box;
}
.play-icon::before {
    content: '';
    display: inline-block;
    background-image: url(../images/result-icon.png);
    width: 15px;
    height: 15px;
}



/* ========== open API ========== */
.open-api {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.subtitle {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    margin-bottom: 10px;
}
.open-api .subtitle {
    margin: 15px 15px 15px 0px;
}
.subtitle i {
    width: 25px;
    height: 25px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/title-icon.png);
}
.text-box {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 35px 30px 30px;
    word-break: keep-all;
}
.text-box h1 {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px;
}
.text-box p {
    line-height: 26px;
}
.api-code .code-box-wrap {
    display: flex;
    gap: 20px;
}
.api-code .code-box-wrap .code-box {
    flex: 1;
    background-color: #eee;
    padding: 30px;
    border: 1px solid #eee;
    border-radius: 10px;
}
.code-box .code-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 18px;
}
.code-box i {
    width: 25px;
    height: 25px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}
.code-box .code-icon1 {
    background-image: url(../images/python-icon.png);
}
.code-box .code-icon2 {
    background-image: url(../images/code-icon.png);
}
.code-box .code-text {
    padding: 20px 20px 0;
}
.code-box .code-text p {
    line-height: 30px;
}







/* ========== 지식그래프 검색 ========== */
.graph-search-wrap .graph-search {
    display: flex;
    align-items: center;
    gap: 10px;
}
.graph-search-dropdown select {
    height: 52px;
    width: 150px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    outline: none;
}
.graph-search-input{
    flex: 1;
    height: 50px;
    margin: 0;
    padding: 0 20px;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}
.graph-search-button {
    background-color: #19305c;
    border-radius: 10px;
    color: #fff;
    border: 0px;
    outline: none;
    width: 150px;
    height: 52px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.graph-search-button:hover {
    background-color: #1c4c79;
}
.graph-search-button .search-icon {
    width: 25px;
    height: 25px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/magnifier-icon.png);
}
.search-example {
    color: #555;
    margin-top: 20px;
    font-size: 15px;
}
.graph-result {
    width: 100%;
    min-height: 550px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f4f9;
    margin-top: 40px;
    border: 1px solid #eee;
}



/* ========== 질의서비스 ========== */
.querychat-wrap {
    display: flex;
    width: 100%;
    gap: 20px;
    margin-bottom: 20px;
}
.querychat-container {
    flex: 1;
    overflow: hidden;
    height: 350px;
    padding: 0 !important;
    width: 100%;
}
.querychat-textarea {
    display: flex;
    height: 100%;
    position: relative;
}
.querychat-textarea textarea {
    flex: 1;
    border: 0px;
    outline: none;
    padding: 40px;
    vertical-align: top;
    background-color: #f8f9ff;
    font-family: 'Pretendard';
    font-size: 16px;
}
.querychat-textarea .send-btn {
    position: absolute;
    right: 40px;
    bottom: 40px;
}
.querychat-wrap .logo-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.querychat-wrap .logo-content button {
    background-color: #E6ECFF;
    border: 1px solid #ccc;
    outline: none;
    padding: 4px 15px;
    color: #19305C;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.querychat-wrap .logo-content button i {
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/refresh-icon.png);
    width: 15px;
    height: 15px;
}
.querychat-wrap .chat-item {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3rem;
    max-height: 2em;
    white-space: normal;
    font-size: 15px;
}
.query-table table {
    text-align: left;
    border: 1px solid #eee;
    font-size: 15px;
}
.section-table.query-table thead, 
.section-table.query-table tbody tr {
    display: table;
    width: 100%;
}
.query-table table tbody {
    display: block;
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.query-table table tbody::-webkit-scrollbar {
    width: 10px;
}
.query-table table tbody::-webkit-scrollbar-track {
    margin: 8px;
}
.query-table table tbody::-webkit-scrollbar-thumb {
    background: #D0DBF7;
    border-radius: 10px;
    border: 2px solid #fff;
}
.query-table table tr th, .query-table table tr td {
    padding-left: 30px;
}
.query-table table tr td {
    padding-top: 10px;
    padding-bottom: 10px;
    table-layout: fixed;
}
.query-table table tr td p {
    line-height: 30px;
}



.querychat-container {
	flex: 1;
	overflow: hidden;
	height: 350px;
	padding: 0 !important;
	width: 100%;
	/* ✅ 버튼 절대 위치용 */
	position: relative;
}

/* ✅ 쿼리 샘플 버튼 */
.query-sample-btn {
	position: absolute;
	top: 20px;
	right: 40px;
	background-color: #E6ECFF;
	border: 1px solid #C5D0F0;
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 13px;
	color: #19305C;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.query-sample-btn:hover {
	background-color: #D4E1FF;
}



/* ========== result: 응답결과(신규 레이아웃) ========== */
.answer-wrap{
	display:flex;
	flex-direction:column;
	gap:18px;
}
.answer-card{
	background:#f5f8ff;               /* 기존 톤과 어울리는 아주 연한 블루 */
	border:1px solid #e3e8f5;
	border-radius:12px;
	padding:18px 20px;
}
.answer-card .card-title{
	font-weight:700;
	color:#20429A;                     /* 서비스 메인 블루와 통일 */
	font-size:16px;
	margin-bottom:10px;
	display:flex;
	align-items:center;
	gap:8px;
}
.answer-card .card-title::before{
	content:"";
	display:inline-block;
	width:18px; height:18px;
	background-image:url(../images/title-icon.png);
	background-size:contain; background-repeat:no-repeat;
	opacity:.85;
}

.answer-text{
	white-space:pre-wrap;
	word-break:keep-all;
	line-height:26px;
	color:#333;
}

/* 코드/쿼리/JSON 영역 */
.answer-pre{
	background:#eef1f7;
	border:1px solid #dee3ef;
	border-radius:10px;
	padding:14px 16px;
	overflow:auto;
	font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size:14px;
	line-height:1.5;
	color:#1f2937;
}

/* 상단 Export 버튼과 간격 살짝 정리 */
.result .section-header{ margin-bottom:16px; }
.result .result-btn{ gap:8px; }
.result .result-btn button{ width:80px; height:38px; border-radius:10px; }




/* ===== Data Download add-on (dl-) ===== */
.dl-wrap{display:flex;flex-direction:column;gap:24px;}

/* 상단 안내 박스 */
.dl-lead{background:#fff;border:1px solid #e6eaf3;border-radius:10px;padding:16px 18px;color:#444;line-height:24px;}
.dl-lead p{margin-bottom:10px;}
.dl-legend{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#666;}
.dl-legend li{display:flex;align-items:flex-start;gap:8px;}
.dl-legend li::before{content:"•";color:#20429A;margin-top:2px}

/* 3열 카드 */
.dl-grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);}
@media(max-width:1024px){.dl-grid{grid-template-columns:1fr;}}
.dl-card{background:#fff;border:1px solid #e6eaf3;border-radius:12px;padding:16px 18px;}
.dl-card-title{font-weight:700;color:#333;margin-bottom:6px;}
.dl-card-meta{font-size:13px;color:#777;margin-bottom:12px;}
.dl-card-actions{display:flex;gap:8px;}
.dl-btn{background:#fff;border:1px solid #cfd6e4;padding:6px 18px;border-radius:6px;font-size:14px;cursor:pointer;}
.dl-btn:hover{background:#f2f5fb;}
.dl-mini{padding:4px 10px;font-size:13px;border-radius:6px}

/* 표(공공데이터) */
.dl-table .section-table table{text-align:left;}
.dl-table .section-table thead{background:#eef2fb;}
.dl-table .section-table th,.dl-table .section-table td{padding:0 12px;height:40px;}
.dl-table .dl-source a{color:#20429A;text-decoration:underline;}
.dl-download{display:flex;gap:6px;justify-content:center;}

/* 페이지네이션 */
.dl-pagination{display:flex;gap:6px;justify-content:center;margin-top:12px;}
.dl-page{background:#fff;border:1px solid #cfd6e4;padding:6px 10px;border-radius:6px;font-size:14px;cursor:pointer;}
.dl-page:hover{background:#f2f5fb;}
.dl-page.is-active{background:#20429A;color:#fff;border-color:#20429A;}



/* ===== [Fix] Dynamic result table overflow & width sync ===== */

/* 0) Flex/grid 컨테이너에서 자식 폭 계산 깨지지 않게 */
.sub-container,
.section,
.querychat-wrap {
  min-width: 0;
}

/* 1) 테이블 래퍼에 가로 스크롤 허용 + 폭 제한 */
#tableScroll {
    width: 100%;
    max-width: 100%;
    max-height: 700px;
    overflow-y: auto;   /* 바깥쪽에서 세로 스크롤 */
    overflow-x: hidden; /* 가로 스크롤은 여기서 안띄움 */
    border-radius: 10px;
}

.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;  /* 내부에서 가로 스크롤 */
    overflow-y: hidden; /* 세로 스크롤 숨김, 세로는 외부에서 */
}

.table-scroll-wrapper th,
.table-scroll-wrapper td {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 8px 12px;
    border: 1px solid #ccc;
}




/* 2) 테이블은 고정 레이아웃으로 컬럼폭 동기화 */
.section-table.query-table > table {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;  /* 핵심: thead/tbody 분리 시 폭 차단 */
  border-collapse: collapse;
  background-color: #fbfbff;
}

/* 3) 셀 내부 콘텐츠 줄바꿈/랩핑 */
.section-table.query-table th,
.section-table.query-table td {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  vertical-align: top;
  word-break: break-all;     /* 긴 단어/키/URI 강제 줄바꿈 */
  overflow-wrap: anywhere;   /* 최신 브라우저 줄바꿈 보강 */
  white-space: pre-wrap;     /* JSON 줄바꿈 유지 */
}

/* 4) 링크도 박스 밖으로 안 새게 */
.section-table.query-table td a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 5) 스크롤 가능한 바디 스타일(기존 구조 유지) */
.section-table.query-table thead,
.section-table.query-table tbody tr {
  display: table;
  width: 100%;
}
.query-table table tbody {
  display: block;
  max-height: 600px;
  overflow-y: hidden;     /* 세로 스크롤 */
  overflow-x: hidden;   /* 가로는 래퍼(#tableScroll)에서 처리 */
}

/* 6) 헤더 고정 시 배경/가독성 보강(선택) */
#dynamicResultThead th {
  position: sticky;
  top: 0;
  background: #eef2fb;
  z-index: 1;
}


/* ===== [Fix] Header / Body column width sync ===== */

/* 헤더와 바디를 block 스크롤 구조에서 맞추기 */
.section-table.query-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.section-table.query-table tbody {
  display: block;
  max-height: 600px;
  overflow-y: auto;
  width: 100%;
}

/* 행도 테이블처럼 고정 */
.section-table.query-table tbody tr {
  display: table;
  table-layout: fixed;
  width: 100%;
}

/* 셀은 고정 폭 계산 */
.section-table.query-table th,
.section-table.query-table td {
  table-layout: fixed;
  word-break: break-all;
  overflow-wrap: anywhere;
}




/* ===== Graph/Table 탭 버튼 ===== */
.tab-btns { display:flex; gap:8px; margin-left:auto; margin-right:12px; }
.tab-btns .tab-btn {
  background:#fff; border:1px solid #cfd6e4; color:#19305C;
  padding:8px 16px; border-radius:999px; cursor:pointer; font-weight:600;
}
.tab-btns .tab-btn.active { background:#2563EB; color:#fff; border-color:#2563EB; }

/* === 질의결과 제목 옆에 Graph/Table 붙이기 (override) === */
.section-header{ justify-content:flex-start; gap:12px; } /* 기존 space-between 해제 */
.tab-btns{ margin-left:12px; margin-right:0; }           /* 기존 margin-left:auto 제거 */
.result-btn{ margin-left:auto; }                          /* CSV/RDF/JSON 버튼은 우측 정렬 */


/* ===== Graph Pane ===== */
.graph-pane{ position:relative; width:100%; height:600px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; }
.graph-stage{ position:relative; width:100%; height:100%; }

/* node/edge label */
.node-label{ font-size:6px; fill:#475569; pointer-events:none; user-select:none; }
.edge-label{ font-size:6px; fill:#64748b; opacity:.9; pointer-events:none; user-select:none; }

/* tools */
.graph-tools{ position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:8px; z-index:10; }
.graph-tools button,
.graph-tools-b button{
  width:36px; height:36px; border:1px solid #cfd6e4; background:#fff; border-radius:8px; cursor:pointer;
}
.graph-tools-b{ position:absolute; right:12px; bottom:12px; display:flex; flex-direction:column; gap:8px; z-index:10; }

/* node detail panel */
.node-detail{ position:absolute; top:12px; right:64px; width:380px; max-height:460px; overflow:auto; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:20; }
.node-detail.hidden{ display:none; }
.node-detail-h{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #eef2fb; }
.node-detail-t{ font-weight:700; font-size:14px; }
.node-detail-x{ border:0; background:none; cursor:pointer; color:#6b7280; }
.node-detail-b{ padding:10px 12px; font-size:13px; }
.nd-row{ display:grid; grid-template-columns:120px 1fr; gap:10px; padding:6px 0; align-items:flex-start; }
.nd-k{ color:#6b7280; word-break:break-all; }
.nd-v{ display:flex; align-items:flex-start; gap:8px; }
.nd-text{ word-break:break-all; }
.nd-type{ display:inline-block; padding:2px 8px; font-size:12px; border:1px solid #cfe0ff; color:#2563EB; background:#f3f7ff; border-radius:999px; }
.nd-empty{ color:#9ca3af; }

/* table 헤더 고정 가독성 */
#dynamicResultThead th { position:sticky; top:0; background:#eef2fb; z-index:1; }


/* 강조형 다운로드 버튼 */
.dl-btn-primary{
	background:#2563EB;
	color:#fff;
	border-color:#2563EB;
	font-weight:600;
	width:100%;
	justify-content:center;
}
.dl-btn-primary:hover{
	background:#1d4ed8;
	border-color:#1d4ed8;
}

/* ===== Region download layer (시도별) ===== */
.dl-layer{
	position:fixed;
	inset:0;
	background:rgba(15,23,42,.45);
	display:none;
	align-items:center;
	justify-content:center;
	z-index:1100;
}
.dl-layer.is-open{
	display:flex;
}
body.is-layer-open{
	overflow:hidden;
}
.dl-layer-panel{
	width:720px;
	max-width:calc(100% - 40px);
	background:#fff;
	border-radius:16px;
	box-shadow:0 18px 45px rgba(15,23,42,.35);
	overflow:hidden;
}
@media (max-width:640px){
	.dl-layer-panel{
		width:100%;
		max-width:calc(100% - 24px);
	}
}
.dl-layer-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:16px 20px;
	border-bottom:1px solid #e5e7eb;
}
.dl-layer-header h3{
	font-size:18px;
	font-weight:700;
	color:#111827;
}
.dl-layer-close{
	border:0;
	background:transparent;
	font-size:22px;
	line-height:1;
	cursor:pointer;
	color:#6b7280;
	padding:4px 6px;
}
.dl-layer-close:hover{
	color:#111827;
}
.dl-layer-body{
	padding:16px 20px 20px;
}
.dl-layer-sub{
	font-size:14px;
	color:#4b5563;
	margin-bottom:12px;
}
.dl-layer-badge{
	display:inline-flex;
	align-items:center;
	padding:3px 10px;
	border-radius:999px;
	background:#eef2ff;
	color:#1d4ed8;
	font-size:13px;
	font-weight:600;
	margin-right:4px;
}
.dl-layer-table table{
	width:100%;
	border-collapse:collapse;
	background:#fbfbff;
	font-size:14px;
}
.dl-layer-table thead{
	background:#eef2fb;
}
.dl-layer-table th,
.dl-layer-table td{
	border:1px solid #e5e7eb;
	padding:8px 10px;
	text-align:left;
	height:40px;
	vertical-align:middle;
}
.dl-layer-table tbody tr:nth-child(even){
	background:#f9fbff;
}
.dl-layer-actions{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
}
.dl-type-btn{
	background:#fff;
	border:1px solid #cfd6e4;
	padding:4px 10px;
	border-radius:999px;
	font-size:12px;
	cursor:pointer;
}
.dl-type-btn:hover{
	background:#f3f6ff;
	border-color:#2563eb;
	color:#1d4ed8;
}


/* ===== Region layer: compact row height ===== */

/* 셀 높이/패딩 축소 (기존 8px / 40px 정도 → 약 2/3 수준) */
.dl-layer-table th,
.dl-layer-table td{
	padding:4px 10px;   /* 기존 8px 에서 줄임 */
	height:30px;        /* 기존 40px 근처였다면 이 정도로 압축 */
}

/* 파일 형식 버튼 컴팩트 모드 */
.dl-layer-actions .dl-type-btn{
	padding:2px 10px;   /* 위아래 여백 줄이기 */
	min-height:26px;
	font-size:12px;     /* 살짝만 작게 */
	line-height:1.3;
}


/* 챗봇 안내 문구 */
.chat-disclaimer{
	margin-top:8px;
	font-size:12px;
	color:#9ca3af;          /* 연한 회색 */
	text-align:center;
	line-height:1.4;
}


/* ===== Open API 탭 패널 ===== */
.api-tab-panel {
	display: none;
	margin-top: 20px;
}
.api-tab-panel.is-active {
	display: block;
}

/* 탭 버튼 줄바꿈/간격 */
.api-tab-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.api-tab-buttons button {
	white-space: nowrap;
}



/* ===== 이용안내 페이지 ===== */
.usage-wrap{
	display:flex;
	flex-direction:column;
	gap:24px;
}
.usage-intro{
	margin-bottom:4px;
}
.usage-intro h1{
	font-size:18px;
	font-weight:700;
	margin-bottom:10px;
}
.usage-anchor{
	margin:10px 0 0;
	font-size:14px;
	color:#555;
}
.usage-anchor ol{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin-top:6px;
}
.usage-anchor li{
	padding:6px 10px;
	border-radius:999px;
	background:#eef2ff;
	color:#1e3a8a;
}
.usage-section{
	margin-top:10px;
}
.usage-grid .usage-card-text{
	font-size:14px;
	line-height:22px;
	color:#555;
	margin-top:4px;
}
.usage-detail h2{
	font-weight:700;
	font-size:16px;
	margin:18px 0 8px;
	color:#111827;
}
.usage-detail ul{
	margin-left:14px;
}
.usage-detail ul li{
	list-style:disc;
	margin-left:6px;
	line-height:24px;
}


.chat-wrap {
	display: flex;
	width: 100%;
	gap: 20px;
	margin-bottom: 20px;
}

/* 오른쪽: 대화창 */
.chat-container {
	flex: 1;
	overflow: hidden;
	height: 760px;        /* 기존 400px → 2배 */
	padding: 0 !important;
	order: 2;
}

/* 왼쪽: 추천질문 + History
   ✅ 대화형 서비스(.chat-wrap) 안에서만 적용되도록 스코프 */
.chat-wrap .sidebar {
	width: 320px;
	background: #fff;
	overflow: hidden;
	height: 760px;
	max-height: 760px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding: 0 !important;
	order: 1;
}




/* ========== history / 추천 질문 ========== */
.sidebar-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sidebar-section {
	padding: 20px 24px 18px;
	border-bottom: 1px solid #eee;
}

.sidebar-section:last-child {
	border-bottom: none;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.sidebar-title {
	display: flex;
	align-items: center;
	height: 32px;
	color: #20429A;
	font-size: 18px;
	font-weight: bold;
}

/* 추천 질문 리스트 */
.recommend-list {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 300px;
	overflow-y: auto;
	padding-right: 4px;
}

.recommend-list::-webkit-scrollbar {
	width: 4px;
}
.recommend-list::-webkit-scrollbar-thumb {
	background: #e9ecef;
	border-radius: 4px;
}

.recommend-item {
	width: 100%;
	text-align: left;
	border: 0;
	border-radius: 10px;
	padding: 8px 10px;
	font-size: 14px;
	line-height: 1.4;
	background: #f3f6ff;
	color: #111827;
	cursor: pointer;
}
.recommend-item:hover {
	background: #e1ebff;
}

/* 기존 history 영역은 하단 섹션 내부에서만 스크롤 */
.chat-history {
	color: #222;
	flex: 1;
	overflow: hidden;
	display: flex;
}

.sidebar-history .chat-history {
	flex: 1;
	min-height: 0;
}

.chat-item-wrap {
	overflow-y: scroll;
	height: 100%;
	padding: 12px 4px 12px 2px;
}

.chat-item {
	padding: 8px 10px;
	margin-bottom: 4px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s;
	font-size: 14px;
	opacity: 0.9;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #222;
	text-decoration: none;
}
.chat-item:hover {
	background: rgba(255, 255, 255, 0.9);
	opacity: 1;
}

.empty-history {
	font-size: 13px;
	color: #9ca3af;
	padding: 4px 4px 0 2px;
}

/* LLM 결과 하단 박스 숨김 */
.section.result{
	display:none;
}

/* ✅ Cypher 샘플 리스트 */
.sample-query-list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 500px;
	overflow-y: auto;
}

.sample-query-item {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #f9fafb;
	padding: 10px 12px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.sample-query-item:hover {
	background: #eef2ff;
	border-color: #2563eb;
}

.sample-query-title {
	font-size: 13px;
	font-weight: 600;
	color: #111827;
	margin-bottom: 4px;
}

.sample-query-body {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 12px;
	white-space: pre-wrap;
	word-break: break-all;
	color: #1f2937;
}