@charset "utf-8";
/* ============================================================
   news-summary.css — 알림마당 > AI 뉴스요약 (2026-11-05)
   대상  : templates/front/custom/ktdi/news-summary.html  (.news_summary 아래만)
   변경  : 안내문(.ai_notice) · 언론사 묶음(.sum_outlet) · AI 주간 요약 카드(.sum_digest) ·
           기사별 펼침 목록(.sum_toggle / .sum_panel) · AI 배지(.ai_badge / .ai_tag)
   이유  : 시안에 이 화면이 없다(과업지시서 과업 1 신규). 시안 색·글꼴 변수(common.css :root)와
           목록 검색바(.search_wrap)를 그대로 쓰고, 나머지 모양만 여기서 새로 둔다.
   ⚠ 시안 원본 CSS(common.css·sub.css)는 수정하지 않는다(개발규약).
   ⚠ 390px 폭에서 가로 스크롤이 생기지 않게 — 긴 제목·주소는 줄바꿈(overflow-wrap:anywhere).
   ============================================================ */

/* 🔴 [hidden] 은 display 규칙에 진다(.sum_panel 이 display 를 가지면 hidden 이 안 먹는다) — 먼저 못 박는다 */
.news_summary [hidden] {
	display: none !important;
}

/* 본문 최소 높이 — 요약이 적어도 푸터가 딸려 올라오지 않게(news-list.css 와 같은 값) */
.sub_content.news_summary .content_wrap {
	min-height: 60rem;
}
.news_summary .no_data {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 24rem;
	text-align: center;
}

/* ── AI 요약 안내문 ─────────────────────────────────────── */
.news_summary .ai_notice {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	padding: 1.2rem 1.4rem;
	border: 1px solid #cfd8ee;
	border-left: 4px solid var(--main-color);
	border-radius: 8px;
	background: #f5f7fc;
}
.news_summary .ai_notice .material-symbols-outlined {
	flex-shrink: 0;
	font-size: 1.4rem;
	color: var(--main-color);
	line-height: 1.5;
}
.news_summary .ai_notice p {
	font-size: 0.95rem;
	color: var(--sub-txt-color);
	line-height: 1.6;
}
.news_summary .ai_notice strong {
	display: block;
	color: var(--sub-tit-color);
	font-weight: 600;
}

/* ── 주차 검색바 — 시안 .search_wrap 그대로 + [조회] 버튼 ──── */
.news_summary .search_wrap .total {
	color: var(--sub-txt-color);
}
.news_summary .news_week_now {
	color: var(--sub-tit-color);
	font-weight: 600;
}
.news_summary .news_btn {
	flex: 0 0 auto;
	height: 3rem;
	padding: 0 1.6rem;
	border: 1px solid var(--main-color);
	border-radius: 6px;
	background: var(--main-color);
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
}
.news_summary .news_btn:hover {
	background: var(--main-color-dark);
}

/* ── 모두 펼치기 ─────────────────────────────────────────── */
.news_summary .sum_tools {
	display: flex;
	justify-content: flex-end;
	margin-top: 1.6rem;
}
.news_summary .sum_all {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--line-color-dark);
	border-radius: 6px;
	background: #fff;
	color: var(--sub-tit-color);
	font-size: 0.9rem;
	cursor: pointer;
}
.news_summary .sum_all .material-symbols-outlined {
	font-size: 1.2rem;
}
.news_summary .sum_all:hover {
	border-color: var(--main-color);
	color: var(--main-color);
}

/* ── 언론사 묶음 ─────────────────────────────────────────── */
.news_summary .sum_outlet {
	margin-top: 2rem;
}
.news_summary .sum_tools + .sum_outlet {
	margin-top: 0.8rem;
}
.news_summary .sum_outlet_head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	padding-bottom: 0.8rem;
	border-bottom: 2px solid var(--sub-tit-color);
}
.news_summary .sum_outlet_nm {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--tit-color);
	letter-spacing: -0.03em;
}
.news_summary .sum_outlet_cnt {
	font-size: 0.95rem;
	color: var(--sub-txt-color);
}
.news_summary .sum_outlet_cnt strong {
	color: var(--main-color);
	font-weight: 600;
}

/* ── AI 배지 ─────────────────────────────────────────────── */
.news_summary .ai_badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.3rem 0.6rem;
	border-radius: 4px;
	background: var(--main-color);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
}
.news_summary .ai_badge .material-symbols-outlined {
	font-size: 1rem;
	color: #fff;
}
.news_summary .ai_tag {
	flex-shrink: 0;
	padding: 0.15rem 0.4rem;
	border-radius: 3px;
	background: #eef1f8;
	color: var(--main-color);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
}

/* ── AI 주간 요약 카드 ─────────────────────────────────────── */
.news_summary .sum_digest {
	margin-top: 1.2rem;
	padding: 1.4rem 1.6rem;
	border-radius: 10px;
	background: var(--bg-sub-light);
}
.news_summary .sum_digest_lines {
	margin-top: 0.8rem;
}
.news_summary .sum_digest_lines li {
	position: relative;
	padding-left: 1rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--sub-tit-color);
	overflow-wrap: anywhere;
}
.news_summary .sum_digest_lines li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.75em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--main-color);
}
.news_summary .sum_digest_meta {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	color: var(--sub-txt-color);
}
.news_summary .sum_digest_none {
	padding: 1rem 1.6rem;
	font-size: 0.95rem;
	color: var(--sub-txt-color);
}

