<!DOCTYPE html>

<head>

<title>화원 | Hwawon Associates</title>

<!--

Chosen Palette: Hwawon Peacock Green Palette (Peacock Green, Ink Black, Stone Gray, Parchment White)

Application Structure Plan: The final portfolio SPA for '화원'. The structure is revised to feature the 'Trinity System' philosophy as a central narrative element. The flow is: Hero -> About -> Mission -> Philosophy (Trinity System) -> Services -> Works -> Q&A. This narrative places the core brand philosophy at the heart of the user journey.

Visualization & Content Choices:

- Trinity System (New Core Section) -> A multi-part visualization. It first shows two separate triangle diagrams, then a connecting symbol, and finally a combined six-pointed star diagram, all built with HTML/CSS. This sequence tells the story of the philosophy's synthesis.

- Gemini API Q&A -> The AI persona's prompt is deeply updated to reason based on the full 'Trinity System' concept, explaining how the two triangles merge to achieve 'a robust elegance'.

- Services -> Section title and content updated as per user request.

CONFIRMATION: NO SVG graphics used. NO Mermaid JS used.

-->

<style>

:root {

--peacock-green: #0A4F44;

--ink-black: #2C2C2C;

--stone-gray: #555555;

--parchment-white: #FBFBF6;

--dark-gray: #555555;

}

body {

font-family: 'Noto Sans KR', sans-serif;

background-color: var(--parchment-white);

color: var(--dark-gray);

}

.font-serif { font-family: 'Nanum Myeongjo', serif; }

.font-eng { font-family: 'Plus Jakarta Sans', sans-serif; }

.nav-link {

transition: color 0.3s ease;

}

.nav-link:hover {

color: var(--peacock-green);

}

.active-nav {

color: var(--peacock-green);

font-weight: 700;

}

@keyframes spin {

to { transform: rotate(360deg); }

}

.spinner {

display: inline-block;

width: 20px;

height: 20px;

border: 3px solid rgba(0,0,0,.1);

border-radius: 50%;

border-top-color: var(--peacock-green);

animation: spin 1s ease-in-out infinite;

}

.header-blur {

-webkit-backdrop-filter: blur(4px);

backdrop-filter: blur(4px);

}

.diagram-container {

position: relative;

width: 300px;

height: 280px;

}

.triangle {

position: absolute;

left: 50%;

width: 250px;

height: 217px; /* width * sqrt(3)/2 */

background-color: transparent;

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

}

.triangle-up {

top: 0;

transform: translateX(-50%);

border: 2px solid var(--stone-gray);

}

.triangle-down {

top: 0;

transform: translateX(-50%) rotate(180deg);

border: 2px solid var(--peacock-green);

}

.value-node {

position: absolute;

font-size: 1.125rem;

font-weight: 700;

padding: 6px 14px;

background-color: var(--parchment-white);

white-space: nowrap;

}

.up-top { top: -25px; left: 50%; transform: translateX(-50%); color: var(--stone-gray); }

.up-left { bottom: -20px; left: -20px; color: var(--stone-gray); }

.up-right { bottom: -20px; right: -40px; color: var(--stone-gray); }

.down-bottom { bottom: -25px; left: 50%; transform: translateX(-50%) rotate(180deg); color: var(--peacock-green); }

.down-left { top: -20px; left: -60px; transform: rotate(180deg); color: var(--peacock-green); }

.down-right { top: -20px; right: -60px; transform: rotate(180deg); color: var(--peacock-green); }

.star-diagram-container {

width: 100%;

max-width: 500px;

aspect-ratio: 1 / 1;

position: relative;

display: flex;

justify-content: center;

align-items: center;

}

.star-wrapper {

position: relative;

width: 300px;

height: 346px; /* height = width * sqrt(3) */

}

.star-triangle {

position: absolute;

left: 50%;

width: 300px;

height: 260px; /* width * sqrt(3)/2 */

background-color: transparent;

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

}

.star-triangle-up {

top: 0;

transform: translateX(-50%);

border: 2px solid var(--stone-gray);

}

.star-triangle-down {

bottom: 0;

transform: translateX(-50%) rotate(180deg);

border: 2px solid var(--peacock-green);

}

.card-img-container {

background-color: #EAEADE;

transition: transform 0.4s ease;

}

.card:hover .card-img-container {

transform: scale(1.05);

}

.card:hover .card-title {

color: var(--peacock-green);

}

</style>

</head>

</a>

<a href="#philosophy" class="nav-link font-medium" data-section="philosophy">Trinity System</a>

</nav>

</div>

</header>

화원

</h1>

<p class="mt-2 text-2xl md:text-3xl font-serif text-dark-gray">조경기술사사무소</p>

<p class="font-eng mt-4 text-xl md:text-2xl text-dark-gray tracking-tight">Hwawon Associates</p>

땅의 의지와 하늘의 본질이 만나는 곳,<br>완전한 조화의 풍경을 만듭니다.

</p>

</div>

