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

<channel>
	<title>유압실린더 &#8211; MyEngNote</title>
	<atom:link href="https://myengnote.com/tag/%ec%9c%a0%ec%95%95%ec%8b%a4%eb%a6%b0%eb%8d%94/feed/" rel="self" type="application/rss+xml" />
	<link>https://myengnote.com</link>
	<description></description>
	<lastBuildDate>Wed, 08 Jul 2026 04:42:19 +0000</lastBuildDate>
	<language>ko-KR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.2</generator>
	<item>
		<title>유압 실린더 계산기 &#038; 시뮬레이터</title>
		<link>https://myengnote.com/hydraulic-cylinder-force-velocity-calculator-simulator/</link>
					<comments>https://myengnote.com/hydraulic-cylinder-force-velocity-calculator-simulator/#respond</comments>
		
		<dc:creator><![CDATA[동동]]></dc:creator>
		<pubDate>Sun, 21 Jun 2026 23:26:07 +0000</pubDate>
				<category><![CDATA[공학계산기]]></category>
		<category><![CDATA[실린더속도]]></category>
		<category><![CDATA[실린더추력]]></category>
		<category><![CDATA[유압설계]]></category>
		<category><![CDATA[유압실린더]]></category>
		<category><![CDATA[피스톤단면적]]></category>
		<guid isPermaLink="false">https://myengnote.com/hydraulic-cylinder-force-velocity-calculator-simulator/</guid>

					<description><![CDATA[실린더 내경(Bore), 로드경(Rod), 작동 압력, 공급 유량을 조절하여 전진/후진 추력(Force)과 피스톤 이동 유동 속도를 실시간 산출하고, 밸브 절환에 따른 양방향 거동을 모사하는 고성밀 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 hydraulic-cylinder-wrapper */
        /* Modern Reset and Design Tokens */
        .hydraulic-cylinder-wrapper *, .hydraulic-cylinder-wrapper *::before, .hydraulic-cylinder-wrapper *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .hydraulic-cylinder-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);
        }
        .hydraulic-cylinder-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;
        }
        .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-d::-webkit-slider-thumb {
            background: var(--color-cyan);
            box-shadow: 0 0 10px var(--color-cyan);
        }
        #slider-d::-webkit-slider-thumb:hover { transform: scale(1.2); }
        #slider-rod::-webkit-slider-thumb {
            background: var(--color-purple);
            box-shadow: 0 0 10px var(--color-purple);
        }
        #slider-rod::-webkit-slider-thumb:hover { transform: scale(1.2); }
        #slider-p::-webkit-slider-thumb {
            background: var(--color-success);
            box-shadow: 0 0 10px var(--color-success);
        }
        #slider-p::-webkit-slider-thumb:hover { transform: scale(1.2); }
        #slider-q::-webkit-slider-thumb {
            background: var(--color-magenta);
            box-shadow: 0 0 10px var(--color-magenta);
        }
        #slider-q::-webkit-slider-thumb:hover { transform: scale(1.2); }
        #slider-s::-webkit-slider-thumb {
            background: var(--color-warning);
            box-shadow: 0 0 10px var(--color-warning);
        }
        #slider-s::-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-details {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .preset-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--color-text-main);
        }
        .preset-spec {
            font-size: 11px;
            color: var(--color-text-muted);
            font-weight: 500;
        }
        .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);
        }
        .force-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);
        }
        .force-title {
            font-size: 11px;
            font-weight: 700;
            color: var(--color-cyan);
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .force-value {
            font-family: var(--font-heading);
            font-weight: 800;
            font-size: 26px;
            background: linear-gradient(90deg, var(--color-text-main), var(--color-cyan));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .force-type {
            font-size: 11px;
            font-weight: 600;
            color: var(--color-text-muted);
        }
        .results-grid {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .result-card {
            background: rgba(255, 255, 255, 0.85);
            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);
        }
        .formula-card {
            background: rgba(0, 0, 0, 0.01);
            border: 1px solid var(--color-border);
            border-radius: 12px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            font-size: 12px;
        }
        .formula-card h4 {
            font-weight: 700;
            color: var(--color-text-main);
        }
        .formula-equation {
            font-family: monospace;
            color: var(--color-cyan);
            font-size: 13px;
            background: #f8fafc;
            padding: 8px 10px;
            border-radius: 6px;
            border: 1px solid var(--color-border);
            text-align: center;
        }
        /* Container Query */
        @container hydraulic-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;
            }
            .force-readout-box {
                grid-column: 1;
                grid-row: 2;
            }
            .results-grid {
                grid-column: 2;
                grid-row: 2;
            }
        }
        @container hydraulic-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;
            }
            .force-readout-box, .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;
            }
        }