/* ── 기사별 펼침 목록 ─────────────────────────────────────── */
.news_summary .sum_list {
	margin-top: 1rem;
	border-top: 1px solid var(--line-color);
}
.news_summary .sum_item {
	border-bottom: 1px solid var(--line-color);
}
.news_summary .sum_toggle {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"head ico"
		"preview ico";
	align-items: center;
	gap: 0.4rem 1rem;
	width: 100%;
	padding: 1.2rem 1rem;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s;
}
.news_summary .sum_toggle:hover {
	background: #f0f1f4;
}
.news_summary .sum_toggle:focus-visible {
	outline: 2px solid var(--main-color);
	outline-offset: -2px;
}
.news_summary .sum_head {
	grid-area: head;
	display: flex;
	align-items: baseline;
	gap: 0.4rem 1rem;
	min-width: 0;
}
.news_summary .sum_tit {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--sub-tit-color);
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.news_summary .sum_toggle:hover .sum_tit,
.news_summary .sum_toggle[aria-expanded="true"] .sum_tit {
	color: var(--main-color);
}
.news_summary .sum_date {
	flex-shrink: 0;
	font-size: 0.9rem;
	color: #999;
}
.news_summary .sum_preview {
	grid-area: preview;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	font-size: 0.95rem;
	color: var(--sub-txt-color);
}
.news_summary .sum_preview > span:last-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* 펼치면 미리보기 줄은 감춘다 — 아래 패널에 3줄이 다 나온다 */
.news_summary .sum_toggle[aria-expanded="true"] .sum_preview {
	display: none;
}
.news_summary .sum_ico {
	grid-area: ico;
	font-size: 1.6rem;
	color: #9aa0ab;
	transition: transform 0.2s;
}
.news_summary .sum_toggle[aria-expanded="true"] .sum_ico {
	transform: rotate(180deg);
	color: var(--main-color);
}

.news_summary .sum_panel {
	padding: 0 1rem 1.4rem;
}
.news_summary .sum_lines {
	margin-top: 0.7rem;
	padding: 1rem 1.2rem;
	border-radius: 8px;
	background: #f7f8fb;
}
.news_summary .sum_lines li {
	position: relative;
	padding-left: 1.4rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--sub-tit-color);
	overflow-wrap: anywhere;
	counter-increment: sumline;
}
.news_summary .sum_lines {
	counter-reset: sumline;
}
.news_summary .sum_lines li::before {
	content: counter(sumline) ".";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--main-color);
	font-weight: 600;
}
.news_summary .sum_src {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.2rem 0.3rem;
	margin-top: 0.9rem;
	color: var(--main-color);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.news_summary .sum_src_nm {
	font-weight: 400;
	color: var(--sub-txt-color);
}
.news_summary .sum_src .material-symbols-outlined {
	font-size: 1.1rem;
}

/* 요약 없는 기사 안내 */
.news_summary .sum_more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.8rem;
	margin-top: 0.8rem;
	font-size: 0.9rem;
	color: var(--sub-txt-color);
}
.news_summary .sum_more a {
	display: inline-flex;
	align-items: center;
	color: var(--main-color);
	font-weight: 600;
}
.news_summary .sum_more a .material-symbols-outlined {
	font-size: 1.1rem;
}

/* ── 태블릿·모바일 ───────────────────────────────────────── */
@media screen and (max-width: 900px) {
	.news_summary .search_wrap .search_form .select_box {
		flex: 1 1 0;           /* 시안은 100% 로 쌓는다 — 여기선 [조회] 와 한 줄 */
		min-width: 0;
	}
	.news_summary .search_wrap .search_form .select_box select {
		min-width: 0;
	}
	.news_summary .sum_head {
		flex-direction: column;
		gap: 0.2rem;
	}
	.news_summary .sum_toggle {
		padding: 1rem 0.2rem;
		gap: 0.4rem 0.6rem;
	}
	.news_summary .sum_tit {
		font-size: 1.05rem;
	}
	.news_summary .sum_date {
		font-size: 0.85rem;
	}
	.news_summary .sum_panel {
		padding: 0 0.2rem 1.2rem;
	}
	.news_summary .sum_digest {
		padding: 1.1rem 1.1rem;
	}
	.news_summary .sum_digest_lines li {
		font-size: 1rem;
	}
	.news_summary .sum_outlet_nm {
		font-size: 1.25rem;
	}
}
@media screen and (max-width: 500px) {
	/* 주차 이름이 390px 에서 잘리지 않게 — 셀렉트·[조회] 를 한 줄씩 꽉 채운다 */
	.news_summary .search_wrap .search_form .select_box {
		flex: 1 1 100%;
	}
	.news_summary .search_wrap .search_form .select_box select {
		padding: 0 1.8rem 0 0.7rem;
		font-size: 0.9rem;
		background-position: right 0.6rem center;
	}
	.news_summary .news_btn {
		flex: 1 1 100%;
	}
	.news_summary .ai_notice {
		padding: 1rem;
	}
	.news_summary .ai_notice p {
		font-size: 0.9rem;
	}
	.news_summary .sum_lines {
		padding: 0.9rem 0.9rem;
	}
}