</section>

<p class="font-eng text-peacock-green mt-2">Vision & Mind</p>

</div>

<p>

기후위기 시대를 살아가는 조경가로서 사회에 맡은 바 역할을 충실히 수행하는 신생 조경기술사사무소입니다.

창립자는 다년간의 국내 최고의 엔지니어링 회사와 설계사무소 근무 경력을 자랑하며, 다양한 프로젝트 경험으로 국내 최고의 조경 디자인 스튜디오를 지향합니다.

</p>

<p>

ESG 경영을 실천하여 미래지향형 가치를 추구합니다. 진정성 있는 접근으로 주어진 공간을 **조화, 행복, 이야기가 있는 장소**로 만들고자 프로젝트에 최선을 다 하고 있습니다.

</p>

</div>

</section>

</div>

<p class="text-dark-gray font-light">AI와 같은 첨단 기술을 활용하여 조경 설계 과정을 혁신하고, 개인화된 설계 솔루션을 제공합니다.</p>

</div>

<p class="text-dark-gray font-light">커뮤니티의 복지 향상, 심리적 안정감 제공, 사회적 소속감 증진을 목표로 합니다.</p>

</div>

</section>

<h2 class="font-serif text-4xl font-bold text-ink-black tracking-tight">화원의 Trinity System</h2>

<p class="mt-6 text-lg text-dark-gray">'화원'의 모든 설계는 두 개의 근본적인 원리가 조화를 이룰 때 완성됩니다. 땅에 뿌리내린 조경가의 관점과 시대를 초월하는 디자인의 가치가 만나, 비로소 공간은 완전한 장소가 됩니다.</p>

</div>

<div class="value-node up-right font-serif">Structure</div>

</div>

<p class="text-dark-gray font-light">위를 향한 삼각형은 땅에 뿌리내린 조경가의 굳건한 의지이자, 모든 창조의 근간이 되는 **구조적 원리**를 상징합니다. 이는 공간의 질서를 잡는 **선(Line)**, 의미를 부여하는 **점(Mark)**, 그리고 모든 것을 담아내는 견고한 **구조(Structure)**로 이루어진 '화원'만의 고유한 설계 언어입니다.</p>

</div>

<p class="text-dark-gray font-light">아래를 향한 삼각형은 하늘에서 내려오는 영감이자, 시대를 초월하는 **본질적 가치**를 상징합니다. 이는 사람과 자연을 잇는 **조화(Harmony)**, 오감을 만족시키는 **행복(Happiness)**, 그리고 시간을 초월하는 **유산(Heritage)**이라는 보편적인 아름다움의 원리입니다.</p>

</div>

<div class="value-node down-bottom font-eng">Harmony</div>

<div class="value-node down-left font-eng">Happiness</div>

<div class="value-node down-right font-eng">Heritage</div>

</div>

<p class="mt-6 text-lg text-dark-gray">두 삼각형이 만나 완성된 '화원의 별'은 고대부터 균형과 조화의 상징이었던 다윗의 별처럼, 땅의 의지와 하늘의 본질이 만나는 완벽한 합일을 의미합니다. 이 조화의 정점에서, '화원'이 추구하는 궁극의 디자인 미학인 **'견고한 우아함(A Robust Elegance)'**이 탄생합니다.</p>

</div>

</section>

<p class="text-lg text-dark-gray mb-10">화원에서는 개인의 정원에서부터 도시의 기반 시설에 이르기까지, 다양한 스케일과 유형의 프로젝트를 현상설계부터 실시설계, 특화 설계까지 단계별 체계적인 과정으로 수행하고 있습니다.</p>

<span class="bg-peacock-green/10 text-peacock-green font-medium px-4 py-2">Garden</span>

<span class="bg-peacock-green/10 text-peacock-green font-medium px-4 py-2">Urban Design</span>

<span class="bg-peacock-green/10 text-peacock-green font-medium px-4 py-2">Planning</span>

<span class="bg-peacock-green/10 text-peacock-green font-medium px-4 py-2">Infrastructure</span>

<span class="bg-peacock-green/10 text-peacock-green font-medium px-4 py-2">Leisure & Resort</span>

</div>

</section>

</div>

<div>

<h3 class="card-title font-serif font-bold text-xl transition-colors">금천구 백인백향기정원</h3>

</div>

</div>

<div>

</div>

</div>

<div>

</div>

</section>

조경에 대해 궁금한 점이 있으신가요? '화원의 별'을 바탕으로 AI가 당신의 질문에 답변해 드립니다.

</p>

</div>

✨ 질문하기

</button>

</div>

</div>

</div>

</section>

<p class="text-lg text-dark-gray mb-12">당신의 공간이 품은 이야기가 궁금합니다.</p>

</div>

<p><strong class="font-serif text-ink-black">Email:</strong> <a href="mailto:hello@hwawon.pro" class="text-peacock-green hover:underline font-eng">hello@hwawon.pro</a></p>

