<?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/%ED%8E%8C%ED%94%84%ED%9A%A8%EC%9C%A8/feed/" rel="self" type="application/rss+xml" />
	<link>https://myengnote.com</link>
	<description></description>
	<lastBuildDate>Wed, 08 Jul 2026 04:42:17 +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/pump-power-shaft-motor-calculator-simulator/</link>
					<comments>https://myengnote.com/pump-power-shaft-motor-calculator-simulator/#respond</comments>
		
		<dc:creator><![CDATA[동동]]></dc:creator>
		<pubDate>Sun, 21 Jun 2026 23:26:41 +0000</pubDate>
				<category><![CDATA[공학계산기]]></category>
		<category><![CDATA[배관설계]]></category>
		<category><![CDATA[소요동력]]></category>
		<category><![CDATA[수동력]]></category>
		<category><![CDATA[축동력]]></category>
		<category><![CDATA[펌프동력]]></category>
		<category><![CDATA[펌프효율]]></category>
		<guid isPermaLink="false">https://myengnote.com/pump-power-shaft-motor-calculator-simulator/</guid>

					<description><![CDATA[설계 유량(Q), 전양정(H), 유체 밀도, 펌프 효율을 조절하여 수동력(Water Power), 축동력(Shaft Power), 모터 설계 동력을 실시간 연산하고 유체를 위로 이송하는 펌프 운전을 가시화하는 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 pump-power-wrapper */
        /* Modern Reset and Design Tokens */
        .pump-power-wrapper *, .pump-power-wrapper *::before, .pump-power-wrapper *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .pump-power-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;
            --color-cyan-glow: rgba(2, 132, 199, 0.15);
            --color-magenta: #db2777;
            --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;
            --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);
        }
        .pump-power-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-purple));
            -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: 1px;
            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;
        }
        .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: 8px;
        }
        .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;
        }
        .unit-select {
            background: rgba(0, 0, 0, 0.03) !important;
            color: var(--color-text-muted) !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            padding: 0 24px 0 14px !important;
            border: none !important;
            border-left: 1px solid var(--color-border) !important;
            outline: none !important;
            cursor: pointer !important;
            font-family: var(--font-body) !important;
            align-self: stretch !important;
            flex-shrink: 0 !important;
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
            background-repeat: no-repeat !important;
            background-position: right 10px center !important;
            border-radius: 0 !important;
        }
        .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-q::-webkit-slider-thumb {
            background: var(--color-cyan);
            box-shadow: 0 0 10px var(--color-cyan);
        }
        #slider-q::-webkit-slider-thumb:hover { transform: scale(1.2); }
        #slider-h::-webkit-slider-thumb {
            background: var(--color-purple);
            box-shadow: 0 0 10px var(--color-purple);
        }
        #slider-h::-webkit-slider-thumb:hover { transform: scale(1.2); }
        #slider-eff::-webkit-slider-thumb {
            background: var(--color-success);
            box-shadow: 0 0 10px var(--color-success);
        }
        #slider-eff::-webkit-slider-thumb:hover { transform: scale(1.2); }
        #slider-rho::-webkit-slider-thumb {
            background: var(--color-magenta);
            box-shadow: 0 0 10px var(--color-magenta);
        }
        #slider-rho::-webkit-slider-thumb:hover { transform: scale(1.2); }
        .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: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }
        .preset-btn {
            background: rgba(0, 0, 0, 0.015);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            padding: 10px 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.04);
            transform: translateX(4px);
        }
        .preset-btn.active {
            background: linear-gradient(90deg, var(--color-cyan-glow), var(--color-purple-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;
        }
        .preset-name {
            font-size: 12px;
            font-weight: 600;
        }
        .simulation-panel {
            grid-column: 2;
            align-self: start;
            justify-content: flex-start;
        }
        .simulation-panel .panel-header {
            justify-content: space-between;
        }
        .canvas-scale-indicator {
            font-size: 11px;
            color: var(--color-text-muted);
            background: rgba(0, 0, 0, 0.02);
            padding: 4px 10px;
            border-radius: 6px;
            border: 1px solid var(--color-border);
        }
        .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;
        }
        .motor-readout-box {
            background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(124, 58, 237, 0.04) 100%);
            border: 1px solid rgba(2, 132, 199, 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(2, 132, 199, 0.05);
        }
        .motor-title {
            font-size: 11px;
            font-weight: 700;
            color: var(--color-cyan);
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .motor-value {
            font-family: var(--font-heading);
            font-weight: 800;
            font-size: 25px; /* slightly smaller to fit on small screens */
            background: linear-gradient(90deg, var(--color-text-main), var(--color-cyan));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .motor-margin-txt {
            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);
            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(2, 132, 199, 0.2);
            background: rgba(2, 132, 199, 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);
        }
        .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: 17px;
            color: var(--color-text-main);
            white-space: nowrap; /* prevent wrapping */
        }
        .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: 12px;
            background: #f8fafc;
            padding: 8px 6px;
            border-radius: 6px;
            border: 1px solid var(--color-border);
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
        }
        /* Container Query */
        @container pumppower-container (max-width: 1100px) {
            .app-main-grid {
                grid-template-columns: 1fr 1fr;
                gap: 20px;
            }
            .control-panel {
                grid-column: 1;
            }
            .simulation-panel {
                grid-column: 2;
                align-self: start;
            }
            .results-panel {
                grid-column: 1 / span 2;
                display: grid;
                grid-template-columns: 1fr 1.2fr;
                gap: 20px;
            }
            .results-panel .panel-header {
                grid-column: 1 / span 2;
            }
            .motor-readout-box {
                grid-column: 1;
                grid-row: 2;
            }
            .formula-card {
                grid-column: 1;
                grid-row: 3;
            }
            .results-grid {
                grid-column: 2;
                grid-row: 2 / span 2;
            }
        }
        @container pumppower-container (max-width: 768px) {
            .app-main-grid {
                grid-template-columns: 1fr;
            }
            .control-panel, .simulation-panel, .results-panel {
                grid-column: 1;
            }
            .simulation-panel {
                order: -1;
            }
            .results-panel {
                display: flex;
                flex-direction: column;
                gap: 16px;
            }
            .motor-readout-box, .results-grid, .formula-card {
                grid-column: auto;
                grid-row: auto;
            }
            .panel-header h2 {
                white-space: normal !important;
                font-size: 15px !important;
            }
            .app-header {
                flex-direction: column;
                gap: 16px;
                text-align: center;
            }
            .logo-area {
                flex-direction: column;
                gap: 8px;
            }
        }
        .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열 컴팩트 대칭 레이아웃) ━━ */
