Spaces:

Wookeun
/

test

Running

App Files Files Community

test / index.html

Wookeun

Add 2 files

fbea5b9 verified 11 months ago

raw

history blame contribute delete

62.6 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>16S rRNA 염기서열 분석법: 미생물 동정의 혁명</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

	body {
	font-family: 'Noto Sans KR', sans-serif;
	scroll-behavior: smooth;
	}

	.gradient-bg {
	background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
	}

	.section-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.section-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	}

	.highlight-text {
	background: linear-gradient(120deg, #93c5fd 0%, #93c5fd 100%);
	background-repeat: no-repeat;
	background-size: 100% 40%;
	background-position: 0 88%;
	}

	.sticky-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(10px);
	}

	.microbe-icon {
	animation: float 6s ease-in-out infinite;
	}

	@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-15px); }
	100% { transform: translateY(0px); }
	}

	.table-row:hover {
	background-color: #f0f9ff;
	}

	.timeline-item::before {
	content: '';
	position: absolute;
	left: -1.5rem;
	top: 0;
	height: 100%;
	width: 3px;
	background: #3b82f6;
	}
	</style>
	</head>
	<body class="bg-gray-50 text-gray-800">
	<!-- Navigation -->
	<nav class="sticky-nav gradient-bg text-white shadow-lg">
	<div class="container mx-auto px-4 py-3 flex justify-between items-center">
	<div class="flex items-center space-x-2">
	<i class="fas fa-dna text-2xl"></i>
	<span class="text-xl font-bold">16S rRNA 분석</span>
	</div>
	<div class="hidden md:flex space-x-6">
	<a href="#intro" class="hover:text-blue-200 transition">소개</a>
	<a href="#importance" class="hover:text-blue-200 transition">중요성</a>
	<a href="#principle" class="hover:text-blue-200 transition">원리</a>
	<a href="#application" class="hover:text-blue-200 transition">적용</a>
	<a href="#advantages" class="hover:text-blue-200 transition">장단점</a>
	</div>
	<button class="md:hidden text-xl" id="mobile-menu-button">
	<i class="fas fa-bars"></i>
	</button>
	</div>

	<!-- Mobile menu -->
	<div class="md:hidden hidden bg-blue-900" id="mobile-menu">
	<div class="container mx-auto px-4 py-2 flex flex-col space-y-2">
	<a href="#intro" class="py-2 hover:text-blue-200 transition">소개</a>
	<a href="#importance" class="py-2 hover:text-blue-200 transition">중요성</a>
	<a href="#principle" class="py-2 hover:text-blue-200 transition">원리</a>
	<a href="#application" class="py-2 hover:text-blue-200 transition">적용</a>
	<a href="#advantages" class="py-2 hover:text-blue-200 transition">장단점</a>
	</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<header class="gradient-bg text-white py-20">
	<div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
	<div class="md:w-1/2 mb-10 md:mb-0">
	<h1 class="text-4xl md:text-5xl font-bold mb-6">16S rRNA 염기서열 분석법</h1>
	<p class="text-xl mb-8 text-blue-100">미생물 동정의 혁명적 방법론</p>
	<p class="mb-8 text-blue-100">눈에 보이지 않는 미생물 세계를 해석하는 강력한 도구</p>
	<div class="flex space-x-4">
	<a href="#intro" class="bg-white text-blue-800 px-6 py-3 rounded-lg font-medium hover:bg-blue-100 transition">시작하기</a>
	<a href="#application" class="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition">적용 사례</a>
	</div>
	</div>
	<div class="md:w-1/2 flex justify-center">
	<div class="relative w-64 h-64">
	<img src="https://img.icons8.com/color/96/000000/bacteria.png" class="absolute top-0 left-0 microbe-icon" style="animation-delay: 0s;">
	<img src="https://img.icons8.com/color/96/000000/virus.png" class="absolute top-10 right-0 microbe-icon" style="animation-delay: 1s;">
	<img src="https://img.icons8.com/color/96/000000/microscope.png" class="absolute bottom-0 left-1/4 microbe-icon" style="animation-delay: 2s;">
	</div>
	</div>
	</div>
	</header>

	<!-- Introduction Section -->
	<section id="intro" class="py-16 bg-white">
	<div class="container mx-auto px-4">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-bold text-blue-900 mb-4">미생물 동정의 혁명</h2>
	<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
	<p class="text-lg text-gray-600 max-w-3xl mx-auto">16S rRNA 염기서열 분석법은 현대 미생물학의 패러다임을 바꾼 혁신적인 기술입니다.</p>
	</div>

	<div class="grid md:grid-cols-2 gap-8 items-center">
	<div>
	<p class="mb-6 text-gray-700 leading-relaxed">우리 주변 세상은 눈에 보이지 않는 작은 생명체, 바로 <span class="highlight-text font-medium">미생물</span>로 가득 차 있습니다. 흙 한 줌에는 수십억 마리의 세균이 살고 있고, 우리 몸속, 특히 장에는 우리 몸 세포 수보다 훨씬 많은 미생물이 공존하며 건강에 지대한 영향을 미치지요.</p>

	<p class="mb-6 text-gray-700 leading-relaxed">때로는 김치나 치즈 같은 맛있는 발효 식품을 만들어주기도 하고, 때로는 무서운 감염병을 일으키기도 하는 이 미생물들의 정체를 정확히 아는 것은 그래서 매우 중요합니다.</p>

	<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
	<p class="text-blue-800 italic">"이 미생물은 누구인가?"를 밝히는 <span class="font-bold">동정(Identification)</span> 과정은 필수적입니다. 그런데 수많은 종류의 미생물을 어떻게 정확하게 구별할 수 있을까요?</p>
	</div>
	</div>

	<div class="bg-blue-50 rounded-xl p-6 section-card">
	<h3 class="text-xl font-bold text-blue-800 mb-4">16S rRNA 분석의 핵심</h3>
	<p class="mb-4 text-gray-700">모든 세균이 가지고 있는 특정 유전자, 즉 <span class="font-medium text-blue-700">16S rRNA 유전자의 염기서열</span>을 읽어내고, 이 정보를 거대한 데이터베이스와 비교하여 해당 세균의 '신분증'을 확인하는 방법입니다.</p>
	<p class="text-gray-700">사람마다 고유한 지문이 있듯이, 세균들도 종류마다 조금씩 다른 16S rRNA 염기서열 '지문'을 가지고 있습니다.</p>

	<div class="mt-6 bg-white p-4 rounded-lg shadow-inner">
	<div class="flex items-center mb-2">
	<div class="w-4 h-4 bg-blue-500 rounded-full mr-2"></div>
	<span class="text-sm font-medium">배양이 어려운 세균까지도 정확하게 동정</span>
	</div>
	<div class="flex items-center">
	<div class="w-4 h-4 bg-blue-500 rounded-full mr-2"></div>
	<span class="text-sm font-medium">질병 진단부터 식품 안전, 환경 보호까지 다양한 분야 적용</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Importance Section -->
	<section id="importance" class="py-16 bg-gray-50">
	<div class="container mx-auto px-4">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-bold text-blue-900 mb-4">미생물 동정, 왜 중요할까요?</h2>
	<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
	<p class="text-lg text-gray-600 max-w-3xl mx-auto">세균 식별의 필요성과 전통적 방법의 한계</p>
	</div>

	<div class="grid md:grid-cols-3 gap-8 mb-12">
	<div class="bg-white p-6 rounded-xl shadow-md section-card">
	<div class="text-blue-600 mb-4">
	<i class="fas fa-hospital text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">임상 진단</h3>
	<p class="text-gray-600">정확한 원인균 동정은 효과적인 항생제 선택과 치료 계획 수립에 필수적입니다.</p>
	</div>

	<div class="bg-white p-6 rounded-xl shadow-md section-card">
	<div class="text-blue-600 mb-4">
	<i class="fas fa-utensils text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">식품 안전</h3>
	<p class="text-gray-600">식중독 원인균 검출과 발효 식품 품질 관리를 위해 미생물 동정이 필요합니다.</p>
	</div>

	<div class="bg-white p-6 rounded-xl shadow-md section-card">
	<div class="text-blue-600 mb-4">
	<i class="fas fa-leaf text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">환경 연구</h3>
	<p class="text-gray-600">생태계 건강 평가와 환경 변화 영향 이해를 위해 미생물 군집 분석이 중요합니다.</p>
	</div>
	</div>

	<div class="bg-white rounded-xl shadow-md overflow-hidden">
	<div class="md:flex">
	<div class="md:w-1/2 p-8 bg-blue-50">
	<h3 class="text-2xl font-bold text-blue-800 mb-4">전통적 동정법의 한계</h3>
	<ul class="space-y-4">
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-times text-blue-600 text-xs"></i>
	</div>
	<span>지구상 미생물의 99% 이상은 실험실에서 배양 불가능</span>
	</li>
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-times text-blue-600 text-xs"></i>
	</div>
	<span>배양과 검사에 며칠에서 몇 주 소요</span>
	</li>
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-times text-blue-600 text-xs"></i>
	</div>
	<span>유사한 표현형 특성으로 인한 구분 어려움</span>
	</li>
	</ul>
	</div>
	<div class="md:w-1/2 p-8">
	<h3 class="text-2xl font-bold text-blue-800 mb-4">분자생물학적 동정법의 혁신</h3>
	<ul class="space-y-4">
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-check text-blue-600 text-xs"></i>
	</div>
	<span>배양 없이도 샘플에서 직접 유전 물질 분석 가능</span>
	</li>
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-check text-blue-600 text-xs"></i>
	</div>
	<span>표현형보다 안정적이고 객관적인 유전 정보 활용</span>
	</li>
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-check text-blue-600 text-xs"></i>
	</div>
	<span>16S rRNA 염기서열 분석법이 대표적</span>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Why 16S Section -->
	<section class="py-16 bg-white">
	<div class="container mx-auto px-4">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-bold text-blue-900 mb-4">왜 하필 16S rRNA 유전자인가?</h2>
	<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
	<p class="text-lg text-gray-600 max-w-3xl mx-auto">세균 동정 마커로서의 조건</p>
	</div>

	<div class="grid md:grid-cols-2 gap-8 items-center mb-12">
	<div>
	<p class="mb-6 text-gray-700 leading-relaxed">세균의 종류를 정확하게 식별하기 위해 사용하는 유전자는 마치 제품에 부착된 바코드와 같은 역할을 해야 합니다. 모든 제품에 바코드가 붙어 있어야 하고(보편성), 바코드 자체의 형식은 유지되면서도(보존성), 각 제품마다 고유한 번호를 가져 서로 구별될 수 있어야(변이성) 합니다.</p>

	<p class="mb-6 text-gray-700 leading-relaxed">16S rRNA 유전자는 이러한 까다로운 조건들을 거의 이상적으로 충족하는 것으로 밝혀졌습니다. 이것이 바로 16S rRNA 유전자가 세균 분류 및 동정 연구에서 '황금 표준(gold standard)'처럼 여겨지는 이유입니다.</p>
	</div>

	<div class="bg-blue-50 rounded-xl p-6">
	<div class="grid grid-cols-2 gap-4">
	<div class="bg-white p-4 rounded-lg shadow-sm">
	<div class="text-blue-600 mb-2">
	<i class="fas fa-globe text-xl"></i>
	</div>
	<h4 class="font-bold mb-1">보편성</h4>
	<p class="text-sm text-gray-600">거의 모든 세균에 존재</p>
	</div>
	<div class="bg-white p-4 rounded-lg shadow-sm">
	<div class="text-blue-600 mb-2">
	<i class="fas fa-lock text-xl"></i>
	</div>
	<h4 class="font-bold mb-1">기능적 중요성</h4>
	<p class="text-sm text-gray-600">단백질 합성에 필수적</p>
	</div>
	<div class="bg-white p-4 rounded-lg shadow-sm">
	<div class="text-blue-600 mb-2">
	<i class="fas fa-shield-alt text-xl"></i>
	</div>
	<h4 class="font-bold mb-1">보존 영역</h4>
	<p class="text-sm text-gray-600">염기서열이 잘 보존됨</p>
	</div>
	<div class="bg-white p-4 rounded-lg shadow-sm">
	<div class="text-blue-600 mb-2">
	<i class="fas fa-barcode text-xl"></i>
	</div>
	<h4 class="font-bold mb-1">가변 영역</h4>
	<p class="text-sm text-gray-600">종 구별 가능한 변이</p>
	</div>
	</div>
	</div>
	</div>

	<div class="overflow-x-auto">
	<table class="min-w-full bg-white rounded-lg overflow-hidden">
	<thead class="bg-blue-600 text-white">
	<tr>
	<th class="py-3 px-4 text-left">특징</th>
	<th class="py-3 px-4 text-left">설명</th>
	<th class="py-3 px-4 text-left">동정에서의 중요성</th>
	<th class="py-3 px-4 text-left">비유적 설명</th>
	</tr>
	</thead>
	<tbody class="divide-y divide-gray-200">
	<tr class="table-row">
	<td class="py-3 px-4 font-medium">보편성</td>
	<td class="py-3 px-4">거의 모든 세균에 존재 (리보솜 SSU 구성 RNA 유전자)</td>
	<td class="py-3 px-4">다양한 세균을 동일한 방법으로 분석 가능</td>
	<td class="py-3 px-4">모든 국민이 가진 주민등록증</td>
	</tr>
	<tr class="table-row">
	<td class="py-3 px-4 font-medium">기능적 중요성</td>
	<td class="py-3 px-4">단백질 합성에 필수 역할</td>
	<td class="py-3 px-4">유전자 구조가 급격히 변하지 않아 안정적인 비교 가능</td>
	<td class="py-3 px-4">생명 유지에 필수적인 심장</td>
	</tr>
	<tr class="table-row">
	<td class="py-3 px-4 font-medium">보존 영역</td>
	<td class="py-3 px-4">염기서열이 잘 변하지 않는 영역</td>
	<td class="py-3 px-4">Universal Primer 결합 부위 제공 → PCR 증폭 가능, 분석 대상 유전자 쉽게 찾도록 함</td>
	<td class="py-3 px-4">주민등록증의 고정된 형식/틀</td>
	</tr>
	<tr class="table-row">
	<td class="py-3 px-4 font-medium">가변 영역 (V1-V9)</td>
	<td class="py-3 px-4">염기서열 변화가 많은 영역</td>
	<td class="py-3 px-4">세균 종류(종/속 수준)를 구별하는 '지문' 역할, 동정의 핵심 정보 제공</td>
	<td class="py-3 px-4">주민등록증의 고유한 번호/사진</td>
	</tr>
	<tr class="table-row">
	<td class="py-3 px-4 font-medium">적절한 길이</td>
	<td class="py-3 px-4">약 1,500 bp</td>
	<td class="py-3 px-4">염기서열 분석 기술(Sanger, NGS) 적용에 용이, 효율적인 분석 가능</td>
	<td class="py-3 px-4">분석/보관하기 적당한 크기</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</section>

	<!-- Principle Section -->
	<section id="principle" class="py-16 bg-gray-50">
	<div class="container mx-auto px-4">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-bold text-blue-900 mb-4">16S rRNA 염기서열 분석의 원리</h2>
	<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
	<p class="text-lg text-gray-600 max-w-3xl mx-auto">세균의 유전 암호 해독하기</p>
	</div>

	<div class="mb-12">
	<div class="bg-white rounded-xl shadow-md p-6 mb-8 section-card">
	<p class="text-lg font-medium text-blue-800 mb-4">16S rRNA 염기서열 분석의 핵심 원리는 아주 명료합니다.</p>
	<p class="text-gray-700">먼저 분석하고자 하는 세균 샘플에서 16S rRNA 유전자를 포함한 전체 DNA를 추출합니다. 그런 다음, 추출된 DNA 중에서 16S rRNA 유전자 부분만을 PCR이라는 기술을 이용해 대량으로 복제(증폭)합니다. 이렇게 얻어진 순수한 16S rRNA 유전자 조각의 염기서열, 즉 A(아데닌), T(티민), G(구아닌), C(사이토신)라는 네 가지 염기가 어떤 순서로 배열되어 있는지를 정확하게 읽어냅니다.</p>
	</div>

	<div class="relative">
	<!-- Timeline -->
	<div class="space-y-8">
	<!-- Step 1 -->
	<div class="relative pl-8 timeline-item">
	<div class="bg-white p-6 rounded-xl shadow-md section-card">
	<div class="absolute -left-3 top-6 w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white">
	<span class="font-bold">1</span>
	</div>
	<h3 class="text-xl font-bold text-blue-800 mb-3">DNA 추출</h3>
	<p class="text-gray-700 mb-2">분석하고자 하는 샘플로부터 세균의 유전 정보를 담고 있는 DNA를 온전하게 분리하고 최대한 순수하게 정제합니다.</p>
	<div class="bg-blue-50 p-3 rounded-lg">
	<p class="text-sm text-blue-800 font-medium">핵심: DNA 손상을 최소화하면서 충분한 양의 고품질 DNA 확보, PCR 저해 물질 제거</p>
	</div>
	</div>
	</div>

	<!-- Step 2 -->
	<div class="relative pl-8 timeline-item">
	<div class="bg-white p-6 rounded-xl shadow-md section-card">
	<div class="absolute -left-3 top-6 w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white">
	<span class="font-bold">2</span>
	</div>
	<h3 class="text-xl font-bold text-blue-800 mb-3">PCR 증폭</h3>
	<p class="text-gray-700 mb-2">추출된 DNA 중에서 16S rRNA 유전자 부분만을 선택적으로 복제하여 그 양을 엄청나게 늘리는 과정입니다.</p>
	<div class="bg-blue-50 p-3 rounded-lg">
	<p class="text-sm text-blue-800 font-medium">중합효소 연쇄 반응(Polymerase Chain Reaction, PCR) 기술 사용</p>
	</div>
	</div>
	</div>

	<!-- Step 3 -->
	<div class="relative pl-8 timeline-item">
	<div class="bg-white p-6 rounded-xl shadow-md section-card">
	<div class="absolute -left-3 top-6 w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white">
	<span class="font-bold">3</span>
	</div>
	<h3 class="text-xl font-bold text-blue-800 mb-3">PCR 산물 정제</h3>
	<p class="text-gray-700 mb-2">PCR 반응이 성공적으로 끝나면, 반응 용액 안에는 우리가 원하는 증폭된 16S rRNA 유전자 DNA 조각 외에도 여러 가지 불필요한 물질들이 남아있게 됩니다.</p>
	<div class="bg-blue-50 p-3 rounded-lg">
	<p class="text-sm text-blue-800 font-medium">순수한 16S rRNA 유전자 DNA 조각만을 분리해내는 과정이 필수적</p>
	</div>
	</div>
	</div>

	<!-- Step 4 -->
	<div class="relative pl-8 timeline-item">
	<div class="bg-white p-6 rounded-xl shadow-md section-card">
	<div class="absolute -left-3 top-6 w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white">
	<span class="font-bold">4</span>
	</div>
	<h3 class="text-xl font-bold text-blue-800 mb-3">염기서열 분석</h3>
	<p class="text-gray-700 mb-2">정제된 16S rRNA 유전자 PCR 산물의 염기서열, 즉 A, T, G, C 염기가 어떤 순서로 배열되어 있는지를 직접 읽어내는 단계입니다.</p>
	<div class="bg-blue-50 p-3 rounded-lg">
	<p class="text-sm text-blue-800 font-medium">생어 염기서열 분석법(Sanger sequencing) 또는 차세대 염기서열 분석(NGS) 기술 사용</p>
	</div>
	</div>
	</div>

	<!-- Step 5 -->
	<div class="relative pl-8 timeline-item">
	<div class="bg-white p-6 rounded-xl shadow-md section-card">
	<div class="absolute -left-3 top-6 w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white">
	<span class="font-bold">5</span>
	</div>
	<h3 class="text-xl font-bold text-blue-800 mb-3">염기서열 비교 및 동정</h3>
	<p class="text-gray-700 mb-2">우리가 얻은 이 염기서열을, 이미 알려진 수많은 세균들의 16S rRNA 염기서열 정보가 저장되어 있는 거대한 데이터베이스와 비교하여, 어떤 세균의 것과 가장 유사한지를 찾아내는 것입니다.</p>
	<div class="bg-blue-50 p-3 rounded-lg">
	<p class="text-sm text-blue-800 font-medium">BLAST (Basic Local Alignment Search Tool) 도구 사용</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="bg-white rounded-xl shadow-md overflow-hidden">
	<div class="md:flex">
	<div class="md:w-1/2 p-8">
	<h3 class="text-2xl font-bold text-blue-800 mb-4">생어 시퀀싱 원리</h3>
	<p class="mb-4 text-gray-700">생어 시퀀싱은 PCR과 유사한 원리를 이용하지만, 특별한 종류의 뉴클레오타이드인 '다이디옥시뉴클레오타이드 삼인산(dideoxynucleotide triphosphate, ddNTP)'을 사용합니다.</p>

	<div class="mb-6">
	<div class="flex items-center mb-2">
	<div class="w-4 h-4 bg-red-500 rounded-full mr-2"></div>
	<span class="text-sm font-medium">ddATP (빨간색)</span>
	</div>
	<div class="flex items-center mb-2">
	<div class="w-4 h-4 bg-green-500 rounded-full mr-2"></div>
	<span class="text-sm font-medium">ddTTP (초록색)</span>
	</div>
	<div class="flex items-center mb-2">
	<div class="w-4 h-4 bg-yellow-500 rounded-full mr-2"></div>
	<span class="text-sm font-medium">ddGTP (노란색)</span>
	</div>
	<div class="flex items-center">
	<div class="w-4 h-4 bg-blue-500 rounded-full mr-2"></div>
	<span class="text-sm font-medium">ddCTP (파란색)</span>
	</div>
	</div>

	<p class="text-gray-700">각 ddNTP는 서로 다른 색깔의 형광 염료로 표지되어 있으며, DNA 합성 중에 ddNTP가 끼어들면 그 자리에서 합성이 종결됩니다. 다양한 길이의 DNA 조각들이 만들어지고, 이들을 크기별로 분리하여 각 조각 끝에 달린 형광색을 순서대로 읽어내면 원래 DNA의 염기서열을 결정할 수 있습니다.</p>
	</div>
	<div class="md:w-1/2 bg-blue-50 flex items-center justify-center p-8">
	<div class="text-center">
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Sanger-sequencing.svg/1200px-Sanger-sequencing.svg.png" alt="Sanger Sequencing" class="max-w-full h-auto rounded-lg shadow-sm">
	<p class="mt-3 text-sm text-gray-600">생어 염기서열 분석법의 원리</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Application Section -->
	<section id="application" class="py-16 bg-white">
	<div class="container mx-auto px-4">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-bold text-blue-900 mb-4">16S rRNA 염기서열 분석의 적용</h2>
	<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
	<p class="text-lg text-gray-600 max-w-3xl mx-auto">미생물 세계를 밝히는 등대</p>
	</div>

	<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
	<div class="bg-blue-50 rounded-xl p-6 section-card">
	<div class="text-blue-600 mb-4">
	<i class="fas fa-hospital text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">임상 미생물학 및 감염병 진단</h3>
	<p class="text-gray-700 mb-4">배양이 어려운 세균 동정, 항생제 치료 후 원인균 추정, 복합 감염 분석 등에 활용됩니다.</p>
	<ul class="space-y-2 text-sm text-gray-600">
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>배양 어려운 균(Fastidious or Unculturable Bacteria)에 의한 감염 진단</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>비정형적인 생화학적 특성을 보이는 세균 동정</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>항생제 치료 후 검체 분석</span>
	</li>
	</ul>
	</div>

	<div class="bg-blue-50 rounded-xl p-6 section-card">
	<div class="text-blue-600 mb-4">
	<i class="fas fa-utensils text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">식품 미생물학 및 안전 관리</h3>
	<p class="text-gray-700 mb-4">식품 매개 병원균 검출 및 동정, 발효 식품 미생물 군집 분석, 식품 부패 원인 규명 등에 활용됩니다.</p>
	<ul class="space-y-2 text-sm text-gray-600">
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>Salmonella, Listeria 등 식중독 원인균 검출</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>김치, 요구르트 등 발효 식품의 미생물 군집 분석</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>식품 부패 과정에 관여하는 미생물 규명</span>
	</li>
	</ul>
	</div>

	<div class="bg-blue-50 rounded-xl p-6 section-card">
	<div class="text-blue-600 mb-4">
	<i class="fas fa-leaf text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">환경 미생물학 및 생태 연구</h3>
	<p class="text-gray-700 mb-4">미생물 다양성 탐구, 환경 변화에 따른 미생물 군집 변화 모니터링, 생물 정화 등에 활용됩니다.</p>
	<ul class="space-y-2 text-sm text-gray-600">
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>토양, 해수 등 환경 샘플의 미생물 군집 구조 분석</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>기후 변화, 오염 물질이 미생물 생태계에 미치는 영향 연구</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>오염 물질 분해 능력을 가진 미생물 탐색</span>
	</li>
	</ul>
	</div>

	<div class="bg-blue-50 rounded-xl p-6 section-card">
	<div class="text-blue-600 mb-4">
	<i class="fas fa-dna text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">미생물 분류학 및 계통 연구</h3>
	<p class="text-gray-700 mb-4">신종 미생물 동정 및 분류, 계통수 구축, 생명의 나무 재구성 등에 활용됩니다.</p>
	<ul class="space-y-2 text-sm text-gray-600">
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>새로운 세균이나 고세균 발견 및 분류</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>미생물들 간의 진화적인 관계 연구</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>생명의 나무(Tree of Life) 확장</span>
	</li>
	</ul>
	</div>

	<div class="bg-blue-50 rounded-xl p-6 section-card">
	<div class="text-blue-600 mb-4">
	<i class="fas fa-industry text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">산업 미생물학 및 생명공학</h3>
	<p class="text-gray-700 mb-4">유용 미생물 탐색 및 동정, 산업 균주 관리, 발효 공정 모니터링 등에 활용됩니다.</p>
	<ul class="space-y-2 text-sm text-gray-600">
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>항생제, 효소 등 유용 물질 생산 미생물 탐색</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>산업용 균주의 유전적 안정성 확인</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>발효조 내 미생물 군집 동태 모니터링</span>
	</li>
	</ul>
	</div>

	<div class="bg-blue-50 rounded-xl p-6 section-card">
	<div class="text-blue-600 mb-4">
	<i class="fas fa-user-md text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">인체 마이크로바이옴 연구</h3>
	<p class="text-gray-700 mb-4">장내 미생물 군집 분석, 질병과 마이크로바이옴의 연관성 연구 등에 활용됩니다.</p>
	<ul class="space-y-2 text-sm text-gray-600">
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>건강한 사람과 환자 간 마이크로바이옴 차이 비교</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>비만, 염증성 장 질환 등과 관련된 미생물 규명</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check text-blue-500 mr-2 mt-1"></i>
	<span>프로바이오틱스, 프리바이오틱스 효과 연구</span>
	</li>
	</ul>
	</div>
	</div>

	<div class="overflow-x-auto">
	<table class="min-w-full bg-white rounded-lg overflow-hidden shadow-md">
	<thead class="bg-blue-600 text-white">
	<tr>
	<th class="py-3 px-4 text-left">분야</th>
	<th class="py-3 px-4 text-left">주요 활용 내용</th>
	<th class="py-3 px-4 text-left">기대 효과 / 기여</th>
	</tr>
	</thead>
	<tbody class="divide-y divide-gray-200">
	<tr class="table-row">
	<td class="py-3 px-4 font-medium">임상 미생물학/진단</td>
	<td class="py-3 px-4">배양 어려운/비정형 세균 동정, 항생제 치료 후 원인균 추정, 복합 감염 분석 (보조 진단)</td>
	<td class="py-3 px-4">정확한 원인균 규명률 향상, 신속한 치료 결정 지원, 감염 관리 개선 기여</td>
	</tr>
	<tr class="table-row">
	<td class="py-3 px-4 font-medium">식품 미생물학/안전</td>
	<td class="py-3 px-4">식중독균 신속 검출/동정, 발효 미생물 군집 분석 및 품질 관리, 부패 원인균 규명</td>
	<td class="py-3 px-4">식품 안전성 강화, 식중독 예방, 발효 식품 품질 개선 및 표준화, 유통 기한 설정 과학화</td>
	</tr>
	<tr class="table-row">
	<td class="py-3 px-4 font-medium">환경 미생물학/생태</td>
	<td class="py-3 px-4">미생물 군집 구조 분석 (메타게놈), 미배양 미생물 탐구, 환경 변화 영향 평가, 생지화학적 순환 연구, 유용/유해 미생물 탐색</td>
	<td class="py-3 px-4">미생물 다양성 및 생태계 기능 이해 증진, 환경 모니터링 및 복원 전략 개발, 새로운 생물 자원 발굴</td>
	</tr>
	<tr class="table-row">
	<td class="py-3 px-4 font-medium">미생물 분류학/계통</td>
	<td class="py-3 px-4">신종 세균 동정 및 분류학적 위치 결정, 계통 발생학적 유연관계 규명, 생명의 나무 재구성 및 확장</td>
	<td class="py-3 px-4">정확하고 체계적인 미생물 분류 체계 확립, 생명의 진화 과정 이해 심화</td>
	</tr>
	<tr class="table-row">
	<td class="py-3 px-4 font-medium">산업 미생물학/생명공학</td>
	<td class="py-3 px-4">유용 미생물 탐색/동정, 산업 균주 관리 및 오염 모니터링, 발효/배양 공정 최적화 및 안정화</td>
	<td class="py-3 px-4">산업 공정 효율성 및 생산성 증대, 신규 생물 소재 및 제품 개발 촉진, 생명공학 기술 발전 기여</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</section>

	<!-- Advantages Section -->
	<section id="advantages" class="py-16 bg-gray-50">
	<div class="container mx-auto px-4">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-bold text-blue-900 mb-4">16S rRNA 염기서열 분석의 장단점</h2>
	<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
	<p class="text-lg text-gray-600 max-w-3xl mx-auto">모든 기술에는 장점과 한계가 존재합니다</p>
	</div>

	<div class="grid md:grid-cols-2 gap-8 mb-12">
	<div class="bg-white p-8 rounded-xl shadow-md section-card">
	<h3 class="text-2xl font-bold text-blue-800 mb-6 flex items-center">
	<i class="fas fa-thumbs-up text-blue-500 mr-3"></i>
	장점 (Advantages)
	</h3>
	<ul class="space-y-4">
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-check text-blue-600 text-xs"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">보편성 및 표준화</h4>
	<p class="text-gray-600 text-sm">거의 모든 세균에 적용 가능하며, 분석 과정과 데이터베이스가 잘 표준화되어 결과 비교가 용이합니다.</p>
	</div>
	</li>
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-check text-blue-600 text-xs"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">배양 비의존성</h4>
	<p class="text-gray-600 text-sm">실험실에서 배양할 수 없는 미생물(99% 이상)도 연구할 수 있어 미생물 생태 연구에 혁신을 가져왔습니다.</p>
	</div>
	</li>
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-check text-blue-600 text-xs"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">높은 정확성 및 재현성</h4>
	<p class="text-gray-600 text-sm">객관적인 유전 정보를 기반으로 하므로 일반적으로 전통적 방법보다 더 높은 정확성과 재현성을 제공합니다.</p>
	</div>
	</li>
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-check text-blue-600 text-xs"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">상대적인 신속성</h4>
	<p class="text-gray-600 text-sm">전통적인 배양 및 생화학 검사보다 훨씬 빠르게 결과를 얻을 수 있습니다.</p>
	</div>
	</li>
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-check text-blue-600 text-xs"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">비용 효율성 (상대적)</h4>
	<p class="text-gray-600 text-sm">단일 세균 균주를 동정하는 경우, 전장 유전체 분석(WGS)과 같은 다른 고도 분자생물학적 기법에 비해 상대적으로 비용이 저렴합니다.</p>
	</div>
	</li>
	</ul>
	</div>

	<div class="bg-white p-8 rounded-xl shadow-md section-card">
	<h3 class="text-2xl font-bold text-blue-800 mb-6 flex items-center">
	<i class="fas fa-exclamation-triangle text-yellow-500 mr-3"></i>
	단점 (Disadvantages)
	</h3>
	<ul class="space-y-4">
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-times text-red-500 text-xs"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">종 수준 이하 해상도 한계</h4>
	<p class="text-gray-600 text-sm">매우 가까운 종(closely related species)이나 같은 종 내의 다른 균주(strains)를 구별하는 데는 충분한 염기서열 변이를 제공하지 못합니다.</p>
	</div>
	</li>
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-times text-red-500 text-xs"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">다중 복제 유전자 문제</h4>
	<p class="text-gray-600 text-sm">하나의 세균 게놈 내에도 16S rRNA 유전자가 여러 개 존재할 수 있고, 이 복제본들 사이에 염기서열이 약간 다를 수 있습니다.</p>
	</div>
	</li>
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-times text-red-500 text-xs"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">프라이머 편향</h4>
	<p class="text-gray-600 text-sm">'보편 프라이머'가 특정 세균 그룹의 DNA에 더 잘 결합하는 경향이 있어, 실제 미생물 군집 비율이 왜곡될 수 있습니다.</p>
	</div>
	</li>
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-times text-red-500 text-xs"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">기능 정보 부재</h4>
	<p class="text-gray-600 text-sm">'누구인지'는 알 수 있지만, '무엇을 할 수 있는지'에 대한 직접적인 정보는 제공하지 못합니다.</p>
	</div>
	</li>
	<li class="flex items-start">
	<div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
	<i class="fas fa-times text-red-500 text-xs"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">데이터베이스 의존성 및 품질 문제</h4>
	<p class="text-gray-600 text-sm">동정의 정확성은 참조 데이터베이스의 완전성과 정확성에 크게 좌우됩니다.</p>
	</div>
	</li>
	</ul>
	</div>
	</div>

	<div class="bg-white rounded-xl shadow-md overflow-hidden">
	<div class="md:flex">
	<div class="md:w-1/2 p-8">
	<h3 class="text-2xl font-bold text-blue-800 mb-4">16S rRNA 분석의 미래</h3>
	<p class="mb-4 text-gray-700">16S rRNA 염기서열 분석은 지난 수십 년간 미생물학의 발전을 이끌어 온 혁신적인 기술이며, 앞으로도 미생물 연구와 응용 분야에서 중요한 기반 기술로서 그 가치를 이어나갈 것입니다.</p>

	<p class="mb-6 text-gray-700">물론 완벽한 만능 열쇠는 아니기에, 그 한계를 명확히 인식하고 다른 최신 기술들과 현명하게 조합하여 활용하는 지혜가 필요합니다.</p>

	<div class="bg-blue-50 p-4 rounded-lg">
	<h4 class="font-bold text-blue-800 mb-2">다른 기술과의 융합</h4>
	<div class="grid grid-cols-2 gap-4">
	<div class="flex items-center">
	<i class="fas fa-dna text-blue-500 mr-2"></i>
	<span class="text-sm">전장 유전체 분석(WGS)</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-layer-group text-blue-500 mr-2"></i>
	<span class="text-sm">메타게놈 분석</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-long-arrow-alt-right text-blue-500 mr-2"></i>
	<span class="text-sm">롱리드 시퀀싱</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-laptop-code text-blue-500 mr-2"></i>
	<span class="text-sm">생물정보학</span>
	</div>
	</div>
	</div>
	</div>
	<div class="md:w-1/2 bg-blue-50 flex items-center justify-center p-8">
	<div class="text-center">
	<img src="https://img.icons8.com/color/240/000000/future.png" alt="Future" class="w-48 h-48 mx-auto">
	<p class="mt-3 text-gray-600">기술의 융합을 통한 미생물 연구의 미래</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Conclusion Section -->
	<section class="py-16 gradient-bg text-white">
	<div class="container mx-auto px-4">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-bold mb-4">결론</h2>
	<div class="w-20 h-1 bg-white mx-auto mb-6"></div>
	<p class="text-lg max-w-3xl mx-auto">16S rRNA 염기서열 분석은 미생물 연구의 패러다임을 바꾼 혁신적인 기술입니다</p>
	</div>

	<div class="max-w-4xl mx-auto">
	<p class="mb-6 text-blue-100 leading-relaxed">16S rRNA 염기서열 분석법은 현대 미생물학 연구에 혁명적인 변화를 가져왔습니다. 배양이라는 전통적인 방법의 한계를 극복하고, 미생물 다양성 연구의 지평을 넓히며, 임상 진단, 식품 안전, 환경 보호 등 다양한 분야에서 핵심적인 역할을 수행하고 있습니다.</p>

	<p class="mb-6 text-blue-100 leading-relaxed">이 기술은 세균의 보편적인 유전자 '바코드'인 16S rRNA를 찾아 증폭하고, 그 바코드 내용을 정확히 읽어낸 뒤, 거대한 바코드 라이브러리와 비교하여 신원을 확인하는 정교한 과정입니다. 이러한 원리 덕분에 배양이 어려운 미생물도 연구할 수 있게 되었고, 복잡한 미생물 군집을 분석할 수 있는 길이 열렸습니다.</p>

	<p class="mb-8 text-blue-100 leading-relaxed">앞으로도 16S rRNA 염기서열 분석은 미생물학 연구의 기초 도구로서 중요한 역할을 계속할 것입니다. 하지만 동시에 전장 유전체 분석(WGS), 메타게놈 시퀀싱, 롱리드 시퀀싱 등 새로운 기술들과의 융합을 통해 더욱 강력한 분석 도구로 발전해 나갈 것입니다.</p>

	<div class="bg-blue-800 bg-opacity-50 rounded-xl p-6">
	<p class="italic mb-3">"눈에 보이지 않는 미생물 세계의 복잡성과 다양성을 이해하는 데 16S rRNA 염기서열 분석은 없어서는 안 될 강력한 창입니다."</p>
	<p class="text-right text-blue-200">- 미생물 연구자</p>
	</div>
	</div>
	</div>
	</section>

	<!-- References Section -->
	<section class="py-12 bg-gray-100">
	<div class="container mx-auto px-4">
	<h2 class="text-2xl font-bold text-gray-800 mb-6">참고문헌</h2>
	<div class="bg-white rounded-lg shadow-sm p-6">
	<ol class="list-decimal list-inside space-y-2 text-sm text-gray-700">
	<li>Clinical and Laboratory Standards Institute (CLSI). <em>Principles and Procedures for Blood Cultures; Approved Guideline</em>. CLSI document M47-A. Wayne, PA: Clinical and Laboratory Standards Institute; 2007.</li>
	<li>Ranjan R, Rani A, Metwally A, McGee HS, Perkins DL. Analysis of the microbiome: Advantages of whole genome shotgun versus 16S illustrative computational pipelines. <em>Front Microbiol</em>. 2016;6:1514.</li>
	<li>Streit WR, Schmitz RA. Metagenomics – the key to the uncultured microbes. <em>Curr Opin Microbiol</em>. 2004;7(5):492-498.</li>
	<li>Woese CR. Bacterial evolution. <em>Microbiol Rev</em>. 1987;51(2):221-271.</li>
	<li>Yang B, Wang Y, Qian PY. Sensitivity and correlation of hypervariable regions in 16S rRNA genes in phylogenetic analysis. <em>BMC Bioinformatics</em>. 2016;17:135.</li>
	<li>Adékambi T, Drancourt M, Raoult D. The rpoB gene as a tool for clinical microbiologists. <em>Trends Microbiol</em>. 2009;17(1):37-45.</li>
	<li>Zhou J, Bruns MA, Tiedje JM. DNA recovery from soils of diverse composition. <em>Appl Environ Microbiol</em>. 1996;62(2):316-322.</li>
	<li>Saiki RK, Gelfand DH, Stoffel S, et al. Primer-directed enzymatic amplification of DNA with a thermostable DNA polymerase. <em>Science</em>. 1988;239(4839):487-491.</li>
	<li>Lane DJ. 16S/23S rRNA sequencing. In: Stackebrandt E, Goodfellow M, eds. <em>Nucleic Acid Techniques in Bacterial Systematics</em>. Chichester: John Wiley & Sons; 1991:115-175.</li>
	<li>Sanger F, Nicklen S, Coulson AR. DNA sequencing with chain-terminating inhibitors. <em>Proc Natl Acad Sci U S A</em>. 1977;74(12):5463-5467.</li>
	</ol>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="bg-gray-900 text-white py-8">
	<div class="container mx-auto px-4">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<div class="mb-6 md:mb-0">
	<div class="flex items-center space-x-2">
	<i class="fas fa-dna text-2xl text-blue-400"></i>
	<span class="text-xl font-bold">16S rRNA 분석</span>
	</div>
	<p class="mt-2 text-gray-400 text-sm">미생물 동정의 혁신적인 방법론</p>
	</div>

	<div class="flex space-x-6">
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-twitter text-xl"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-facebook text-xl"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-linkedin text-xl"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-github text-xl"></i>
	</a>
	</div>
	</div>

	<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between">
	<div class="mb-4 md:mb-0">
	<p class="text-gray-400 text-sm">© 2023 16S rRNA 분석 연구팀. 모든 권리 보유.</p>
	</div>

	<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 text-sm">
	<a href="#" class="text-gray-400 hover:text-white transition">개인정보 처리방침</a>
	<a href="#" class="text-gray-400 hover:text-white transition">이용 약관</a>
	<a href="#" class="text-gray-400 hover:text-white transition">문의하기</a>
	</div>
	</div>
	</div>
	</footer>

	<script>
	// Mobile menu toggle
	document.getElementById('mobile-menu-button').addEventListener('click', function() {
	const menu = document.getElementById('mobile-menu');
	if (menu.classList.contains('hidden')) {
	menu.classList.remove('hidden');
	} else {
	menu.classList.add('hidden');
	}
	});

	// Smooth scrolling for anchor links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();

	const targetId = this.getAttribute('href');
	const targetElement = document.querySelector(targetId);

	if (targetElement) {
	window.scrollTo({
	top: targetElement.offsetTop - 80,
	behavior: 'smooth'
	});

	// Close mobile menu if open
	const mobileMenu = document.getElementById('mobile-menu');
	if (!mobileMenu.classList.contains('hidden')) {
	mobileMenu.classList.add('hidden');
	}
	}
	});
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Wookeun/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>