/* ━━ WordPress 레이아웃 Override: 디자인 1 (2열 컴팩트 대칭 레이아웃) ━━ */
.hydraulic-cylinder-wrapper .app-main-grid,
.hydraulic-cylinder-wrapper .main-grid,
.hydraulic-cylinder-wrapper .sim-grid {
    display: grid !important;
    grid-template-columns: 340px 1fr !important;
    gap: 24px !important;
    align-items: start !important;
}
/* 3열 레이아웃을 2열 레이아웃으로 변경하는 특화 스타일 */
.hydraulic-cylinder-wrapper .right-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    min-width: 0 !important;
    grid-column: 2 !important;
}
.hydraulic-cylinder-wrapper .simulation-panel,
.hydraulic-cylinder-wrapper .canvas-panel,
.hydraulic-cylinder-wrapper .sim-panel {
    grid-column: auto !important;
    order: 1 !important;
    align-self: stretch !important;
}
.hydraulic-cylinder-wrapper .control-panel {
    grid-column: 1 !important;
}
/* 2열 통합 결과 분석 영역 레이아웃 */
.hydraulic-cylinder-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 스타일 */
.hydraulic-cylinder-wrapper .simulation-results-section .ratio-readout-box,
.hydraulic-cylinder-wrapper .simulation-results-section .re-readout-box,
.hydraulic-cylinder-wrapper .simulation-results-section .status-readout-box,
.hydraulic-cylinder-wrapper .simulation-results-section .flow-readout-box,
.hydraulic-cylinder-wrapper .simulation-results-section [class*="readout-box"],
.hydraulic-cylinder-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;
}
.hydraulic-cylinder-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;
}
.hydraulic-cylinder-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;
}
.hydraulic-cylinder-wrapper .simulation-results-section .formula-card {
    grid-column: 1 !important;
    grid-row: 2 !important;
}
/* 모바일/반응형 (800px 이하) ── 항상 세로형(1열) 정렬 및 시뮬레이터 캔버스 최상단 배치 */
@media (max-width: 800px) {
    .hydraulic-cylinder-wrapper .app-main-grid,
    .hydraulic-cylinder-wrapper .main-grid,
    .hydraulic-cylinder-wrapper .sim-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .hydraulic-cylinder-wrapper .control-panel {
        order: 2 !important;
        width: 100% !important;
    }
    .hydraulic-cylinder-wrapper .right-column {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .hydraulic-cylinder-wrapper .simulation-panel,
    .hydraulic-cylinder-wrapper .canvas-panel,
    .hydraulic-cylinder-wrapper .sim-panel,
    .hydraulic-cylinder-wrapper .canvas-section {
        order: -1 !important;
    }
    .hydraulic-cylinder-wrapper .simulation-results-section {
        grid-template-columns: 1fr !important;
    }
    .hydraulic-cylinder-wrapper .simulation-results-section .ratio-readout-box,
    .hydraulic-cylinder-wrapper .simulation-results-section .re-readout-box,
    .hydraulic-cylinder-wrapper .simulation-results-section .status-readout-box,
    .hydraulic-cylinder-wrapper .simulation-results-section .flow-readout-box,
    .hydraulic-cylinder-wrapper .simulation-results-section [class*="readout-box"],
    .hydraulic-cylinder-wrapper .simulation-results-section .gauge-container {
        grid-column: 1 !important;
        grid-row: auto !important;
        height: auto !important;
    }
    .hydraulic-cylinder-wrapper .simulation-results-section .results-grid {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    .hydraulic-cylinder-wrapper .simulation-results-section .formula-card {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}
.hydraulic-cylinder-wrapper .app-container,
.hydraulic-cylinder-wrapper .main-container {
    max-width: 100% !important;
    padding: 12px !important;
}
/* Premium Advice/Formula Card & Typography Overrides */
.hydraulic-cylinder-wrapper .simulation-results-section .formula-card,
.hydraulic-cylinder-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;
}
.hydraulic-cylinder-wrapper .simulation-results-section .formula-card h4,
.hydraulic-cylinder-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;
}
.hydraulic-cylinder-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;
}
.hydraulic-cylinder-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="hydraulic-cylinder-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-arrows-left-right"></i></div>
                <div>
                    <h1>HYDRAULIC CYLINDER</h1>
                    <div class="subtitle">유압 실린더 추력 및 전/후진 차동 유속 계산기</div>
                </div>
            </div>
            <div class="header-badge">
                <div class="pulse-dot"></div>
                <span class="badge-text">ACTUATOR PHYSICAL ENGINE</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>
                <!-- Bore D -->
                <div class="input-group">
                    <div class="input-label-row">
                        <label for="input-d"><i class="fa-solid fa-circle-dot text-cyan"></i> 실린더 보어 내경 (D)</label>
                        <span class="helper-text">범위: 20 ~ 200 mm</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-d" class="custom-number-input" min="20" max="200" value="80">
                        <span class="unit-badge">mm</span>
                    </div>
                    <input type="range" id="slider-d" class="custom-slider" min="20" max="200" value="80">
                </div>
                <!-- Rod d -->
                <div class="input-group">
                    <div class="input-label-row">
                        <label for="input-rod"><i class="fa-solid fa-square-minus text-purple"></i> 피스톤 로드 외경 (d)</label>
                        <span class="helper-text">범위: 10 ~ 140 mm</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-rod" class="custom-number-input" min="10" max="140" value="45">
                        <span class="unit-badge">mm</span>
                    </div>
                    <input type="range" id="slider-rod" class="custom-slider" min="10" max="140" value="45">
                </div>
                <!-- Stroke S -->
                <div class="input-group">
                    <div class="input-label-row">
                        <label for="input-s"><i class="fa-solid fa-arrows-left-right text-warning"></i> 실린더 행정 거리 (S)</label>
                        <span class="helper-text">범위: 50 ~ 1000 mm</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-s" class="custom-number-input" min="50" max="1000" value="300">
                        <span class="unit-badge">mm</span>
                    </div>
                    <input type="range" id="slider-s" class="custom-slider" min="50" max="1000" value="300">
                </div>
                <!-- Working Pressure P -->
                <div class="input-group">
                    <div class="input-label-row">
                        <label for="input-p"><i class="fa-solid fa-gauge-simple-high text-success"></i> 유압 시스템 압력 (P)</label>
                        <span class="helper-text">범위: 10 ~ 350 bar</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-p" class="custom-number-input" min="10" max="350" value="140">
                        <span class="unit-badge">bar</span>
                    </div>
                    <input type="range" id="slider-p" class="custom-slider" min="10" max="350" value="140">
                </div>
                <!-- Supply Q -->
                <div class="input-group">
                    <div class="input-label-row">
                        <label for="input-q"><i class="fa-solid fa-droplet text-magenta"></i> 펌프 공급 유량 (Q)</label>
                        <span class="helper-text">범위: 1 ~ 150 LPM</span>
                    </div>
                    <div class="number-input-wrapper">
                        <input type="number" id="input-q" class="custom-number-input" min="1" max="150" value="20">
                        <span class="unit-badge">L/min (LPM)</span>
                    </div>
                    <input type="range" id="slider-q" class="custom-slider" min="1" max="150" value="20">
                </div>
                <!-- Presets -->
                <div class="presets-section">
                    <h3><i class="fa-solid fa-gears"></i> 실무 실린더 표준 프리셋</h3>
                    <div class="presets-grid">
                        <button class="preset-btn" data-preset="standard">
                            <div class="preset-icon"><i class="fa-solid fa-screwdriver-wrench"></i></div>
                            <div class="preset-details">
                                <span class="preset-name">일반 산업용 실린더</span>
                                <span class="preset-spec">80A / 45A, 140 bar</span>
                            </div>
                        </button>
                        <button class="preset-btn" data-preset="heavy">
                            <div class="preset-icon"><i class="fa-solid fa-anchor"></i></div>
                            <div class="preset-details">
                                <span class="preset-name">고출력 프레스 실린더</span>
                                <span class="preset-spec">180A / 90A, 250 bar</span>
                            </div>
                        </button>
                        <button class="preset-btn" data-preset="highspeed">
                            <div class="preset-icon"><i class="fa-solid fa-bolt"></i></div>
                            <div class="preset-details">
                                <span class="preset-name">고속 무빙 툴 실린더</span>
                                <span class="preset-spec">40A / 20A, 70 bar</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">행정 동작 상태: 대기</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-v-ext">66.3 mm/s</span>
                                    </div>
                                    <div class="mini-divider"></div>
                                    <div class="mini-metric">
                                        <span class="label">피스톤 후진 속도</span>
                                        <span class="value" id="mini-v-ret">95.4 mm/s</span>
                                    </div>
                                    <div class="mini-divider"></div>
                                    <div class="mini-metric">
                                        <span class="label">전/후진 면적비</span>
                                        <span class="value" id="mini-area-ratio">1.44배</span>
                                    </div>
                                </div>
                            <div class="simulation-results-section">
                                <div class="force-readout-box">
                                    <span class="force-title">THEORETICAL EXTEND FORCE</span>
                                    <span class="force-value" id="txt-force-ext">70.37 kN <span>(7.18 Ton)</span></span>
                                    <span class="force-type" id="txt-force-ret-label">후진력: 48.09 kN (4.90 Ton)</span>
                                </div>
                                <div class="results-grid">
                                    <div class="result-card">
                                        <div class="card-icon text-cyan"><i class="fa-solid fa-compress"></i></div>
                                        <div class="card-content">
                                            <span class="card-unit">전진 수하 면적 (Cap Area)</span>
                                            <span class="card-value" id="txt-area-push">50.27 cm²</span>
                                        </div>
                                    </div>
                                    <div class="result-card">
                                        <div class="card-icon text-purple"><i class="fa-solid fa-expand"></i></div>
                                        <div class="card-content">
                                            <span class="card-unit">후진 수하 면적 (Rod End Area)</span>
                                            <span class="card-value" id="txt-area-pull">34.36 cm²</span>
                                        </div>
                                    </div>
                                    <div class="result-card">
                                        <div class="card-icon text-success"><i class="fa-solid fa-clock"></i></div>
                                        <div class="card-content">
                                            <span class="card-unit">전진 행정 시간 (Extend Time)</span>
                                            <span class="card-value" id="txt-time-ext">4.52 s</span>
                                        </div>
                                    </div>
                                    <div class="result-card">
                                        <div class="card-icon text-warning"><i class="fa-solid fa-clock-rotate-left"></i></div>
                                        <div class="card-content">
                                            <span class="card-unit">후진 행정 시간 (Retract Time)</span>
                                            <span class="card-value" id="txt-time-ret">3.14 s</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="formula-card">
                                        <h4><i class="fa-solid fa-circle-info text-cyan"></i> 피스톤 추력 연산 공식</h4>
                                        <div class="formula-equation">F = P &times; A</div>
                                        <p>
                                            * 1 bar = 100,000 Pa(N/m²) 압력 단위를 곱해 계산한 순수 정적 추력입니다.
                                        </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 = {
                d: 80,      // Bore mm
                rod: 45,    // Rod mm
                stroke: 300, // Stroke mm
                p: 140,     // bar
                q: 20,      // LPM
                strokePct: 0.1, // 0.0 to 1.0 (piston stroke percent)
                direction: 1, // 1 for extending, -1 for retracting
                lastTime: 0
            };
            // DOM Elements
            const inputD = document.getElementById('input-d');
            const sliderD = document.getElementById('slider-d');
            const inputRod = document.getElementById('input-rod');
            const sliderRod = document.getElementById('slider-rod');
            const inputS = document.getElementById('input-s');
            const sliderS = document.getElementById('slider-s');
            const inputP = document.getElementById('input-p');
            const sliderP = document.getElementById('slider-p');
            const inputQ = document.getElementById('input-q');
            const sliderQ = document.getElementById('slider-q');
            const txtForceExt = document.getElementById('txt-force-ext');
            const txtForceRetLabel = document.getElementById('txt-force-ret-label');
            const txtAreaPush = document.getElementById('txt-area-push');
            const txtAreaPull = document.getElementById('txt-area-pull');
            const miniVExt = document.getElementById('mini-v-ext');
            const miniVRet = document.getElementById('mini-v-ret');
            const miniAreaRatio = document.getElementById('mini-area-ratio');
            const presetButtons = document.querySelectorAll('.preset-btn');
            const canvas = document.getElementById('physics-canvas');
            const ctx = canvas.getContext('2d');
            // Clamp Rod <= Bore - 10
            function validateRodDiameter() {
                const maxAllowedRod = state.d - 10;
                if (state.rod > maxAllowedRod) {
                    state.rod = maxAllowedRod;
                    inputRod.value = state.rod;
                    sliderRod.value = state.rod;
                }
                sliderRod.max = maxAllowedRod;
            }
            // Sync Listeners
            function syncDFromSlider() {
                state.d = parseInt(sliderD.value);
                inputD.value = state.d;
                validateRodDiameter();
                clearPresets();
                updateCalculations();
            }
            function syncDFromInput() {
                let val = parseInt(inputD.value);
                if (isNaN(val)) { val = 80; }
                if (val < 20) { val = 20; }
                if (val > 200) { val = 200; }
                state.d = val;
                inputD.value = val;
                sliderD.value = val;
                validateRodDiameter();
                clearPresets();
                updateCalculations();
            }
            function syncRodFromSlider() {
                state.rod = parseInt(sliderRod.value);
                inputRod.value = state.rod;
                validateRodDiameter();
                clearPresets();
                updateCalculations();
            }
            function syncRodFromInput() {
                let val = parseInt(inputRod.value);
                if (isNaN(val)) { val = 45; }
                if (val < 10) { val = 10; }
                if (val > state.d - 10) { val = state.d - 10; }
                state.rod = val;
                inputRod.value = val;
                sliderRod.value = val;
                validateRodDiameter();
                clearPresets();
                updateCalculations();
            }
            function syncSFromSlider() {
                state.stroke = parseInt(sliderS.value);
                inputS.value = state.stroke;
                clearPresets();
                updateCalculations();
            }
            function syncSFromInput() {
                let val = parseInt(inputS.value);
                if (isNaN(val)) { val = 300; }
                if (val < 50) { val = 50; }
                if (val > 1000) { val = 1000; }
                state.stroke = val;
                inputS.value = val;
                sliderS.value = val;
                clearPresets();
                updateCalculations();
            }
            function syncPFromSlider() {
                state.p = parseInt(sliderP.value);
                inputP.value = state.p;
                clearPresets();
                updateCalculations();
            }
            function syncPFromInput() {
                let val = parseInt(inputP.value);
                if (isNaN(val)) { val = 140; }
                if (val < 10) { val = 10; }
                if (val > 350) { val = 350; }
                state.p = val;
                inputP.value = val;
                sliderP.value = val;
                clearPresets();
                updateCalculations();
            }
            function syncQFromSlider() {
                state.q = parseInt(sliderQ.value);
                inputQ.value = state.q;
                clearPresets();
                updateCalculations();
            }
            function syncQFromInput() {
                let val = parseInt(inputQ.value);
                if (isNaN(val)) { val = 20; }
                if (val < 1) { val = 1; }
                if (val > 150) { val = 150; }
                state.q = val;
                inputQ.value = val;
                sliderQ.value = val;
                clearPresets();
                updateCalculations();
            }
            sliderD.addEventListener('input', syncDFromSlider);
            inputD.addEventListener('change', syncDFromInput);
            sliderRod.addEventListener('input', syncRodFromSlider);
            inputRod.addEventListener('change', syncRodFromInput);
            sliderS.addEventListener('input', syncSFromSlider);
            inputS.addEventListener('change', syncSFromInput);
            sliderP.addEventListener('input', syncPFromSlider);
            inputP.addEventListener('change', syncPFromInput);
            sliderQ.addEventListener('input', syncQFromSlider);
            inputQ.addEventListener('change', syncQFromInput);
            // Presets
            function loadPreset(presetKey) {
                clearPresets();
                presetButtons.forEach(function(btn) {
                    if (btn.dataset.preset === presetKey) {
                        btn.classList.add('active');
                    }
                });
                if (presetKey === 'standard') {
                    state.d = 80;
                    state.rod = 45;
                    state.stroke = 300;
                    state.p = 140;
                    state.q = 20;
                } else if (presetKey === 'heavy') {
                    state.d = 180;
                    state.rod = 90;
                    state.stroke = 500;
                    state.p = 250;
                    state.q = 45;
                } else if (presetKey === 'highspeed') {
                    state.d = 40;
                    state.rod = 20;
                    state.stroke = 200;
                    state.p = 70;
                    state.q = 12;
                }
                inputD.value = state.d;
                sliderD.value = state.d;
                inputRod.value = state.rod;
                sliderRod.value = state.rod;
                inputS.value = state.stroke;
                sliderS.value = state.stroke;
                inputP.value = state.p;
                sliderP.value = state.p;
                inputQ.value = state.q;
                sliderQ.value = state.q;
                validateRodDiameter();
                updateCalculations();
            }
            function clearPresets() {
                presetButtons.forEach(function(btn) {
                    btn.classList.remove('active');
                });
            }
            presetButtons.forEach(function(btn) {
                btn.addEventListener('click', function() {
                    loadPreset(btn.dataset.preset);
                });
            });
            // Calcs
            function updateCalculations() {
                // A_push = pi * D^2 / 4 in mm2
                const aPush = (Math.PI * Math.pow(state.d, 2)) / 4;
                const aPushCm2 = aPush / 100;
                txtAreaPush.innerText = aPushCm2.toFixed(2) + ' cm²';
                // A_pull = pi * (D^2 - d^2) / 4 in mm2
                const aPull = (Math.PI * (Math.pow(state.d, 2) - Math.pow(state.rod, 2))) / 4;
                const aPullCm2 = aPull / 100;
                txtAreaPull.innerText = aPullCm2.toFixed(2) + ' cm²';
                // Force = P * A
                // 1 bar = 100,000 N/m2 = 10 N/cm2
                // F = P_bar * A_cm2 * 10 / 1000 kN = P_bar * A_cm2 / 100 kN
                const fPushKn = (state.p * aPushCm2) / 100;
                const fPushTon = fPushKn / 9.80665;
                txtForceExt.innerHTML = fPushKn.toFixed(2) + ' kN <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;">(' + fPushTon.toFixed(2) + ' Ton)</span>';
                const fPullKn = (state.p * aPullCm2) / 100;
                const fPullTon = fPullKn / 9.80665;
                txtForceRetLabel.innerText = '후진력: ' + fPullKn.toFixed(2) + ' kN (' + fPullTon.toFixed(2) + ' Ton)';
                // Speed = Q / A
                // Q in LPM = 16,666.7 mm3/s
                // v_ext = Q * 16666.7 / A_push (mm/s)
                const vExt = (state.q * 16666.67) / aPush;
                miniVExt.innerText = vExt.toFixed(1) + ' mm/s';
                const vRet = (state.q * 16666.67) / aPull;
                miniVRet.innerText = vRet.toFixed(1) + ' mm/s';
                const areaRatio = aPush / aPull;
                miniAreaRatio.innerText = areaRatio.toFixed(2) + '배 차이';
                // Time = Stroke / Speed
                const tExt = state.stroke / vExt;
                const tRet = state.stroke / vRet;
                document.getElementById('txt-time-ext').innerText = tExt.toFixed(2) + ' s';
                document.getElementById('txt-time-ret').innerText = tRet.toFixed(2) + ' s';
                const txtCanvasScale = document.getElementById('txt-canvas-scale');
                if (txtCanvasScale) {
                    let phase = '전진 (Extending)';
                    if (state.direction < 0) { phase = '후진 (Retracting)'; }
                    txtCanvasScale.innerText = `행정 구동 상태: ${phase}`;
                }
            }
            // DPR-aware canvas resize
            function resizeCanvas() {
                const dpr = window.devicePixelRatio || 1;
                const rect = canvas.getBoundingClientRect();
                canvas.width = rect.width * dpr;
                canvas.height = rect.height * dpr;
                ctx.scale(dpr, dpr);
            }
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            setTimeout(resizeCanvas, 300);
            // Draw Cylinder cycle
            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 dpr = window.devicePixelRatio || 1;
                const width = canvas.width / dpr;
                const height = canvas.height / dpr;
                ctx.clearRect(0, 0, width, height);
                // Grid
                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();
                // Compute physical extension cycle step
                const aPush = (Math.PI * Math.pow(state.d, 2)) / 4;
                const aPull = (Math.PI * (Math.pow(state.d, 2) - Math.pow(state.rod, 2))) / 4;
                const vExt = (state.q * 16666.67) / aPush;
                const vRet = (state.q * 16666.67) / aPull;
                // Cycle physics (relative to actual stroke length state.stroke)
                if (state.direction === 1) {
                    // Extend speed pct shift
                    state.strokePct += (vExt / state.stroke) * dt;
                    if (state.strokePct >= 0.95) {
                        state.strokePct = 0.95;
                        state.direction = -1;
                    }
                } else {
                    // Retract speed pct shift
                    state.strokePct -= (vRet / state.stroke) * dt;
                    if (state.strokePct <= 0.05) {
                        state.strokePct = 0.05;
                        state.direction = 1;
                    }
                }
                // Geometry mapping - dynamic auto-zoom based on canvas size
                // Bore diameter (D): 20 ~ 200 mm -> maps to 20~75% of canvas height
                const maxCylH = height * 0.65;
                const minCylH = height * 0.15;
                const cylH = minCylH + ((state.d - 20) / 180) * (maxCylH - minCylH);
                // Rod diameter (d): 10 ~ 140 mm -> proportional to bore height
                const rodH = Math.max(8, cylH * (state.rod / state.d) * 0.8);
                // Cylinder length: dynamically scales with stroke length (state.stroke: 50~1000)
                const cylL = 140 + (state.stroke / 1000) * 260;
                const cylLeft = Math.max(60, width * 0.08);
                const cy = height / 2;
                const cylTop = cy - cylH / 2;
                const cylBottom = cy + cylH / 2;
                // Piston stroke coordinate
                // Max stroke travel inside cylinder is (cylL - piston thickness 22px)
                const pistonThick = 22;
                const maxTravel = cylL - pistonThick - 6;
                const pistonLeft = cylLeft + 3 + state.strokePct * maxTravel;
                const rodLength = maxTravel + 60;
                // Calculate max extended span for auto-zoom scaling
                const rodRight_max = (cylLeft + 3 + 0.95 * maxTravel) + pistonThick + rodLength;
                const xMin = cylLeft - 40; // Allow space for D dimension label
                const xMax = rodRight_max + 75; // Allow space for d dimension label
                const yMin = cylTop - 35; // Allow space for S dimension label
                const yMax = cylBottom + 35; // Allow space for ports/arrows
                const W_draw = xMax - xMin;
                const H_draw = yMax - yMin;
                const padding = 20;
                const scaleX = (width - padding * 2) / W_draw;
                const scaleY = (height - padding * 2) / H_draw;
                const zoom = Math.min(scaleX, scaleY);
                const cx_draw = (xMin + xMax) / 2;
                const cy_draw = (yMin + yMax) / 2;
                const dx = width / 2 - cx_draw * zoom;
                const dy = height / 2 - cy_draw * zoom;
                ctx.save();
                ctx.translate(dx, dy);
                ctx.scale(zoom, zoom);
                // Active chamber lighting colors (yellow-orange hydraulic oil tint)
                const activeColor = 'rgba(245, 158, 11, 0.4)';
                const neutralColor = 'rgba(241, 245, 249, 0.2)';
                let leftChamberColor = neutralColor;
                let rightChamberColor = neutralColor;
                if (state.direction === 1) {
                    leftChamberColor = activeColor;
                } else {
                    rightChamberColor = activeColor;
                }
                // 1. Draw left active chamber fill
                ctx.save();
                ctx.fillStyle = leftChamberColor;
                ctx.fillRect(cylLeft + 3, cylTop + 3, pistonLeft - cylLeft - 3, cylH - 6);
                // 2. Draw right active chamber fill
                ctx.fillStyle = rightChamberColor;
                ctx.fillRect(pistonLeft + pistonThick, cylTop + 3, cylLeft + cylL - pistonLeft - pistonThick - 3, cylH - 6);
                ctx.restore();
                // 3. Draw cylinder rod (Steel shaft) extending out
                ctx.save();
                ctx.fillStyle = 'linear-gradient(180deg, #e2e8f0 0%, #94a3b8 100%)';
                // Gradients for rod look
                const rodGrad = ctx.createLinearGradient(pistonLeft, cy - rodH/2, pistonLeft, cy + rodH/2);
                rodGrad.addColorStop(0, '#f1f5f9');
                rodGrad.addColorStop(0.3, '#cbd5e1');
                rodGrad.addColorStop(0.5, '#94a3b8');
                rodGrad.addColorStop(1, '#475569');
                ctx.fillStyle = rodGrad;
                ctx.fillRect(pistonLeft + pistonThick, cy - rodH / 2, rodLength, rodH);
                // Rounded steel rod cap
                ctx.strokeStyle = '#334155';
                ctx.lineWidth = 1.5;
                ctx.strokeRect(pistonLeft + pistonThick, cy - rodH / 2, rodLength, rodH);
                ctx.restore();
                // 4. Draw piston block inside
                ctx.save();
                const pistonGrad = ctx.createLinearGradient(pistonLeft, cylTop, pistonLeft + pistonThick, cylTop);
                pistonGrad.addColorStop(0, '#64748b');
                pistonGrad.addColorStop(0.5, '#cbd5e1');
                pistonGrad.addColorStop(1, '#334155');
                ctx.fillStyle = pistonGrad;
                ctx.fillRect(pistonLeft, cylTop + 2, pistonThick, cylH - 4);
                ctx.strokeStyle = '#1e293b';
                ctx.lineWidth = 2;
                ctx.strokeRect(pistonLeft, cylTop + 2, pistonThick, cylH - 4);
                // Seal rings on piston
                ctx.fillStyle = '#ff007f';
                ctx.fillRect(pistonLeft + 4, cylTop + 2, 4, 3);
                ctx.fillRect(pistonLeft + 4, cylBottom - 5, 4, 3);
                ctx.fillRect(pistonLeft + 14, cylTop + 2, 4, 3);
                ctx.fillRect(pistonLeft + 14, cylBottom - 5, 4, 3);
                ctx.restore();
                // 5. Draw cylinder sleeve (Tube casing)
                ctx.save();
                ctx.strokeStyle = '#475569';
                ctx.lineWidth = 5;
                // Main boundaries
                ctx.beginPath();
                ctx.moveTo(cylLeft + cylL, cylTop);
                ctx.lineTo(cylLeft, cylTop);
                ctx.lineTo(cylLeft, cylBottom);
                ctx.lineTo(cylLeft + cylL, cylBottom);
                ctx.stroke();
                // Draw front nose cover (Right boundary with rod gap)
                ctx.beginPath();
                ctx.moveTo(cylLeft + cylL, cylTop);
                ctx.lineTo(cylLeft + cylL, cy - rodH / 2 - 3);
                ctx.moveTo(cylLeft + cylL, cy + rodH / 2 + 3);
                ctx.lineTo(cylLeft + cylL, cylBottom);
                ctx.stroke();
                // Draw oil inlet ports
                ctx.fillStyle = '#475569';
                // Left port
                ctx.fillRect(cylLeft + 20, cylBottom, 14, 8);
                // Right port
                ctx.fillRect(cylLeft + cylL - 34, cylBottom, 14, 8);
                ctx.restore();
                // 6. Draw flow arrow signals at ports
                ctx.save();
                ctx.fillStyle = '#f59e0b';
                if (state.direction === 1) {
                    // Left port input arrow
                    ctx.beginPath();
                    ctx.moveTo(cylLeft + 27, cylBottom + 20);
                    ctx.lineTo(cylLeft + 27, cylBottom + 3);
                    ctx.lineTo(cylLeft + 23, cylBottom + 9);
                    ctx.moveTo(cylLeft + 27, cylBottom + 3);
                    ctx.lineTo(cylLeft + 31, cylBottom + 9);
                    ctx.strokeStyle = '#f59e0b';
                    ctx.lineWidth = 3;
                    ctx.stroke();
                } else {
                    // Right port input arrow
                    ctx.beginPath();
                    ctx.moveTo(cylLeft + cylL - 27, cylBottom + 20);
                    ctx.lineTo(cylLeft + cylL - 27, cylBottom + 3);
                    ctx.lineTo(cylLeft + cylL - 31, cylBottom + 9);
                    ctx.moveTo(cylLeft + cylL - 27, cylBottom + 3);
                    ctx.lineTo(cylLeft + cylL - 23, cylBottom + 9);
                    ctx.strokeStyle = '#f59e0b';
                    ctx.lineWidth = 3;
                    ctx.stroke();
                }
                ctx.restore();
                // 7. Draw dimension annotations (D, d, S)
                ctx.save();
                ctx.strokeStyle = 'rgba(100, 116, 139, 0.4)';
                ctx.fillStyle = 'rgba(100, 116, 139, 0.6)';
                ctx.lineWidth = 1;
                function drawArrowhead(ctx, x, y, angle, size = 5) {
                    ctx.save();
                    ctx.translate(x, y);
                    ctx.rotate(angle);
                    ctx.beginPath();
                    ctx.moveTo(0, 0);
                    ctx.lineTo(-size, -size * 0.4);
                    ctx.lineTo(-size * 0.8, 0);
                    ctx.lineTo(-size, size * 0.4);
                    ctx.closePath();
                    ctx.fill();
                    ctx.restore();
                }
                // 1. Bore Diameter D (Vertical line on the left)
                const dLineX = cylLeft - 22;
                ctx.beginPath();
                ctx.moveTo(cylLeft, cylTop);
                ctx.lineTo(dLineX - 4, cylTop);
                ctx.moveTo(cylLeft, cylBottom);
                ctx.lineTo(dLineX - 4, cylBottom);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(dLineX, cylTop);
                ctx.lineTo(dLineX, cylBottom);
                ctx.stroke();
                drawArrowhead(ctx, dLineX, cylTop, -Math.PI / 2, 5);
                drawArrowhead(ctx, dLineX, cylBottom, Math.PI / 2, 5);
                ctx.save();
                ctx.translate(dLineX - 6, cy);
                ctx.rotate(-Math.PI / 2);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';
                ctx.fillStyle = '#475569';
                ctx.font = '500 11px Inter, sans-serif';
                ctx.fillText(`D = ${state.d} mm`, 0, 0);
                ctx.restore();
                // 2. Rod Diameter d (Vertical line on the right)
                const rodRight = pistonLeft + pistonThick + rodLength;
                const dRodLineX = rodRight + 12;
                const rodTop = cy - rodH / 2;
                const rodBottom = cy + rodH / 2;
                ctx.beginPath();
                ctx.moveTo(rodRight, rodTop);
                ctx.lineTo(dRodLineX + 4, rodTop);
                ctx.moveTo(rodRight, rodBottom);
                ctx.lineTo(dRodLineX + 4, rodBottom);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(dRodLineX, rodTop);
                ctx.lineTo(dRodLineX, rodBottom);
                ctx.stroke();
                if (rodH >= 12) {
                    drawArrowhead(ctx, dRodLineX, rodTop, -Math.PI / 2, 4);
                    drawArrowhead(ctx, dRodLineX, rodBottom, Math.PI / 2, 4);
                }
                ctx.save();
                ctx.translate(dRodLineX + 6, cy);
                ctx.textAlign = 'left';
                ctx.textBaseline = 'middle';
                ctx.fillStyle = '#475569';
                ctx.font = '500 11px Inter, sans-serif';
                ctx.fillText(`d = ${state.rod} mm`, 0, 0);
                ctx.restore();
                // 3. Stroke S (Horizontal line on top)
                const sLineY = cylTop - 18;
                const sStart = cylLeft + 3;
                const sEnd = cylLeft + 3 + maxTravel;
                ctx.beginPath();
                ctx.moveTo(sStart, cylTop);
                ctx.lineTo(sStart, sLineY - 4);
                ctx.moveTo(sEnd, cylTop);
                ctx.lineTo(sEnd, sLineY - 4);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(sStart, sLineY);
                ctx.lineTo(sEnd, sLineY);
                ctx.stroke();
                drawArrowhead(ctx, sStart, sLineY, Math.PI, 5);
                drawArrowhead(ctx, sEnd, sLineY, 0, 5);
                ctx.save();
                ctx.translate((sStart + sEnd) / 2, sLineY - 6);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';
                ctx.fillStyle = '#475569';
                ctx.font = '500 11px Inter, sans-serif';
                ctx.fillText(`S = ${state.stroke} mm`, 0, 0);
                ctx.restore();
                ctx.restore();
                // Restore outer auto-zoom scale state
                ctx.restore();
            }
            // Copy & 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('standard');
            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>실린더 보어(D) 및 로드 지름(d) 설정: 슬라이더를 통해 피스톤의 외부 내경(Bore)과 샤프트의 직경(Rod)을 입력합니다. (로드 직경은 항상 보어 직경보다 작아야 합니다.)</strong></li>