.pump-power-wrapper .app-main-grid,
.pump-power-wrapper .main-grid,
.pump-power-wrapper .sim-grid {
    display: grid !important;
    grid-template-columns: 340px 1fr !important;
    gap: 24px !important;
    align-items: start !important;
}
/* 3열 레이아웃을 2열 레이아웃으로 변경하는 특화 스타일 */
.pump-power-wrapper .right-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    min-width: 0 !important;
    grid-column: 2 !important;
}
.pump-power-wrapper .simulation-panel,
.pump-power-wrapper .canvas-panel,
.pump-power-wrapper .sim-panel {
    grid-column: auto !important;
    order: 1 !important;
    align-self: stretch !important;
}
.pump-power-wrapper .control-panel {
    grid-column: 1 !important;
}
/* 2열 통합 결과 분석 영역 레이아웃 */
.pump-power-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 스타일 */
.pump-power-wrapper .simulation-results-section .ratio-readout-box,
.pump-power-wrapper .simulation-results-section .re-readout-box,
.pump-power-wrapper .simulation-results-section .status-readout-box,
.pump-power-wrapper .simulation-results-section .flow-readout-box,
.pump-power-wrapper .simulation-results-section [class*="readout-box"],
.pump-power-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;
}
.pump-power-wrapper .simulation-results-section .results-grid {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    justify-content: flex-start !important;
}
.pump-power-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;
}
.pump-power-wrapper .simulation-results-section .formula-card {
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
}
/* 모바일/반응형 (800px 이하) ── 항상 세로형(1열) 정렬 및 시뮬레이터 캔버스 최상단 배치 */
@media (max-width: 800px) {
    .pump-power-wrapper .app-main-grid,
    .pump-power-wrapper .main-grid,
    .pump-power-wrapper .sim-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .pump-power-wrapper .control-panel {
        order: 2 !important;
        width: 100% !important;
    }
    .pump-power-wrapper .right-column {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .pump-power-wrapper .simulation-panel,
    .pump-power-wrapper .canvas-panel,
    .pump-power-wrapper .sim-panel,
    .pump-power-wrapper .canvas-section {
        order: -1 !important;
    }
    .pump-power-wrapper .simulation-results-section {
        grid-template-columns: 1fr !important;
    }
    .pump-power-wrapper .simulation-results-section .ratio-readout-box,
    .pump-power-wrapper .simulation-results-section .re-readout-box,
    .pump-power-wrapper .simulation-results-section .status-readout-box,
    .pump-power-wrapper .simulation-results-section .flow-readout-box,
    .pump-power-wrapper .simulation-results-section [class*="readout-box"],
    .pump-power-wrapper .simulation-results-section .gauge-container {
        grid-column: 1 !important;
        grid-row: auto !important;
        height: auto !important;
    }
    .pump-power-wrapper .simulation-results-section .results-grid {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    .pump-power-wrapper .simulation-results-section .formula-card {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}
.pump-power-wrapper .app-container,
.pump-power-wrapper .main-container {
    max-width: 100% !important;
    padding: 12px !important;
}
/* Premium Advice/Formula Card & Typography Overrides */
.pump-power-wrapper .simulation-results-section .formula-card,
.pump-power-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;
    justify-content: center !important;
    gap: 8px !important;
}
.pump-power-wrapper .simulation-results-section .formula-card h4,
.pump-power-wrapper .results-panel .formula-card h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--color-text-main) !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    word-break: keep-all !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.pump-power-wrapper .formula-equation {
    font-family: 'Outfit', 'Cambria Math', 'Times New Roman', monospace !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    word-break: keep-all !important;
    text-align: center !important;
}
.pump-power-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="pump-power-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 class="app-header">
            <div class="logo-area">
                <div class="logo-icon"><i class="fa-solid fa-gears"></i></div>
                <div>
                    <h1>PUMP SHAFT POWER</h1>
                    <div class="subtitle">펌프 소요 동력 계산기 &#038; 물리 시뮬레이터</div>
                </div>
            </div>
            <div class="header-badge">
                <div class="pulse-dot"></div>
                <span class="badge-text">HYDRAULIC POWER</span>
            </div>
        </header>
        <div class="app-main-grid">
            <!-- Controls -->
            <div class="panel control-panel">
                <div class="panel-header text-cyan">
                    <i class="fa-solid fa-sliders"></i>
                    <h2>펌프 구동 변수</h2>
                </div>
                <!-- Q Flow Rate -->
                <div class="input-group">
                    <div class="input-label-row">
                        <label for="input-q"><i class="fa-solid fa-droplet text-cyan"></i> 설계 유량 (Q)</label>
                        <span class="helper-text" id="q-helper-text">범위: 10 ~ 1500 LPM</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-q" class="custom-number-input" min="10" max="1500" value="450">
                        <select id="select-q-unit" class="unit-select">
                            <option value="lpm">L/min (LPM)</option>
                            <option value="m3h">m³/h</option>
                            <option value="m3min">m³/min</option>
                            <option value="m3s">m³/s</option>
                        </select>
                    </div>
                    <input type="range" id="slider-q" class="custom-slider" min="10" max="1500" value="450">
                </div>
                <!-- H Head -->
                <div class="input-group">
                    <div class="input-label-row">
                        <label for="input-h"><i class="fa-solid fa-arrow-up text-purple"></i> 펌프 전양정 (H)</label>
                        <span class="helper-text">범위: 1 ~ 150 m</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-h" class="custom-number-input" min="1" max="150" value="45">
                        <span class="unit-badge">m</span>
                    </div>
                    <input type="range" id="slider-h" class="custom-slider" min="1" max="150" value="45">
                </div>
                <!-- Efficiency -->
                <div class="input-group">
                    <div class="input-label-row">
                        <label for="input-eff"><i class="fa-solid fa-chart-line text-success"></i> 펌프 효율 (&eta;_p)</label>
                        <span class="helper-text">범위: 30 ~ 95 %</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-eff" class="custom-number-input" min="30" max="95" value="75">
                        <span class="unit-badge">%</span>
                    </div>
                    <input type="range" id="slider-eff" class="custom-slider" min="30" max="95" value="75">
                </div>
                <!-- Density -->
                <div class="input-group">
                    <div class="input-label-row">
                        <label for="input-rho"><i class="fa-solid fa-flask text-magenta"></i> 유체 밀도 (&rho;)</label>
                        <span class="helper-text">범위: 800 ~ 1200 kg/m³</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-rho" class="custom-number-input" min="800" max="1200" value="1000">
                        <span class="unit-badge">kg/m³</span>
                    </div>
                    <input type="range" id="slider-rho" class="custom-slider" min="800" max="1200" value="1000">
                </div>
                <!-- Presets -->
                <div class="presets-section">
                    <h3><i class="fa-solid fa-square-rss"></i> 용도별 펌프 프리셋</h3>
                    <div class="presets-grid">
                        <button class="preset-btn" data-preset="booster">
                            <div class="preset-icon"><i class="fa-solid fa-house-chimney"></i></div>
                            <div class="preset-details"><span class="preset-name">빌딩 부스터 펌프</span><span class="preset-spec">180 LPM, 45 m</span></div>
                        </button>
                        <button class="preset-btn" data-preset="drainage">
                            <div class="preset-icon"><i class="fa-solid fa-arrow-down-up-across-line"></i></div>
                            <div class="preset-details"><span class="preset-name">지하 배수용 펌프</span><span class="preset-spec">800 LPM, 15 m</span></div>
                        </button>
                        <button class="preset-btn" data-preset="highlift">
                            <div class="preset-icon"><i class="fa-solid fa-mountain"></i></div>
                            <div class="preset-details"><span class="preset-name">고지대 공급/광산용</span><span class="preset-spec">1200 LPM, 110 m</span></div>
                        </button>
                    </div>
                </div>
            </div>
            <!-- Auto Injected Right Column wrapper for Design 1 -->
            <div class="right-column">
                <div class="panel simulation-panel">
                                <div class="panel-header text-purple">
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <i class="fa-solid fa-display"></i>
                                        <h2>실시간 펌핑 동역학 가시화</h2>
                                    </div>
                                    <div class="canvas-scale-indicator" id="txt-canvas-scale">전양정: 45 m</div>
                                </div>
                                <div class="canvas-wrapper">
                                    <canvas id="physics-canvas" width="640" height="400"></canvas>
                                </div>
                                <div class="simulation-metrics-strip">
                                    <div class="mini-metric">
                                        <span class="label">펌프 토출 압력</span>
                                        <span class="value" id="mini-p-bar">4.41 bar</span>
                                    </div>
                                    <div class="mini-divider"></div>
                                    <div class="mini-metric">
                                        <span class="label">시간당 유량</span>
                                        <span class="value" id="mini-q-m3h">27.0 m³/h</span>
                                    </div>
                                    <div class="mini-divider"></div>
                                    <div class="mini-metric">
                                        <span class="label">이송 유체 질량 유량</span>
                                        <span class="value" id="mini-mass-flow">7.50 kg/s</span>
                                    </div>
                                </div>
                            <div class="simulation-results-section">
                                <div class="motor-readout-box">
                                    <span class="motor-title">RECOMMENDED MOTOR POWER</span>
                                    <span class="motor-value" id="txt-motor-power">6.21 kW <span>(8.32 HP)</span></span>
                                    <span class="motor-margin-txt" id="txt-motor-margin-label">모터 여유율 15% 가중 적용</span>
                                </div>
                                <div class="results-grid">
                                    <div class="result-card">
                                        <div class="card-icon text-cyan"><i class="fa-solid fa-tint"></i></div>
                                        <div class="card-content">
                                            <span class="card-unit">수동력 (Water/Hydraulic Power)</span>
                                            <span class="card-value" id="txt-water-power">3.31 kW / 4.44 HP</span>
                                        </div>
                                    </div>
                                    <div class="result-card">
                                        <div class="card-icon text-purple"><i class="fa-solid fa-compact-disc"></i></div>
                                        <div class="card-content">
                                            <span class="card-unit">축동력 (Shaft Power &#8211; 실제 입동력)</span>
                                            <span class="card-value" id="txt-shaft-power">4.41 kW / 5.92 HP</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="formula-card">
                                        <h4><i class="fa-solid fa-circle-info text-cyan"></i> 기본 동력 관계식</h4>
                                        <div class="formula-equation">P_shaft = (&rho;&times;g&times;Q&times;H) / &eta;_p</div>
                                        <p>
                                            * 효율 &eta;_p가 반영되어 펌프 모터 축에 인가되어야 하는 실제 기계적 동력이 산출됩니다.
                                        </p>
                                    </div>
                            </div>
                </div>
            </div>
        </div>
        <!-- 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>
    </div>
</div>
<script>
        (function() {
            // State
            const state = {
                q: 450,     // LPM
                q_unit: 'lpm', // flow rate unit
                h: 45,      // m
                eff: 75,    // %
                rho: 1000,  // kg/m³
                particles: [],
                lastTime: 0,
                impellerAngle: 0
            };
            // DOM Elements
            const inputQ = document.getElementById('input-q');
            const sliderQ = document.getElementById('slider-q');
            const selectQUnit = document.getElementById('select-q-unit');
            const qHelperText = document.getElementById('q-helper-text');
            const inputH = document.getElementById('input-h');
            const sliderH = document.getElementById('slider-h');
            const inputEff = document.getElementById('input-eff');
            const sliderEff = document.getElementById('slider-eff');
            const inputRho = document.getElementById('input-rho');
            const sliderRho = document.getElementById('slider-rho');
            const txtMotorPower = document.getElementById('txt-motor-power');
            const txtMotorMarginLabel = document.getElementById('txt-motor-margin-label');
            const txtWaterPower = document.getElementById('txt-water-power');
            const txtShaftPower = document.getElementById('txt-shaft-power');
            const miniPBar = document.getElementById('mini-p-bar');
            const miniQM3h = document.getElementById('mini-q-m3h');
            const miniMassFlow = document.getElementById('mini-mass-flow');
            const presetButtons = document.querySelectorAll('.preset-btn');
            // Flow unit configurations
            const flowUnits = {
                lpm: {
                    min: 10,
                    max: 1500,
                    step: 1,
                    helper: "범위: 10 ~ 1500 LPM",
                    toBase: (v) => v,
                    fromBase: (v) => v
                },
                m3h: {
                    min: 0.6,
                    max: 90,
                    step: 0.1,
                    helper: "범위: 0.6 ~ 90.0 m³/h",
                    toBase: (v) => v / 0.06,
                    fromBase: (v) => v * 0.06
                },
                m3min: {
                    min: 0.01,
                    max: 1.5,
                    step: 0.01,
                    helper: "범위: 0.01 ~ 1.50 m³/min",
                    toBase: (v) => v * 1000,
                    fromBase: (v) => v / 1000
                },
                m3s: {
                    min: 0.0002,
                    max: 2.0000,
                    step: 0.0001,
                    helper: "범위: 0.0002 ~ 2.0000 m³/s",
                    toBase: (v) => v * 60000,
                    fromBase: (v) => v / 60000
                }
            };
            const canvas = document.getElementById('physics-canvas');
            const ctx = canvas.getContext('2d');
            // Set up flowing water droplets
            const numParticles = 40;
            for (let i = 0; i < numParticles; i++) {
                state.particles.push({
                    t: Math.random() // parameter tracking distance along the piping line
                });
            }
            // Sync functions
            function syncQFromSlider() {
                const unitCfg = flowUnits[state.q_unit || 'lpm'];
                const val = parseFloat(sliderQ.value);
                state.q = unitCfg.toBase(val);
                const decimals = state.q_unit === 'm3s' ? 4 : (state.q_unit === 'm3min' ? 2 : (state.q_unit === 'lpm' ? 0 : 1));
                inputQ.value = val.toFixed(decimals);
                clearPresets();
                updateCalculations();
            }
            function syncQFromInput() {
                const unitCfg = flowUnits[state.q_unit || 'lpm'];
                let val = parseFloat(inputQ.value);
                if (isNaN(val)) { val = unitCfg.fromBase(450); }
                if (val < unitCfg.min) { val = unitCfg.min; }
                if (val > unitCfg.max) { val = unitCfg.max; }
                state.q = unitCfg.toBase(val);
                const decimals = state.q_unit === 'm3s' ? 4 : (state.q_unit === 'm3min' ? 2 : (state.q_unit === 'lpm' ? 0 : 1));
                inputQ.value = val.toFixed(decimals);
                sliderQ.value = val;
                clearPresets();
                updateCalculations();
            }
            function syncHFromSlider() {
                state.h = parseInt(sliderH.value);
                inputH.value = state.h;
                clearPresets();
                updateCalculations();
            }
            function syncHFromInput() {
                let val = parseInt(inputH.value);
                if (isNaN(val)) { val = 45; }
                if (val < 1) { val = 1; }
                if (val > 150) { val = 150; }
                state.h = val;
                inputH.value = val;
                sliderH.value = val;
                clearPresets();
                updateCalculations();
            }
            function syncEffFromSlider() {
                state.eff = parseInt(sliderEff.value);
                inputEff.value = state.eff;
                clearPresets();
                updateCalculations();
            }
            function syncEffFromInput() {
                let val = parseInt(inputEff.value);
                if (isNaN(val)) { val = 75; }
                if (val < 30) { val = 30; }
                if (val > 95) { val = 95; }
                state.eff = val;
                inputEff.value = val;
                sliderEff.value = val;
                clearPresets();
                updateCalculations();
            }
            function syncRhoFromSlider() {
                state.rho = parseInt(sliderRho.value);
                inputRho.value = state.rho;
                clearPresets();
                updateCalculations();
            }
            function syncRhoFromInput() {
                let val = parseInt(inputRho.value);
                if (isNaN(val)) { val = 1000; }
                if (val < 800) { val = 800; }
                if (val > 1200) { val = 1200; }
                state.rho = val;
                inputRho.value = val;
                sliderRho.value = val;
                clearPresets();
                updateCalculations();
            }
            sliderQ.addEventListener('input', syncQFromSlider);
            inputQ.addEventListener('change', syncQFromInput);
            selectQUnit.addEventListener('change', function() {
                const oldUnit = state.q_unit || 'lpm';
                const newUnit = selectQUnit.value;
                state.q_unit = newUnit;
                const unitCfg = flowUnits[newUnit];
                // Update helper text & attributes
                qHelperText.innerText = unitCfg.helper;
                inputQ.min = unitCfg.min;
                inputQ.max = unitCfg.max;
                inputQ.step = unitCfg.step;
                sliderQ.min = unitCfg.min;
                sliderQ.max = unitCfg.max;
                sliderQ.step = unitCfg.step;
                // Convert current state.q to the new unit value
                let newVal = unitCfg.fromBase(state.q);
                if (newVal < unitCfg.min) {
                    newVal = unitCfg.min;
                    state.q = unitCfg.toBase(newVal);
                } else if (newVal > unitCfg.max) {
                    newVal = unitCfg.max;
                    state.q = unitCfg.toBase(newVal);
                }
                const decimals = newUnit === 'm3s' ? 4 : (newUnit === 'm3min' ? 2 : (newUnit === 'lpm' ? 0 : 1));
                inputQ.value = newVal.toFixed(decimals);
                sliderQ.value = newVal;
                updateCalculations();
            });
            sliderH.addEventListener('input', syncHFromSlider);
            inputH.addEventListener('change', syncHFromInput);
            sliderEff.addEventListener('input', syncEffFromSlider);
            inputEff.addEventListener('change', syncEffFromInput);
            sliderRho.addEventListener('input', syncRhoFromSlider);
            inputRho.addEventListener('change', syncRhoFromInput);
            // Presets
            function loadPreset(presetKey) {
                clearPresets();
                presetButtons.forEach(function(btn) {
                    if (btn.dataset.preset === presetKey) {
                        btn.classList.add('active');
                    }
                });
                if (presetKey === 'booster') {
                    state.q = 180;
                    state.h = 45;
                    state.eff = 72;
                    state.rho = 1000;
                } else if (presetKey === 'drainage') {
                    state.q = 800;
                    state.h = 15;
                    state.eff = 65;
                    state.rho = 1050; // dirty water
                } else if (presetKey === 'highlift') {
                    state.q = 1200;
                    state.h = 110;
                    state.eff = 82;
                    state.rho = 1000;
                }
                const unitCfg = flowUnits[state.q_unit || 'lpm'];
                const qVal = unitCfg.fromBase(state.q);
                const decimals = state.q_unit === 'm3s' ? 4 : (state.q_unit === 'm3min' ? 2 : (state.q_unit === 'lpm' ? 0 : 1));
                inputQ.value = qVal.toFixed(decimals);
                sliderQ.value = qVal;
                inputH.value = state.h;
                sliderH.value = state.h;
                inputEff.value = state.eff;
                sliderEff.value = state.eff;
                inputRho.value = state.rho;
                sliderRho.value = state.rho;
                updateCalculations();
            }
            function clearPresets() {
                presetButtons.forEach(function(btn) {
                    btn.classList.remove('active');
                });
            }
            presetButtons.forEach(function(btn) {
                btn.addEventListener('click', function() {
                    loadPreset(btn.dataset.preset);
                });
            });
            // Calculations
            function updateCalculations() {
                const g = 9.80665;
                const Q_m3s = state.q / 60000; // LPM to m3/s
                // P_w = rho * g * Q * H / 1000 [kW]
                const pWater = (state.rho * g * Q_m3s * state.h) / 1000;
                const pWaterHP = pWater * 1.34102;
                // P_s = P_w / eta
                const effFrac = state.eff / 100;
                const pShaft = pWater / effFrac;
                const pShaftHP = pShaft * 1.34102;
                // Motor Power with Smart Margin:
                // pShaft <= 0.2: 50% margin
                // pShaft <= 2.0: 25% margin
                // pShaft <= 10.0: 15% margin
                // pShaft > 10.0: 10% margin
                let margin = 0.15;
                if (pShaft <= 0.2) {
                    margin = 0.50;
                } else if (pShaft <= 2.0) {
                    margin = 0.25;
                } else if (pShaft <= 10.0) {
                    margin = 0.15;
                } else {
                    margin = 0.10;
                }
                const pMotor = pShaft * (1 + margin);
                const pMotorHP = pMotor * 1.34102;
                // Output UI
                txtWaterPower.innerText = pWater.toFixed(2) + ' kW / ' + pWaterHP.toFixed(2) + ' HP';
                txtShaftPower.innerText = pShaft.toFixed(2) + ' kW / ' + pShaftHP.toFixed(2) + ' HP';
                txtMotorPower.innerHTML = pMotor.toFixed(2) + ' kW <span style="display: block; font-size: 0.75em; opacity: 0.85; margin-top: 4px; -webkit-text-fill-color: var(--color-text-muted); color: var(--color-text-muted); background: none; -webkit-background-clip: initial;">(' + pMotorHP.toFixed(2) + ' HP)</span>';
                txtMotorMarginLabel.innerText = '모터 설계 여유율 ' + Math.round(margin * 100) + '% 규격 반영';
                // Mini stats
                const pressureBar = (state.rho * g * state.h) / 100000;
                miniPBar.innerText = pressureBar.toFixed(2) + ' bar';
                const flowM3h = state.q * 0.06;
                miniQM3h.innerText = flowM3h.toFixed(1) + ' m³/h';
                const massFlow = Q_m3s * state.rho;
                miniMassFlow.innerText = massFlow.toFixed(2) + ' kg/s';
                const txtCanvasScale = document.getElementById('txt-canvas-scale');
                if (txtCanvasScale) {
                    txtCanvasScale.innerText = `가상 설계 전양정: ${state.h} m`;
                }
            }
            // Draw
            function draw(currentTime) {
                requestAnimationFrame(draw);
                let dt = (currentTime - state.lastTime) / 1000;
                if (isNaN(dt)) { dt = 0.016; }
                if (dt < 0) { dt = 0.016; }
                if (dt > 0.1) { dt = 0.016; }
                state.lastTime = currentTime;
                const width = canvas.width;
                const height = canvas.height;
                ctx.clearRect(0, 0, width, height);
                // Grid background
                ctx.save();
                ctx.strokeStyle = 'rgba(2, 132, 199, 0.04)';
                ctx.lineWidth = 1;
                for (let x = 0; x < width; x += 30) {
                    ctx.beginPath();
                    ctx.moveTo(x, 0);
                    ctx.lineTo(x, height);
                    ctx.stroke();
                }
                for (let y = 0; y < height; y += 30) {
                    ctx.beginPath();
                    ctx.moveTo(0, y);
                    ctx.lineTo(width, y);
                    ctx.stroke();
                }
                ctx.restore();
                // Setup geometry elements
                const tankLeft = 60;
                const tankBottomY = 350;
                const tankH = 80;
                const tankW = 100;
                const tankTopY = tankBottomY - tankH;
                // Elevated tank height corresponds to head (1 ~ 150m mapped to 200 ~ 60px y coordinate)
                const minHValue = 1;
                const maxHValue = 150;
                const minCoordY = 220;
                const maxCoordY = 70;
                const elevatedTankTopY = minCoordY - ((state.h - minHValue) / (maxHValue - minHValue)) * (minCoordY - maxCoordY);
                const elevatedTankW = 100;
                const elevatedTankH = 60;
                const elevatedTankLeft = 460;
                // Pump housing circle
                const pumpX = 220;
                const pumpY = tankBottomY - 30;
                const pumpRadius = 24;
                // 1. Draw Lower Tank
                ctx.save();
                ctx.fillStyle = 'rgba(226, 232, 240, 0.9)';
                ctx.fillRect(tankLeft, tankTopY, tankW, tankH);
                ctx.strokeStyle = '#94a3b8';
                ctx.lineWidth = 3;
                ctx.beginPath();
                ctx.moveTo(tankLeft, tankTopY);
                ctx.lineTo(tankLeft, tankBottomY);
                ctx.lineTo(tankLeft + tankW, tankBottomY);
                ctx.lineTo(tankLeft + tankW, tankTopY);
                ctx.stroke();
                // Lower Tank Water
                ctx.fillStyle = 'rgba(2, 132, 199, 0.4)';
                ctx.fillRect(tankLeft + 2, tankTopY + 20, tankW - 4, tankH - 22);
                ctx.restore();
                // 2. Draw Elevated Tank
                ctx.save();
                ctx.fillStyle = 'rgba(226, 232, 240, 0.9)';
                ctx.fillRect(elevatedTankLeft, elevatedTankTopY, elevatedTankW, elevatedTankH);
                ctx.strokeStyle = '#94a3b8';
                ctx.lineWidth = 3;
                ctx.beginPath();
                ctx.moveTo(elevatedTankLeft, elevatedTankTopY);
                ctx.lineTo(elevatedTankLeft, elevatedTankTopY + elevatedTankH);
                ctx.lineTo(elevatedTankLeft + elevatedTankW, elevatedTankTopY + elevatedTankH);
                ctx.lineTo(elevatedTankLeft + elevatedTankW, elevatedTankTopY);
                ctx.stroke();
                // Elevated tank water level
                ctx.fillStyle = 'rgba(2, 132, 199, 0.4)';
                ctx.fillRect(elevatedTankLeft + 2, elevatedTankTopY + 25, elevatedTankW - 4, elevatedTankH - 27);
                ctx.restore();
                // 3. Draw Pipings
                // Horizontal suction pipe: Lower tank water (at Y = tankTopY + 40) -> Pump input
                // Vertical discharge pipe: Pump -> up to elevatedTankTopY + 15 -> Horizontal to elevated tank
                ctx.save();
                ctx.strokeStyle = '#64748b';
                ctx.lineWidth = 14;
                ctx.lineCap = 'round';
                ctx.lineJoin = 'round';
                ctx.beginPath();
                // Suction
                ctx.moveTo(tankLeft + tankW / 2, tankTopY + 40);
                ctx.lineTo(pumpX - pumpRadius, tankTopY + 40);
                ctx.lineTo(pumpX - pumpRadius, pumpY);
                ctx.lineTo(pumpX, pumpY);
                // Discharge
                ctx.moveTo(pumpX, pumpY - pumpRadius);
                ctx.lineTo(pumpX, elevatedTankTopY + 15);
                ctx.lineTo(elevatedTankLeft + 10, elevatedTankTopY + 15);
                ctx.stroke();
                // Draw pipe interior channel
                ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
                ctx.lineWidth = 8;
                ctx.stroke();
                ctx.restore();
                // 4. Draw Pump casing
                ctx.save();
                ctx.beginPath();
                ctx.arc(pumpX, pumpY, pumpRadius, 0, Math.PI * 2);
                ctx.fillStyle = 'rgba(241, 245, 249, 0.95)';
                ctx.fill();
                ctx.strokeStyle = '#0284c7';
                ctx.lineWidth = 3;
                ctx.stroke();
                // Rotating Impeller
                const rotSpeed = Math.min(state.q / 100, 35); // Impeller rotation speed based on LPM (clamped to prevent stroboscopic glitch)
                state.impellerAngle += rotSpeed * dt;
                ctx.translate(pumpX, pumpY);
                ctx.rotate(state.impellerAngle);
                ctx.beginPath();
                ctx.arc(0, 0, 6, 0, Math.PI * 2);
                ctx.fillStyle = '#0284c7';
                ctx.fill();
                // Impeller vanes
                ctx.lineWidth = 2.5;
                ctx.strokeStyle = '#475569';
                for (let v = 0; v < 6; v++) {
                    ctx.rotate(Math.PI / 3);
                    ctx.beginPath();
                    ctx.moveTo(0, 0);
                    ctx.quadraticCurveTo(6, 12, 10, pumpRadius - 4);
                    ctx.stroke();
                }
                ctx.restore();
                // 5. Draw particles inside piping to show movement
                ctx.save();
                ctx.fillStyle = 'rgba(2, 132, 199, 0.7)';
                // Flow particle speeds
                const flowSpeed = Math.min((state.q / 1500) * 1.5 + 0.15, 6.0); // parametric step speed (clamped to prevent teleporting)
                state.particles.forEach(function(p) {
                    p.t += flowSpeed * dt;
                    if (p.t > 1.0) {
                        p.t = 0.0;
                    }
                    // Map t [0, 1] to total pipe length coordinates
                    // Path splits:
                    // Seg 1 (suction): tankLeft+50,tankTopY+40 -> pumpX-pumpRadius,tankTopY+40 (len: 110)
                    // Seg 2: pumpX-pumpRadius,tankTopY+40 -> pumpX-pumpRadius,pumpY (len: 40)
                    // Seg 3: pumpX, pumpY-pumpRadius -> pumpX, elevatedTankTopY+15 (len: pumpY - pumpRadius - (elevatedTankTopY+15))
                    // Seg 4: pumpX, elevatedTankTopY+15 -> elevatedTankLeft+10, elevatedTankTopY+15 (len: elevatedTankLeft+10 - pumpX)
                    const len1 = pumpX - pumpRadius - (tankLeft + tankW / 2);
                    const len2 = pumpY - (tankTopY + 40);
                    const len3 = pumpY - pumpRadius - (elevatedTankTopY + 15);
                    const len4 = elevatedTankLeft + 10 - pumpX;
                    const totalLen = len1 + len2 + len3 + len4;
                    const targetDist = p.t * totalLen;
                    let pX = 0;
                    let pY = 0;
                    if (targetDist <= len1) {
                        // Section 1: Suction horizontal
                        pX = (tankLeft + tankW / 2) + targetDist;
                        pY = tankTopY + 40;
                    } else if (targetDist <= len1 + len2) {
                        // Section 2: Suction vertical down
                        pX = pumpX - pumpRadius;
                        pY = (tankTopY + 40) + (targetDist - len1);
                    } else if (targetDist <= len1 + len2 + len3) {
                        // Section 3: Discharge vertical up
                        pX = pumpX;
                        pY = (pumpY - pumpRadius) - (targetDist - len1 - len2);
                    } else {
                        // Section 4: Discharge horizontal to tank
                        pX = pumpX + (targetDist - len1 - len2 - len3);
                        pY = elevatedTankTopY + 15;
                    }
                    ctx.beginPath();
                    ctx.arc(pX, pY, 3.5, 0, Math.PI * 2);
                    ctx.fill();
                });
                ctx.restore();
            }
            // Copy &#038; right click block with nested if
            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 });
            // Initialize
            loadPreset('booster');
            requestAnimationFrame(draw);
        })();
