@charset "utf-8";
/*
 * GIDIS 개편 (2026.08) - 신규 컴포넌트
 *
 * 모든 클래스에 gd- 접두어를 붙여 기존 스타일시트(base/style/style_2/style_3)와
 * 셀렉터가 겹치지 않게 한다. 기존 클래스의 색·형태 조정은 gd-theme.css 에서 한다.
 */

/* ===================================================================
 * 공통
 * =================================================================== */
.gd-inner { max-width: 1400px; margin: 0 auto; padding: 0 48px; }

.gd-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--gd-primary-strong);
	background: var(--gd-surface-mint);
	padding: 5px 12px;
	border-radius: 20px;
	margin-bottom: 14px;
}

.gd-section-title { font-size: 24px; font-weight: 700; color: var(--gd-text); margin: 0 0 6px; }
.gd-section-desc { font-size: 15px; color: var(--gd-text-mute); margin: 0 0 26px; }

.gd-btn {
	display: inline-block;
	border-radius: var(--gd-radius-btn);
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}
.gd-btn-primary { background: var(--gd-primary); color: #fff; border: 1px solid var(--gd-primary); }
.gd-btn-primary:hover, .gd-btn-primary:focus { background: var(--gd-primary-strong); border-color: var(--gd-primary-strong); color: #fff; }
.gd-btn-secondary { background: #fff; color: var(--gd-primary-strong); border: 1px solid var(--gd-primary-soft); }
.gd-btn-secondary:hover, .gd-btn-secondary:focus { background: var(--gd-surface-mint); color: var(--gd-primary-strong); }
.gd-btn[disabled], .gd-btn.is-disabled { opacity: .45; cursor: default; }

/* ===================================================================
 * 메인 : 히어로
 * =================================================================== */
.gd-hero { display: table; width: 100%; table-layout: fixed; min-height: 420px; }
.gd-hero-text {
	display: table-cell;
	width: 50%;
	vertical-align: middle;
	background: var(--gd-surface-mint);
	padding: 56px 48px;
}
.gd-hero-eyebrow { font-size: 14px; font-weight: 600; color: var(--gd-primary-strong); margin: 0 0 16px; }
.gd-hero-text h2 {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--gd-text);
	margin: 0 0 18px;
}
.gd-hero-text p { font-size: 16px; color: var(--gd-text-sub); line-height: 1.7; margin: 0 0 26px; max-width: 520px; }
.gd-hero-cta { font-size: 0; }
.gd-hero-cta .gd-btn { margin-right: 12px; }
/* 히어로 사진 칸. 이미지 경로는 CSS 가 아니라 main.jsp 의 heroImages 목록에서 온다. */ 
.gd-hero-photo {
	display: table-cell;
	width: 50%;
	position: relative;			/* 슬라이드 절대배치의 기준 */
	overflow: hidden;
	background-color: var(--gd-surface-gray);
}

/* 히어로 배너 슬라이더
 * 슬라이드를 같은 자리에 겹쳐 두고 is-active 가 붙은 1장만 보이게 한다.
 * 클래스를 옮기는 일은 gd-hero-slider.js 가, 페이드는 아래 transition 이 한다. */
.gd-hero-slider,
.gd-hero-slides { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.gd-hero-slide {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity .6s ease-in-out;
}
.gd-hero-slide.is-active { opacity: 1; }

/* 스크립트가 실행되지 않아도 첫 장은 보이게 한다.
 * gd-hero-slider.js 가 뜨면 .is-ready 를 붙여 제어권을 가져간다. */
.gd-hero-slider:not(.is-ready) .gd-hero-slide:first-child { opacity: 1; }

.gd-hero-dots {
	position: absolute;
	left: 28px; bottom: 24px;
	z-index: 2;
	font-size: 0;
	padding: 7px 11px;
	border-radius: 20px;
	background: rgba(255, 255, 255, .8);		/* 밝은 사진 위에서도 점이 보이게 */
}
.gd-hero-dot {
	display: inline-block;
	width: 10px; height: 10px;
	margin: 0 5px;
	padding: 0;
	border: 1px solid var(--gd-primary);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	vertical-align: middle;
}
.gd-hero-dot.is-active { background: var(--gd-primary); }
.gd-hero-dot:focus { outline: 2px solid var(--gd-primary-strong); outline-offset: 2px; }

/* 모션 최소화를 설정한 사용자에게는 페이드를 걸지 않는다(자동 전환도 JS 에서 멈춘다) */
@media (prefers-reduced-motion: reduce) {
	.gd-hero-slide { transition: none; }
}

/* ===================================================================
 * 메인 : 사업별 시스템 카드
 * =================================================================== */
.gd-sys-section { padding: 56px 0; }
.gd-sys-section + .gd-sys-section { padding-top: 0; }
.gd-sys-head { text-align: center; margin-bottom: 28px; }
.gd-sys-head .gd-section-desc { margin-bottom: 0; }

.gd-card-row { display: block; font-size: 0; margin: 0 -8px; }
.gd-sys-card {
	display: inline-block;
	vertical-align: top;
	width: 25%;      /* 기본(1기) : 가로 4개 */
	padding: 0 8px;
	margin-bottom: 16px;
}

/* 2기는 가로 3개로 한 줄을 꽉 채운다(1기 줄과 전체 너비를 맞추기 위함).
   결과적으로 카드 하나의 크기는 2기가 크고 1기가 작아진다.
   min-width 로 감싸 두면 아래 반응형 구간(1200/900/600px)에서는
   기본 .gd-sys-card 규칙이 그대로 적용되므로 반응형을 따로 손볼 필요가 없다. */
@media (min-width: 1201px) {
	.gd-sys-section.is-phase2 .gd-sys-card { width: 33.3333%; }
}
.gd-sys-card > a {
	display: block;
	height: 100%;
	background: var(--gd-surface-gray);
	border: 2px solid transparent;
	border-radius: var(--gd-radius-card);
	padding: 26px 20px;
	text-align: center;
	text-decoration: none;
	color: inherit;
}
.gd-sys-card > a:hover, .gd-sys-card > a:focus {
	background: #fff;
	border-color: var(--gd-primary-soft);
}
.gd-sys-card i { font-size: 26px; color: var(--gd-primary); }
.gd-sys-card strong { display: block; font-size: 15px; font-weight: 700; color: var(--gd-text); margin: 14px 0 6px; }
.gd-sys-card span { display: block; font-size: 13px; color: var(--gd-text-mute); }

/* ===================================================================
 * 메인 : 연구 데이터 및 소식
 * =================================================================== */
.gd-news { padding: 0 0 64px; }
/* 세 칼럼의 색칠된 카드 높이를 같게 맞춘다.
   inline-block 은 내용 길이만큼만 늘어나 카드 높이가 제각각이 되므로 flex 로 바꾼다.
   flex 자식은 기본 align-items:stretch 라 가장 큰 칼럼 높이에 맞춰진다. */
.gd-news-grid { display: flex; flex-wrap: wrap; align-items: stretch; margin: 20px -8px 0; }
.gd-news-col { display: flex; vertical-align: top; padding: 0 8px; margin-bottom: 16px; }
.gd-news-col > div { width: 100%; }
.gd-news-col.is-feature { width: 50%; }
.gd-news-col.is-list { flex: 1 1 0; }

.gd-feature-card {
	background: var(--gd-surface-warm);
	border-radius: var(--gd-radius-card);
	padding: 26px;
	height: 100%;
}
.gd-feature-card .gd-tag { font-size: 12px; font-weight: 700; color: var(--gd-warm-text); }
.gd-feature-card ul { list-style: none; margin: 12px 0 0; padding: 0; }
.gd-feature-card li { margin-bottom: 10px; }
.gd-feature-card li a {
	font-size: 16px;
	line-height: 1.5;
	color: var(--gd-warm-text-strong);
	text-decoration: none;
	cursor: pointer;
}
.gd-feature-card li a:hover { text-decoration: underline; }

.gd-list-card {
	background: var(--gd-surface-gray);
	border-radius: var(--gd-radius-card);
	padding: 24px;
	height: 100%;
}
.gd-list-card h4 { font-size: 15px; font-weight: 700; margin: 0 0 14px; color: var(--gd-text); }
.gd-list-card h4 i { color: var(--gd-primary); margin-right: 6px; }
.gd-list-card h4 .gd-more { float: right; font-size: 12px; font-weight: 400; color: var(--gd-text-mute); text-decoration: none; }
.gd-list-card ul { list-style: none; margin: 0; padding: 0; }
.gd-list-card li { font-size: 13px; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-list-card li a { color: var(--gd-text-sub); text-decoration: none; cursor: pointer; }
.gd-list-card li a:hover { color: var(--gd-primary); }
.gd-list-card li span { float: right; color: var(--gd-text-mute); font-size: 12px; margin-left: 8px; }

/* ===================================================================
 * 서브페이지 : 브레드크럼 + 2단 레이아웃
 * =================================================================== */
.gd-breadcrumb {
	background: var(--gd-surface-sunk);
	border-bottom: 1px solid var(--gd-border);
	padding: 12px 48px;
	font-size: 13px;
	color: var(--gd-text-mute);
}
.gd-breadcrumb ol { list-style: none; margin: 0; padding: 0; }
.gd-breadcrumb li { display: inline-block; }
.gd-breadcrumb li + li:before { content: "\203A"; color: #bbb; margin: 0 8px; }
.gd-breadcrumb a { color: var(--gd-primary); text-decoration: none; }
.gd-breadcrumb .gd-current { color: var(--gd-text); font-weight: 600; }

.gd-layout { display: table; width: 100%; table-layout: fixed; }
.gd-lnb {
	display: table-cell;
	/* 메뉴명 글자를 16px 로 키웠으므로(아래 .gd-lnb-* 참고) 폭도 260px → 320px 로 넓힌다.
	   .gd-layout 이 table-layout:fixed 라 이 폭만 바꾸면 .gd-content 가 자동으로 줄어든다. */
	width: 320px;
	vertical-align: top;
	border-right: 1px solid var(--gd-border);
	padding: 24px 0 48px;
	background: #fff;
}
.gd-content { display: table-cell; vertical-align: top; padding: 36px 40px 64px; }

/* ===================================================================
 * 서브페이지 : LNB (아코디언)
 * =================================================================== */
.gd-lnb-title { padding: 0 24px 16px; font-size: 18px; font-weight: 700; color: var(--gd-text); line-height: 1.4; word-break: keep-all; }
.gd-lnb-group { border-top: 1px solid #f0f0f0; }
.gd-lnb-group-header {
	display: block;
	width: 100%;
	padding: 15px 24px;
	background: var(--gd-surface-sunk);
	border: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--gd-text-sub);
	text-align: left;
	cursor: pointer;
	word-break: keep-all;
}
.gd-lnb-group-header i { float: right; color: #999; margin-top: 2px; }
.gd-lnb-group.is-open .gd-lnb-group-header { color: var(--gd-primary-strong); }
.gd-lnb-group.is-open .gd-lnb-group-header i { color: var(--gd-primary); }
.gd-lnb-items { list-style: none; margin: 0; padding: 0; display: none; }
.gd-lnb-group.is-open .gd-lnb-items { display: block; }
.gd-lnb-items li a {
	display: block;
	padding: 12px 24px 12px 32px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--gd-text-sub);
	text-decoration: none;
	border-left: 2px solid transparent;
	/* 긴 메뉴명이 접힐 때 한글이 글자 단위로 잘리지 않게 띄어쓰기 자리에서만 끊는다 */
	word-break: keep-all;
}
.gd-lnb-items li a:hover { background: var(--gd-surface-mint); color: var(--gd-primary-strong); }
.gd-lnb-items li a.is-active {
	background: var(--gd-primary-strong);
	border-left-color: var(--gd-primary-strong);
	color: #fff;
	font-weight: 600;
}
/* 자식이 없는 Level 2 (단일 항목)
   들여쓰기는 그룹 헤더(24px)와 하위 항목(32px) 사이인 30px 을 쓴다.
   그룹 헤더와 같은 24px 이면 눌러서 들어가는 메뉴인지 묶음 이름인지 구분이 안 되고,
   하위 항목과 같은 32px 이면 상위에 그룹이 있는 것처럼 보인다. */
.gd-lnb-single { border-top: 1px solid #f0f0f0; }
.gd-lnb-single a {
	display: block;
	padding: 15px 24px 15px 30px;
	font-size: 16px;
	font-weight: 600;
	color: var(--gd-text-sub);
	text-decoration: none;
	border-left: 2px solid transparent;
	word-break: keep-all;
}
.gd-lnb-single a:hover { background: var(--gd-surface-mint); color: var(--gd-primary-strong); }
.gd-lnb-single a.is-active {
	background: var(--gd-primary-strong);
	border-left-color: var(--gd-primary-strong);
	color: #fff;
}

/* ===================================================================
 * 서브페이지 : 페이지 머리
 * =================================================================== */
.gd-page-head { margin-bottom: 24px; text-align: center; }
.gd-page-head h2 { font-size: 29px; font-weight: 700; color: var(--gd-text); margin: 0 0 12px; line-height: 1.35; }
/* 리드 문장 : 페이지 머리 안(SubLayout)과 본문 첫 문단 모두에서 쓴다.
   white-space:nowrap 이라 줄바꿈 자리는 JSP 의 <br> 이 정한다. 글자를 키우면 줄이
   바뀌는 대신 줄 자체가 길어지므로, 긴 문구는 <br> 을 한 군데 더 넣어 잘라야 한다. */
.gd-lead { font-size: 17px; color: var(--gd-text-sub); line-height: 1.75; font-weight: 800; white-space: nowrap;  max-width: none;  margin: 0 auto 22px; text-align: center; }
.gd-page-head .gd-lead { margin-bottom: 0; }

/* 연구기관 정보
   좌측 정렬로 항목을 붙여 놓는다. 남는 폭을 균등 분배하면 항목 사이가 과하게
   벌어져 어느 값이 어느 항목의 것인지 읽기 어렵다.
   각 항목은 nowrap 이라 기관명 중간에서 끊기지 않고, 폭이 모자라면 줄바꿈한다.
   위아래 구분선의 길이는 그 화면 도식의 폭(--gd-block-max)에 맞춘다. 폭을 열어 두면
   선만 본문 칼럼 끝까지 뻗어 도식·초록 띠·버튼 줄과 시작·끝이 어긋난다. */
.gd-meta-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 30px;
	row-gap: 6px;
	border-top: 1px solid var(--gd-border);
	border-bottom: 1px solid var(--gd-border);
	padding: 14px 0;
	max-width: var(--gd-block-max, var(--gd-diagram-max));
	margin: 0 auto 28px;
	font-size: 14px;
}
.gd-meta-bar dl { margin: 0; white-space: nowrap; }
.gd-meta-bar dt { display: inline; color: var(--gd-text-mute); margin-right: 5px; }
.gd-meta-bar dd { display: inline; margin: 0; font-weight: 700; color: var(--gd-text); }

/* ===================================================================
 * 서브페이지 : 프로세스 밴드
 * =================================================================== */
/* 밴드 폭은 아래 도식과 똑같이 잡고 가운데에 둔다(--gd-block-max : 2기 화면은 1011px).
   예전에는 width:max-content 로 글자 길이가 폭을 정했는데, 도식 폭을 고정한 뒤로는
   밴드만 좁아 보였다(5단계 864px vs 도식 1011px). 폭을 아예 열어 두면 반대로 큰
   모니터에서 칼럼 끝까지 늘어나므로, 도식과 같은 상한을 쓰는 것이 답이다.
   빈 자리는 단계들이 flex 로 나눠 갖는다. 단계가 4개인 화면과 5개인 화면 모두
   같은 폭이 되고 칸 너비만 달라진다. */
.gd-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	background: var(--gd-primary-strong);
	border-radius: var(--gd-radius-panel);
	width: auto;
	max-width: var(--gd-block-max, var(--gd-diagram-max));
	padding: 28px 32px;
	margin: 0 auto 32px;
	color: #fff;
	text-align: center;
	font-size: 15px;
}
.gd-flow-step { flex: 1 1 0; min-width: 0; padding: 0 12px; }
.gd-flow-step i { font-size: 32px; }
.gd-flow-step p { font-size: 15px; margin: 10px 0 0; color: #fff; }
.gd-flow-arrow { flex: 0 0 auto; font-size: 20px; opacity: .55; margin: 0; }


/* ===================================================================
 * 서브페이지 : 서비스 카드 / 항목 목록
 * =================================================================== */
.gd-sub-heading { font-size: 17px; font-weight: 700; color: var(--gd-text); margin: 32px 0 16px; }
.gd-sub-heading:first-child { margin-top: 0; }

/* 카드 두 장의 높이를 맞춘다. inline-block 이던 시절에는 글이 짧은 쪽 상자가
   짧게 끝나 두 장의 크기가 달라 보였다. flex + stretch 로 항상 같은 높이가 된다. */
.gd-service-grid { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0 -8px 12px; }
.gd-service-card { display: flex; width: 50%; padding: 0 8px; margin-bottom: 16px; }
.gd-service-card > div {
	width: 100%;
	background: var(--gd-surface-gray);
	border-radius: 12px;
	padding: 22px;
	height: 100%;
}
/* 카드 안은 가로 flex + 줄바꿈.
   첫 줄에 번호와 제목이 나란히 놓이고, 본문(p·ul)은 flex-basis 100% 라 다음 줄로
   떨어진다. 마크업(번호 div → h4 → 본문)은 그대로 두고 배치만 바꾼다. */
.gd-service-card > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* 두 카드의 높이를 맞추느라 상자가 늘어나도 내용은 위쪽에 붙여 둔다. */
	align-content: flex-start;
}
.gd-service-num {
	flex: 0 0 26px;
	width: 26px; height: 26px; line-height: 26px;
	border-radius: 50%;
	background: var(--gd-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	margin: 0;
}
.gd-service-card h4 {
	flex: 1 1 0;
	min-width: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--gd-text);
	margin: 0 0 0 10px;
}
.gd-service-card p, .gd-service-card li { font-size: 13px; color: var(--gd-text-sub); line-height: 1.7; margin: 0; }
.gd-service-card > div > p, .gd-service-card ul { flex: 0 0 100%; margin: 10px 0 0; }
.gd-service-card ul { padding-left: 16px; }

/* 태그 묶음 (감염병 종류, 데이터 항목 등) */
.gd-chips { margin: 0 0 8px; padding: 0; list-style: none; font-size: 0; }
.gd-chips li {
	display: inline-block;
	font-size: 12px;
	color: var(--gd-primary-strong);
	background: var(--gd-surface-mint);
	border-radius: 20px;
	padding: 4px 11px;
	margin: 0 6px 6px 0;
}

/* 정의형 목록 (모델·대시보드 등 이름 + 설명) */
/* inline-block 은 내용 길이만큼만 늘어나 박스 높이가 제각각이 되므로 flex 로
   두고 stretch 에 맡긴다.
   카드는 한 줄에 한 장씩 세로로 쌓는다(2026.09). 가로 3단일 때는 카드 폭이 326px 라
   안에 든 대시보드 화면이 288px 로 줄어 글자를 읽을 수 없었다. 세로로 쌓으면
   카드가 도식과 같은 폭(2기 1011px)이 되고 화면도 제 크기로 보인다. */
.gd-def-grid { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0 -8px 12px; }
.gd-def { display: flex; width: 100%; padding: 0 8px; margin-bottom: 16px; }
.gd-def > div { width: 100%; }
.gd-def > div {
	background: #fff;
	border: 1px solid var(--gd-border-strong);
	border-radius: 12px;
	padding: 18px;
	height: 100%;
}
.gd-def strong { display: block; font-size: 14px; color: var(--gd-text); margin-bottom: 6px; }
.gd-def code {
	display: inline-block;
	font-family: Consolas, Monaco, monospace;
	font-size: 12px;
	color: var(--gd-primary-strong);
	background: var(--gd-surface-mint);
	border-radius: 4px;
	padding: 1px 7px;
}
.gd-def p { font-size: 13px; color: var(--gd-text-sub); line-height: 1.65; margin: 6px 0 0; }

/* 이미지 도식 (연구기관 제공 구성도 등)
   원본 크기를 넘겨 확대하지 않도록 max-width 를 실제 폭에 맞춘다. */
/* 도식 블록 : 소제목과 도식의 왼쪽 선을 맞춘다.
   한 장짜리 도식(.gd-figure img)은 폭 상한(--gd-diagram-max) + margin:auto 로 가운데
   정렬이라, 본문 칼럼이 그보다 넓어지면 칼럼 왼쪽 끝에 붙는 소제목과 어긋난다.
   (칼럼은 .gd-layout 이 width:100% 라 화면을 넓히거나 배율을 낮출수록 계속 넓어진다)
   소제목과 도식을 같은 폭의 상자에 함께 넣어 두 왼쪽 선을 하나로 묶는다.
   도식 여러 장(.gd-figure-row)이나 정의형 목록(.gd-def-grid)은 칼럼 전체 폭을 쓰므로
   이미 소제목과 선이 맞는다. 그런 화면에는 이 상자를 씌우지 않는다. */
.gd-figure-block { max-width: var(--gd-block-max, var(--gd-diagram-max)); margin: 0 auto; }
/* 도식 폭이 공통 상한과 다른 화면은 --gd-block-max 만 따로 준다.
   감염병정보수집(.risk_area)은 원본 조각 크기(673x2 + 여백) 때문에 1380px 이 필요하다. */
.gd-figure-block.is-collect { --gd-block-max: 1362px; }
.gd-figure-block .gd-figure img { margin: 0; }

.gd-figure { margin: 0 0 28px; }
.gd-figure img {
	display: block;
	width: 100%;
	max-width: var(--gd-diagram-max);
	height: auto;
	margin: 0 auto;
	border: 1px solid var(--gd-border);
	border-radius: var(--gd-radius-panel);
}
.gd-figure figcaption { font-size: 13px; color: var(--gd-text-mute); margin-top: 8px; }

/* 스크린샷 : 클릭하면 원본 크기로 확대 (gd-lightbox.js)
   JS 가 없어도 a[href] 가 이미지 원본으로 이동하므로 기능이 죽지 않는다. */
.gd-shot-link { display: block; position: relative; margin-top: 12px; cursor: zoom-in; }
/* 원본보다 크게 늘리지 않는다. 카드 폭(1011px 일 때 안쪽 973px)보다 작은 화면은
   제 크기 그대로 가운데에 놓인다. 973px 이상으로 다시 뽑은 이미지로 교체하면
   이 규칙을 그대로 둔 채 카드를 꽉 채우게 된다. */
.gd-shot-link img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto;
	border: 1px solid var(--gd-border); }
.gd-shot-link .gd-zoom-hint {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: rgba(8, 80, 65, .85);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 4px;
	opacity: 0;
	transition: opacity .15s;
}
.gd-shot-link:hover .gd-zoom-hint,
.gd-shot-link:focus .gd-zoom-hint { opacity: 1; }

.gd-lightbox {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 2000;
	background: rgba(0, 0, 0, .82);
	text-align: center;
	padding: 40px 24px;
	overflow: auto;
}
.gd-lightbox img {
	max-width: 100%;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
}
.gd-lightbox-cap { color: #fff; font-size: 14px; margin: 14px auto 0; max-width: 900px; }
.gd-lightbox-close {
	position: fixed;
	top: 16px;
	right: 24px;
	width: 40px; height: 40px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.gd-lightbox-close:hover { background: rgba(255, 255, 255, .15); }
body.gd-lightbox-open { overflow: hidden; }

/* 도식을 여러 장 나란히 놓을 때. 넓은 화면 3열, 좁아지면 1열로 떨어뜨려
   그림 속 글자를 읽을 수 있게 한다. 원본 폭(1000px)을 넘겨 확대하지 않는다. */
.gd-figure-row { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 -8px 28px; }
.gd-figure-row .gd-figure { width: 33.333%; padding: 0 8px; margin: 0 0 16px; }
/* 여기서 .gd-figure img 의 max-width 를 1000px 로 올려 두었었다. 원본이 약 410px 인
   도식이 1000px 까지 확대돼 화질이 뭉개졌고, 상한이 사실상 없어 배율을 낮출수록
   칸이 계속 벌어졌다. 지금은 .gd-figure-block 이 묶음 전체 폭을 잡으므로 그 규칙을
   두지 않는다. 칸 폭은 블록 폭의 1/3 이 된다. */
@media (max-width: 1200px) { .gd-figure-row .gd-figure { width: 100%; } }

/* 바로가기 / 매뉴얼 다운로드 / 홍보 동영상 보기 버튼.
   바로 아래 안내 문구(.gd-note)와 같은 세로선에서 시작한다.
   (첫 버튼에 왼쪽 여백을 주면 그 문구보다 안쪽으로 밀리므로 여백은 오른쪽에만 둔다)

   폭은 위쪽 도식과 똑같이 잡고 가운데 정렬한다. 도식은 제 폭에서 멈춘 뒤 가운데
   놓이는데 버튼 줄만 칼럼 왼쪽 끝에 붙어 있으면, 칼럼이 도식보다 넓어지는 순간부터
   (= 화면을 넓히거나 배율을 낮추면) 둘이 벌어진다. 같은 폭·같은 중심을 쓰면 어느
   배율에서도 버튼이 도식 왼쪽 아래 모서리에 그대로 붙는다.
   폭 값은 아래 --gd-block-max 목록이 화면별로 정한다. */
.gd-cta-row,
.gd-note {
	max-width: var(--gd-block-max, var(--gd-diagram-max));
	margin-left: auto;
	margin-right: auto;
}
.gd-cta-row { margin-top: 8px; font-size: 0; text-align: left; }
.gd-cta-row .gd-btn { margin: 0 10px 10px 0; }
.gd-note { font-size: 13px; color: var(--gd-text-mute); margin-top: 6px; margin-bottom: 0; }

/* 화면별 도식 폭
   2기 6개 화면(ksimid·epiwave·aida·epiField·ecoDisease·refMaterial)은 도식 폭을
   --gd-diagram-max 로 통일해 두었으므로 기본값이 그대로 맞는다. 따로 적지 않는다.
   1기 11개 화면은 도식 구성이 제각각이라 화면마다 값을 적는다.
   값은 브라우저에서 도식이 실제로 그려지는 폭(가장 왼쪽 그림의 왼쪽 끝 ~ 가장
   오른쪽 요소의 오른쪽 끝)을 재서 넣었다. CSS 의 max-width 합과 다른 화면이 있는데,
   컨테이너 안에서 그림이 한쪽으로 치우쳐 있거나 안쪽 여백이 끼어 있기 때문이다.
   도식 구성을 바꾸면 이 값도 다시 재서 고쳐야 한다. */
.gd-content main.main:has(.watch_area.self_isolation)  { --gd-block-max: 1585px; } /* 자가격리자 및 접촉자 모니터링 : 645+16+483 +16+39+16+ 370 */
.gd-content main.main:has(.watch_area.vaccine)         { --gd-block-max: 1507px; } /* 백신능동감시 : 1050 +24+39+24+ 370 */
.gd-content main.main:has(.watch_area.inflow_abroad)   { --gd-block-max: 1502px; } /* 해외유입감염병 감시프로그램 : 739+24+739 */
.gd-content main.main:has(.watch_area.gd-watch-bip)     { --gd-block-max: 1435px; } /* 생물감시체계 */
.gd-content main.main:has(.watch_area.gd-watch-forcast) { --gd-block-max: 1429px; } /* 기계학습기반 국내유입위험도 예측 */
.gd-content main.main:has(.watch_area.extraction_area) { --gd-block-max: 1391px; } /* AI기반 해외발생 감염병 신속경보 */
.gd-content main.main:has(.watch_area.prevention)      { --gd-block-max: 1411px; } /* 예방접종 이상반응 통합감시 : 978 +12+39+12+ 370 */
.gd-content main.main:has(.watch_area.risk_area)       { --gd-block-max: 1362px; } /* 감염병정보수집 : .collect_wrap 1380 − 좌우 안쪽 여백 9 */
.gd-content main.main:has(.watch_area.koeid_area)      { --gd-block-max: 1188px; } /* 역학조사 지원 : 도식이 컨테이너 안에서 왼쪽으로 60 들어가 있다 */
.gd-content main.main:has(.watch_area.conversion)      { --gd-block-max: 1300px; } /* 격자코드 변환 : 642+16+642 */
.gd-content main.main:has(.watch_area.develop_area)    { --gd-block-max: 1200px; } /* 감염병 조기경보 : 흰 패널 폭 기준 */

/* ===================================================================
 * 기존 콘텐츠 컨테이너를 LNB 레이아웃 안에 넣기 위한 보정
 *  - .m_inner 는 화면 전체 폭 기준(max-width:1480px, 좌우 40px)이라
 *    LNB 옆 칼럼 안에서는 여백이 두 번 잡힌다. .gd-content 안에서만 푼다. 
 * =================================================================== */
.gd-content .m_inner { max-width: none; min-width: 0; padding-left: 0; padding-right: 0; }
.gd-content .board_wrap { padding: 0; }
.gd-content .section_area { margin: 0; padding: 0; }

/* 전체메뉴 닫기 버튼 */
.sitemap_dum .gd-sitemap-close {
	position: absolute;
	top: 22px;
	right: 40px;
	z-index: 20;
	border: 1px solid rgba(255,255,255,.5);
	border-radius: var(--gd-radius-btn);
	background: transparent;
	color: #fff;
	font-size: 13px;
	padding: 6px 14px;
	cursor: pointer;
}
.sitemap_dum .gd-sitemap-close:hover { background: rgba(255,255,255,.15); }

/* ===================================================================
 * 반응형
 * =================================================================== */
@media (max-width: 1200px) {
	.gd-sys-card { width: 33.33%; }
}
@media (max-width: 900px) {
	.gd-inner { padding: 0 20px; }
	.gd-hero, .gd-hero-text, .gd-hero-photo { display: block; width: auto; }
	.gd-hero-text { padding: 36px 20px; }
	/* 2분할이 풀리면 사진 칸의 높이를 콘텐츠가 정할 수 없다(슬라이드가 절대배치이므로).
	   높이를 명시해 사진 영역이 접히지 않게 한다. */
	.gd-hero-photo { min-height: 220px; height: 220px; }
	.gd-hero-dots { left: 16px; bottom: 14px; }
	.gd-hero-text h2 { font-size: 26px; }
	.gd-sys-card { width: 50%; }
	.gd-news-col.is-feature, .gd-news-col.is-list { width: 100%; }
	.gd-breadcrumb { padding: 12px 20px; }
	.gd-layout, .gd-lnb, .gd-content { display: block; width: auto; }
	.gd-lnb { border-right: 0; border-bottom: 1px solid var(--gd-border); padding-bottom: 8px; }
	.gd-content { padding: 24px 20px 48px; }
	.gd-service-card { width: 100%; }
	/* flex:1 1 0 이라 좁아지면 칸이 지나치게 눌린다. 기준 폭을 줘서
	   들어갈 만큼만 한 줄에 놓고 나머지는 다음 줄로 넘긴다. */
	.gd-flow-step { flex: 1 1 140px; padding: 8px 12px; }
}
@media (max-width: 768px) {
	/* style.css 의 모바일 X 아이콘 규격(14x14)을 텍스트 '닫기' 버튼에 맞게 되돌린다 */
	.sitemap_dum .gd-sitemap-close {
		top: 15px; right: 14px;
		width: auto; height: auto;
		background-image: none;
	}
}
@media (max-width: 600px) {
	.gd-sys-card { width: 100%; }
}

/* 공개 전까지 감추는 요소. 마크업은 남겨 두고 이 클래스만 지우면 다시 나온다. */
.gd-is-hidden { display: none !important; }

/* ===================================================================
 * 서브페이지 : 원본 도식 영역(.watch_area)을 LNB 칼럼 안에서 쓰기 위한 보정
 *
 * 개편 전 화면의 도식/서비스 마크업(.watch_area .watch_items)을 그대로 쓰되,
 * 배치 기준만 바꾼다. 원본 스타일은 style_2.css 435행 이하에 그대로 두고
 * 여기서는 폭 계산과 줄바꿈 지점만 덮어쓴다(!important 는 쓰지 않는다).
 *
 * 원본은 좌측 LNB 가 없어 '창 너비' 기준 @media 로 짜여 있다.
 *   .watch_area { width:1200px } / { width:710px }   ← 고정 폭
 *   .watch_left { width:calc(100% - 444px) } + float ← 3단
 *   @media(max-width:1280px) 에서 세로형 전환
 * 개편 화면은 LNB(384px)를 뺀 칼럼 안이라 창 너비와 칼럼 너비가 300px 이상
 * 어긋난다. 그대로 두면 칼럼보다 넓은 고정 폭 때문에 가로 스크롤이 생기고,
 * 아직 가로로 둘 자리가 있는데도 세로형 규칙이 먼저 걸린다.
 * 그래서 판정 기준을 창이 아니라 '본문 칼럼 너비'(@container)로 옮긴다.
 * =================================================================== */
.gd-content main.main { container-type: inline-size; container-name: subcol; }

.gd-content .watch_area { width: auto; max-width: 100%; margin: 0; }
.gd-content .watch_area .watch_items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 8px;
	overflow: visible;
}
/* 원본의 float 해제용 :after 는 flex 에서 빈 항목이 되어 줄을 깨뜨린다 */
.gd-content .watch_area .watch_items:after { content: none; }
.gd-content .watch_area .watch_items > div { float: none; width: auto; max-width: none; margin-top: 0; }

/* 도식 2장 + 가운데 화살표 묶음. 자리가 모자라면 이 안에서 먼저 줄이 바뀐다. */
.gd-content .watch_area .watch_items .watch_left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex: 1 1 520px;
	min-width: 0;
	/* 남는 폭을 전부 흡수하면 도식은 늘어난 칸 안에서 가운데 정렬되고 서비스 칼럼만
	   칼럼 오른쪽 끝으로 밀린다(큰 모니터에서만 보이는 증상). max-content 로 묶어
	   넓어질 때는 도식 크기에서 멈추고 좁아질 때는 그대로 줄어들게 한다. */
	max-width: max-content;
}
.gd-content .watch_area .watch_items .watch_left > div { float: none; width: auto; max-width: none; }
/* style_2.css 는 float 를 정리하려고 .watch_left 에 overflow:hidden 을 걸어 둔다.
   flex 로 바꾼 지금은 필요 없고, 조각 도식이 1~2px 넘칠 때 아래가 잘려 보인다. */
.gd-content .watch_area .watch_items .watch_left { overflow: visible; }
/* 도식 두 장은 '줄바꿈' 대신 '같은 비율로 축소'한다.
   flex-basis 를 240/300px 로 두면 칼럼이 좁아질 때 두 장이 나란히 들어갈
   최소 폭(240+화살표+300+여백 = 627px)을 밑돌면서 도식만 세로로 쪼개지고,
   '서비스 및 활용' 카드는 아직 옆에 남아 있어 화면이 어긋난다
   (생물감시체계에서 칼럼 1,000~1,140px 구간에 보이던 증상).
   basis 를 0 으로 두고 grow 를 원본 폭 비율(391:500)로 주면 남는 폭을 그 비율로
   나눠 갖기 때문에 어떤 폭에서도 두 장이 같은 줄에, 같은 세로 높이로 남는다.
   max-width 는 그대로라 넓은 화면의 모습은 달라지지 않는다. */
.gd-content .watch_area .watch_items .watch_left .watch_data { flex: 391 1 0; min-width: 0; max-width: 391px; }
.gd-content .watch_area .watch_items .watch_left .watch_bip { flex: 500 1 0; min-width: 0; max-width: 500px; }
/* 도식이 한 장뿐인 화면(예방접종 이상반응, 백신능동감시)은 그 한 장을 넓게 쓴다 */
.gd-content .watch_area .watch_items .watch_left .gd-watch-wide { flex: 1 1 400px; max-width: 760px; }
.gd-content .watch_area .watch_items .watch_left img { width: 100%; height: auto; }
/* style_2.css 는 .watch_data img 를 391px, .watch_bip img 를 500px 로 묶어 둔다.
   그 값이 남아 있으면 칸을 같은 폭으로 나눠도 이미지가 칸보다 작게 멈춰 크기가 어긋난다.
   (역학조사 지원 화면에서 오른쪽 도식만 500px 에서 멈추던 원인) */
.gd-content .watch_area .watch_items .watch_left .watch_data img,
.gd-content .watch_area .watch_items .watch_left .watch_bip img { max-width: 100%; }

/* 화살표 배지. 원본은 margin-top 으로 높이를 맞췄으나 여기서는 align-items 가 맞춘다. */
.gd-content .watch_area .watch_items .watch_arrow { flex: 0 0 auto; position: relative; }
.gd-content .watch_area .watch_items .watch_arrow div:nth-child(1) { margin-top: 0; }
/* '수집 · 등록' 라벨은 원 아래에 띄워 둔다. 라벨이 높이에 포함되면 첫 화살표 묶음만
   키가 커져 원이 위로 밀리고, 라벨이 없는 두 번째 화살표와 높이가 어긋난다.
   흐름에서 빼면 두 화살표 모두 높이가 39px 라 같은 줄 가운데에서 만난다. */
.gd-content .watch_area .watch_items .watch_arrow div:nth-child(2) {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 22px;
	white-space: nowrap;
}
.gd-content .watch_area .watch_items .watch_arrow.arrow_last { width: auto; margin-top: 0; }
.gd-content .watch_area .watch_items .watch_arrow.arrow_last div { margin: 0; }

/* '서비스 및 활용'도 도식과 같은 흰 카드로 둔다(기계학습 예측 화면은 원본 CSS 에
   이미 같은 카드가 있어, 나머지 화면을 거기에 맞추는 셈이다).
   폭은 '글자 영역 + 좌우 여백'으로 잡는다: 330 + 20*2 = 370px.
   글자 영역 330px 는 아래에서 줄인 본문 16px 기준이다(원본은 18px/370px).
   글자와 같은 비율로 줄여야 한 줄에 들어가는 글자 수가 원본과 같게 남는다. */
.gd-content .watch_area .watch_items .watch_right {
	flex: 0 1 370px;
	margin-top: 0;
	text-align: left;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 3px 30px rgba(0, 0, 0, .1);
	padding: 24px 20px;
	box-sizing: border-box;
}
.gd-content .watch_area .watch_items .watch_service { max-width: 100%; }

/* '서비스 및 활용' 글자 크기
   원본(style_2.css 489~499)은 30 / 24 / 22 / 18px 이고, 창 너비 기준 @media
   (1460 · 1400 · 768)에서 다시 줄인다. 개편 화면은 LNB(384px)를 뺀 칼럼 안이라
   그 판정이 맞지 않아 창 크기에 따라 값이 들쭉날쭉했다. 여기서 한 값으로 고정한다.
   선택자를 7단계(.gd-content + 6)로 맞춰야 style_2 의 @media(최대 6단계)를 이긴다.
   번호 동그라미는 글자를 줄일 때 지름도 같이 줄여야 가운데에 남는다. */
.gd-content .watch_area .watch_items .watch_right .watch_service h3 { font-size: 26px; }
.gd-content .watch_area .watch_items .watch_right .watch_service .service_con { margin-top: 26px; }
.gd-content .watch_area .watch_items .watch_right .watch_service .service_con h4 { font-size: 19px; }
.gd-content .watch_area .watch_items .watch_right .watch_service .service_con ul { font-size: 16px; }
.gd-content .watch_area .watch_items .watch_right .watch_service .service_con .service_num {
	font-size: 20px;
	width: 30px;
	height: 30px;
}

/* 번호 뱃지와 내용을 붙여 놓는다. 원본은 번호를 float:left, 내용을 float:right + width:87%
   로 두어 카드 폭에 따라 둘 사이가 벌어지거나 내용이 아래로 밀렸다.
   요청이 있었던 두 화면(예방접종 이상반응 / 자가격리자)에만 적용한다.
   나머지 화면은 원본(gfid-gidis.kr)과 같은 float 배치를 그대로 쓴다. */
.gd-content .watch_area.prevention .watch_items .watch_service .service_con,
.gd-content .watch_area.self_isolation .watch_items .watch_service .service_con { display: flex; align-items: flex-start; gap: 10px; }
.gd-content .watch_area.prevention .watch_items .watch_service .service_con .service_num,
.gd-content .watch_area.self_isolation .watch_items .watch_service .service_con .service_num { float: none; flex: 0 0 auto; }
.gd-content .watch_area.prevention .watch_items .watch_service .service_con .service_txt,
.gd-content .watch_area.self_isolation .watch_items .watch_service .service_con .service_txt { float: none; width: auto; flex: 1 1 auto; min-width: 0; }

/* 칼럼이 좁아지면 '서비스 및 활용'이 아래로 내려가고 마지막 화살표가 아래를 향한다.
   (원본이 @media max-width:1280px 에서 하던 세로형 전환) */
@container subcol (max-width: 980px) {
	.gd-content .watch_area .watch_items .watch_right { flex: 1 1 100%; }
	.gd-content .watch_area .watch_items .watch_arrow.arrow_last { width: 100%; }
	.gd-content .watch_area .watch_items .watch_arrow.arrow_last div { margin: 0 auto; }
	/* 원본 :after 는 top/left 50% + translate(-50%,-50%) 로 가운데 정렬돼 있다.
	   회전만 덧붙이고 정렬은 그대로 둔다(translate 를 빼면 아이콘이 원 밖으로 밀린다). */
	.gd-content .watch_area .watch_items .watch_arrow.arrow_last div:nth-child(1):after {
		top: 50%; left: 50%;
		transform: translate(-50%, -50%) rotate(90deg);
	}
}

/* 더 좁아지면(화면 배율을 크게 올렸을 때) 도식 두 장도 위·아래로 떨어진다.
   원본이 @media max-width:768px 에서 하던 전환이고, 그때 본문 폭이 710px 였으므로
   칼럼 기준 700px 을 경계로 삼는다.
   위의 '비율 축소'(flex: 391 1 0)는 줄을 바꾸지 않으므로 여기서 직접 100% 로 눌러 준다.
   화면별 보정(.koeid_area / .self_isolation 등)이 클래스 6개라, main.main 을 끼워
   순서와 상관없이 이기게 한다. */
@container subcol (max-width: 700px) {
	.gd-content main.main .watch_area .watch_items .watch_left .watch_data,
	.gd-content main.main .watch_area .watch_items .watch_left .watch_bip,
	.gd-content main.main .watch_area .watch_items .watch_left .gd-watch-wide {
		flex: 1 1 100%;
		max-width: 100%;
	}
	/* 가운데 화살표는 한 줄을 다 쓰고 아래를 향한다 */
	.gd-content main.main .watch_area .watch_items .watch_left .watch_arrow {
		flex: 1 1 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}
	.gd-content main.main .watch_area .watch_items .watch_left .watch_arrow div:nth-child(1) { margin: 0; }
	.gd-content main.main .watch_area .watch_items .watch_left .watch_arrow div:nth-child(1):after {
		transform: translate(-50%, -50%) rotate(90deg);
	}
	/* 가로 배치에서는 '수집 · 등록' 라벨을 원 아래에 띄워 뒀다. 세로로 쌓이면
	   그 자리에 아래 도식이 오므로 흐름으로 되돌려 원 오른쪽에 나란히 둔다. */
	.gd-content main.main .watch_area .watch_items .watch_left .watch_arrow div:nth-child(2) {
		position: static;
		transform: none;
		margin-top: 0;
	}
}

/* 예방접종 이상반응은 조각이 작아 980px 까지는 가로 배치가 그대로 들어간다.
   공용 블록보다 늦게 접도록 따로 둔다. 셀렉터 깊이를 위 규칙과 맞춰야
   (컨테이너 쿼리는 명시도를 올려 주지 않는다) 세로 전환이 한꺼번에 일어난다. */
@container subcol (max-width: 760px) {
	/* 이 블록은 파일에서 아래쪽 '화면별 보정'보다 먼저 나온다. 컨테이너 쿼리는
	   명시도를 올려 주지 않으므로, 같은 깊이로 쓰면 뒤에 오는 가로 배치 규칙에
	   전부 밀린다(그래서 세로 전환이 한동안 걸리지 않았다).
	   main.main 을 한 단계 끼워 순서와 상관없이 이기게 한다. */
	.gd-content main.main .watch_area.prevention .gd-ds-main { flex: 1 1 100%; }
	.gd-content main.main .watch_area.prevention .gd-ds-row { flex-direction: column; }
	/* 세로로 쌓이면 화살표는 원본 이미지 방향(아래쪽) 그대로가 맞다 */
	.gd-content main.main .watch_area.prevention .gd-ds-row > .gd-ds-arrow { transform: none; }
	/* 1~4번을 한 줄에 하나씩. DOM 순서가 1·2·3·4 라 그대로 위에서 아래로 읽힌다. */
	.gd-content main.main .watch_area.prevention .gd-ds-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-flow: row;
		flex: 1 1 100%;
	}
	.gd-content main.main .watch_area.prevention .watch_items .watch_right { flex: 1 1 100%; }
	.gd-content main.main .watch_area.prevention .watch_items .watch_arrow.arrow_last { width: 100%; }
	.gd-content main.main .watch_area.prevention .watch_items .watch_arrow.arrow_last div { margin: 0 auto; }
	.gd-content main.main .watch_area.prevention .watch_items .watch_arrow.arrow_last div:nth-child(1):after { transform: translate(-50%, -50%) rotate(90deg); }
	/* 격자코드 변환 : 상단 두 박스와 아래 표·지도를 한 줄에 하나씩 놓는다 */
	.gd-content main.main .watch_area.conversion .conversion_items .conversion_top .conver_thumb > div { flex: 1 1 100%; }
	.gd-content main.main .watch_area.conversion .conversion_items .conversion_bottom .result .result_address,
	.gd-content main.main .watch_area.conversion .conversion_items .conversion_bottom .result .result_map { max-width: 90%; }
}

/* ===================================================================
 * 도식 영역 : 화면별 보정
 *  - 아래 수치는 이미지 원본 크기에서 나온다. 이미지를 교체하면 같이 고친다.
 * =================================================================== */

/* 도식 두 장을 나란히 놓는 화면. 두 장의 세로 높이가 같아 보이도록
   폭을 원본 비율대로 나눈다(원본 높이가 같으면 폭만 같은 비율로 주면 된다). */
/* 역학조사 지원(KoEID) : bg_koeid1/2 모두 642x707 → 같은 크기 */
.gd-content .watch_area.koeid_area .watch_items .watch_left .watch_data,
.gd-content .watch_area.koeid_area .watch_items .watch_left .watch_bip { flex: 1 1 260px; max-width: 642px; }
/* 해외유입감염병 : inflow_abroad1/2 모두 739x757 → 같은 크기 */
.gd-content .watch_area.inflow_abroad .watch_items .watch_left .watch_data,
.gd-content .watch_area.inflow_abroad .watch_items .watch_left .watch_bip { flex: 1 1 260px; max-width: 739px; }
/* 자가격리자 : 높이는 678px 로 같고 폭이 645 : 483 이라 그 비율로 나눈다 */
.gd-content .watch_area.self_isolation .watch_items .watch_left .watch_data { flex: 645 1 0; max-width: 645px; }
.gd-content .watch_area.self_isolation .watch_items .watch_left .watch_bip { flex: 483 1 0; max-width: 483px; }
/* 도식 두 장이 큼직하게 보이도록 서비스 칼럼을 기본(370px)보다 좁게 잡고
   항목 사이 여백도 조금 줄인다. 남는 폭은 그대로 도식이 가져간다. */
.gd-content .watch_area.self_isolation .watch_items { gap: 16px; }
.gd-content .watch_area.self_isolation .watch_items .watch_left { gap: 16px; }
/* 서비스 카드는 도식 높이까지 늘리지 않는다(예방접종 화면과 동일).
   stretch 로 두면 2번 내용이 끝난 뒤로 흰 여백만 길게 남는다.
   .watch_items 가 이미 align-items:center 라 stretch 만 걷어내면
   카드가 내용 높이로 줄고 도식 세로 가운데에 맞춰진다. */
.gd-content .watch_area.self_isolation .watch_items .watch_left { align-self: stretch; }

/* 조각으로 나뉜 도식 (예방접종 이상반응 / 백신능동감시)
   한 장짜리 합본 대신 조각을 늘어놓아, 칼럼이 좁아지면 조각이 차례로
   세로로 떨어지게 한다. 순서는 마크업 순서 그대로다. */
.gd-content .watch_area .watch_items .watch_left > .gd-ds { flex: 1 1 100%; }
.gd-ds {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px;
}
.gd-ds img { display: block; width: 100%; height: auto; }
.gd-ds-main { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.gd-ds-arrow { flex: 0 0 auto; width: 36px; }
.gd-ds-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; flex: 1 1 480px; }
.gd-ds-grid > div { flex: 1 1 320px; }

/* 서비스 칼럼은 원본처럼 도식 오른쪽에 그대로 둔다(아래 세 화면 모두 같은 구성). */

/* 예방접종 이상반응 : 왼쪽 두 칸이 각각 오른쪽으로 화살표를 달고,
   1~4번은 위 줄에 1·3, 아래 줄에 2·4 가 오도록 2x2 로 배치한다(원본 읽기 순서).
   도식이 가로를 많이 쓰므로 서비스 칼럼을 290px 로 좁히고 여백도 줄인다. */
.gd-content .watch_area.prevention .watch_items { gap: 12px; }
.gd-content .watch_area.prevention .watch_items .watch_left { gap: 12px; }
/* 서비스 카드는 도식 높이까지 늘리지 않는다. 늘리면 글자가 끝난 뒤로
   흰 여백만 길게 남는다. 대신 도식 세로 가운데에 맞춘다
   (.watch_items 가 이미 align-items:center 라 stretch 만 걷어내면 된다).
   자가격리자 화면은 요청대로 stretch 를 그대로 둔다. */
.gd-content .watch_area.prevention .watch_items .watch_left { align-self: stretch; }
/* 왼쪽 칼럼(화살표 2개)과 오른쪽 2x2 격자의 세로 가운데를 맞춘다.
   flex-start 로 두면 격자가 위로 붙어 화살표 두 개 사이에서 위로 치우친다. */
.gd-content .watch_area.prevention .gd-ds { gap: 10px; align-items: center; }
/* 왼쪽 두 칸을 작게 잡아야 오른쪽 2x2 격자가 커진다. 이 값이면 왼쪽 칼럼 높이와
   격자 높이가 비슷해져 원본 도식처럼 좌우 균형이 맞는다. */
.gd-content .watch_area.prevention .gd-ds-main { flex: 0 0 152px; flex-direction: column; gap: 12px; }
.gd-content .watch_area.prevention .gd-ds-row { display: flex; align-items: center; gap: 6px; }
.gd-content .watch_area.prevention .gd-ds-row > .gd-ds-thumb { flex: 1 1 auto; }
/* icon_prevention_arrow.png 은 원본이 '아래쪽' 화살표(62x31)다. 원본 사이트는 조각을
   세로로 쌓을 때만 썼기 때문이다. 여기서는 왼쪽 칼럼이 오른쪽 번호 영역으로 이어지는
   가로 배치라 오른쪽(3시)을 가리켜야 하므로 반시계로 90도 돌린다. */
.gd-content .watch_area.prevention .gd-ds-row > .gd-ds-arrow {
	flex: 0 0 20px;
	width: 20px;
	transform: rotate(-90deg);
}
/* 왼쪽 썸네일(162x322)을 칸 폭에 맞춰 늘리면 줄 높이는 원본 높이(322)로 잡히고
   이미지만 330 으로 커져 8px 이 잘린다. 원본 크기를 넘기지 않도록 둔다. */
.gd-content .watch_area.prevention .gd-ds-main img { width: auto; max-width: 100%; height: auto; }
/* 1~4번은 flex 대신 grid 2열로 둔다. flex 는 폭이 넓어지면 3칸이 한 줄에 들어가
   버려서 배치가 무너졌다. grid-auto-flow:row 면 왼쪽에서 오른쪽으로 채워
   위 줄 1·2, 아래 줄 3·4 가 된다(읽는 순서와 같다). */
.gd-content .watch_area.prevention .gd-ds-grid {
	display: grid;
	/* 1fr 은 최소폭이 min-content 라 이미지 원본 폭(403px) 아래로 못 줄어든다.
	   minmax(0,1fr) 로 두어야 칼럼이 좁아질 때 격자도 같이 줄어든다. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-width: 0;
	grid-template-rows: auto auto;
	grid-auto-flow: row;
	gap: 10px;
	flex: 1 1 260px;
	max-width: 820px;
}
.gd-content .watch_area.prevention .gd-ds-grid > div { max-width: 403px; min-width: 0; }
/* 공용 규칙이 칼럼 980px 이하에서 마지막 화살표를 100% 폭으로 만들어 서비스 칼럼을
   다음 줄로 밀어낸다. 이 화면은 도식이 작아 980px 에서도 가로 3단이 들어가므로 되돌린다. */
.gd-content .watch_area.prevention .watch_items .watch_arrow.arrow_last { width: auto; }
.gd-content .watch_area.prevention .watch_items .watch_arrow.arrow_last div { margin: 0; }
.gd-content .watch_area.prevention .watch_items .watch_arrow.arrow_last div:nth-child(1):after { transform: translate(-50%, -50%); }

/* 백신능동감시 : 4단계를 2x2 로 두고 '활용 데이터'를 그 가운데에 겹친다(원본과 동일) */
.gd-content .watch_area.vaccine .gd-ds { position: relative; }
.gd-content .watch_area.vaccine .gd-ds-main {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 34%;
	max-width: 337px;
	z-index: 2;
}
/* 네 조각은 flex 대신 grid 2열로 둔다. flex(45% + max-width:518px)로 두면 화면 배율을
   줄여 칼럼이 2,100px 을 넘는 순간 네 장이 한 줄에 다 들어가 가로로 퍼졌다.
   폭 상한 1050px = 518*2 + 여백 14. 가운데에 놓아야 겹쳐 둔 '활용 데이터'와 중심이 맞는다. */
.gd-content .watch_area.vaccine .gd-ds-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: row;
	justify-items: center;
	gap: 14px;
	flex: 1 1 100%;
	min-width: 0;
	max-width: 1050px;
	margin-left: auto;
	margin-right: auto;
}
.gd-content .watch_area.vaccine .gd-ds-grid > div { width: 100%; min-width: 0; max-width: 518px; }

/* 감염병정보수집 : 원본 .risk_area. 위 줄 2장(673x357) · 아래 줄 3장(446x368).
   basis 를 0 으로 두어 넓은 화면에서도 2장·3장 배치가 그대로 유지되고
   (flex-basis 를 px 로 주면 칼럼이 넓어질 때 다섯 장이 한 줄에 들어가 버린다)
   좁아지면 아래 @container 블록이 1~5 를 한 장씩 떨어뜨린다.
   패널 폭 상한 1380px = 673*2 + 여백 12 + 좌우 안쪽 여백 18. */
.gd-content .watch_area.risk_area .watch_items { display: block; margin-top: 8px; }
.gd-content .watch_area.risk_area .watch_items .collect_wrap {
	width: 100%;
	max-width: 1380px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
.gd-content .watch_area.risk_area .watch_items .collect_wrap .collect_item {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
}
.gd-content .watch_area.risk_area .watch_items .collect_wrap .collect_item img {
	margin: 0;
	width: 100%;
	height: auto;
	min-width: 0;
	flex: 1 1 0;
}
.gd-content .watch_area.risk_area .watch_items .collect_wrap .collect_item.top img { max-width: 673px; }
.gd-content .watch_area.risk_area .watch_items .collect_wrap .collect_item.bottom img { max-width: 446px; }
/* 칼럼이 좁아지면 1 → 2 → 3 → 4 → 5 순서로 한 장씩 떨어진다(마크업 순서 그대로). */
@container subcol (max-width: 760px) {
	.gd-content main.main .watch_area.risk_area .watch_items .collect_wrap .collect_item img { flex: 1 1 100%; }
}

/* 감염병 모델 기반 통합분석예측(K-SimID) : 한 장이던 구성도를
   튜토리얼(998x131) / 시뮬레이터(606x526) / 활용 단계(384x526) + 가운데 화살표(41x41)로
   나눠 둔 것을 배치한다. basis 를 0 으로 두어 어떤 폭에서도 두 패널이 원본 비율로
   나란히 남고, 칼럼이 좁아지면 아래 @container 블록이 위·아래로 떨어뜨린다. */
/* 폭은 2기 도식 공통 상한(--gd-diagram-max)을 따른다.
   원본 기준으로는 1047px(= 606 + 8 + 41 + 8 + 384)이 딱 맞지만, 2기 6개 화면의
   도식 폭을 하나로 맞추기로 해 공통값을 쓴다. 두 패널이 원본보다 3% 남짓 작게
   멈추는 대신 다른 화면과 좌우 폭이 같아진다. */
.gd-content .watch_area.ksimid_area { width: auto; max-width: var(--gd-diagram-max); margin: 8px auto 0; }
.gd-content .watch_area.ksimid_area img { display: block; width: 100%; height: auto; }
.gd-content .watch_area.ksimid_area .ksimid_top { max-width: 998px; margin: 0 auto 12px; }
.gd-content .watch_area.ksimid_area .ksimid_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.gd-content .watch_area.ksimid_area .ksimid_row .ksimid_sim { flex: 606 1 0; min-width: 0; max-width: 606px; }
.gd-content .watch_area.ksimid_area .ksimid_row .ksimid_step { flex: 384 1 0; min-width: 0; max-width: 384px; }
.gd-content .watch_area.ksimid_area .ksimid_row .ksimid_arrow { flex: 0 0 41px; width: 41px; }
/* 좁아지면 시뮬레이터 → 화살표(아래 방향) → 활용 단계 순으로 한 칸씩 떨어진다 */
@container subcol (max-width: 760px) {
	.gd-content main.main .watch_area.ksimid_area .ksimid_row .ksimid_sim,
	.gd-content main.main .watch_area.ksimid_area .ksimid_row .ksimid_step { flex: 1 1 100%; }
	.gd-content main.main .watch_area.ksimid_area .ksimid_row .ksimid_arrow { margin: 4px auto; transform: rotate(90deg); }
}

/* 격자코드 변환 : 원본 .conversion 구조를 칼럼 폭에 맞춘다 */
.gd-content .watch_area.conversion .conversion_items { margin-top: 8px; }
/* 상단 두 박스는 inline-block 이라 폭이 조금만 모자라도 줄이 바뀐다. flex 로 두어
   칼럼 폭에 맞춰 같이 줄어들게 한다. */
.gd-content .watch_area.conversion .conversion_items .conversion_top { position: static; padding-bottom: 0; }
.gd-content .watch_area.conversion .conversion_items .conversion_top .conver_thumb {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
}
.gd-content .watch_area.conversion .conversion_items .conversion_top .conver_thumb > div { flex: 1 1 300px; min-width: 0; max-width: 642px; margin: 0; }
.gd-content .watch_area.conversion .conversion_items .conversion_top img { max-width: 100%; height: auto; }
/* style_2.css 는 창 1460px 이하에서 가로형 화살표(blue_arrow)를 숨기고 세로형
   (blue_arrow_t)을 절대배치로 띄운다. 창이 아니라 칼럼 폭이 기준이어야 하므로 되돌린다. */
.gd-content .watch_area.conversion .conversion_items .conversion_top .blue_arrow { display: block; position: static; transform: none; margin-top: -20px; text-align: center; }
.gd-content .watch_area.conversion .conversion_items .conversion_top .blue_arrow_t { display: none; }
/* 원본 @media 768px 이하에 .conversion_top div img {width:100%} 가 있다. 원본은 그 폭에서
   가로형 화살표를 숨기므로 문제가 없지만, 우리는 계속 쓰기 때문에 96x157 짜리 화살표가
   칼럼 폭(예: 380px)까지 4배로 늘어나 계단처럼 깨져 보였다. 원본 크기로 묶는다. */
.gd-content .watch_area.conversion .conversion_items .conversion_top .blue_arrow img { width: auto; max-width: 96px; }
/* 남색 패널도 도식 크기만큼만 두고 가운데에 놓는다. 폭을 풀어 두면 큰 모니터에서
   패널만 칼럼 끝까지 늘어나고 안의 표·지도는 원본 크기라 가운데에 떠 보인다.
   900px = 표(483) + 화살표(84) + 지도(221) + 좌우 여백 20px. */
.gd-content .watch_area.conversion .conversion_items .conversion_bottom {
	width: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.gd-content .watch_area.conversion .conversion_items .conversion_bottom .result { padding: 20px; }
.gd-content .watch_area.conversion .conversion_items .conversion_bottom .result img { max-width: 100%; height: auto; }
/* 폭 상한을 % 로 두면 패널을 900px 로 줄인 뒤 표·지도까지 같이 작아진다. 원본 크기로 고정한다. */
.gd-content .watch_area.conversion .conversion_items .conversion_bottom .result .result_address { max-width: 483px; }
/* 회색 화살표(84x83, 오른쪽 방향). 원본은 창 768px 이하에서 div 째로 rotate(90deg) 하는데,
   div 는 블록이라 줄 전체(수백 px)가 돌아가 화살표가 엉뚱한 자리에 놓인다.
   판정 기준을 칼럼 폭으로 옮기고, 돌리는 대상도 이미지로 바꾼다. */
.gd-content .watch_area.conversion .conversion_items .conversion_bottom .result .gray_arrow {
	display: inline-block;
	transform: none;
	margin: 0 12px;
}
.gd-content .watch_area.conversion .conversion_items .conversion_bottom .result .gray_arrow img { width: auto; max-width: 84px; }
/* 표·지도가 위아래로 놓이는 폭에서는 화살표도 아래를 향한다 */
@container subcol (max-width: 760px) {
	.gd-content main.main .watch_area.conversion .conversion_items .conversion_bottom .result .gray_arrow { display: block; margin: 12px auto; }
	.gd-content main.main .watch_area.conversion .conversion_items .conversion_bottom .result .gray_arrow img { transform: rotate(90deg); }
}
.gd-content .watch_area.conversion .conversion_items .conversion_bottom .result .result_map { max-width: 221px; }

@container subcol (max-width: 980px) {
	/* 세로로 떨어질 때는 조각을 한 줄에 하나씩 놓고 화살표를 아래로 돌린다 */
	.gd-ds-main,
	.gd-ds-grid { flex: 1 1 100%; }
	.gd-ds-grid > div { flex: 1 1 100%; order: 0; }
	/* 겹쳐 두었던 '활용 데이터'는 흐름으로 돌려 맨 위에 놓는다.
	   DOM 순서가 활용 데이터 → 02~05 라 그대로
	   활용 데이터 / 백신 접종 현황 확인 / 조작적 정의 생성 /
	   연구 디자인 생성 / 백신 안전성 확인 순으로 읽힌다. */
	.gd-content .watch_area.vaccine .gd-ds-main {
		position: static;
		transform: none;
		width: auto;
		margin: 0 auto;
	}
	/* '활용 데이터'(337px)와 격자(518px)는 둘 다 폭 상한이 있어, flex-basis 를 100% 로
	   줘도 줄이 바뀌지 않고 나란히 남는다(칼럼 900px 에서도 337+518 이 들어간다).
	   방향을 세로로 돌려야 확실히 위·아래로 떨어진다. */
	.gd-content main.main .watch_area.vaccine .gd-ds { flex-direction: column; }
	.gd-content main.main .watch_area.vaccine .gd-ds-grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 518px;
	}
}

/* 감염병 조기경보 : 감염병군 상자 3개 + 아래 구성도 2장 (원본 .develop_area)
   원본은 상자 폭이 333px 고정이라 LNB 칼럼 안에서 넘친다. 비율로 바꾼다. */
/* 흰 패널(그림자+둥근 모서리)은 도식 크기만큼만 두고 가운데에 놓는다.
   폭을 풀어 두면 큰 모니터에서 패널만 칼럼 끝까지 늘어나 내용이 가운데에 떠 보인다.
   1200px = 아래 구성도 2장(555px씩 + 여백) + 좌우 패딩 24px. */
.gd-content .watch_area.develop_area .watch_items {
	display: block;
	padding: 28px 24px 36px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.gd-content .watch_area.develop_area .watch_items > .develop_wrap { width: 100%; }
.gd-content .watch_area.develop_area .develop_wrap .item_box {
	width: 31%;
	max-width: 333px;
	height: auto;
	min-height: 193px;
	margin: 0 1%;
	vertical-align: top;
}
.gd-content .watch_area.develop_area .develop_wrap .item_box .item_con { padding: 46px 16px 26px; }
.gd-content .watch_area.develop_area .develop_item.bottom img { width: 48%; max-width: 555px; }
.gd-content .watch_area.develop_area .develop_item.bottom img:first-child { margin-right: 2%; }
@container subcol (max-width: 780px) {
	.gd-content .watch_area.develop_area .develop_wrap .item_box { width: 100%; margin: 0 0 30px; }
	.gd-content .watch_area.develop_area .develop_item.bottom img { width: 100%; margin: 0 0 20px; }
	.gd-content .watch_area.develop_area .develop_item.bottom img:first-child { margin-right: 0; }
}