@charset "utf-8";
/* ============================================================
   대상 : 일반페이지 공유 템플릿 front/pages/page.html
          (11행에서 css/overrides/content.css 를 테마별 경로로 직접 참조한다)
   변경 : 파일 실체 제공 + 레거시 본문 보정
   이유 : 🔴 이 파일이 없어 **모든 일반페이지에서 404** 가 났다.
          템플릿이 테마 경로로 링크를 거는 구조라 파일이 실재해야 한다.

   ⚠ simple 테마의 content.css 를 복사하지 않았다.
     그쪽은 인사말 전용 클래스(.greet / .greet-hero / .greet-pic--ceo)를 정의하는데,
     KTDI 시안은 **다른 이름**(.greeting / .greeting_body / .greeting_img / .greeting_sign)을
     쓰고 그 스타일이 이미 시안 sub.css 에 들어 있다. 복사하면 안 쓰는 CSS 만 늘어난다.

   그래서 여기에는 **시안이 커버하지 못하는 것**만 넣는다:
     레거시에서 이관해 온 본문(일반페이지 22건·게시글 3,095건)에 든
     고정폭 table / 큰 img / inline style 이 레이아웃을 밀어내는 문제 보정.
   ============================================================ */

/* ── 레거시 본문 보정 ─────────────────────────────────────
   이관 본문에는 <table width="800">, <img width="900"> 같은 고정폭이 흔하다.
   그대로 두면 모바일에서 가로 스크롤이 생기고 PC 에서도 래퍼를 뚫는다. */
.page_content img {
	max-width: 100%;
	/* height: auto; */
}

.page_content table {
	max-width: 100%;
	border-collapse: collapse;
}

/* 표가 좁은 화면에서 잘리지 않도록 표 자체만 가로 스크롤시킨다
   (본문 전체가 스크롤되면 페이지가 흔들린다) */
.page_content > table {
	display: block;
	overflow-x: auto;
	white-space: normal;
}

.page_content iframe,
.page_content video,
.page_content embed,
.page_content object {
	max-width: 100%;
}

/* 레거시 에디터가 남긴 빈 문단이 과한 여백을 만든다 */
.page_content p:empty {
	display: none;
}

/* 본문 안 링크는 밑줄로 구분 (시안 기본은 밑줄 없음이라 본문에서 링크가 안 보인다) */
/* .page_content a:not([class]) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
} */
.page_content a:not([class]):hover {
	color: var(--main-color, #cd000b);
}

/* 첨부/다운로드 링크 — 레거시 본문에 파일 링크가 그대로 있는 경우 */
.page_content a[href*="/common/file/download.do"]::before {
	content: "download";
	font-family: "Material Symbols Outlined";
	font-size: 1.6rem;
	vertical-align: -0.25em;
	margin-right: 0.3rem;
}

/* ── 🔴 슬라이더 폭 폭주 방지 ─────────────────────────────
   연구개발 25개 페이지의 적용분야 슬라이더(.swiper.use_case/.core_tech 등)가
   화면에서 **슬라이드 폭이 3천만 px 로 폭주**했다(Playwright 로 확인).
   원인: 일반페이지 본문 래퍼 .content_wrap 이 display:flex 라, 그 자식 .swiper 가
   flex 아이템의 기본 min-width:auto 때문에 내용(수백 슬라이드 폭)만큼 무한히 커진다.
   → flex 컨텍스트에서 .swiper 를 부모 폭에 가둔다. Swiper 초기화 자체는 정상이었다. */
.page_content .content_wrap { min-width: 0; }
.page_content .swiper {
	min-width: 0;
	max-width: 100%;
	width: 100%;
}

/* ── 🔴 사이트맵 그리드 — 시안 셀렉터 보정 ─────────────────
   시안 CSS 는 `.sub_content.sitemap .sitemap_grid { display:grid }` 인데,
   우리 page.html 은 .sub_content 에 sitemap 클래스가 없어(본문이 .page_content 안)
   그리드가 안 걸려 세로로 쏟아졌다. 본문을 .sitemap 으로 감싸고 여기서 우리 구조에 맞춰 재정의.
   (시안 원본 sub.css 는 수정 금지 → override) */
.page_content .sitemap .sitemap_grid {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 2rem;
	align-items: start;
}
@media (max-width: 1200px) {
	.page_content .sitemap .sitemap_grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2rem; }
}
@media (max-width: 768px) {
	.page_content .sitemap .sitemap_grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.page_content .sitemap .sitemap_grid { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* ── 연혁(/about/history) 줄별 사진 크게 — 2026-09-28 발주처 #8 ────────────────
   대상 : sub.css .history_item .thumb (9rem ≈ 144px — 사진 내용이 안 보일 만큼 작았다)
   변경 : 약 2배(16rem). 해상도 단계별로 시안 비율을 유지해 줄인다. 사진은 cover 로 칸을 채운다. */
.history_item .thumb { width: 16rem; }
.history_item .thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 2022 장관표창 — 세로 사진(420×511)이라 2:1 칸에 가운데 기준으로 잘리면 얼굴이 빠지고 상패만 남았다
   (2026-10-12 발주처 #2 "얼굴 보이게"). 얼굴 높이(위에서 약 15%)를 기준으로 자른다. */
.history_item .thumb img[src$="/history_2022.png"] { object-position: center 15%; }
@media screen and (max-width: 1440px) { .history_item .thumb { width: 13rem; } }
@media screen and (max-width: 900px)  { .history_item .thumb { width: 10rem; } }
@media screen and (max-width: 500px)  { .history_item .thumb { width: 8.5rem; } }

/* ── CI(/about/ci) 대표 CI 다운로드 버튼 한 줄 — 2026-09-29 ─────────────────────
   대상 : .top.ci_1 .btn_wrap (AI파일 · PNG파일 다운로드)
   변경 : 버튼 묶음이 줄지 않게(flex-shrink:0) + 한 줄(nowrap). 좁은 화면(≤600px)은 줄바꿈 허용.
   이유 : 시안은 버튼이 1개였다. PNG 버튼(09-28 발주처 #5)을 더하자 옆의 긴 설명문에 밀려
          묶음 폭이 410px 로 줄고 두 번째 버튼이 아래 줄로 떨어졌다(아래 CI 다운로드 묶음은 528px 라 정상). */
.top.ci_1 .btn_wrap { flex-shrink: 0; flex-wrap: nowrap; }
@media screen and (max-width: 600px) { .top.ci_1 .btn_wrap { flex-wrap: wrap; } }