</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>유량 및 전양정 설정: 슬라이더나 숫자 입력 칸을 이용하여 펌프가 토출할 유량(LPM)과 밀어 올려야 할 전양정(H, m)을 설정합니다.</strong></li>
<li style="margin-bottom: 6px;">펌프 효율 및 밀도 입력: 현장 펌프 제조사 사양에 따른 효율(%) 및 이송할 유체의 물리적 밀도를 설정합니다.</li>
<li style="margin-bottom: 6px;">실시간 펌핑 애니메이션 확인: 설정값에 연동하여 펌프 임펠러가 회전하고 배관을 통해 유체가 상부 탱크로 이동하는 구동 과정을 시각적으로 확인합니다.</li>
<li style="margin-bottom: 6px;">소요 동력 분석: 계측 보드에서 수동력, 축동력 및 15% 여유율이 반영된 모터 정격 동력(kW, HP)을 즉각 확인하여 설계 규격을 결정합니다.</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;" /> 펌프 수동력(Hydraulic Power), 축동력(Shaft Power) 및 모터 여유율 결정 공식</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. 펌프 소요 동력 계산의 이론 체계 및 공식</h3>
<p>펌프의 소요 동력은 유체에 순수하게 전달되는 유체 역학적 에너지인 **수동력(Water Power / Hydraulic Power)**에서 출발하여, 펌프 자체의 기계적·유체적 손실을 반영한 **축동력(Shaft Power)**, 그리고 최종 구동원인 전동기의 여유 손실을 반영한 **모터 동력(Motor Power)** 순서로 순차 연산됩니다.</p><p><strong>① 수동력 (Water Power, P_w):</strong> 유체를 지정된 유량(Q)과 전양정(H)만큼 수송하는 데 필요한 순수 에너지입니다.</p><p style="text-align: center; font-weight: bold; background: #f3f4f6; padding: 12px; border-radius: 8px;">P_w = (&rho; &times; g &times; Q &times; H) / 1,000 &nbsp;[kW]</p><p>여기서 <code>&rho;</code>는 유체 밀도(kg/m³), <code>g</code>는 중력가속도(9.80665 m/s²), <code>Q</code>는 초당 체적 유량(m³/s), <code>H</code>는 전양정(m)입니다. 유량 단위로 <code>LPM (L/min)</code>을 쓸 경우의 공식은 다음과 같습니다:</p><p style="text-align: center; font-weight: bold; background: #e0f2fe; padding: 16px; border-radius: 8px; font-size: 1.05em; color: #0369a1;">P_w = (&rho; &times; 9.80665 &times; Q_LPM &times; H) / 60,000,000 &nbsp;[kW]</p><p><strong>② 축동력 (Shaft Power, P_s):</strong> 펌프가 에너지를 전달하는 과정에서 마찰, 체적 누설, 유체 충돌 등으로 인해 손실이 생기며 이를 펌프 효율(<code>&eta;_p</code>)로 나누어 실제 펌프 구동 축에 공급해야 하는 동력을 도출합니다.</p><p style="text-align: center; font-weight: bold; background: #f3f4f6; padding: 12px; border-radius: 8px;">P_s = P_w / &eta;_p &nbsp;[kW] &nbsp;(단, &eta;_p는 소수점 형태 예: 0.70)</p>
<h3>2. 전동기(Motor) 선정 및 출력 전달 여유율 (Margin Factor, K)</h3>
<p>펌프와 모터를 직결하거나 벨트로 연결할 때, 시동 시의 과부하, 전동기의 전송 장치 효율, 유체 밀도의 변동성 등을 감안하여 전동기 정격 용량 설계 시 축동력에 일정한 **전동기 여유율(K)**을 더해 줍니다.</p><p style="text-align: center; font-weight: bold; background: #f3f4f6; padding: 12px; border-radius: 8px;">P_motor = P_s &times; (1 + &alpha;) = P_s &times; K</p><p>일반적으로 원심 펌프의 경우 축동력 용량 범위에 따라 다음과 같은 마진 인자(<code>&alpha;</code>)가 추천규격으로 제안됩니다.</p><ul><li><strong>모터 출력 &le; 0.2 kW:</strong> 50% 여유 (&alpha; = 0.50)</li><li><strong>0.2 kW &lt; 모터 출력 &le; 2.0 kW:</strong> 30% ~ 20% 여유 (&alpha; = 0.30 ~ 0.20)</li><li><strong>2.0 kW &lt; 모터 출력 &le; 10.0 kW:</strong> 15% 여유 (&alpha; = 0.15)</li><li><strong>모터 출력 &gt; 10.0 kW:</strong> 10% 여유 (&alpha; = 0.10)</li></ul>
<h3>3. 전양정(Total Head, H)의 구성 요소 이해</h3>
<p>양정이란 유체를 올릴 수 있는 수두 높이(m)를 뜻합니다. 실무에서 말하는 <strong>전양정(Total Head)</strong>은 단순히 수직 높이 차이만을 뜻하는 실양정(Actual Head: 흡입 양정 + 토출 양정)에 그치지 않고, 배관 유로 전체의 피팅류 및 배관 표면 마찰로 인한 마찰 손실 수두(Friction Loss Head, <code>h_f</code>)와 토출구 속도를 내기 위한 속도 수두(<code>v&sup2; / 2g</code>)를 모두 합산한 총체적인 에너지를 의미합니다. 따라서 관 부품 저항이 가중될수록 전양정이 크게 상승하며 이에 따라 소요 동력도 정비례하여 가중됩니다.</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/pump-power-shaft-motor-calculator-simulator/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
