<?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>P-h선도 &#8211; MyEngNote</title>
	<atom:link href="https://myengnote.com/tag/p-h%EC%84%A0%EB%8F%84/feed/" rel="self" type="application/rss+xml" />
	<link>https://myengnote.com</link>
	<description></description>
	<lastBuildDate>Wed, 08 Jul 2026 04:43:12 +0000</lastBuildDate>
	<language>ko-KR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.2</generator>
	<item>
		<title>냉각사이클 계산기 &#038; 시뮬레이터</title>
		<link>https://myengnote.com/refrigeration-cooling-cycle-cop-calculator/</link>
					<comments>https://myengnote.com/refrigeration-cooling-cycle-cop-calculator/#respond</comments>
		
		<dc:creator><![CDATA[동동]]></dc:creator>
		<pubDate>Tue, 23 Jun 2026 22:27:07 +0000</pubDate>
				<category><![CDATA[공학계산기]]></category>
		<category><![CDATA[COP]]></category>
		<category><![CDATA[P-h선도]]></category>
		<category><![CDATA[냉동사이클]]></category>
		<category><![CDATA[압축기]]></category>
		<category><![CDATA[열역학]]></category>
		<guid isPermaLink="false">https://myengnote.com/refrigeration-cooling-cycle-cop-calculator/</guid>

					<description><![CDATA[압축기 효율, 증발 온도 및 응축 온도를 실시간 입력받아 냉동 사이클의 4대 작동 상태를 시뮬레이션하고, 압축기 일량, 냉동 능력 및 성적계수(COP)를 압력-엔탈피 선도와 함께 렌더링하는 명품 시뮬레이터입니다.]]></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 coolingcycle-calculator-wrapper */
        /* Modern Reset and Design Tokens */
        .coolingcycle-calculator-wrapper *, .coolingcycle-calculator-wrapper *::before, .coolingcycle-calculator-wrapper *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .coolingcycle-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;
            --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;
            --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);
        }
        .coolingcycle-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.12;
        }
        .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.1; }
            100% { transform: scale(1.18) translate(40px, 40px); opacity: 0.18; }
        }
        .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;
        }
        .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: 16px;
            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: #0284c7; }
        .text-magenta { color: #db2777; }
        .text-purple { color: var(--color-purple); }
        .control-panel {
            grid-column: 1;
        }
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .input-label-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .input-label-row label {
            font-size: 12px;
            font-weight: 600;
            color: var(--color-text-main);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .range-helper {
            font-size: 9px;
            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: #0284c7;
            box-shadow: 0 0 10px var(--color-cyan-glow);
        }
        .custom-select {
            width: 100%;
            background: #f8fafc;
            border: 1px solid var(--color-border);
            outline: none;
            color: #0f172a;
            padding: 8px 12px;
            font-family: var(--font-body);
            font-size: 13px;
            font-weight: 600;
            border-radius: 8px;
            cursor: pointer;
        }
                .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;
        }
                .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: 6px 0;
        }
        .custom-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            cursor: pointer;
            background: var(--color-cyan);
            box-shadow: 0 0 10px var(--color-cyan);
        }
        .presets-section {
            border-top: 1px solid var(--color-border);
            padding-top: 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .presets-section h3 {
            font-size: 12px;
            font-weight: 700;
            color: var(--color-text-main);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .presets-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 6px;
        }
        .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);
            transform: translateX(4px);
        }
        .preset-btn.active {
            background: linear-gradient(90deg, var(--color-cyan-glow), var(--color-magenta-glow));
            border-color: #0284c7;
            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: #0284c7;
        }
        .preset-btn:hover .preset-icon, .preset-btn.active .preset-icon {
            background: var(--gradient-primary);
            color: #fff;
        }
        .preset-name {
            font-size: 11px;
            font-weight: 600;
        }
        .simulation-panel {
            grid-column: 2;
            align-self: start;
        }
        .simulation-panel .panel-header {
            justify-content: space-between;
        }
        .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 / 11;
        }
        .results-panel {
            grid-column: 3;
        }
        .ratio-readout-box {
            background: linear-gradient(135deg, rgba(219, 39, 119, 0.08) 0%, rgba(124, 58, 237, 0.03) 100%);
            border: 1px solid rgba(219, 39, 119, 0.25);
            border-radius: 16px;
            padding: 16px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .ratio-title {
            font-size: 10px;
            font-weight: 700;
            color: #db2777;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .ratio-value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 28px;
    background: linear-gradient(90deg, var(--color-text-main), var(--color-magenta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ratio-sub-txt {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 2px;
}
        .results-grid {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .result-card {
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid var(--color-border);
            border-radius: 12px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: all 0.2s ease;
        }
        .result-card:hover {
            transform: translateY(-2px);
            border-color: rgba(219, 39, 119, 0.2);
            background: rgba(219, 39, 119, 0.03);
        }
        .card-icon {
            width: 34px;
            height: 34px;
            background: rgba(0, 0, 0, 0.015);
            border: 1px solid var(--color-border);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            color: var(--color-text-muted);
        }
        .result-card:hover .card-icon {
            color: #db2777;
            border-color: rgba(219, 39, 119, 0.3);
            background: rgba(219, 39, 119, 0.1);
        }
        .card-content {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }
        .card-unit {
            font-size: 9px;
            font-weight: 600;
            color: var(--color-text-muted);
            text-transform: uppercase;
        }
        .card-value {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 14px;
            color: var(--color-text-main);
        }
        .formula-card {
            background: rgba(0, 0, 0, 0.01);
            border: 1px solid var(--color-border);
            border-radius: 12px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            font-size: 11px;
        }
        .formula-card h4 {
            font-weight: 700;
            color: var(--color-text-main);
        }
        .formula-equation {
            font-family: monospace;
            color: #0284c7;
            font-size: 12px;
            background: #f8fafc;
            padding: 5px 8px;
            border-radius: 6px;
            border: 1px solid var(--color-border);
            text-align: center;
        }
        @container cooling-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;
            }
            .ratio-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 cooling-container (max-width: 768px) {
            .app-main-grid {
                grid-template-columns: 1fr;
            }
            .control-panel, .simulation-panel, .results-panel {
                grid-column: 1;
            }
            .results-panel {
                display: flex;
                flex-direction: column;
                gap: 16px;
            }
            .ratio-readout-box, .formula-card, .results-grid {
                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열 컴팩트 대칭 레이아웃) ━━ */
.coolingcycle-calculator-wrapper .app-main-grid,
.coolingcycle-calculator-wrapper .main-grid,
.coolingcycle-calculator-wrapper .sim-grid {
    display: grid !important;
    grid-template-columns: 340px 1fr !important;
    gap: 24px !important;
    align-items: start !important;
}
/* 3열 레이아웃을 2열 레이아웃으로 변경하는 특화 스타일 */
.coolingcycle-calculator-wrapper .right-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    min-width: 0 !important;
    grid-column: 2 !important;
}
.coolingcycle-calculator-wrapper .simulation-panel,
.coolingcycle-calculator-wrapper .canvas-panel,
.coolingcycle-calculator-wrapper .sim-panel {
    grid-column: auto !important;
    order: 1 !important;
    align-self: stretch !important;
}
.coolingcycle-calculator-wrapper .control-panel {
    grid-column: 1 !important;
}
/* 2열 통합 결과 분석 영역 레이아웃 */
.coolingcycle-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 스타일 */
.coolingcycle-calculator-wrapper .simulation-results-section .ratio-readout-box,
.coolingcycle-calculator-wrapper .simulation-results-section .re-readout-box,
.coolingcycle-calculator-wrapper .simulation-results-section .status-readout-box,
.coolingcycle-calculator-wrapper .simulation-results-section .flow-readout-box,
.coolingcycle-calculator-wrapper .simulation-results-section [class*="readout-box"],
.coolingcycle-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;
}
.coolingcycle-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;
}
.coolingcycle-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;
}
.coolingcycle-calculator-wrapper .simulation-results-section .formula-card {
    grid-column: 1 !important;
    grid-row: 2 !important;
}
/* 모바일/반응형 (800px 이하) ── 항상 세로형(1열) 정렬 및 시뮬레이터 캔버스 최상단 배치 */
@media (max-width: 800px) {
    .coolingcycle-calculator-wrapper .app-main-grid,
    .coolingcycle-calculator-wrapper .main-grid,
    .coolingcycle-calculator-wrapper .sim-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .coolingcycle-calculator-wrapper .control-panel {
        order: 2 !important;
        width: 100% !important;
    }
    .coolingcycle-calculator-wrapper .right-column {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .coolingcycle-calculator-wrapper .simulation-panel,
    .coolingcycle-calculator-wrapper .canvas-panel,
    .coolingcycle-calculator-wrapper .sim-panel,
    .coolingcycle-calculator-wrapper .canvas-section {
        order: -1 !important;
    }
    .coolingcycle-calculator-wrapper .simulation-results-section {
        grid-template-columns: 1fr !important;
    }
    .coolingcycle-calculator-wrapper .simulation-results-section .ratio-readout-box,
    .coolingcycle-calculator-wrapper .simulation-results-section .re-readout-box,
    .coolingcycle-calculator-wrapper .simulation-results-section .status-readout-box,
    .coolingcycle-calculator-wrapper .simulation-results-section .flow-readout-box,
    .coolingcycle-calculator-wrapper .simulation-results-section [class*="readout-box"],
    .coolingcycle-calculator-wrapper .simulation-results-section .gauge-container {
        grid-column: 1 !important;
        grid-row: auto !important;
        height: auto !important;
    }
    .coolingcycle-calculator-wrapper .simulation-results-section .results-grid {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    .coolingcycle-calculator-wrapper .simulation-results-section .formula-card {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}
.coolingcycle-calculator-wrapper .app-container,
.coolingcycle-calculator-wrapper .main-container {
    max-width: 100% !important;
    padding: 12px !important;
}
/* Premium Advice/Formula Card & Typography Overrides */
.coolingcycle-calculator-wrapper .simulation-results-section .formula-card,
.coolingcycle-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;
    justify-content: center !important;
    gap: 8px !important;
}
.coolingcycle-calculator-wrapper .simulation-results-section .formula-card h4,
.coolingcycle-calculator-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;
}
.coolingcycle-calculator-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;
}
.coolingcycle-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="coolingcycle-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-snowflake"></i></div>
                <div>
                    <h1>COOLING CYCLE</h1>
                    <div class="subtitle">냉동 사이클 성적계수 계산기 &#038; 실시간 2D P-h 선도 시뮬레이터</div>
                </div>
            </div>
            <div class="header-badge">
                <div class="pulse-dot"></div>
                <div class="badge-text">R-134a 열역학 물성치 연산중</div>
            </div>
        </header>
        <div class="app-main-grid">
            <!-- Left Column: Controls -->
            <div class="panel control-panel">
                <div class="panel-header">
                    <i class="fa-solid fa-sliders text-cyan"></i>
                    <h2>사이클 상태 인자 제어</h2>
                </div>
                <div class="input-group">
                    <div class="input-label-row">
                        <label><i class="fa-solid fa-temperature-low text-cyan"></i> 증발 온도 (Low Temp &#8211; T_L)</label>
                        <span class="range-helper">Min: -25°C / Max: 10°C</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-tl" class="custom-number-input" value="-5" step="1" min="-25" max="10">
                        <span class="unit-badge">°C</span>
                    </div>
                    <input type="range" id="slider-tl" class="custom-slider" value="-5" min="-25" max="10" step="1">
                </div>
                <div class="input-group">
                    <div class="input-label-row">
                        <label><i class="fa-solid fa-temperature-high text-magenta"></i> 응축 온도 (High Temp &#8211; T_H)</label>
                        <span class="range-helper">Min: 25°C / Max: 60°C</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-th" class="custom-number-input" value="40" step="1" min="25" max="60">
                        <span class="unit-badge">°C</span>
                    </div>
                    <input type="range" id="slider-th" class="custom-slider" value="40" min="25" max="60" step="1">
                </div>
                <div class="input-group">
                    <div class="input-label-row">
                        <label><i class="fa-solid fa-bolt-lightning text-cyan"></i> 압축기 등엔트로피 효율 (η_isen)</label>
                        <span class="range-helper">Min: 50% / Max: 95%</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-eff" class="custom-number-input" value="75" step="1" min="50" max="95">
                        <span class="unit-badge">%</span>
                    </div>
                    <input type="range" id="slider-eff" class="custom-slider" value="75" min="50" max="95" step="1">
                </div>
                <div class="input-group">
                    <div class="input-label-row">
                        <label><i class="fa-solid fa-gauge-simple-high text-cyan"></i> 냉매 질량 유량 (m)</label>
                        <span class="range-helper">Min: 0.01 / Max: 0.30 kg/s</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-flow" class="custom-number-input" value="0.05" step="0.01" min="0.01" max="0.30">
                        <span class="unit-badge">kg/s</span>
                    </div>
                    <input type="range" id="slider-flow" class="custom-slider" value="0.05" min="0.01" max="0.30" step="0.01">
                </div>
                <div class="presets-section">
                    <h3><i class="fa-solid fa-gears text-purple"></i> 대표 표준 동작 프리셋</h3>
                    <div class="presets-grid">
                        <button class="preset-btn" data-preset="ac">
                            <div class="preset-icon"><i class="fa-solid fa-wind"></i></div>
                            <div class="preset-details"><span class="preset-name">가정용 에어컨 표준 냉방</span><span class="preset-spec">AC</span></div>
                        </button>
                        <button class="preset-btn" data-preset="warehouse">
                            <div class="preset-icon"><i class="fa-solid fa-box-open"></i></div>
                            <div class="preset-details"><span class="preset-name">저온 상업 냉동 창고</span><span class="preset-spec">-20°C급</span></div>
                        </button>
                        <button class="preset-btn" data-preset="winter">
                            <div class="preset-icon"><i class="fa-solid fa-cloud-sun"></i></div>
                            <div class="preset-details"><span class="preset-name">동절기 초고효율 세팅</span><span class="preset-spec">COP 최적화</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">
                                    <div>
                                        <i class="fa-solid fa-circle-nodes text-cyan"></i>
                                        <h2>4대 장치 기계 장치 루프 &#038; 실시간 압력-엔탈피(P-h) 선도</h2>
                                    </div>
                                </div>
                                <div class="canvas-wrapper">
                                    <canvas id="physics-canvas" width="640" height="440"></canvas>
                                </div>
                            <div class="simulation-results-section">
                                <div class="ratio-readout-box">
                                    <span class="ratio-title">COEFFICIENT OF PERFORMANCE</span>
                                    <span id="txt-cop" class="ratio-value">4.12 <span>(14.1 EER)</span></span>
                                    <span class="ratio-sub-txt">냉동 성적계수 (COP) 성능 지표</span>
                                </div>
                                <div class="results-grid">
                                    <div class="result-card">
                                        <div class="card-icon"><i class="fa-solid fa-snowflake text-cyan"></i></div>
                                        <div class="card-content">
                                            <div class="card-unit">실제 냉동 성능 (Q_L)</div>
                                            <div id="txt-ql" class="card-value">7.20 kW</div>
                                        </div>
                                    </div>
                                    <div class="result-card">
                                        <div class="card-icon"><i class="fa-solid fa-bolt text-magenta"></i></div>
                                        <div class="card-content">
                                            <div class="card-unit">압축기 소요 전력 (W_c)</div>
                                            <div id="txt-wc" class="card-value">1.75 kW</div>
                                        </div>
                                    </div>
                                    <div class="result-card">
                                        <div class="card-icon"><i class="fa-solid fa-fire text-orange-500"></i></div>
                                        <div class="card-content">
                                            <div class="card-unit">응축기 방출 열량 (Q_H)</div>
                                            <div id="txt-qh" class="card-value">8.95 kW</div>
                                        </div>
                                    </div>
                                    <div class="result-card">
                                        <div class="card-icon"><i class="fa-solid fa-compress-arrows-alt text-purple"></i></div>
                                        <div class="card-content">
                                            <div class="card-unit">증발기/응축기 압력비 (P_ratio)</div>
                                            <div id="txt-pratio" class="card-value">3.45</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="formula-card">
                                    <h4><i class="fa-solid fa-circle-info text-cyan"></i> 냉동 성적계수 공식</h4>
                                    <div class="formula-equation">COP_R = Q_L / W_c = (h1 &#8211; h3) / (h2 &#8211; h1)</div>
                                </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>
    <!-- JavaScript Core Simulator 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.__coolingcycle_initialized = true;
                // DOM components
                const sliderTl = document.getElementById('slider-tl');
                const inputTl = document.getElementById('input-tl');
                const sliderTh = document.getElementById('slider-th');
                const inputTh = document.getElementById('input-th');
                const sliderEff = document.getElementById('slider-eff');
                const inputEff = document.getElementById('input-eff');
                const sliderFlow = document.getElementById('slider-flow');
                const inputFlow = document.getElementById('input-flow');
                const presetBtns = document.querySelectorAll('.preset-btn');
                // Output metrics
                const txtCop = document.getElementById('txt-cop');
                const txtQl = document.getElementById('txt-ql');
                const txtWc = document.getElementById('txt-wc');
                const txtQh = document.getElementById('txt-qh');
                const txtPratio = document.getElementById('txt-pratio');
                // Thermodynamic parameters for R-134a
                const statePoints = {
                    h1: 0,
                    h2: 0,
                    h3: 0,
                    h4: 0,
                    pLow: 0,
                    pHigh: 0
                };
                const state = {
                    tl: -5.0,
                    th: 40.0,
                    eff: 75.0,
                    flow: 0.05,
                    particles: []
                };
                // Smooth sync values with change-clamping only
                function syncTlFromSlider() {
                    state.tl = parseFloat(sliderTl.value);
                    inputTl.value = Math.round(state.tl);
                    validateTemperatures();
                    clearPresets();
                    updateCalculations();
                }
                function syncTlFromInput() {
                    let val = parseFloat(inputTl.value);
                    if (isNaN(val)) {
                        val = -5;
                    }
                    if (val < -25) {
                        val = -25;
                    }
                    if (val > 10) {
                        val = 10;
                    }
                    inputTl.value = Math.round(val);
                    sliderTl.value = val;
                    state.tl = val;
                    validateTemperatures();
                    clearPresets();
                    updateCalculations();
                }
                function syncThFromSlider() {
                    state.th = parseFloat(sliderTh.value);
                    inputTh.value = Math.round(state.th);
                    validateTemperatures();
                    clearPresets();
                    updateCalculations();
                }
                function syncThFromInput() {
                    let val = parseFloat(inputTh.value);
                    if (isNaN(val)) {
                        val = 40;
                    }
                    if (val < 25) {
                        val = 25;
                    }
                    if (val > 60) {
                        val = 60;
                    }
                    inputTh.value = Math.round(val);
                    sliderTh.value = val;
                    state.th = val;
                    validateTemperatures();
                    clearPresets();
                    updateCalculations();
                }
                function syncEffFromSlider() {
                    state.eff = parseFloat(sliderEff.value);
                    inputEff.value = Math.round(state.eff);
                    clearPresets();
                    updateCalculations();
                }
                function syncEffFromInput() {
                    let val = parseFloat(inputEff.value);
                    if (isNaN(val)) {
                        val = 75;
                    }
                    if (val < 50) {
                        val = 50;
                    }
                    if (val > 95) {
                        val = 95;
                    }
                    inputEff.value = Math.round(val);
                    sliderEff.value = val;
                    state.eff = val;
                    clearPresets();
                    updateCalculations();
                }
                function syncFlowFromSlider() {
                    state.flow = parseFloat(sliderFlow.value);
                    inputFlow.value = state.flow.toFixed(2);
                    clearPresets();
                    updateCalculations();
                }
                function syncFlowFromInput() {
                    let val = parseFloat(inputFlow.value);
                    if (isNaN(val)) {
                        val = 0.05;
                    }
                    if (val < 0.01) {
                        val = 0.01;
                    }
                    if (val > 0.30) {
                        val = 0.30;
                    }
                    inputFlow.value = val.toFixed(2);
                    sliderFlow.value = val;
                    state.flow = val;
                    clearPresets();
                    updateCalculations();
                }
                // Prevent temperature overlaps (condenser must be hotter than evaporator)
                function validateTemperatures() {
                    const minGap = 15.0; // 15°C margin
                    if (state.th < state.tl + minGap) {
                        state.th = state.tl + minGap;
                        sliderTh.value = Math.round(state.th);
                        inputTh.value = Math.round(state.th);
                    }
                }
                function loadPreset(key) {
                    clearPresets();
                    presetBtns.forEach(btn => {
                        if (btn.dataset.preset === key) {
                            btn.classList.add('active');
                        }
                    });
                    if (key === 'ac') {
                        state.tl = 5;
                        state.th = 45;
                        state.eff = 80;
                        state.flow = 0.08;
                    }
                    if (key === 'warehouse') {
                        state.tl = -20;
                        state.th = 40;
                        state.eff = 70;
                        state.flow = 0.04;
                    }
                    if (key === 'winter') {
                        state.tl = 0;
                        state.th = 25; // cold ambient outside
                        state.eff = 85;
                        state.flow = 0.06;
                    }
                    sliderTl.value = state.tl;
                    inputTl.value = Math.round(state.tl);
                    sliderTh.value = state.th;
                    inputTh.value = Math.round(state.th);
                    sliderEff.value = state.eff;
                    inputEff.value = Math.round(state.eff);
                    sliderFlow.value = state.flow;
                    inputFlow.value = state.flow.toFixed(2);
                    updateCalculations();
                }
                function clearPresets() {
                    presetBtns.forEach(btn => btn.classList.remove('active'));
                }
                // Cycle Calculations
                function updateCalculations() {
                    const T_L = state.tl;
                    const T_H = state.th;
                    // Enthalpy approximations for R-134a [kJ/kg]
                    // Sat vapor at TL (State 1)
                    const h1 = 398.0 + 0.9 * T_L;
                    // Sat liquid at TH (State 3)
                    const h3 = 200.0 + 1.45 * T_H;
                    // Expansion isenthalpic (State 4)
                    const h4 = h3;
                    // Isentropic work model: wc_isen increases with pressure/temp difference
                    const tDiff = T_H - T_L;
                    const wc_isen = tDiff * (1.1 + 0.008 * tDiff);
                    const efficiency = state.eff / 100.0;
                    const wc_actual = wc_isen / efficiency;
                    // Superheated vapor exit compressor (State 2)
                    const h2 = h1 + wc_actual;
                    // Evaporator cooling load (refrigerating effect)
                    const q_L = h1 - h4; // kJ/kg
                    const Q_L = state.flow * q_L; // kW
                    // Compressor Power
                    const W_c = state.flow * wc_actual; // kW
                    const Q_H = state.flow * (h2 - h3); // kW
                    // COP
                    const COP = Q_L / W_c;
                    // Saturated pressures estimate for pressure ratio [bar]
                    const pLow = 1.0 * Math.exp(0.04 * T_L + 1.0);
                    const pHigh = 1.0 * Math.exp(0.04 * T_H + 1.0);
                    const pRatio = pHigh / pLow;
                    // Save state point calculations
                    statePoints.h1 = h1;
                    statePoints.h2 = h2;
                    statePoints.h3 = h3;
                    statePoints.h4 = h4;
                    statePoints.pLow = pLow;
                    statePoints.pHigh = pHigh;
                    // Update UI elements
                    txtCop.innerHTML = `${COP.toFixed(2)} <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;">(${(COP * 3.41214).toFixed(1)} EER)</span>`;
                    txtQl.innerText = `${Q_L.toFixed(2)} kW`;
                    txtWc.innerText = `${W_c.toFixed(2)} kW`;
                    txtQh.innerText = `${Q_H.toFixed(2)} kW`;
                    txtPratio.innerText = `${pRatio.toFixed(2)} : 1`;
                }
                // Loop Particle visual stream
                class CycleStreamParticle {
                    constructor() {
                        this.reset();
                        this.x = Math.random() * 200 + 40;
                    }
                    reset() {
                        // Four legs layout coords centered at top-left:
                        // Top Condenser: Y=20
                        // Bottom Evaporator: Y=180
                        // Left Expansion: X=50
                        // Right Compressor: X=210
                        this.segment = Math.floor(Math.random() * 4);
                        if (this.segment === 0) {
                            this.x = 50 + Math.random() * 160;
                            this.y = 180;
                        }
                        if (this.segment === 1) {
                            this.x = 210;
                            this.y = 20 + Math.random() * 160;
                        }
                        if (this.segment === 2) {
                            this.x = 50 + Math.random() * 160;
                            this.y = 20;
                        }
                        if (this.segment === 3) {
                            this.x = 50;
                            this.y = 20 + Math.random() * 160;
                        }
                        this.size = Math.random() * 2.5 + 1.2;
                    }
                    update() {
                        const speed = 1.6;
                        // Bottom Leg (Evaporator): left to right
                        if (this.segment === 0) {
                            this.x += speed * 0.8;
                            if (this.x >= 210) {
                                this.segment = 1;
                                this.x = 210;
                            }
                        }
                        // Right Leg (Compressor): bottom to top
                        if (this.segment === 1) {
                            this.y -= speed * 1.5; // moves faster (hot compressed gas)
                            if (this.y <= 20) {
                                this.segment = 2;
                                this.y = 20;
                            }
                        }
                        // Top Leg (Condenser): right to left
                        if (this.segment === 2) {
                            this.x -= speed * 1.0;
                            if (this.x <= 50) {
                                this.segment = 3;
                                this.x = 50;
                            }
                        }
                        // Left Leg (Expansion Valve): top to bottom
                        if (this.segment === 3) {
                            this.y += speed * 0.6;
                            if (this.y >= 180) {
                                this.segment = 0;
                                this.y = 180;
                            }
                        }
                    }
                    draw(c) {
                        c.save();
                        // Color styling based on thermodynamic states passing through physical components
                        if (this.segment === 0) {
                            // Evaporator leg: cold blue mixture
                            c.fillStyle = '#38bdf8';
                        }
                        else if (this.segment === 1) {
                            // Compressor leg: compression happens inside the compressor (Y = 140 to 60)
                            if (this.y > 140) {
                                c.fillStyle = '#38bdf8'; // Blue vapor inlet
                            } else if (this.y < 60) {
                                c.fillStyle = '#ef4444'; // Red hot gas outlet
                            } else {
                                const progress = (140 - this.y) / 80;
                                const r = Math.round(56 + progress * 180);
                                const g = Math.round(189 - progress * 130);
                                const b = Math.round(248 - progress * 180);
                                c.fillStyle = `rgb(${r},${g},${b})`;
                            }
                        }
                        else if (this.segment === 2) {
                            // Condenser leg: condensation happens inside the condenser (X = 170 to 90)
                            if (this.x > 170) {
                                c.fillStyle = '#ef4444'; // Red superheated vapor inlet
                            } else if (this.x < 90) {
                                c.fillStyle = '#f97316'; // Orange saturated liquid outlet
                            } else {
                                const progress = (170 - this.x) / 80;
                                const r = Math.round(239 - progress * 20);
                                const g = Math.round(68 + progress * 60);
                                const b = Math.round(68 + progress * 10);
                                c.fillStyle = `rgb(${r},${g},${b})`;
                            }
                        }
                        else if (this.segment === 3) {
                            // Expansion leg: flashing expansion happens at the center of the valve (Y = 100)
                            if (this.y < 100) {
                                c.fillStyle = '#f97316'; // Orange liquid inlet
                            } else {
                                c.fillStyle = '#38bdf8'; // Blue low-pressure wet mixture outlet
                            }
                        }
                        c.beginPath();
                        c.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                        c.fill();
                        c.restore();
                    }
                }
                // Populate loop flow streams
                function setupStreams() {
                    state.particles = [];
                    for (let i = 0; i < 65; i++) {
                        state.particles.push(new CycleStreamParticle());
                    }
                }
                // Render main sequence loop
                function animate(timestamp) {
                    requestAnimationFrame(animate);
                    const width = canvas.width;
                    const height = canvas.height;
                    if (state.particles.length === 0) {
                        setupStreams();
                    }
                    ctx.clearRect(0, 0, width, height);
                    // Blueprint grid
                    ctx.save();
                    ctx.strokeStyle = 'rgba(2, 132, 199, 0.03)';
                    ctx.lineWidth = 1;
                    for (let x = 0; x < width; x += 20) {
                        ctx.beginPath();
                        ctx.moveTo(x, 0);
                        ctx.lineTo(x, height);
                        ctx.stroke();
                    }
                    for (let y = 0; y < height; y += 20) {
                        ctx.beginPath();
                        ctx.moveTo(0, y);
                        ctx.lineTo(width, y);
                        ctx.stroke();
                    }
                    ctx.restore();
                    // 1. Draw Loop Components Diagram (Left half of canvas, Y=20~180)
                    ctx.save();
                    ctx.strokeStyle = '#94a3b8';
                    ctx.lineWidth = 6;
                    ctx.lineJoin = 'round';
                    ctx.beginPath();
                    // Top pipe segments (Condenser is at X=80~180, Y=20)
                    ctx.moveTo(50, 20);
                    ctx.lineTo(80, 20);
                    ctx.moveTo(180, 20);
                    ctx.lineTo(210, 20);
                    // Bottom pipe segments (Evaporator is at X=80~180, Y=180)
                    ctx.moveTo(50, 180);
                    ctx.lineTo(80, 180);
                    ctx.moveTo(180, 180);
                    ctx.lineTo(210, 180);
                    // Left pipe segments (Expansion Valve is at X=50, Y=80~120)
                    ctx.moveTo(50, 20);
                    ctx.lineTo(50, 80);
                    ctx.moveTo(50, 120);
                    ctx.lineTo(50, 180);
                    // Right pipe segments (Compressor is at X=210, Y=60~140)
                    ctx.moveTo(210, 20);
                    ctx.lineTo(210, 60);
                    ctx.moveTo(210, 140);
                    ctx.lineTo(210, 180);
                    ctx.stroke();
                    ctx.restore();
                    // Render streams inside pipes
                    state.particles.forEach(p => {
                        p.update();
                        p.draw(ctx);
                    });
                    // Draw mechanical device boxes
                    // Condenser (Top side, centered at X=130, Y=20)
                    ctx.save();
                    ctx.fillStyle = '#fee2e2';
                    ctx.strokeStyle = '#ef4444';
                    ctx.lineWidth = 1.5;
                    ctx.fillRect(80, 5, 100, 30);
                    ctx.strokeRect(80, 5, 100, 30);
                    ctx.fillStyle = '#ef4444';
                    ctx.font = 'bold 9.5px sans-serif';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('응축기 (Condenser)', 130, 20);
                    ctx.restore();
                    // Compressor (Right side, vertical box, centered at X=210, Y=100)
                    ctx.save();
                    ctx.fillStyle = '#f3e8ff';
                    ctx.strokeStyle = '#a855f7';
                    ctx.lineWidth = 1.5;
                    ctx.fillRect(196, 60, 28, 80);
                    ctx.strokeRect(196, 60, 28, 80);
                    ctx.fillStyle = '#a855f7';
                    ctx.font = 'bold 9.5px sans-serif';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.translate(210, 100);
                    ctx.rotate(Math.PI / 2);
                    ctx.fillText('압축기 (Comp)', 0, 0);
                    ctx.restore();
                    // Evaporator (Bottom, centered at X=130, Y=180)
                    ctx.save();
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
                    ctx.strokeStyle = '#38bdf8';
                    ctx.lineWidth = 1.5;
                    ctx.fillRect(80, 165, 100, 30);
                    ctx.strokeRect(80, 165, 100, 30);
                    ctx.fillStyle = '#0284c7';
                    ctx.font = 'bold 9.5px sans-serif';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('증발기 (Evaporator)', 130, 180);
                    ctx.restore();
                    // Expansion Valve (Left, centered at X=50, Y=100)
                    ctx.save();
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
                    ctx.strokeStyle = '#fb923c';
                    ctx.lineWidth = 1.5;
                    ctx.fillRect(32, 80, 36, 40);
                    ctx.strokeRect(32, 80, 36, 40);
                    ctx.fillStyle = '#ea580c';
                    ctx.font = 'bold 9px sans-serif';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('팽창밸브', 50, 100);
                    ctx.restore();
                    // Draw Legend Box (Top Right, X=260~620, Y=20~170)
                    ctx.save();
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
                    ctx.strokeStyle = '#cbd5e1';
                    ctx.lineWidth = 1;
                    ctx.strokeRect(260, 20, 360, 150);
                    ctx.fillRect(260, 20, 360, 150);
                    ctx.fillStyle = '#0f172a';
                    ctx.font = 'bold 13px sans-serif';
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'alphabetic';
                    ctx.fillText('상태 포인트 범례 (State Points)', 272, 38);
                    ctx.font = '11px sans-serif';
                    ctx.fillStyle = '#1e293b';
                    ctx.fillText('1 : 압축기 입구 (저압 포화기체) - 증발 완료 후 압축기 흡입 상태', 272, 60);
                    ctx.fillText('2 : 압축기 출구 (고압 과열증기) - 압축기 토출 후 온·압력 상승 상태', 272, 84);
                    ctx.fillText('3 : 응축기 출구 (고압 포화액체) - 응축 방열 후 상변화 완료 상태', 272, 108);
                    ctx.fillText('4 : 팽창 완료 (기액 혼합 상태) - 교축 팽창 후 저압 냉습증기 상태', 272, 132);
                    ctx.fillStyle = '#0284c7';
                    ctx.font = 'bold 10.5px sans-serif';
                    ctx.fillText('* 파란색: 저온 유체  |  빨간색: 고온 기체  |  주황색: 액체 냉매', 272, 156);
                    ctx.restore();
                    // 2. Draw Thermodynamic P-h Diagram (Bottom portion of canvas)
                    const pX = 80;
                    const pY = height - 60;
                    const pW = width - 140;
                    const pH = 140;
                    // Draw gridlines first so they sit behind the curves
                    ctx.save();
                    ctx.lineWidth = 0.8;
                    // Enthalpy gridlines
                    const xTicks = [200, 300, 400, 500, 600, 700];
                    xTicks.forEach(h => {
                        const x = mapHToChartX(h);
                        ctx.beginPath();
                        ctx.strokeStyle = 'rgba(226, 232, 240, 0.5)';
                        ctx.moveTo(x, pY);
                        ctx.lineTo(x, pY - pH);
                        ctx.stroke();
                    });
                    // Pressure gridlines (logarithmic spacing)
                    const yTicks = [1, 2, 5, 10, 20, 30];
                    yTicks.forEach(p => {
                        const y = mapPToChartY(p);
                        ctx.beginPath();
                        ctx.strokeStyle = 'rgba(226, 232, 240, 0.5)';
                        ctx.moveTo(pX, y);
                        ctx.lineTo(pX + pW, y);
                        ctx.stroke();
                    });
                    ctx.restore();
                    // Draw Main Axes
                    ctx.save();
                    ctx.strokeStyle = '#cbd5e1';
                    ctx.lineWidth = 1.5;
                    ctx.beginPath();
                    ctx.moveTo(pX, pY);
                    ctx.lineTo(pX + pW, pY);
                    ctx.moveTo(pX, pY);
                    ctx.lineTo(pX, pY - pH);
                    ctx.stroke();
                    // Draw ticks and labels
                    ctx.fillStyle = '#64748b';
                    ctx.font = '8.5px sans-serif';
                    xTicks.forEach(h => {
                        const x = mapHToChartX(h);
                        ctx.beginPath();
                        ctx.moveTo(x, pY);
                        ctx.lineTo(x, pY + 4);
                        ctx.strokeStyle = '#cbd5e1';
                        ctx.stroke();
                        ctx.textAlign = 'center';
                        ctx.fillText(h.toString(), x, pY + 14);
                    });
                    yTicks.forEach(p => {
                        const y = mapPToChartY(p);
                        ctx.beginPath();
                        ctx.moveTo(pX, y);
                        ctx.lineTo(pX - 4, y);
                        ctx.strokeStyle = '#cbd5e1';
                        ctx.stroke();
                        ctx.textAlign = 'right';
                        ctx.fillText(p.toString(), pX - 8, y + 3);
                    });
                    ctx.restore();
                    // Axis Title Labels
                    ctx.fillStyle = '#475569';
                    ctx.font = 'bold 9.5px Outfit';
                    ctx.fillText('엔탈피 (h, kJ/kg)', pX + pW - 100, pY + 28);
                    ctx.save();
                    ctx.translate(pX - 28, pY - pH + 30);
                    ctx.rotate(-Math.PI / 2);
                    ctx.fillText('압력 (P, bar)', 0, 0);
                    ctx.restore();
                    // Draw thermodynamic Saturation Bell Dome
                    ctx.strokeStyle = 'rgba(148, 163, 184, 0.5)';
                    ctx.lineWidth = 1.5;
                    ctx.beginPath();
                    // Saturation dome coordinate drawing scaled for hMax = 700 (aligned with R-134a h1 and h3 thermodynamic bounds)
                    const domeTopX = pX + pW * 0.22;
                    const domeTopY = pY - pH * 0.85;
                    ctx.moveTo(pX + pW * 0.08, pY);
                    // Bezier interpolation representing saturation dome boundary
                    ctx.bezierCurveTo(
                        pX + pW * 0.12, pY - pH * 0.72,
                        domeTopX - 15, domeTopY,
                        domeTopX, domeTopY
                    );
                    ctx.bezierCurveTo(
                        domeTopX + 15, domeTopY,
                        pX + pW * 0.38, pY - pH * 0.4,
                        pX + pW * 0.45, pY
                    );
                    ctx.stroke();
                    ctx.restore();
                    // Map refrigeration coordinates onto P-h Chart Space
                    // Low enthalpy scale around 150 to 500 kJ/kg
                    // Low pressure scale around 1 to 25 bar
                    function mapHToChartX(h) {
                        const hMin = 180;
                        const hMax = 700;
                        const ratio = (h - hMin) / (hMax - hMin);
                        return pX + ratio * pW;
                    }
                    function mapPToChartY(p) {
                        // Log scale plotting
                        const pMin = Math.log(0.8);
                        const pMax = Math.log(30);
                        const ratio = (Math.log(p) - pMin) / (pMax - pMin);
                        return pY - ratio * pH;
                    }
                    const pt1X = mapHToChartX(statePoints.h1);
                    const pt1Y = mapPToChartY(statePoints.pLow);
                    const pt2X = mapHToChartX(statePoints.h2);
                    const pt2Y = mapPToChartY(statePoints.pHigh);
                    const pt3X = mapHToChartX(statePoints.h3);
                    const pt3Y = mapPToChartY(statePoints.pHigh);
                    const pt4X = mapHToChartX(statePoints.h4);
                    const pt4Y = mapPToChartY(statePoints.pLow);
                    // Draw Closed Loop of Refrigeration Cycle
                    ctx.save();
                    ctx.strokeStyle = '#db2777';
                    ctx.lineWidth = 3;
                    ctx.lineJoin = 'round';
                    ctx.beginPath();
                    ctx.moveTo(pt1X, pt1Y);
                    ctx.lineTo(pt2X, pt2Y); // Compression (non-isentropic diagonal)
                    ctx.lineTo(pt3X, pt3Y); // Condenser isobaric cooling
                    ctx.lineTo(pt4X, pt4Y); // Throttling (vertical straight down)
                    ctx.closePath();        // Evaporator isobaric heating
                    ctx.stroke();
                    // Draw circles at state points
                    const pts = [
                        { x: pt1X, y: pt1Y, label: '1', col: '#0284c7' },
                        { x: pt2X, y: pt2Y, label: '2', col: '#ef4444' },
                        { x: pt3X, y: pt3Y, label: '3', col: '#f97316' },
                        { x: pt4X, y: pt4Y, label: '4', col: '#84cc16' }
                    ];
                    pts.forEach(pt => {
                        ctx.beginPath();
                        ctx.arc(pt.x, pt.y, 4, 0, Math.PI * 2);
                        ctx.fillStyle = '#ffffff';
                        ctx.fill();
                        ctx.strokeStyle = pt.col;
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.fillStyle = '#0f172a';
                        ctx.font = 'bold 8.5px sans-serif';
                        ctx.fillText(pt.label, pt.x + 6, pt.y - 4);
                    });
                    ctx.restore();
                }
                // Event Listeners Mapping
                sliderTl.addEventListener('input', syncTlFromSlider);
                inputTl.addEventListener('change', syncTlFromInput);
                sliderTh.addEventListener('input', syncThFromSlider);
                inputTh.addEventListener('change', syncThFromInput);
                sliderEff.addEventListener('input', syncEffFromSlider);
                inputEff.addEventListener('change', syncEffFromInput);
                sliderFlow.addEventListener('input', syncFlowFromSlider);
                inputFlow.addEventListener('change', syncFlowFromInput);
                presetBtns.forEach(btn => {
                    btn.addEventListener('click', function() {
                        loadPreset(btn.dataset.preset);
                    });
                });
                // Load initial
                loadPreset('ac');
                requestAnimationFrame(animate);
                // Anti-copying protection
                document.addEventListener('contextmenu', function(e) {
                    e.preventDefault();
                    alert("이 시뮬레이터 프로그램의 지식재산권은 보호받고 있습니다.");
                    return false;
                }, { capture: true });
                document.addEventListener('selectstart', function(e) {
                    e.preventDefault();
                    return false;
                }, { capture: true });
            }
            // Retry loader sequence
            let loadAttempts = 0;
            function tryLoad() {
                loadAttempts++;
                initSimulator();
                if (!window.__coolingcycle_initialized) {
                    if (loadAttempts < 50) {
                        setTimeout(tryLoad, 100);
                    }
                }
            }
            if (document.readyState === 'complete' || document.readyState === 'interactive') {
                tryLoad();
            } else {
                document.addEventListener('DOMContentLoaded', tryLoad);
                window.addEventListener('load', tryLoad);
            }
        })();
</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>경계 온도 조건 제어: 증발 온(TL)과 응축 온(TH) 슬라이더를 조정하여 사이클의 온도 한계를 설정합니다.</strong></li>
<li style="margin-bottom: 6px;">장치 효율 및 냉매 유량 제어: 압축기의 등엔트로피 효율(η)과 냉매 순환 유량(m)을 조절하여 실제 전력 소비량과 냉동 용량을 확인합니다.</li>
<li style="margin-bottom: 6px;">P-h 선도 실시간 분석: 압력-엔탈피(P-h) 상태도 위에 그려진 4대 거점 사이클 선형 루프가 온도 변화에 따라 수축 팽창하는 과정을 관찰합니다.</li>
<li style="margin-bottom: 6px;">성적계수(COP) 및 전력 판독: 실시간 계측 모니터에서 총 소요 동력(kW)과 시스템 COP 변화를 모니터링하여 에너지 효율을 극대화하는 설계를 도출합니다.</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;" /> 증기압축 냉동사이클 이론 및 COP 계산 해설 보기</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. 증기압축 냉동 사이클 (Vapor-compression Refrigeration Cycle)</h3>
<p>현대 에어컨과 냉장고의 핵심 기반이 되는 증기압축식 냉동 사이클은 저온의 열원으로부터 열을 흡수하여 고온의 열원으로 방출하는 열역학적 펌프 역할을 수행합니다. 사이클은 물리적으로 분리된 4개의 주요 장치로 구성됩니다.</p><ul><li><strong>압축기 (Compressor):</strong> 증발기를 거쳐 나온 저압 포화 증기 냉매를 흡입하여 고압 초임계 상태로 단열 압축합니다 (동력 투입).</li><li><strong>응축기 (Condenser):</strong> 고온 고압의 가스 냉매가 외부로 열을 방출하며 액체 상태로 포화 응축됩니다.</li><li><strong>팽창 밸브 (Expansion Valve):</strong> 교축 과정(Throttling, 등엔탈피 h1=h2)을 거치며 냉매의 압력과 온도를 급격히 하강시켜 습증기 상태로 만듭니다.</li><li><strong>증발기 (Evaporator):</strong> 저온 저압의 냉매가 피냉각 물체로부터 열을 흡수(냉각 작용)하여 증발 기화합니다.</li></ul>
<h3>2. 냉동기 성능 지수(COP) 및 사이클 엔탈피 계산 공식</h3>
<p>에어컨과 열펌프의 성능은 단순 열효율 대신 투입 전력 대비 얻은 냉동 능력을 뜻하는 **성적계수(COP, Coefficient of Performance)**로 정의합니다.</p><p><strong>① 냉동 사이클 상태별 에너지 해석:</strong></p><ul><li>압축기 소요 일량: <code>wc = h2 - h1</code> &nbsp;[kJ/kg]</li><li>증발기 흡수 열량 (단위 냉동 효과): <code>ql = h1 - h4 = h1 - h3</code> &nbsp;[kJ/kg]</li><li>응축기 방출 열량: <code>qh = h2 - h3</code> &nbsp;[kJ/kg]</li></ul><p><strong>② 냉동 능력 (Cooling Capacity, Ql) 및 소요 동력 (Wc):</strong></p><p style="text-align: center; font-weight: bold; background: #f3f4f6; padding: 12px; border-radius: 8px;">Ql = m × ql &nbsp;[kW], &nbsp; Wc = m × wc &nbsp;[kW]</p><p><strong>③ 냉동기 성적계수 (COP_R):</strong></p><p style="text-align: center; font-weight: bold; background: #e0f2fe; padding: 16px; border-radius: 8px; font-size: 1.05em; color: #0369a1;">COP_R = Ql / Wc = ql / wc = (h1 - h3) / (h2 - h1)</p><p>증발 온도가 높을수록, 응축 온도가 낮을수록 사이클 내부 면적(압축기 소요 전력)이 감소하여 COP가 획기적으로 상승합니다. 이는 고온 다습한 실외 환경이나 실내 극저온 셋팅 시 전기료가 급상승하는 물리적 배경을 설명합니다.</p>
<h3>3. 냉매(Refrigerant)와 P-h 선도의 시각적 이해</h3>
<p>압력-엔탈피(P-h) 선도는 종축에 압력(Log P), 횡축에 엔탈피(h)를 배치한 열역학 차트입니다. 한가운데 종 모양의 임계 돔(Saturation Dome)이 존재하며, 돔의 왼쪽 실선은 포화 액선, 오른쪽 실선은 포화 증기선입니다. 냉동 사이클은 이 돔의 하단과 상단을 종횡으로 누비며 열교환을 수행합니다. R-134a와 같은 친환경 대체 냉매는 높은 잠열량과 우수한 비체적 특징을 가집니다.</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/refrigeration-cooling-cycle-cop-calculator/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