<li style="margin-bottom: 6px;">유압 시스템 공급 변수 입력: 펌프가 생성하는 정격 유압 압력(bar)과 시스템 분당 토출 유량(LPM)을 설정합니다.</li>
<li style="margin-bottom: 6px;">실시간 사이클 구동 및 절환 관찰: 피스톤이 전진할 때의 느리고 강력한 추력과, 로드 단면적만큼 기름이 적게 들어가 빠르지만 약한 후진 동작을 물리 엔진 애니메이션으로 관찰합니다.</li>
<li style="margin-bottom: 6px;">추력 및 속도 데이터 분석: 계측판에 정리된 전·후진 작동 압축력(kN, Ton) 및 도달 속도(mm/s) 결과를 바탕으로 최적의 유압 액추에이터 사양을 결정합니다.</li>
    </ol>
</div>


<details class="premium-seo-accordion" style="border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; background: #fbfbfc; padding: 0; margin: 30px auto; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.01); font-family: sans-serif;">
    <summary style="display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; font-size: 1.1em; font-weight: 700; color: #1f2937; cursor: pointer; user-select: none; outline: none; list-style: none;">
        <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4da.png" alt="📚" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 유압 실린더 수하물 추력 및 전/후진 차동 유동 속도 이론 공식</span>
        <span class="accordion-arrow" style="font-size: 0.9em; color: #9ca3af; transition: transform 0.2s ease;">▼</span>
    </summary>
    <div style="padding: 0 24px 24px 24px; border-top: 1px solid rgba(0,0,0,0.04); background: #ffffff; border-radius: 0 0 12px 12px; font-size: 0.98em; color: #374151; line-height: 1.8;">
        <div style="margin-top: 20px;">
            <h3>1. 실린더 피스톤 작용 면적과 전진/후진 기하학적 형상 공식</h3>
