<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>이산화탄소저감 &#8211; MyEngNote</title>
	<atom:link href="https://myengnote.com/tag/%ec%9d%b4%ec%82%b0%ed%99%94%ed%83%84%ec%86%8c%ec%a0%80%ea%b0%90/feed/" rel="self" type="application/rss+xml" />
	<link>https://myengnote.com</link>
	<description></description>
	<lastBuildDate>Wed, 08 Jul 2026 04:42:47 +0000</lastBuildDate>
	<language>ko-KR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>
	<item>
		<title>수력 발전 계산기 &#038; 시뮬레이터</title>
		<link>https://myengnote.com/hydroelectric-energy-conversion-calculator-simulator/</link>
					<comments>https://myengnote.com/hydroelectric-energy-conversion-calculator-simulator/#respond</comments>
		
		<dc:creator><![CDATA[동동]]></dc:creator>
		<pubDate>Sat, 30 May 2026 22:35:23 +0000</pubDate>
				<category><![CDATA[공학계산기]]></category>
		<category><![CDATA[낙차에너지]]></category>
		<category><![CDATA[발전출력계산]]></category>
		<category><![CDATA[수력이용률]]></category>
		<category><![CDATA[유량에너지]]></category>
		<category><![CDATA[이산화탄소저감]]></category>
		<guid isPermaLink="false">https://myengnote.com/hydroelectric-energy-conversion-calculator-simulator/</guid>

					<description><![CDATA[취수원 수두 낙차 높이와 체적 유량을 기반으로 위치에너지가 회전 운동에너지를 거쳐 전기에너지(MW)로 변환되는 전 과정을 실시간 2D 발전기 물리 흐름으로 시각화하는 시뮬레이터입니다.]]></description>
										<content:encoded><![CDATA[
<h2 style="font-size: 1.6em; font-weight: 800; color: #0c0e25; border-bottom: 2px solid #00f2fe; padding-bottom: 8px; margin-bottom: 20px;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f680.png" alt="🚀" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 수력 발전 계산기 &#038; 시뮬레이터</h2>


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&#038;family=Outfit:wght@400;500;600;700;800&#038;display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Scoped & Isolated Styles for energyconversion-calculator-wrapper */
        /* Modern Reset and Design Tokens */
        .energyconversion-calculator-wrapper *, .energyconversion-calculator-wrapper *::before, .energyconversion-calculator-wrapper *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .energyconversion-calculator-wrapper {
            --color-bg-dark: #f8f9fd;
            --color-bg-deep: #ffffff;
            --color-panel-bg: rgba(255, 255, 255, 0.85);
            --color-border: rgba(0, 0, 0, 0.06);
            --color-border-hover: rgba(0, 0, 0, 0.12);
            --color-text-main: #1e293b;
            --color-text-muted: #475569;
            --color-text-dark: #94a3b8;
            --color-cyan: #0284c7; /* Cobalt blue accent */
            --color-cyan-glow: rgba(2, 132, 199, 0.15);
            --color-magenta: #db2777; /* Pink/magenta accent */
            --color-magenta-glow: rgba(219, 39, 119, 0.15);
            --color-purple: #7c3aed;
            --color-purple-glow: rgba(124, 58, 237, 0.12);
            --color-success: #10b981;
            --color-warning: #f59e0b;
            --color-danger: #ef4444;
            --gradient-primary: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-purple) 100%);
            --gradient-accent: linear-gradient(135deg, var(--color-magenta) 0%, var(--color-purple) 100%);
            --gradient-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.95) 100%);
            --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            --shadow-neon-cyan: 0 0 15px var(--color-cyan-glow);
            --shadow-neon-magenta: 0 0 15px var(--color-magenta-glow);
            --shadow-card: 0 8px 32px 0 rgba(15, 23, 42, 0.05);
            --blur-glass: blur(16px);
        }
        .energyconversion-calculator-wrapper {
            background-color: var(--color-bg-dark);
            color: var(--color-text-main);
            font-family: var(--font-body);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            overflow-x: hidden;
            position: relative;
        }
        .app-background-glow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            pointer-events: none;
        }
        .app-background-glow::before, 
        .app-background-glow::after {
            content: '';
            position: absolute;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            filter: blur(140px);
            opacity: 0.15;
        }
        .app-background-glow::before {
            background: var(--color-cyan);
            top: -10%;
            right: -5%;
            animation: pulse-slow 15s infinite alternate;
        }
        .app-background-glow::after {
            background: var(--color-purple);
            bottom: -10%;
            left: -5%;
            animation: pulse-slow 20s infinite alternate-reverse;
        }
        @keyframes pulse-slow {
            0% { transform: scale(1) translate(0, 0); opacity: 0.12; }
            100% { transform: scale(1.2) translate(50px, 50px); opacity: 0.22; }
        }
        .app-container {
            width: 100%;
            max-width: 1440px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .app-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            background: var(--color-panel-bg);
            backdrop-filter: var(--blur-glass);
            border: 1px solid var(--color-border);
            border-radius: 16px;
            box-shadow: var(--shadow-card);
        }
        .logo-area {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .logo-icon {
            font-size: 32px;
            background: linear-gradient(135deg, var(--color-cyan), var(--color-magenta));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .logo-area h1 {
            font-family: var(--font-heading);
            font-weight: 800;
            font-size: 24px;
            letter-spacing: 1.5px;
            background: linear-gradient(90deg, var(--color-text-main), var(--color-text-muted));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .logo-area .subtitle {
            font-size: 12px;
            color: var(--color-text-muted);
            font-weight: 500;
            letter-spacing: 0.5px;
        }
        .fa-spin-slow {
            animation: fa-spin 15s linear infinite;
        }
        .header-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.2);
            padding: 6px 14px;
            border-radius: 20px;
        }
        .pulse-dot {
            width: 8px;
            height: 8px;
            background-color: var(--color-success);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--color-success);
            animation: pulse-dot-anim 1.5s infinite;
        }
        @keyframes pulse-dot-anim {
            0% { transform: scale(0.9); opacity: 0.6; }
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(0.9); opacity: 0.6; }
        }
        .badge-text {
            font-size: 11px;
            font-weight: 600;
            color: var(--color-success);
            letter-spacing: 0.5px;
        }
        .app-main-grid {
            display: grid;
            grid-template-columns: 340px 1fr 340px;
            gap: 24px;
            align-items: start;
        }
        .panel {
            background: var(--gradient-panel);
            backdrop-filter: var(--blur-glass);
            border: 1px solid var(--color-border);
            border-radius: 20px;
            padding: 24px;
            box-shadow: var(--shadow-card);
            display: flex;
            flex-direction: column;
            gap: 20px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .panel:hover {
            border-color: var(--color-border-hover);
        }
        .panel-header {
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid var(--color-border);
            padding-bottom: 14px;
        }
        .panel-header i {
            font-size: 18px;
        }
        .panel-header h2 {
            font-family: var(--font-heading);
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .text-cyan { color: var(--color-cyan); }
        .text-magenta { color: var(--color-magenta); }
        .text-purple { color: var(--color-purple); }
        .control-panel {
            grid-column: 1;
        }
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .input-label-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .input-label-row label {
            font-size: 13px;
            font-weight: 600;
            color: var(--color-text-main);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .helper-text {
            font-size: 10px;
            color: var(--color-text-muted);
            font-weight: 500;
        }
                .number-input-wrapper {
            display: flex;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--color-border);
            background: #ffffff;
            transition: all 0.2s ease;
        }
        .number-input-wrapper:focus-within {
            border-color: var(--color-cyan);
            box-shadow: 0 0 10px var(--color-cyan-glow);
        }
        .number-input-wrapper:focus-within {
            border-color: var(--color-cyan);
            box-shadow: 0 0 10px var(--color-cyan-glow);
        }
                .custom-number-input {
            flex: 1;
            width: 0;
            min-width: 0;
            background: #f8fafc !important;
            border: none !important;
            outline: none !important;
            color: #0f172a !important;
            padding: 10px 14px !important;
            font-family: var(--font-body) !important;
            font-size: 15px !important;
            font-weight: 700 !important;
            text-align: right !important;
            box-shadow: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: textfield !important;
        }
        .custom-number-input::-webkit-outer-spin-button,
        .custom-number-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .custom-number-input::-webkit-outer-spin-button,
        .custom-number-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
                .unit-badge {
            background: rgba(0, 0, 0, 0.03);
            color: var(--color-text-muted);
            font-size: 11px;
            font-weight: 700;
            padding: 0 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-left: 1px solid var(--color-border);
            pointer-events: none;
            flex-shrink: 0;
        }
        .custom-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: rgba(0, 0, 0, 0.05);
            outline: none;
            margin: 8px 0;
            transition: background 0.2s ease;
        }
        .custom-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.1s ease, box-shadow 0.2s ease;
        }
        #slider-head::-webkit-slider-thumb { background: var(--color-cyan); box-shadow: 0 0 10px var(--color-cyan); }
        #slider-flow::-webkit-slider-thumb { background: var(--color-magenta); box-shadow: 0 0 10px var(--color-magenta); }
        #slider-turb::-webkit-slider-thumb { background: var(--color-purple); box-shadow: 0 0 10px var(--color-purple); }
        .presets-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
            border-top: 1px solid var(--color-border);
            padding-top: 18px;
        }
        .presets-section h3 {
            font-size: 13px;
            font-weight: 700;
            color: var(--color-text-main);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .presets-grid {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .preset-btn {
            background: rgba(0, 0, 0, 0.015);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            padding: 8px 12px;
            cursor: pointer;
            color: var(--color-text-main);
            display: flex;
            align-items: center;
            gap: 12px;
            text-align: left;
            transition: all 0.2s ease;
        }
        .preset-btn:hover {
            background: rgba(0, 0, 0, 0.05);
            border-color: var(--color-border);
            transform: translateX(4px);
        }
        .preset-btn.active {
            background: linear-gradient(90deg, var(--color-cyan-glow), var(--color-magenta-glow));
            border-color: var(--color-cyan);
            box-shadow: 0 0 10px var(--color-cyan-glow);
        }
        .preset-icon {
            width: 28px;
            height: 28px;
            background: rgba(0, 0, 0, 0.02);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--color-cyan);
        }
        .preset-btn:hover .preset-icon, .preset-btn.active .preset-icon {
            background: var(--gradient-primary);
            color: #fff;
            box-shadow: var(--shadow-neon-cyan);
        }
        .preset-name {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.25px;
        }
        .simulation-panel {
            grid-column: 2;
            align-self: start;
        }
        .canvas-wrapper {
            position: relative;
            width: 100%;
            background: radial-gradient(circle at center, #ffffff 0%, #f1f5f9 100%);
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #physics-canvas {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 10;
        }
        .simulation-metrics-strip {
            display: flex;
            background: rgba(0, 0, 0, 0.01);
            border: 1px solid var(--color-border);
            border-radius: 12px;
            padding: 12px 20px;
            justify-content: space-around;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
        }
        .mini-metric {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            text-align: center;
        }
        .mini-metric .label {
            font-size: 10px;
            font-weight: 600;
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .mini-metric .value {
            font-size: 14px;
            font-weight: 700;
            color: var(--color-text-main);
            font-family: var(--font-heading);
        }
        .mini-divider {
            width: 1px;
            height: 24px;
            background: rgba(0, 0, 0, 0.03);
        }
        .results-panel {
            grid-column: 3;
        }
        .ratio-readout-box {
            background: linear-gradient(135deg, rgba(0, 242, 254, 0.08) 0%, rgba(138, 43, 226, 0.03) 100%);
            border: 1px solid rgba(0, 242, 254, 0.25);
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            box-shadow: 0 0 15px rgba(0, 242, 254, 0.05);
        }
        .ratio-title {
            font-size: 11px;
            font-weight: 700;
            color: var(--color-cyan);
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .ratio-value {
            font-family: var(--font-heading);
            font-weight: 800;
            font-size: 32px;
            background: linear-gradient(90deg, var(--color-text-main), var(--color-cyan));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .ratio-type {
            font-size: 11px;
            font-weight: 600;
            color: var(--color-text-muted);
        }
        .results-grid {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .result-card {
            background: rgba(255, 255, 255, 0.85);
            box-shadow: 0 2px 8px rgba(0,0,0,0.03);
            border: 1px solid var(--color-border);
            border-radius: 12px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            transition: all 0.2s ease;
        }
        .result-card:hover {
            transform: translateY(-2px);
            border-color: rgba(0, 242, 254, 0.2);
            background: rgba(0, 242, 254, 0.03);
        }
        .card-icon {
            width: 38px;
            height: 38px;
            background: rgba(0, 0, 0, 0.015);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: var(--color-text-muted);
        }
        .result-card:hover .card-icon {
            color: var(--color-cyan);
            border-color: rgba(0, 242, 254, 0.3);
            background: rgba(0, 242, 254, 0.1);
        }
        .card-content {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .card-unit {
            font-size: 11px;
            font-weight: 600;
            color: var(--color-text-muted);
        }
        .card-value {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 18px;
            color: var(--color-text-main);
        }
        .formula-card {
            background: rgba(0, 0, 0, 0.01);
            border: 1px solid var(--color-border);
            border-radius: 12px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            font-size: 12px;
        }
        .formula-card h4 {
            font-weight: 700;
            color: var(--color-text-main);
        }
        .formula-equation {
            font-family: monospace;
            color: var(--color-cyan);
            font-size: 13px;
            background: #f8fafc;
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid var(--color-border);
            text-align: center;
        }
        @container hydro-container (max-width: 1024px) {
            .app-main-grid {
                grid-template-columns: 1fr;
            }
            .control-panel, .simulation-panel, .results-panel, .results-panel {
                grid-column: 1;
            }
            .simulation-panel {
                order: -1;
            }
        }
        .preset-details {
            display: flex;
            flex-direction: column;
            gap: 2px;
            align-items: flex-start;
            text-align: left;
        }
        .preset-spec {
            font-size: 11px;
            color: var(--color-text-muted);
            font-weight: 500;
        }
        .preset-name {
            font-size: 13px !important;
        }
/* ━━ WordPress 레이아웃 Override: 디자인 1 (2열 컴팩트 대칭 레이아웃) ━━ */
.energyconversion-calculator-wrapper .app-main-grid,
.energyconversion-calculator-wrapper .main-grid,
.energyconversion-calculator-wrapper .sim-grid {
    display: grid !important;
    grid-template-columns: 340px 1fr !important;
    gap: 24px !important;
    align-items: start !important;
}
/* 3열 레이아웃을 2열 레이아웃으로 변경하는 특화 스타일 */
.energyconversion-calculator-wrapper .right-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    min-width: 0 !important;
    grid-column: 2 !important;
}
.energyconversion-calculator-wrapper .simulation-panel,
.energyconversion-calculator-wrapper .canvas-panel,
.energyconversion-calculator-wrapper .sim-panel {
    grid-column: auto !important;
    order: 1 !important;
    align-self: stretch !important;
}
.energyconversion-calculator-wrapper .control-panel {
    grid-column: 1 !important;
}
/* 2열 통합 결과 분석 영역 레이아웃 */
.energyconversion-calculator-wrapper .simulation-results-section {
    display: grid !important;
    grid-template-columns: 1.1fr 1.3fr !important;
    gap: 20px !important;
    border-top: 1px solid var(--color-border) !important;
    padding-top: 20px !important;
    margin-top: 10px !important;
    align-items: stretch !important;
}
/* Readout Box 스타일 */
.energyconversion-calculator-wrapper .simulation-results-section .ratio-readout-box,
.energyconversion-calculator-wrapper .simulation-results-section .re-readout-box,
.energyconversion-calculator-wrapper .simulation-results-section .status-readout-box,
.energyconversion-calculator-wrapper .simulation-results-section .gauge-container {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.energyconversion-calculator-wrapper .simulation-results-section .results-grid {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    justify-content: flex-start !important;
}
.energyconversion-calculator-wrapper .simulation-results-section .results-grid .result-card {
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    min-height: 72px !important;
    height: auto !important;
    padding: 12px 16px !important;
}
.energyconversion-calculator-wrapper .simulation-results-section .formula-card {
    grid-column: 1 !important;
    grid-row: 2 !important;
}
/* 모바일/반응형 (800px 이하) ── 항상 세로형(1열) 정렬 및 시뮬레이터 캔버스 최상단 배치 */
@media (max-width: 800px) {
    .energyconversion-calculator-wrapper .app-main-grid,
    .energyconversion-calculator-wrapper .main-grid,
    .energyconversion-calculator-wrapper .sim-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .energyconversion-calculator-wrapper .control-panel {
        order: 2 !important;
        width: 100% !important;
    }
    .energyconversion-calculator-wrapper .right-column {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .energyconversion-calculator-wrapper .simulation-panel,
    .energyconversion-calculator-wrapper .canvas-panel,
    .energyconversion-calculator-wrapper .sim-panel,
    .energyconversion-calculator-wrapper .canvas-section {
        order: -1 !important;
    }
    .energyconversion-calculator-wrapper .simulation-results-section {
        grid-template-columns: 1fr !important;
    }
    .energyconversion-calculator-wrapper .simulation-results-section .ratio-readout-box,
    .energyconversion-calculator-wrapper .simulation-results-section .re-readout-box,
    .energyconversion-calculator-wrapper .simulation-results-section .status-readout-box,
    .energyconversion-calculator-wrapper .simulation-results-section .gauge-container {
        grid-column: 1 !important;
        grid-row: auto !important;
        height: auto !important;
    }
    .energyconversion-calculator-wrapper .simulation-results-section .results-grid {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    .energyconversion-calculator-wrapper .simulation-results-section .formula-card {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}
.energyconversion-calculator-wrapper .app-container,
.energyconversion-calculator-wrapper .main-container {
    max-width: 100% !important;
    padding: 12px !important;
}
/* Premium Advice/Formula Card & Typography Overrides */
.energyconversion-calculator-wrapper .simulation-results-section .formula-card,
.energyconversion-calculator-wrapper .results-panel .formula-card {
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.energyconversion-calculator-wrapper .simulation-results-section .formula-card h4,
.energyconversion-calculator-wrapper .results-panel .formula-card h4 {
    font-weight: 700 !important;
    color: var(--color-text-main) !important;
}
.energyconversion-calculator-wrapper #text-judgment {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--color-text-muted) !important;
    line-height: 1.6 !important;
    word-break: keep-all !important;
}
</style>
<div class="energyconversion-calculator-wrapper" style="position: relative; width: 100%; box-sizing: border-box; overflow: hidden; margin: 30px auto; border-radius: 20px;">
    <div class="app-background-glow" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden;"></div>
    <div style="position: relative; z-index: 2; width: 100%;">
    <div class="app-container">
        <!-- Header -->
        <header class="app-header">
            <div class="logo-area">
                <div class="logo-icon"><i class="fa-solid fa-water fa-spin-slow text-cyan"></i></div>
                <div>
                    <h1>ENERGY CONVERSION</h1>
                    <div class="subtitle">수력 에너지 전력 전환 계산기 &#038; 실시간 시뮬레이터</div>
                </div>
            </div>
            <div class="header-badge">
                <div class="pulse-dot"></div>
                <div class="badge-text">HYDRO POWER UNIT ONLINE</div>
            </div>
        </header>
        <!-- Main Layout Grid -->
        <main class="app-main-grid">
            <!-- Left Panel: Controls -->
            <section class="panel control-panel">
                <div class="panel-header">
                    <i class="fa-solid fa-sliders text-cyan"></i>
                    <h2>유체역학 발전 조건</h2>
                </div>
                <!-- Head height (h) -->
                <div class="input-group">
                    <div class="input-label-row">
                        <label><i class="fa-solid fa-mountain text-cyan"></i> 유효 발전 낙차 (H)</label>
                        <span id="txt-head-range-help" class="helper-text">(10 ~ 300 m)</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-head" class="custom-number-input" min="10" max="300" value="120">
                        <select id="select-head-unit" style="position: absolute; right: 1px; top: 1px; bottom: 1px; background: rgba(0, 0, 0, 0.03); color: var(--color-text-main); font-size: 11px; font-weight: 700; padding: 0 10px; border: none; border-left: 1px solid var(--color-border); outline: none; cursor: pointer; font-family: var(--font-body); letter-spacing: 0.5px;">
                            <option value="m" selected>m</option>
                            <option value="ft">ft</option>
                            <option value="in">in</option>
                        </select>
                    </div>
                    <input type="range" id="slider-head" class="custom-slider" min="10" max="300" step="5" value="120">
                </div>
                <!-- Volumetric Flow Q -->
                <div class="input-group">
                    <div class="input-label-row">
                        <label><i class="fa-solid fa-droplet text-magenta"></i> 배관 관류 유량 (Q)</label>
                        <span id="txt-flow-range-help" class="helper-text">(0.5 ~ 50.0 m³/s)</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-flow" class="custom-number-input" min="0.5" max="50.0" step="0.5" value="12.0">
                        <select id="select-flow-unit" style="position: absolute; right: 1px; top: 1px; bottom: 1px; background: rgba(0, 0, 0, 0.03); color: var(--color-text-main); font-size: 11px; font-weight: 700; padding: 0 10px; border: none; border-left: 1px solid var(--color-border); outline: none; cursor: pointer; font-family: var(--font-body); letter-spacing: 0.5px;">
                            <option value="m3s" selected>m³/s</option>
                            <option value="ls">L/s</option>
                            <option value="lpm">L/min</option>
                            <option value="cfs">ft³/s</option>
                        </select>
                    </div>
                    <input type="range" id="slider-flow" class="custom-slider" min="5" max="500" step="5" value="120">
                </div>
                <!-- Turbine Efficiency (eta-t) -->
                <div class="input-group">
                    <div class="input-label-row">
                        <label><i class="fa-solid fa-gear text-purple"></i> 수차 날개깃 효율 (η_t)</label>
                        <span class="helper-text">(50 ~ 95 %)</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-turb" class="custom-number-input" min="50" max="95" value="88">
                        <div class="unit-badge">%</div>
                    </div>
                    <input type="range" id="slider-turb" class="custom-slider" min="50" max="95" step="1" value="88">
                </div>
                <!-- Generator Efficiency (eta-g) -->
                <div class="input-group">
                    <div class="input-label-row">
                        <label><i class="fa-solid fa-bolt"></i> 발전 코일 효율 (η_g)</label>
                        <span class="helper-text">(70 ~ 98 %)</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-gen" class="custom-number-input" min="70" max="98" value="94">
                        <div class="unit-badge">%</div>
                    </div>
                </div>
                <!-- Presets -->
                <div class="presets-section">
                    <h3><i class="fa-solid fa-tags text-cyan"></i> 수력 발전 프리셋</h3>
                    <div class="presets-grid">
                        <button class="preset-btn" data-preset="small">
                            <div class="preset-icon"><i class="fa-solid fa-mountain-sun"></i></div>
                            <div class="preset-details"><span class="preset-name">산간 소수력 소형 보</span><span class="preset-spec">30m, 1.5m³/s, 80%/90%</span></div>
                        </button>
                        <button class="preset-btn" data-preset="medium">
                            <div class="preset-icon"><i class="fa-solid fa-house-laptop"></i></div>
                            <div class="preset-details"><span class="preset-name">중형 계곡 조절용 댐</span><span class="preset-spec">120m, 12m³/s, 88%/94%</span></div>
                        </button>
                        <button class="preset-btn" data-preset="mega">
                            <div class="preset-icon"><i class="fa-solid fa-industry"></i></div>
                            <div class="preset-details"><span class="preset-name">대용량 양수 발전소</span><span class="preset-spec">280m, 35m³/s, 92%/96%</span></div>
                        </button>
                    </div>
                </div>
            </section>
            <!-- Auto Injected Right Column wrapper for Design 1 -->
            <div class="right-column">
                <section class="panel simulation-panel">
                                <div class="panel-header">
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <i class="fa-solid fa-circle-nodes text-cyan"></i>
                                        <h2>실시간 수량 유동 및 터빈-발전기 2D 변환</h2>
                                    </div>
                                    <div id="txt-conversion-state" class="canvas-scale-indicator text-cyan">유입 유량 안정</div>
                                </div>
                                <div class="canvas-wrapper">
                                    <canvas id="physics-canvas"></canvas>
                                </div>
                                <!-- Mini Metrics -->
                                <div class="simulation-metrics-strip">
                                    <div class="mini-metric">
                                        <div class="label">수차 입력 기계출력</div>
                                        <div id="txt-turb-input" class="value">0.00 MW</div>
                                    </div>
                                    <div class="mini-divider"></div>
                                    <div class="mini-metric">
                                        <div class="label">발전량 이산화탄소 저감 기여</div>
                                        <div id="txt-co2-live" class="value">0.0 kg/h</div>
                                    </div>
                                </div>
                                <!-- Integrated Results Analysis Section -->
                            <div class="simulation-results-section">
                                <div class="ratio-readout-box">
                                    <div class="ratio-title">계통 총 전력 생산 용량 (P_net)</div>
                                    <div>
                                        <span id="txt-net-power-value" class="ratio-value">11.89</span>
                                        <select id="select-output-unit">
                                            <option value="MW" selected>MW</option>
                                            <option value="kW">kW</option>
                                        </select>
                                    </div>
                                    <div id="txt-daily-mwh" class="ratio-type">(예상 하루 총 발전량: 285.4 MWh)</div>
                                </div>
                                <div class="results-grid">
                                        <div class="result-card">
                                        <div class="card-icon"><i class="fa-solid fa-water text-cyan"></i></div>
                                        <div class="card-content">
                                            <span class="card-unit">원천 잠재 수동 출력 (P_gross)</span>
                                            <span id="txt-gross-out" class="card-value">14.13 MW</span>
                                        </div>
                                    </div>
                                        <div class="result-card">
                                        <div class="card-icon"><i class="fa-solid fa-fire text-magenta"></i></div>
                                        <div class="card-content">
                                            <span class="card-unit">기계/전자기 총 변환 손실</span>
                                            <span id="txt-loss-out" class="card-value">2.24 MW</span>
                                        </div>
                                    </div>
                                        <div class="result-card">
                                        <div class="card-icon"><i class="fa-solid fa-leaf text-purple"></i></div>
                                        <div class="card-content">
                                            <span class="card-unit">일일 탄소 배출 저감량 (CO₂)</span>
                                            <span id="txt-co2-daily" class="card-value">128.4 Tons/day</span>
                                        </div>
                                    </div>
                                    </div>
                                <div class="formula-card"
                                    <h4>수력 기계-전기 변환 공식</h4>
                                    <div class="formula-equation">P_gross = 9.81 × Q × H [kW]</div>
                                    <div class="formula-equation">P_net = P_gross × η_turbine × η_generator</div>
                                </div>
                            </div>
                </section>
            </div>
            <!-- Right Panel: Quantitative Results -->
        </main>
        <!-- Disclaimer Footer -->
        <footer class="app-disclaimer" style="margin-top: 20px; padding: 12px 16px; background: rgba(0, 0, 0, 0.015); border: 1px solid var(--color-border); border-radius: 12px; font-size: 11px; color: var(--color-text-muted); line-height: 1.5; text-align: left; display: flex; gap: 10px; align-items: flex-start; clear: both;">
            <i class="fa-solid fa-circle-info" style="color: var(--color-cyan); font-size: 14px; margin-top: 2px; flex-shrink: 0;"></i>
            <span><strong>면책 조항 (Disclaimer):</strong> 본 시뮬레이터의 계산 결과는 교육 및 참고용으로만 제공되며, 실제 제품 설계나 제작 시에는 반드시 최신 공학 규격 및 공식 표준 설계 기준을 재확인하시기 바랍니다. 계산 값의 무결성을 보장하지 않으며, 이로 인해 발생하는 직접적/간접적 손해에 대해 제작자 및 본 블로그는 어떠한 책임을 지지 않습니다.</span>
        </footer>
</div>
    <!-- JavaScript Circuit Simulation Engine -->
    </div>
</div>
<script>
        (function() {
        let isInit = false;
        function initSimulator() {
            if (isInit) return;
            const canvas = document.getElementById('physics-canvas');
            if (!canvas) return;
            const ctx = canvas.getContext('2d');
            if (!ctx) return;
            isInit = true;
            window.__hydro_initialized = true;
            // DOM Elements
            const sliderHead = document.getElementById('slider-head');
            const inputHead = document.getElementById('input-head');
            const sliderFlow = document.getElementById('slider-flow');
            const inputFlow = document.getElementById('input-flow');
            const sliderTurb = document.getElementById('slider-turb');
            const inputTurb = document.getElementById('input-turb');
            const inputGen = document.getElementById('input-gen');
            const selectHeadUnit = document.getElementById('select-head-unit');
            const selectFlowUnit = document.getElementById('select-flow-unit');
            const selectOutputUnit = document.getElementById('select-output-unit');
            const txtHeadRangeHelp = document.getElementById('txt-head-range-help');
            const txtFlowRangeHelp = document.getElementById('txt-flow-range-help');
            const presetButtons = document.querySelectorAll('.preset-btn');
            const txtDailyMwh = document.getElementById('txt-daily-mwh');
            const txtGrossOut = document.getElementById('txt-gross-out');
            const txtLossOut = document.getElementById('txt-loss-out');
            const txtCo2Daily = document.getElementById('txt-co2-daily');
            const txtTurbInput = document.getElementById('txt-turb-input');
            const txtCo2Live = document.getElementById('txt-co2-live');
            // State variables
            const state = {
                head: 120.0, // displayed value
                flow: 12.0, // displayed value
                headUnit: 'm',
                flowUnit: 'm3s',
                outputUnit: 'MW',
                turbEff: 0.88,
                genEff: 0.94,
                // Animation variables
                waterParticles: [],
                turbineAngle: 0.0,
                powerSparks: [],
                sparkTimer: 0.0,
                lastTime: 0
            };
            // Unit Converter Dictionaries
            const headUnitConverters = {
                m: 1.0,
                ft: 0.3048,
                in: 0.0254
            };
            const flowUnitConverters = {
                m3s: 1.0,
                ls: 0.001,
                lpm: 1.0 / 60000.0,
                cfs: 0.0283168
            };
            const headUnitLimits = {
                m: { min: 10, max: 300, step: 5, label: "(10 ~ 300 m)" },
                ft: { min: 30, max: 1000, step: 10, label: "(30 ~ 1,000 ft)" },
                in: { min: 400, max: 12000, step: 100, label: "(400 ~ 12,000 in)" }
            };
            const flowUnitLimits = {
                m3s: { min: 0.5, max: 50.0, step: 0.5, label: "(0.5 ~ 50.0 m³/s)" },
                ls: { min: 500, max: 50000, step: 500, label: "(500 ~ 50,000 L/s)" },
                lpm: { min: 30000, max: 3000000, step: 30000, label: "(30,000 ~ 3,000,000 L/min)" },
                cfs: { min: 18, max: 1800, step: 10, label: "(18 ~ 1,800 ft³/s)" }
            };
            function resizeCanvas() {
                const rect = canvas.getBoundingClientRect();
                const dpr = window.devicePixelRatio || 1;
                canvas.width = rect.width * dpr;
                canvas.height = rect.height * dpr;
                ctx.scale(dpr, dpr);
            }
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            setTimeout(resizeCanvas, 300);
            // Dynamic Limits & Value Conversions
            function updateHeadUnit() {
                const oldUnit = state.headUnit;
                const newUnit = selectHeadUnit.value;
                state.headUnit = newUnit;
                // Convert current displayed value
                const valInMeters = state.head * headUnitConverters[oldUnit];
                const newVal = valInMeters / headUnitConverters[newUnit];
                // Set new limits
                const lim = headUnitLimits[newUnit];
                inputHead.min = lim.min;
                inputHead.max = lim.max;
                sliderHead.min = lim.min;
                sliderHead.max = lim.max;
                sliderHead.step = lim.step;
                txtHeadRangeHelp.innerText = lim.label;
                // Clamp value to new limits
                let clampedVal = Math.round(newVal);
                if (clampedVal < lim.min) clampedVal = lim.min;
                if (clampedVal > lim.max) clampedVal = lim.max;
                state.head = clampedVal;
                inputHead.value = clampedVal;
                sliderHead.value = clampedVal;
                updateCalculations();
            }
            function updateFlowUnit() {
                const oldUnit = state.flowUnit;
                const newUnit = selectFlowUnit.value;
                state.flowUnit = newUnit;
                // Convert current value
                const valInM3s = state.flow * flowUnitConverters[oldUnit];
                const newVal = valInM3s / flowUnitConverters[newUnit];
                const lim = flowUnitLimits[newUnit];
                inputFlow.min = lim.min;
                inputFlow.max = lim.max;
                // Adjust slider limits and steps dynamically
                if (newUnit === 'm3s') {
                    sliderFlow.min = 5; // representing 0.5
                    sliderFlow.max = 500; // representing 50.0
                    sliderFlow.step = 5;
                    sliderFlow.value = Math.round(newVal * 10);
                } else if (newUnit === 'ls') {
                    sliderFlow.min = 500;
                    sliderFlow.max = 50000;
                    sliderFlow.step = 500;
                    sliderFlow.value = Math.round(newVal);
                } else if (newUnit === 'lpm') {
                    sliderFlow.min = 30000;
                    sliderFlow.max = 3000000;
                    sliderFlow.step = 30000;
                    sliderFlow.value = Math.round(newVal);
                } else if (newUnit === 'cfs') {
                    sliderFlow.min = 18;
                    sliderFlow.max = 1800;
                    sliderFlow.step = 10;
                    sliderFlow.value = Math.round(newVal);
                }
                txtFlowRangeHelp.innerText = lim.label;
                let clampedVal = newVal;
                if (clampedVal < lim.min) clampedVal = lim.min;
                if (clampedVal > lim.max) clampedVal = lim.max;
                state.flow = clampedVal;
                inputFlow.value = newUnit === 'm3s' ? clampedVal.toFixed(1) : Math.round(clampedVal);
                updateCalculations();
            }
            // Sync Inputs
            function syncHeadFromSlider() {
                const val = parseInt(sliderHead.value);
                inputHead.value = val;
                state.head = val;
                clearPresets();
                updateCalculations();
            }
            function syncHeadFromInput() {
                let val = parseInt(inputHead.value);
                const lim = headUnitLimits[state.headUnit];
                if (isNaN(val)) { val = lim.min; }
                if (val < lim.min) { val = lim.min; }
                if (val > lim.max) { val = lim.max; }
                sliderHead.value = val;
                state.head = val;
                inputHead.value = val;
                clearPresets();
                updateCalculations();
            }
            // Sync Flow
            function syncFlowFromSlider() {
                let val;
                if (state.flowUnit === 'm3s') {
                    val = parseFloat(sliderFlow.value) / 10.0;
                    inputFlow.value = val.toFixed(1);
                } else {
                    val = parseFloat(sliderFlow.value);
                    inputFlow.value = Math.round(val);
                }
                state.flow = val;
                clearPresets();
                updateCalculations();
            }
            function syncFlowFromInput() {
                let val = parseFloat(inputFlow.value);
                const lim = flowUnitLimits[state.flowUnit];
                if (isNaN(val)) { val = lim.min; }
                if (val < lim.min) { val = lim.min; }
                if (val > lim.max) { val = lim.max; }
                if (state.flowUnit === 'm3s') {
                    sliderFlow.value = Math.round(val * 10);
                    inputFlow.value = val.toFixed(1);
                } else {
                    sliderFlow.value = Math.round(val);
                    inputFlow.value = Math.round(val);
                }
                state.flow = val;
                clearPresets();
                updateCalculations();
            }
            function syncTurbFromSlider() {
                const val = parseInt(sliderTurb.value);
                inputTurb.value = val;
                state.turbEff = val / 100.0;
                clearPresets();
                updateCalculations();
            }
            function syncTurbFromInput() {
                let val = parseInt(inputTurb.value);
                if (isNaN(val)) { val = 50; }
                if (val < 50) { val = 50; }
                if (val > 95) { val = 95; }
                sliderTurb.value = val;
                state.turbEff = val / 100.0;
                clearPresets();
                updateCalculations();
            }
            // Core Energy Sizing calculations (With exact unit conversions to SI standards)
            function updateCalculations() {
                const headInMeters = state.head * headUnitConverters[state.headUnit];
                const flowInM3s = state.flow * flowUnitConverters[state.flowUnit];
                // Gross potential power: P_gross = rho * Q * g * H
                const g = 9.81;
                const pGrossKw = g * flowInM3s * headInMeters; // kW
                const pGrossMw = pGrossKw / 1000.0;
                // Net Electric Power: P_net = P_gross * eta_t * eta_g
                const pNetMw = pGrossMw * state.turbEff * state.genEff;
                const pLossMw = pGrossMw - pNetMw;
                // Daily Generation: MWh = P_net * 24
                const eDailyMwh = pNetMw * 24.0;
                // Carbon offset: tons of CO2 = MWh * 0.45
                const co2SavedTons = eDailyMwh * 0.45;
                // Dynamic formatting factor based on output unit (MW vs kW)
                const isMW = state.outputUnit === 'MW';
                const scaleFactor = isMW ? 1.0 : 1000.0;
                const powerUnitLabel = isMW ? ' MW' : ' kW';
                const energyUnitLabel = isMW ? ' MWh' : ' kWh';
                const decPlaces = isMW ? 2 : 0;
                // Scaled power and energy values
                const pNetScaled = pNetMw * scaleFactor;
                const pGrossScaled = pGrossMw * scaleFactor;
                const pLossScaled = pLossMw * scaleFactor;
                const eDailyScaled = eDailyMwh * scaleFactor;
                // Set net power value text (without unit label)
                const txtNetPowerVal = document.getElementById('txt-net-power-value');
                if (txtNetPowerVal) {
                    txtNetPowerVal.innerText = pNetScaled.toFixed(decPlaces);
                }
                txtDailyMwh.innerText = '(예상 하루 총 발전량: ' + eDailyScaled.toFixed(isMW ? 1 : 0) + energyUnitLabel + ')';
                txtGrossOut.innerText = pGrossScaled.toFixed(decPlaces) + powerUnitLabel;
                txtLossOut.innerText = pLossScaled.toFixed(decPlaces) + powerUnitLabel;
                txtCo2Daily.innerText = co2SavedTons.toFixed(1) + ' Tons/day';
                // Mini stats
                const mechanicalInputScaled = (pGrossMw * state.turbEff) * scaleFactor;
                txtTurbInput.innerText = mechanicalInputScaled.toFixed(decPlaces) + powerUnitLabel;
                // CO2 rate saved per hour in kg
                const co2SavedKgPerHour = pNetMw * 0.45 * 1000.0;
                txtCo2Live.innerText = co2SavedKgPerHour.toFixed(0) + ' kg/h';
            }
            // Presets (Resets selectors to standard SI system for predictability)
            function loadPreset(key) {
                clearPresets();
                presetButtons.forEach(btn => {
                    if (btn.dataset.preset === key) {
                        btn.classList.add('active');
                    }
                });
                // Reset units to standard
                selectHeadUnit.value = 'm';
                state.headUnit = 'm';
                txtHeadRangeHelp.innerText = headUnitLimits.m.label;
                inputHead.min = headUnitLimits.m.min;
                inputHead.max = headUnitLimits.m.max;
                sliderHead.min = headUnitLimits.m.min;
                sliderHead.max = headUnitLimits.m.max;
                sliderHead.step = headUnitLimits.m.step;
                selectFlowUnit.value = 'm3s';
                state.flowUnit = 'm3s';
                txtFlowRangeHelp.innerText = flowUnitLimits.m3s.label;
                inputFlow.min = flowUnitLimits.m3s.min;
                inputFlow.max = flowUnitLimits.m3s.max;
                sliderFlow.min = 5;
                sliderFlow.max = 500;
                sliderFlow.step = 5;
                if (selectOutputUnit) {
                    selectOutputUnit.value = 'MW';
                    state.outputUnit = 'MW';
                }
                if (key === 'small') {
                    state.head = 30;
                    state.flow = 1.5;
                    state.turbEff = 0.80;
                    state.genEff = 0.90;
                }
                if (key === 'medium') {
                    state.head = 120;
                    state.flow = 12.0;
                    state.turbEff = 0.88;
                    state.genEff = 0.94;
                }
                if (key === 'mega') {
                    state.head = 280;
                    state.flow = 35.0;
                    state.turbEff = 0.92;
                    state.genEff = 0.96;
                }
                // Sync UI elements
                inputHead.value = state.head;
                sliderHead.value = state.head;
                inputFlow.value = state.flow.toFixed(1);
                sliderFlow.value = Math.round(state.flow * 10);
                inputTurb.value = Math.round(state.turbEff * 100);
                sliderTurb.value = Math.round(state.turbEff * 100);
                inputGen.value = Math.round(state.genEff * 100);
                updateCalculations();
            }
            function clearPresets() {
                presetButtons.forEach(btn => btn.classList.remove('active'));
            }
            // Bind Event Listeners
            sliderHead.addEventListener('input', syncHeadFromSlider);
            inputHead.addEventListener('change', syncHeadFromInput);
            sliderFlow.addEventListener('input', syncFlowFromSlider);
            inputFlow.addEventListener('change', syncFlowFromInput);
            sliderTurb.addEventListener('input', syncTurbFromSlider);
            inputTurb.addEventListener('change', syncTurbFromInput);
            selectHeadUnit.addEventListener('change', updateHeadUnit);
            selectFlowUnit.addEventListener('change', updateFlowUnit);
            if (selectOutputUnit) {
                selectOutputUnit.addEventListener('change', () => {
                    state.outputUnit = selectOutputUnit.value;
                    updateCalculations();
                });
            }
            inputGen.addEventListener('change', () => {
                let val = parseInt(inputGen.value);
                if (isNaN(val)) { val = 70; }
                if (val < 70) { val = 70; }
                if (val > 98) { val = 98; }
                inputGen.value = val;
                state.genEff = val / 100.0;
                clearPresets();
                updateCalculations();
            });
            presetButtons.forEach(btn => {
                btn.addEventListener('click', () => {
                    loadPreset(btn.dataset.preset);
                });
            });
            // Animation Loop
            function animate(currentTime) {
                requestAnimationFrame(animate);
                let dt = (currentTime - state.lastTime) / 1000;
                if (isNaN(dt)) { dt = 0.016; }
                if (dt < 0) { dt = 0.016; }
                if (dt > 1.0) { dt = 0.016; }
                state.lastTime = currentTime;
                const width = canvas.width / (window.devicePixelRatio || 1);
                const height = canvas.height / (window.devicePixelRatio || 1);
                ctx.clearRect(0, 0, width, height);
                // Draw blueprint grid
                ctx.save();
                ctx.strokeStyle = 'rgba(2, 132, 199, 0.06)';
                ctx.lineWidth = 1;
                const gridSpacing = 25;
                for (let x = 0; x < width; x += gridSpacing) {
                    ctx.beginPath();
                    ctx.moveTo(x, 0);
                    ctx.lineTo(x, height);
                    ctx.stroke();
                }
                for (let y = 0; y < height; y += gridSpacing) {
                    ctx.beginPath();
                    ctx.moveTo(0, y);
                    ctx.lineTo(width, y);
                    ctx.stroke();
                }
                ctx.restore();
                // Dynamic coordinate mapping of Hydroelectric System
                // Use absolute SI values for physics dynamics
                const headInMeters = state.head * headUnitConverters[state.headUnit];
                const flowInM3s = state.flow * flowUnitConverters[state.flowUnit];
                const resX = 50; // upper reservoir
                const resY = height - 190 - (headInMeters / 300.0) * 80.0;
                const resW = 75;
                const resH = 45;
                const turbX = width / 2 - 30; // turbine house
                const turbY = height - 95;
                const turbR = 26; // turbine runner size
                const genX = turbX + 70; // generator adjacent to turbine
                const genY = turbY - 5;
                const gridPylonX = width - 60; // grid transmission pylons
                const gridPylonY = height - 170;
                // 1. Spawning water flow particles inside the sloped penstock pipe
                // Spawn rate proportional to Volumetric flow Q in M3s
                const spawnInterval = 0.2 / (flowInM3s / 10.0 + 0.1);
                state.sparkTimer += dt;
                if (state.sparkTimer >= spawnInterval) {
                    state.sparkTimer = 0;
                    state.waterParticles.push({
                        x: resX + resW,
                        y: resY + resH - 12,
                        progress: 0.0,
                        speed: 1.0 + (headInMeters / 300.0) * 1.5
                    });
                }
                // 2. Animate Water Penstock particles
                ctx.save();
                ctx.strokeStyle = "rgba(71, 85, 105, 0.15)";
                ctx.lineWidth = 14;
                ctx.lineCap = "round";
                ctx.beginPath();
                ctx.moveTo(resX + resW - 4, resY + resH - 12);
                ctx.lineTo(turbX, turbY);
                ctx.stroke();
                ctx.fillStyle = "#0284c7";
                for (let i = state.waterParticles.length - 1; i >= 0; i--) {
                    const p = state.waterParticles[i];
                    p.progress += p.speed * dt;
                    const startX = resX + resW;
                    const startY = resY + resH - 12;
                    const curX = startX + p.progress * (turbX - startX);
                    const curY = startY + p.progress * (turbY - startY);
                    ctx.beginPath();
                    ctx.arc(curX, curY, 3.5, 0, Math.PI * 2);
                    ctx.fill();
                    if (p.progress >= 1.0) {
                        state.waterParticles.splice(i, 1);
                        const gPower = 9.81 * flowInM3s * headInMeters * state.turbEff * state.genEff / 1000.0; // MW
                        if (gPower > 0.5) {
                            for (let s = 0; s < 4; s++) {
                                state.powerSparks.push({
                                    x: genX + (Math.random() - 0.5) * 12,
                                    y: genY + (Math.random() - 0.5) * 12,
                                    progress: 0.0,
                                    speed: 1.5 + Math.random() * 1.0
                                });
                            }
                        }
                    }
                }
                ctx.restore();
                // 3. Render Upper Reservoir Water Volume Tank
                ctx.save();
                ctx.fillStyle = "rgba(255, 255, 255, 0.75)";
                ctx.strokeStyle = "#94a3b8";
                ctx.lineWidth = 3;
                ctx.beginPath();
                ctx.rect(resX, resY, resW, resH);
                ctx.fill();
                ctx.stroke();
                ctx.fillStyle = "rgba(2, 132, 199, 0.15)";
                ctx.beginPath();
                ctx.rect(resX + 1.5, resY + resH - 30, resW - 3, 28.5);
                ctx.fill();
                ctx.fillStyle = "#0284c7";
                ctx.font = "bold 9px Outfit, sans-serif";
                ctx.fillText("가용 유량 수위", resX + 8, resY + 18);
                ctx.restore();
                // 4. Francis Water Turbine wheel rotation speed
                const rotSpeed = (flowInM3s * 0.2) * (1.0 + (headInMeters / 120.0)) * dt;
                state.turbineAngle += rotSpeed;
                ctx.save();
                ctx.translate(turbX, turbY);
                ctx.rotate(state.turbineAngle);
                ctx.strokeStyle = "#475569";
                ctx.lineWidth = 3.5;
                ctx.fillStyle = "#ffffff";
                ctx.beginPath();
                ctx.arc(0, 0, turbR, 0, Math.PI * 2);
                ctx.fill();
                ctx.stroke();
                ctx.strokeStyle = "#7c3aed";
                ctx.lineWidth = 3;
                for (let blade = 0; blade < 6; blade++) {
                    const bRad = (blade * Math.PI) / 3.0;
                    ctx.beginPath();
                    ctx.moveTo(0, 0);
                    ctx.lineTo(turbR * Math.cos(bRad), turbR * Math.sin(bRad));
                    ctx.stroke();
                }
                ctx.restore();
                // 5. Draw generator housing
                ctx.save();
                ctx.fillStyle = "#f8fafc";
                ctx.strokeStyle = "#334155";
                ctx.lineWidth = 3.0;
                ctx.beginPath();
                ctx.rect(genX - 22, genY - 22, 44, 44);
                ctx.fill();
                ctx.stroke();
                ctx.strokeStyle = "#f59e0b";
                ctx.lineWidth = 2.5;
                ctx.beginPath();
                ctx.arc(genX, genY, 13, 0, Math.PI * 2);
                ctx.stroke();
                ctx.strokeStyle = "#94a3b8";
                ctx.lineWidth = 4;
                ctx.beginPath();
                ctx.moveTo(turbX + turbR, turbY);
                ctx.lineTo(genX - 22, genY);
                ctx.stroke();
                ctx.restore();
                // 6. Draw Transmission Steel Towers (Pylon)
                ctx.save();
                ctx.strokeStyle = "#475569";
                ctx.lineWidth = 2.5;
                ctx.beginPath();
                ctx.moveTo(gridPylonX, gridPylonY);
                ctx.lineTo(gridPylonX - 16, gridPylonY + 65);
                ctx.moveTo(gridPylonX, gridPylonY);
                ctx.lineTo(gridPylonX + 16, gridPylonY + 65);
                ctx.moveTo(gridPylonX - 22, gridPylonY + 16);
                ctx.lineTo(gridPylonX + 22, gridPylonY + 16);
                ctx.stroke();
                ctx.strokeStyle = "rgba(219, 39, 119, 0.2)";
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(genX, genY - 22);
                ctx.quadraticCurveTo((genX + gridPylonX)/2, (genY - 22 + gridPylonY + 16)/2 + 25, gridPylonX, gridPylonY + 16);
                ctx.stroke();
                ctx.restore();
                // 7. Spark Electric Magenta Charge pulses
                ctx.save();
                for (let i = state.powerSparks.length - 1; i >= 0; i--) {
                    const spark = state.powerSparks[i];
                    spark.progress += spark.speed * dt;
                    const sx = genX;
                    const sy = genY - 22;
                    const ex = gridPylonX;
                    const ey = gridPylonY + 16;
                    const cx = (sx + ex) / 2;
                    const cy = (sy + ey) / 2 + 25;
                    const t = spark.progress;
                    const spX = Math.pow(1-t, 2)*sx + 2*(1-t)*t*cx + Math.pow(t, 2)*ex;
                    const spY = Math.pow(1-t, 2)*sy + 2*(1-t)*t*cy + Math.pow(t, 2)*ey;
                    ctx.fillStyle = "#db2777";
                    ctx.beginPath();
                    ctx.arc(spX, spY, 3, 0, Math.PI * 2);
                    ctx.fill();
                    if (spark.progress >= 1.0) {
                        state.powerSparks.splice(i, 1);
                    }
                }
                ctx.restore();
            }
            // Sync preset and run initial calculations
            loadPreset('medium');
            requestAnimationFrame(animate);
            // Right-click & Keyboard shortcuts block
            document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
                alert("이 콘텐츠는 저작권법의 보호를 받습니다. 무단 복제 및 우클릭을 금지합니다.");
                return false;
            }, { capture: true });
            document.addEventListener('selectstart', function(e) {
                e.preventDefault();
                return false;
            }, { capture: true });
            document.addEventListener('keydown', function(e) {
                if (e.key === 'F12') {
                    e.preventDefault();
                    alert("이 콘텐츠는 저작권법의 보호를 받습니다. 무단 복제 및 우클릭을 금지합니다.");
                    return false;
                }
                if (e.ctrlKey) {
                    if (e.key === 'u' || e.key === 'c' || e.key === 's' || e.key === 'U' || e.key === 'C' || e.key === 'S') {
                        e.preventDefault();
                        alert("이 콘텐츠는 저작권법의 보호를 받습니다. 무단 복제 및 우클릭을 금지합니다.");
                        return false;
                    }
                    if (e.shiftKey) {
                        if (['i','I','j','J','c','C'].includes(e.key)) {
                            e.preventDefault();
                            alert("이 콘텐츠는 저작권법의 보호를 받습니다. 무단 복제 및 우클릭을 금지합니다.");
                            return false;
                        }
                    }
                }
            }, { capture: true });
        }
        let initAttempts = 0;
        function tryInit() {
            initAttempts++;
            initSimulator();
            if (!window.__hydro_initialized) {
                if (initAttempts < 50) {
                    setTimeout(tryInit, 100);
                }
            }
        }
        if (document.readyState === 'complete' || document.readyState === 'interactive') {
            tryInit();
        } else {
            document.addEventListener('DOMContentLoaded', tryInit);
            window.addEventListener('load', tryInit);
        }
        })();
</script>


<div style="background: linear-gradient(135deg, rgba(0,242,254,0.03), rgba(138,43,226,0.03)); border: 1px solid rgba(0,242,254,0.15); border-radius: 12px; padding: 18px 24px; margin: 25px auto 35px auto; font-size: 0.95em; color: #4b5563; line-height: 1.7; font-family: sans-serif;">
    <strong style="color: #1f2937; font-size: 1.05em; display: flex; align-items: center; gap: 8px;">
        <span style="font-size: 1.2em;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4a1.png" alt="💡" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> 간편 사용 설명서
    </strong>
    <ol style="margin: 10px 0 0 0; padding-left: 20px;">
        <li style="margin-bottom: 6px;"><strong>수두 낙차(H) 설정: 산악 또는 저수지의 총 유효 가용 낙차 높이(10m ~ 300m)를 슬라이더로 조절합니다.</strong></li>
<li style="margin-bottom: 6px;">체적 유량(Q) 입력: 배관을 관류하는 초당 물의 체적 유량(0.5 ~ 50.0 m³/s)을 설정합니다.</li>
<li style="margin-bottom: 6px;">변환 효율(수차 & 발전기) 조절: 물의 유체 에너지를 회전축 토크로 바꾸는 수차(Turbine) 효율 및 전자기 유도로 유도전력을 생산하는 발전기(Generator)의 정밀 효율을 조절합니다.</li>
<li style="margin-bottom: 6px;">실시간 에너지 유동 모니터링: 도수로의 물 유체 유동, 터빈 스핀 주파수, 전력선 송전 전기 파동의 연성 과정을 실시간 시각 모니터링합니다.</li>
    </ol>
</div>


<details class="premium-seo-accordion" style="border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; background: #fbfbfc; padding: 0; margin: 30px auto; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.01); font-family: sans-serif;">
    <summary style="display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; font-size: 1.1em; font-weight: 700; color: #1f2937; cursor: pointer; user-select: none; outline: none; list-style: none;">
        <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4da.png" alt="📚" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 상세 수력 발전 에너지 변환 수식 해설 확인하기</span>
        <span class="accordion-arrow" style="font-size: 0.9em; color: #9ca3af; transition: transform 0.2s ease;">▼</span>
    </summary>
    <div style="padding: 0 24px 24px 24px; border-top: 1px solid rgba(0,0,0,0.04); background: #ffffff; border-radius: 0 0 12px 12px; font-size: 0.98em; color: #374151; line-height: 1.8;">
        <div style="margin-top: 20px;">
            <h3>1. 수두 위치에너지와 수차 총 입력 동력(Gross Power)의 물리 공식</h3>
<p>중력장 내에서 체적 유량 <code>Q</code>와 유효 낙차 수두 <code>H</code>를 갖는 물 유체의 기계적 <strong>총 입력 출력(Gross Hydro Power, P_gross)</strong>은 다음과 같이 물의 밀도(<code>&rho; = 1000 kg/m³</code>)를 대입하여 유도됩니다.</p><p style="text-align: center; font-weight: bold; background: #f3f4f6; padding: 12px; border-radius: 8px;">P_gross = &rho; &times; Q &times; g &times; H &nbsp;[W]</p><p>단위를 킬로와트(<code>kW</code>)로 환산하면, 중력가속도 <code>g = 9.81 m/s²</code>과 결합되어 다음과 같은 실용 엔지니어링 약식 공식으로 정립됩니다.</p><p style="text-align: center; font-weight: bold; background: #e0f2fe; padding: 12px; border-radius: 8px; color: #0369a1;">P_gross_kW = 9.81 &times; Q &times; H &nbsp;[kW]</p>
<h3>2. 계통 발전 효율과 전기적 출력 전력(P_net) 산정</h3>
<p>실제 에너지 변환 도중에는 관로의 마찰 손실, 수차 러너 날개깃의 난류 유체 마찰, 베어링의 기계 마찰 및 발전기 코일의 열손실(동손 및 철손)이 누적됩니다. 수차 효율 <code>&eta;_t</code>와 발전기 효율 <code>&eta;_g</code>를 곱한 <strong>종합 계통 효율</strong>을 곱하여 최종 생산되는 유효 전력은 다음과 같습니다.</p><p style="text-align: center; font-weight: bold; background: #fee2e2; padding: 16px; border-radius: 8px; color: #991b1b; font-size: 1.05em;">P_net = P_gross &times; &eta;_turbine &times; &eta;_generator &nbsp;[kW]</p><p>이를 하루 24시간 동안 정격 풀가동하는 경우, 총 발전 전력량(MWh)은 다음과 같이 산정되어 지방 분배 그리드로 공급됩니다.</p><p style="text-align: center; font-weight: bold; background: #f3f4f6; padding: 12px; border-radius: 8px;">E_daily = P_net &times; 24 &times; 10^-3 &nbsp;[MWh]</p>
<h3>3. 청정 무탄소 에너지 전환 및 탄소 오프셋 효과</h3>
<p>수력 발전은 연료의 직접 연소 과정이 없으므로 화석 연료(석탄/LNG) 화력 발전 대비 현격한 온실가스 저감 효과를 지닙니다. 국내 전력 계통 기준으로 MWh당 약 <code>0.45 톤(tons)</code>의 이산화탄소(CO₂) 가스 저감율을 지니며, 본 시뮬레이터는 매시간 발전량 연산을 바탕으로 일일 이산화탄소 감소 기여 규모를 정확히 계측하여 환경 비용 절감 가치를 정량 제시합니다.</p>
        </div>
    </div>
</details>
<style>
details.premium-seo-accordion[open] summary .accordion-arrow { transform: rotate(180deg); color: #00f2fe; }
details.premium-seo-accordion summary::-webkit-details-marker { display: none; }
details.premium-seo-accordion:hover { border-color: rgba(0,242,254,0.3); }
</style>

]]></content:encoded>
					
					<wfw:commentRss>https://myengnote.com/hydroelectric-energy-conversion-calculator-simulator/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