<p><strong class="font-serif text-ink-black">Website:</strong> <a href="https://www.hwawon-associates.com" target="_blank" rel="noopener noreferrer" class="text-peacock-green hover:underline font-eng">www.hwawon-associates.com</a></p>

<p><strong class="font-serif text-ink-black">Address:</strong> 서울 금천구 가산디지털2로 135, A동 333호 (우 08504)</p>

</div>

</section>

</main>

<p class="font-serif font-bold text-lg">화원 조경기술사사무소</p>

<p class="font-eng mt-2 text-sm text-gray-400">Hwawon Associates | HWA</p>

<p class="mt-4 text-xs text-gray-500">서울 금천구 가산디지털2로 135 어반워크1동A 333호 (08504)</p>

</div>

</footer>

document.addEventListener('DOMContentLoaded', function() {

const API_BASE_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=`;

const API_KEY = "";

async function callGemini(prompt) {

const url = `${API_BASE_URL}${API_KEY}`;

const payload = {

contents: [{ role: "user", parts: [{ text: prompt }] }]

};

try {

const response = await fetch(url, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify(payload)

});

if (!response.ok) {

throw new Error(`API Error: ${response.statusText}`);

}

const result = await response.json();

if (result.candidates && result.candidates[0].content && result.candidates[0].content.parts[0]) {

return result.candidates[0].content.parts[0].text;

} else {

throw new Error("Invalid API response structure.");

}

} catch (error) {

console.error("Gemini API call failed:", error);

return "죄송합니다. 답변을 생성하는 데 실패했습니다. 잠시 후 다시 시도해 주세요.";

}

const qnaBtn = document.getElementById('qna-generator-btn');

const qnaInput = document.getElementById('qna-input');

const qnaLoading = document.getElementById('qna-loading');

const qnaResults = document.getElementById('qna-results');

if (qnaBtn) {

qnaBtn.addEventListener('click', async () => {

const topic = qnaInput.value.trim();

if (!topic) {

qnaResults.innerHTML = '<p class="text-red-600 font-bold">질문 내용을 입력해주세요.</p>';

qnaResults.classList.remove('hidden');

return;

}

qnaResults.classList.add('hidden');

qnaLoading.classList.remove('hidden');

qnaBtn.disabled = true;

qnaInput.disabled = true;

const prompt = `

당신은 '화원 조경기술사사무소'의 대표 기술사입니다.

당신의 핵심 설계 철학은 '화원의 별(Trinity System)'입니다. 이는 두 개의 삼각형이 만나는 원리입니다:

- 첫 번째 삼각형 (조경가의 관점): Line, Mark, Structure 라는 구조적 원리.

- 두 번째 삼각형 (디자인의 가치): Harmony, Happiness, Heritage 라는 본질적 가치.

이 두 세계가 만나 '견고한 우아함'이라는 궁극의 미학을 완성한다고 당신은 믿습니다.

사용자 질문: "${topic}"

위 질문에 대해 당신의 '화원의 별' 철학을 바탕으로 답변해주세요. 두 삼각형의 원리가 어떻게 상호작용하여 해답을 찾는지 설명해야 합니다.

아래 형식을 반드시 지켜서 응답해주세요:

### [질문에 대한 '화원'의 생각]

[답변 내용. 2-3 문단으로 구성. '조경가의 관점'과 '디자인의 가치'라는 두 원리를 자연스럽게 녹여낼 것.]

let resultText = await callGemini(prompt);

resultText = resultText

.replace(/### (.*)/g, '<h3 class="font-serif text-xl font-bold text-peacock-green mb-4">$1</h3>')

.replace(/\n\n/g, '<p class="mb-4"></p>')

.replace(/\n/g, '<br>');

qnaResults.innerHTML = resultText;

qnaLoading.classList.add('hidden');

qnaResults.classList.remove('hidden');

qnaBtn.disabled = false;

qnaInput.disabled = false;

});

}

// --- Active Nav Link on Scroll ---

const sections = document.querySelectorAll('section');

const navLinks = document.querySelectorAll('.nav-link');

const header = document.getElementById('header');

let headerHeight = header.offsetHeight;

window.addEventListener('resize', () => {

headerHeight = header.offsetHeight;

});

const observer = new IntersectionObserver((entries) => {

let visibleSectionId = '';

entries.forEach(entry => {

if (entry.isIntersecting) {

visibleSectionId = entry.target.id;

}

});

navLinks.forEach(link => {

link.classList.toggle('active-nav', link.getAttribute('href').substring(1) === visibleSectionId);

});

}, { rootMargin: `-${headerHeight}px 0px -40% 0px`});

sections.forEach(section => {

if(section.id) observer.observe(section);

});

function handleHeaderShadow() {

if (window.scrollY > 10) {

header.classList.add('shadow-sm');

} else {

header.classList.remove('shadow-sm');

}

handleHeaderShadow();

window.addEventListener('scroll', handleHeaderShadow);

});

</script>

</body>

</html>