<p>복동형(Double Acting) 유압 실린더는 피스톤의 전진 시 압유를 가하는 **헤드 측(Cap End / Head End)**과 후진 시 압유를 가하는 **로드 측(Rod End / Annulus End)**의 유체 접촉 작용 단면적이 상이합니다. 이 면적의 기하학적 불균형으로 인해 동일 압력과 유량에서도 전진과 후진 시의 힘과 속도가 다르게 발생하는 **차동 현상**이 일어납니다.</p><p><strong>① 전진 시 가압 단면적 (Cap End Area, A_push):</strong> 보어 내경 전체에 압력이 작용합니다.</p><p style="text-align: center; font-weight: bold; background: #f3f4f6; padding: 12px; border-radius: 8px;">A_push = &pi; &times; D&sup2; / 4 &nbsp;[mm&sup2;]</p><p><strong>② 후진 시 가압 단면적 (Annulus / Rod End Area, A_pull):</strong> 피스톤 면적에서 로드가 차지하는 면적만큼이 유압 작용에서 소거됩니다.</p><p style="text-align: center; font-weight: bold; background: #f3f4f6; padding: 12px; border-radius: 8px;">A_pull = &pi; &times; (D&sup2; &#8211; d&sup2;) / 4 &nbsp;[mm&sup2;]</p>
<h3>2. 작동 압력에 따른 전진/후진 이론 추력(Thrust Force) 산출 공식</h3>
<p>실린더의 밀고 당기는 힘은 가압 작용 단면적에 작동 유압 압력(<code>P</code>)을 곱하여 도출됩니다. 공학 설계 현장에서는 주로 bar 단위와 mm 단위를 쓰므로 다음과 같은 단위 조율 공식을 사용하여 <code>kN</code> 및 공학단위인 <code>tonf(톤)</code>을 계산합니다.</p><p style="text-align: center; font-weight: bold; background: #e0f2fe; padding: 16px; border-radius: 8px; font-size: 1.05em; color: #0369a1;">F_extend = (P_bar &times; 10&#038;sup5; &times; A_push_m&sup2;) / 1,000 &nbsp;[kN]</p><p style="text-align: center; font-weight: bold; background: #f3f4f6; padding: 12px; border-radius: 8px;">F_extend [tonf] &approx; F_extend [kN] / 9.80665</p><p style="text-align: center; font-weight: bold; background: #e0f2fe; padding: 16px; border-radius: 8px; font-size: 1.05em; color: #0369a1;">F_retract = (P_bar &times; 10&#038;sup5; &times; A_pull_m&sup2;) / 1,000 &nbsp;[kN]</p>
<h3>3. 유량 유입에 의한 작동 유동 속도(Velocity) 및 이동 시간 산출</h3>
<p>공급 유량(<code>Q_LPM</code>)에 의한 피스톤의 이동 유속은 유입 유량을 실린더 작동 단면적으로 나눈 몫으로 정의됩니다.</p><p style="text-align: center; font-weight: bold; background: #f3f4f6; padding: 12px; border-radius: 8px;">v_extend = Q / A_push &nbsp;, &nbsp; v_retract = Q / A_pull</p><p>단위계 환산을 포함한 실제 유동 속도(mm/s) 도출 공식은 다음과 같습니다:</p><p style="text-align: center; font-weight: bold; background: #f3f4f6; padding: 12px; border-radius: 8px;">v_extend [mm/s] = (Q_LPM &times; 10&#038;sup6;) / (60 &times; A_push_mm&sup2;) = (16,666.7 &times; Q_LPM) / A_push_mm&sup2;</p><p>수축 가압 면적인 <code>A_pull</code>이 <code>A_push</code>보다 항상 작으므로, 후진 시의 유속(<code>v_retract</code>)이 전진 시의 유속(<code>v_extend</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/hydraulic-cylinder-force-velocity-calculator-simulator/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>로드 씰 완벽 밀봉 설계 지침 (Guidelines for Perfect Rod Seal Sealing Design)</title>
		<link>https://myengnote.com/hydraulic-cylinder-rod-seal-groove-design-material-selection/</link>
					<comments>https://myengnote.com/hydraulic-cylinder-rod-seal-groove-design-material-selection/#respond</comments>
		
		<dc:creator><![CDATA[동동]]></dc:creator>
		<pubDate>Mon, 05 Jan 2026 04:43:04 +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/hydraulic-cylinder-rod-seal-groove-design-material-selection/</guid>

					<description><![CDATA[유압 실린더 누설, 설계 실수 한 번에 돈 먹는 하마가 됩니다. 로드 씰 홈 설계 및 재질 선정의 치명적인 실수를 방지하는 엔지니어링 지침을 공개합니다.... <a href="https://myengnote.com/hydraulic-cylinder-rod-seal-groove-design-material-selection/" style="text-decoration:none; color:#0073aa; font-weight:bold;">[본문 전체보기 >]</a>]]></description>
										<content:encoded><![CDATA[<p>최근 고압 유압 프레스의 로드 씰 교체 작업을 진행했습니다. 불과 3개월 만에 실린더 로드(피스톤 막대)에서 오일이 새는 심각한 누유 문제가 발생했는데, 제가 현장에서 진단한 결과 씰 부품 자체가 아닌 로드의 표면 조도가 핵심 원인이었습니다. 완벽한 밀봉 설계는 단순히 고품질의 씰을 선택하는 것을 넘어, 씰이 접촉하는 상대 운동면의 가공 상태와 정밀도에 90% 이상 의존합니다. 오늘은 경험이 부족한 설계자들이 흔히 놓치기 쉬운, 로드 씰의 수명과 직결되는 샤프트 표면 처리 및 공차 기준 지침을 안내해 드리겠습니다. </p>
<h2>로드 씰 완벽 밀봉의 3가지 핵심 요소 비교</h2>
<p> 로드 씰링 시스템이 제 기능을 하려면, 씰 재질, 작동 유체의 온도와 압력, 그리고 상대 운동면의 정밀도라는 세 가지 요소가 완벽하게 조화를 이루어야 합니다. 특히 로드 샤프트의 표면 상태가 씰 마모를 직접적으로 결정합니다. </p>
<h3>표면 조도와 공차: 이상적인 기준 vs. 일반적인 오류</h3>
<p> 저는 신입 시절, 씰이 마모되면 무조건 씰 재질 문제라고 생각했습니다. 하지만 실제로는 샤프트의 표면이 너무 거칠거나, 반대로 너무 매끄러워서 윤활막이 형성되지 않아 발생하는 경우가 대부분이었습니다. </p>
<div style="overflow-x: auto; white-space: nowrap;">
<table style="width: 100%; border-collapse: collapse;">
<caption style="font-weight: bold; margin-bottom: 10px;">로드 샤프트 표면 조건 비교 (ISO/KS 기반)</caption>
<thead>
<tr style="background-color: #f2f2f2;">
<th style="border: 1px solid #ddd; padding: 10px; text-align: center;">구분</th>
<th style="border: 1px solid #ddd; padding: 10px; text-align: center;">완벽 밀봉을 위한 권장 기준</th>
<th style="border: 1px solid #ddd; padding: 10px; text-align: center;">누유 발생 가능성이 높은 기준</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #ddd; padding: 10px; font-weight: bold;">표면 조도</td>
<td style="border: 1px solid #ddd; padding: 10px;"><strong>Ra 0.1 ~ 0.4 μm</strong> (슈퍼 피니싱/래핑 권장)</td>
<td style="border: 1px solid #ddd; padding: 10px;">Ra 0.8 μm 이상 또는 Ra 0.05 μm 미만 (두 경우 모두 문제 유발)</td>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 10px; font-weight: bold;">가공 방향</td>
<td style="border: 1px solid #ddd; padding: 10px;">크로스 해칭 구조 (윤활유 포집 용이)</td>
<td style="border: 1px solid #ddd; padding: 10px;">축 방향 스크래치 또는 헬릭스(나선) 마크</td>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 10px; font-weight: bold;">지름 공차 (로드)</td>
<td style="border: 1px solid #ddd; padding: 10px;"><strong>h8 ~ h9</strong> (정밀 유압 실린더는 h8 적용)</td>
<td style="border: 1px solid #ddd; padding: 10px;">h11 이상 (간극 커짐)</td>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 10px; font-weight: bold;">경도 (표면)</td>
<td style="border: 1px solid #ddd; padding: 10px;">HV 600 이상 (경질 크롬 도금 또는 세라믹 코팅)</td>
<td style="border: 1px solid #ddd; padding: 10px;">HV 400 미만 (빠른 마모 유발)</td>
</tr>
</tbody>
</table>
</div>
<div style="border-left: 5px solid #3b82f6; background-color: #eff6ff; padding: 20px; margin: 20px 0; border-radius: 5px;">
<div style="display: flex; align-items: center; margin-bottom: 10px;"><span style="font-size: 30px; margin-right: 15px;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4d8.png" alt="📘" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span><span style="font-weight: bold; color: #1e40af; font-size: 1.1em;">Core Concept</span></div>
<div style="color: #555; line-height: 1.6;">로드 씰링에서 가장 중요한 것은 <strong>‘완벽한 윤활막 형성’</strong>입니다. 표면 조도가 Ra 0.8 μm 이상이면 씰에 칼날처럼 작용하여 씰을 빠르게 마모시키고, 반대로 Ra 0.05 μm 이하로 너무 매끄러우면 오일을 잡아둘 미세한 홈이 없어(크로스 해칭 부재) 유막이 파괴되어 건식 마찰이 발생하게 됩니다. KS B ISO 5597(유압 실린더 보어 치수 규격)에서도 실린더 내부 구성 요소의 정밀도를 강조합니다.</div>
</p>
</div>
<h3>가이드 밴드 설계와 측면 하중 관리</h3>
<p> 로드 씰이 밀봉 기능을 제대로 수행하려면, 피스톤 막대가 하우징 중앙에 정확하게 위치해야 합니다. 외부에서 발생하는 측면 하중은 씰의 한쪽 면에 과도한 압력을 가해 조기 파손 및 누유를 유발합니다. </p>
<h4>측면 하중 완화를 위한 가이드 밴드의 역할</h4>
<p> 로드에 작용하는 측면 하중을 씰이 아닌 <strong>가이드 밴드(Guide Band, Wear Ring)</strong>가 지지하도록 설계해야 합니다. 가이드 밴드의 재질은 주로 PTFE 또는 POM 계열의 내마모성 재료를 사용하며, 로드와 보어 사이의 금속 간 접촉을 방지합니다. * <strong>설계 지침:</strong> 로드와 가이드 밴드 사이의 간극은 작동 유압과 온도 변화를 고려하여 최소화해야 합니다. 또한, 씰과 가이드 밴드의 간격이 너무 멀어지면 로드의 휨 현상으로 인해 씰의 수명이 단축될 수 있으므로, 두 요소를 최대한 가깝게 배치하는 것이 좋습니다. </p>
<div style="border-left: 5px solid #f59e0b; background-color: #fffbeb; padding: 20px; margin: 20px 0; border-radius: 5px;">
<div style="display: flex; align-items: center; margin-bottom: 10px;"><span style="font-size: 30px; margin-right: 15px;"><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><span style="font-weight: bold; color: #92400e; font-size: 1.1em;">Field Tip</span></div>
<div style="color: #555; line-height: 1.6;">로드 샤프트를 정기적으로 육안 검사할 때, 씰이 로드 전체를 고르게 마모시키지 않고 특정 부위에만 집중적으로 마모 흔적이 보인다면, 이는 실린더 축과 로드 축의 평행도가 맞지 않거나(GD&#038;T 기준 오류), 또는 과도한 측면 하중이 가해지고 있다는 명확한 신호입니다. 이때는 반드시 <strong>가이드 밴드의 마모 상태</strong>를 함께 점검해야 합니다.</div>
</p>
</div>
<h3>씰 재질 선정: NBR과 FKM의 온도/화학적 비교</h3>
<p> 씰 재질 선정은 작동 유체(오일)의 종류와 작동 온도에 따라 결정됩니다. 잘못된 재질을 사용하면 씰이 부풀거나(팽창), 딱딱하게 굳어져(경화) 밀봉 기능이 완전히 상실됩니다. </p>
<div style="overflow-x: auto; white-space: nowrap;">
<table border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="padding: 8px; background-color: #f2f2f2; border: 1px solid #ddd;">재질</th>
<th style="padding: 8px; background-color: #f2f2f2; border: 1px solid #ddd;">온도 범위 (약)</th>
<th style="padding: 8px; background-color: #f2f2f2; border: 1px solid #ddd;">화학적 내성</th>
<th style="padding: 8px; background-color: #f2f2f2; border: 1px solid #ddd;">용도 및 특징</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>NBR (니트릴 고무)</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">-30°C ~ 100°C</td>
<td style="padding: 8px; border: 1px solid #ddd;">광물성 유압유에 적합</td>
<td style="padding: 8px; border: 1px solid #ddd;">가장 일반적이고 저렴하며 내마모성 우수</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>FKM (불소 고무)</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">-20°C ~ 200°C</td>
<td style="padding: 8px; border: 1px solid #ddd;">인산 에스테르계, 합성 오일에 우수</td>
<td style="padding: 8px; border: 1px solid #ddd;">고온 및 특수 유체에 필수 (고가)</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>PTFE (테프론)</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">-50°C ~ 250°C</td>
<td style="padding: 8px; border: 1px solid #ddd;">거의 모든 화학 물질에 내성</td>
<td style="padding: 8px; border: 1px solid #ddd;">낮은 마찰, 고속 왕복 운동에 유리 (단독 씰링보다 백업 링으로 사용)</td>
</tr>
</tbody>
</table>
</div>
<p>대부분의 산업용 유압 시스템(일반 광유 사용, 80°C 이하)에서는 <strong>NBR</strong>을 사용하지만, 사출 성형기처럼 높은 열이 발생하는 환경에서는 <strong>FKM</strong>이 필수입니다. 재질을 선택하기 전에 반드시 작동 유체의 <strong>인화점</strong>과 <strong>최고 작동 온도</strong>를 확인해야 합니다. </p>
<div style="border-left: 5px solid #f59e0b; background-color: #fffbeb; padding: 20px; margin: 20px 0; border-radius: 5px;">
<div style="display: flex; align-items: center; margin-bottom: 10px;"><span style="font-size: 30px; margin-right: 15px;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26a0.png" alt="⚠" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span><span style="font-weight: bold; color: #92400e; font-size: 1.1em;">Caution</span></div>
<div style="color: #555; line-height: 1.6;">로드 씰 교체 시 O-링과 V-패킹처럼 단순한 씰 외에도 <strong>백업 링</strong>의 마모 여부를 반드시 확인해야 합니다. 고압 환경에서 백업 링이 없거나 손상되면 씰이 압출 간극으로 밀려들어가 파손되는 현상(압출 파손)이 발생합니다. 이는 압력 70 MPa 이상의 시스템에서 흔히 발생하는 문제입니다.</div>
</p>
</div>
<p> <a href="https://myengnote.com/linear-seal-selection-design-mechanical-engineering/" style="text-decoration: none; background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 6px rgba:0, 0, 0, 0.1; padding: 15px; margin: 10px 0; transition: box-shadow 0.2s; display: table; width: 100%; box-sizing: border-box;"><span style="display: table-cell; vertical-align: middle;"><span style="font-size: 30px; margin-right: 15px; float: left;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f517.png" alt="🔗" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span><span style="display: block; overflow: hidden;"><span style="display: block; font-size: 0.9em; color: #6b7280; margin-bottom: 4px;">함께 보면 좋은 글</span><span style="display: block; font-size: 1.1em; font-weight: bold; color: #111827;">리니어 씰 종류와 설계 적용 실무</span></span></span><span style="display: table-cell; vertical-align: middle; width: 40px; text-align: right; color: #3b82f6; font-size: 24px; font-weight: bold;">→</span></a><a href="https://myengnote.com/drawing-gdt-parallelism-perpendicularity-application-guide/" style="text-decoration: none; background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 6px rgba:0, 0, 0, 0.1; padding: 15px; margin: 10px 0; transition: box-shadow 0.2s; display: table; width: 100%; box-sizing: border-box;"><span style="display: table-cell; vertical-align: middle;"><span style="font-size: 30px; margin-right: 15px; float: left;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f517.png" alt="🔗" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span><span style="display: block; overflow: hidden;"><span style="display: block; font-size: 0.9em; color: #6b7280; margin-bottom: 4px;">함께 보면 좋은 글</span><span style="display: block; font-size: 1.1em; font-weight: bold; color: #111827;">도면 GD&#038;T 평행도, 직각도 실무 (Drawing GD&#038;T Parallelism, Perpendicularity Practice)</span></span></span><span style="display: table-cell; vertical-align: middle; width: 40px; text-align: right; color: #3b82f6; font-size: 24px; font-weight: bold;">→</span></a> </p>
<h3><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4dd.png" alt="📝" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 마치며</h3>
<p> 로드 씰의 완벽한 밀봉은 씰 부품 자체의 성능을 100% 발휘할 수 있는 환경을 조성하는 데 있습니다. 신뢰성 높은 유압 시스템을 설계하려면, 씰 하우징의 정밀한 공차 관리(특히 <strong>GD&#038;T</strong> 기준의 평행도와 동심도), 로드 샤프트의 이상적인 <strong>Ra 0.1~0.4 μm</strong> 표면 조도 유지, 그리고 적절한 가이드 밴드 배치를 통해 측면 하중을 제어하는 세 가지 원칙을 반드시 준수해야 합니다. 씰링 문제는 부품 문제가 아니라 시스템 문제입니다.</p>
<hr style="border: 0; border-top: 1px solid #eee; margin: 40px 0 20px 0;">
<p style="text-align: center; font-size: 0.85em; color: #888; margin-bottom: 20px;">
    본 콘텐츠는 저작권법의 보호를 받으며, 무단 전재 및 재배포를 금지합니다.<br />
    Copyright 2026. 동동 All rights reserved.
</p>
<p><!-- Protection Scripts --></p>
<div id="protection-script" style="display:none;">
<script>
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    alert('이 콘텐츠는 저작권법의 보호를 받습니다. 무단 복제 및 우클릭을 금지합니다.');
});
document.addEventListener('keydown', function(e) {
    if (e.ctrlKey && (e.key === 'c' || e.key === 'u' || e.key === 'a')) {
        e.preventDefault();
        alert('무단 복제를 금지합니다.');
    }
});
</script></p>
<style>
.entry-content {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>
</div>
<div class="preserved-image" style="margin: 20px 0; text-align: center;"><img loading="lazy" decoding="async" width="1024" height="623" src="https://myengnote.com/wp-content/uploads/2026/01/Gemini_Generated_Image_5y7yng5y7yng5y7y-1024x623.jpg" alt="고성능 유압 로드 씰 재질 근접 이미지" class="wp-image-1013" srcset="https://myengnote.com/wp-content/uploads/2026/01/Gemini_Generated_Image_5y7yng5y7yng5y7y-1024x623.jpg 1024w, https://myengnote.com/wp-content/uploads/2026/01/Gemini_Generated_Image_5y7yng5y7yng5y7y-300x183.jpg 300w, https://myengnote.com/wp-content/uploads/2026/01/Gemini_Generated_Image_5y7yng5y7yng5y7y-768x467.jpg 768w, https://myengnote.com/wp-content/uploads/2026/01/Gemini_Generated_Image_5y7yng5y7yng5y7y.jpg 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></div>
<p><!-- START_SIMULATOR_LINK_CARD_hydraulic_cylinder --><a href="https://myengnote.com/hydraulic-cylinder-force-velocity-calculator-simulator/" target="_blank" rel="noopener noreferrer" class="eng-simulator-card" style="text-decoration: none; background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 15px; margin: 10px 0; transition: box-shadow 0.2s; display: table; width: 100%; box-sizing: border-box;"><span style="display: table-cell; vertical-align: middle;"><span style="font-size: 30px; margin-right: 15px; float: left;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f9ee.png" alt="🧮" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span><span style="display: block; overflow: hidden;"><span style="display: block; font-size: 0.9em; color: #10b981; font-weight: bold; margin-bottom: 4px;">실시간 공학 시뮬레이터 추천</span><span style="display: block; font-size: 1.1em; font-weight: bold; color: #111827;">유압 실린더 요구 추력-속도 계산기 &#038; 실시간 2D 물리 시뮬레이터</span></span></span><span style="display: table-cell; vertical-align: middle; width: 40px; text-align: right; color: #10b981; font-size: 24px; font-weight: bold;">→</span></a><!-- END_SIMULATOR_LINK_CARD_hydraulic_cylinder --></p>
]]></content:encoded>
					
					<wfw:commentRss>https://myengnote.com/hydraulic-cylinder-rod-seal-groove-design-material-selection/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
