문의 영역 개편과 공유 미리보기 및 포트폴리오 표시 개선

- 메인 문의 영역을 이메일 주소와 복사 버튼으로 구성하고 복사 결과 안내를 추가 - 문의 폼 페이지를 별도로 보존하고 입력 검증, 파일 첨부 및 완료 안내 동작을 추가 - 제거된 문의 요소를 참조하던 공통 스크립트를 정리해 초기화 오류 방지 - 이메일 복사 버튼의 특수 문자 화살표를 공통 SVG로 통일 - 공유 시 특허증 대신 트론트 로고를 사용하도록 공유 메타 정보 지정 - 공통 스크립트와 포트폴리오 CSS에 버전 URL을 적용해 이전 CDN 캐시 우회 - 프로젝트 및 특허 영역의 자료 기준 안내와 소개서 보기 링크 제거 - 프로젝트 상세 페이지 8개의 상단 썸네일 화살표를 제거하고 마우스 반응 효과 유지 - 특허증 이미지 파일을 갱신하고 문의 구조와 동작 설명을 README에 반영 검증: 공통·이메일·문의 폼 JavaScript 문법 검사 및 변경 공백 검사 통과 확인: 버전이 붙은 운영 사이트 JS와 CSS가 로컬 파일과 동일함 참고: 문의 폼은 서버 전송 없이 화면 동작만 제공하며 이메일 주소는 임시 값 유지
2026-10-06 15:59:27 +09:00
parent ecc3807cfa
commit 7b4badf5a4
19 changed files with 791 additions and 75 deletions
--- a/README.md
+++ b/README.md
@@ -12,9 +12,19 @@ python3 -m http.server 8000 --bind 127.0.0.1

 이후 `http://127.0.0.1:8000`에 접속합니다.

+## 문의 영역
+
+- `index.html#contact`: 이메일 주소와 복사 버튼을 제공하는 문의 영역입니다. 스타일은 `contact-email.css`, 복사 및 결과 안내는 `contact-email.js`에 있습니다.
+- `index-form.html#contact`: 기존 문의 폼형을 그대로 보존한 페이지입니다. 이름·회사명·이메일·연락처·문의내용·파일첨부를 받으며, 필수 입력 확인, 글자 수 표시, 첨부파일 선택·삭제·드래그와 전송 완료 안내 모달을 지원합니다. 모달은 확인 버튼·닫기 버튼·Esc·바깥 영역 클릭으로 닫습니다.
+- 문의 스타일은 `contact-form.css`, 폼 동작은 `contact-form.js`에 있습니다.
+- 현재는 전송 완료 화면까지만 구현되어 있으며 입력 내용과 파일을 전송하거나 저장하지 않습니다. 실제 접수에는 서버 연동이 필요합니다. 첨부는 최대 5개, 합계 20MB까지 선택할 수 있습니다.
+
+메인 페이지의 ‘프로젝트 문의’ 버튼은 이메일 문의 영역으로 이동합니다.
+
 ## 파일

- `index.html`: 회사 소개, 사업 영역, 프로젝트 8개, 연혁, 문의 정보
+- `index.html`: 회사 소개, 사업 영역, 프로젝트 8개, 연혁, 이메일 문의
+- `index-form.html`: 기존 문의 폼을 포함한 회사 홈페이지
 - `styles.css`: 색상, 타이포그래피, 반응형 레이아웃 및 모션
 - `company.css`: 회사 개요·대표이사·조직도를 통합한 패널과 특허 영역. 기존 사업영역의 스타일과 동작은 유지합니다.
 - `script.js`: Canvas 입체 그래픽, 프로젝트 필터, 연혁 탭, 메뉴, 스크롤 효과
@@ -27,17 +37,6 @@ python3 -m http.server 8000 --bind 127.0.0.1
 - `assets/images/archive/`: 현재 화면에서 사용하지 않는 합본 이미지와 이전 버전. 원본 보관용이며 갤러리에 연결하지 않습니다.
 - `docs/`: 원본 회사소개서, 소개서 다운로드 링크의 대상

-## 연락처 교체
-
-사용자 요청에 따라 아래 연락처는 **임시 정보**입니다. 실제 인물에게 연결되지 않도록 예약된 `.example` 이메일을 사용했습니다.
-
- 이메일: `hello@tront.example`
- 전화번호: `053-000-0000`
-
-`script.js` 상단 `CONTACT`의 `email`, `phone`을 실제 정보로 바꾸고 `temporary`를 `false`로 변경합니다. JavaScript 비활성 환경에서도 같은 정보를 표시하도록 `index.html`의 이메일, 전화번호, `mailto:`, `tel:`도 함께 수정합니다. 실제 정보로 교체한 뒤 `.contact-placeholder`의 임시 연락처 문구를 삭제할 수 있습니다.
-
-문의 버튼은 메일 앱을 엽니다. 이메일 주소 복사는 보안 환경(HTTPS 또는 localhost)에서 작동하며, 사용할 수 없으면 주소를 선택해 수동 복사를 안내합니다. 서버가 없는 정적 사이트이므로 문의 접수나 이메일 발송을 수행하지 않습니다.
-
 ## 콘텐츠 기준

 - 설립일: 2008년 12월 1일
@@ -91,4 +90,4 @@ python3 -m http.server 8000 --bind 127.0.0.1
 - Canvas는 화면 밖이나 다른 탭에서 렌더링을 중지합니다.
 - 본문 바로가기, 포커스 표시, 이미지 대체 텍스트, 의미 있는 HTML 구조

-외부 CDN이나 폰트 라이브러리를 사용하지 않아 다운로드한 파일만으로 홈페이지 화면을 확인할 수 있습니다. 지도 모달은 외부 지도 서비스를 불러오며 이메일/전화 링크는 기기 앱으로 연결됩니다.
+외부 CDN이나 폰트 라이브러리를 사용하지 않아 다운로드한 파일만으로 홈페이지 화면을 확인할 수 있습니다. 지도 모달은 외부 지도 서비스를 불러옵니다.
--- a/assets/icons/content_copy.svg
+++ b/assets/icons/content_copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="000"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>
--- a/assets/images/patent-liquid-dispenser.png
+++ b/assets/images/patent-liquid-dispenser.png
--- a/assets/images/patent-virtual-image.png
+++ b/assets/images/patent-virtual-image.png
--- a/contact-email.css
+++ b/contact-email.css
@@ -0,0 +1,49 @@
+/* A direct connection: editorial typography and a detachable copy tab. */
+.contact-email-section::before { display: none; }
+.contact-email-section .wrap { position: relative; }
+.email-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
+.email-intro h2 { font-size: clamp(36px, 4.1vw, 62px); font-weight: 600; line-height: 1.3; letter-spacing: -.055em; }
+.email-intro h2 em { color: var(--lime); font-style: normal; }
+.email-intro > p { color: #d4defc; font-size: 13px; line-height: 1.95; padding-bottom: 5px; }
+.email-channel { position: relative; margin-top: 72px; border-top: 1px solid #ffffff65; }
+.email-channel::before { content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--lime); }
+.email-channel-meta, .email-channel-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
+.email-channel-meta { padding-top: 20px; color: #c9d6ff; font: 10px/1.5 monospace; letter-spacing: 1.1px; }
+.email-address-row { display: flex; align-items: center; gap: 24px; padding: 40px 0 44px; }
+.email-route { font: 44px/1 Arial, sans-serif; color: var(--lime); align-self: flex-start; margin-top: 12px; }
+.email-address { font: 500 clamp(30px, 5.4vw, 82px)/1.15 Arial, sans-serif; letter-spacing: -.055em; min-width: 0; overflow-wrap: anywhere; word-break: normal; user-select: all; }
+.email-copy { position: relative; flex: none; margin-left: auto; width: 116px; min-height: 116px; padding: 22px 20px 18px; background: var(--lime); color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; gap: 19px; border-radius: 0; transform: rotate(-5deg); transition: transform .25s var(--ease), background .25s; }
+.email-copy::before { content: ''; position: absolute; left: -7px; top: 0; bottom: 0; border-left: 1px dashed #d5ee8190; }
+.email-copy img { width: 26px; height: 26px; }
+.email-copy-label { font-size: 12px; font-weight: 700; }
+.email-copy-index { position: absolute; top: 17px; right: 15px; font-size: 17px; }
+.email-copy:hover, .email-copy:focus-visible { transform: rotate(0deg) translateY(-4px); background: #e3f7ac; }
+.email-copy.is-copied { transform: rotate(0deg); background: var(--paper); }
+.email-channel-footer { border-top: 1px solid #ffffff40; padding-top: 22px; }
+.email-channel-note { color: #e2e9ff; font-size: 12px; }
+.email-copy-status { color: #c9d6ff; font: 9px/1.7 monospace; letter-spacing: .65px; text-align: right; }
+.email-copy-status.is-feedback { color: var(--lime); font-family: var(--font); letter-spacing: 0; font-size: 12px; }
+.email-noscript { font-size: 12px; margin-top: 20px; }
+@media (max-width: 1000px) {
+  .email-intro { align-items: flex-start; }
+  .email-intro > p { font-size: 12px; }
+  .email-address-row { gap: 16px; }
+  .email-copy { width: 96px; min-height: 104px; padding: 18px 15px; }
+  .email-route { font-size: 32px; margin-top: 8px; }
+}
+@media (max-width: 600px) {
+  .email-intro { flex-direction: column; gap: 22px; }
+  .email-intro h2 { font-size: clamp(30px, 8vw, 46px); }
+  .email-channel { margin-top: 42px; }
+  .email-channel-meta { font-size: 8px; letter-spacing: .5px; gap: 16px; }
+  .email-channel-meta > span:last-child { text-align: right; max-width: 115px; }
+  .email-address-row { flex-wrap: wrap; gap: 18px; padding: 32px 0 28px; }
+  .email-route { display: none; }
+  .email-address { flex-basis: 100%; font-size: clamp(27px, 7.5vw, 44px); }
+  .email-copy { margin: 8px 3px 0 auto; width: auto; min-height: 0; flex-direction: row; align-items: center; gap: 12px; padding: 15px 19px; transform: rotate(-3deg); }
+  .email-copy img { width: 21px; height: 21px; }
+  .email-copy-index { position: static; margin-left: 15px; }
+  .email-channel-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
+  .email-channel-note { font-size: 11px; }
+  .email-copy-status { font-size: 8px; text-align: left; }
+}
--- a/contact-email.js
+++ b/contact-email.js
@@ -0,0 +1,52 @@
+(() => {
+  'use strict';
+  const button = document.querySelector('.email-copy');
+  const address = document.querySelector('.email-address');
+  const status = document.querySelector('.email-copy-status');
+  if (!button || !address || !status) return;
+  const label = button.querySelector('.email-copy-label');
+  const initialStatus = status.textContent;
+  let resetTimer;
+
+  function copyFallback(value) {
+    const field = document.createElement('textarea');
+    field.value = value;
+    field.setAttribute('readonly', '');
+    field.style.cssText = 'position:fixed;left:-9999px;top:0;opacity:0';
+    document.body.append(field);
+    field.select();
+    try {
+      if (!document.execCommand('copy')) throw new Error('Copy failed');
+    } finally {
+      field.remove();
+      button.focus({ preventScroll: true });
+    }
+  }
+
+  button.addEventListener('click', async () => {
+    clearTimeout(resetTimer);
+    const value = address.textContent.trim();
+    try {
+      try {
+        if (!navigator.clipboard?.writeText) throw new Error('Clipboard unavailable');
+        await navigator.clipboard.writeText(value);
+      } catch {
+        copyFallback(value);
+      }
+      label.textContent = '복사 완료';
+      button.classList.add('is-copied');
+      status.textContent = '이메일 주소를 복사했습니다. 메일의 받는 사람에 붙여넣어 주세요.';
+    } catch {
+      label.textContent = '다시 복사';
+      button.classList.remove('is-copied');
+      status.textContent = '복사하지 못했습니다. 이메일 주소를 선택해 직접 복사해 주세요.';
+    }
+    status.classList.add('is-feedback');
+    resetTimer = setTimeout(() => {
+      label.textContent = '주소 복사';
+      button.classList.remove('is-copied');
+      status.classList.remove('is-feedback');
+      status.textContent = initialStatus;
+    }, 6000);
+  });
+})();
--- a/contact-form.css
+++ b/contact-form.css
@@ -0,0 +1,111 @@
+/* Contact section, inquiry form, and completion dialog. */
+.contact-form-section .wrap { position: relative; }
+.contact-form-section .section-top { align-items: center; gap: 24px; }
+.contact-form-section h2 { font-size: clamp(38px, 4.4vw, 64px); font-weight: 600; line-height: 1.3; letter-spacing: -.055em; }
+.contact-form-section h2 em { color: var(--lime); font-style: normal; }
+
+/* Introduction and inquiry form. */
+.contact-form-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
+.contact-form-intro { padding-top: 15px; }
+.contact-form-intro h2 { font-size: clamp(36px, 3.3vw, 49px); }
+.contact-form-intro > p { color: #d9e3ff; font-size: 14px; line-height: 1.95; margin-top: 27px; }
+.contact-form-topics { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 29px; }
+.contact-form-topics span { border: 1px solid #ffffff40; border-radius: 30px; font-size: 10px; padding: 9px 13px; color: #e1e8ff; }
+.contact-form-art { position: relative; display: flex; align-items: center; justify-content: center; width: 230px; height: 215px; margin: 60px 0 0 12px; color: var(--lime); }
+.contact-form-art::before, .contact-form-art::after { content: ""; position: absolute; width: 175px; height: 175px; border: 1px solid #d5ee8166; border-radius: 26px; transform: rotate(-20deg); }
+.contact-form-art::after { transform: rotate(16deg); border-color: #d5ee8133; width: 200px; height: 200px; }
+.contact-form-art .arrow-icon { width: 94px; height: 94px; }
+.contact-form-caption { margin-top: 34px; color: #cbd7ff; font-size: 9px; font-family: monospace; letter-spacing: 1.4px; }
+.inquiry-form { background: var(--paper); color: var(--ink); border-radius: 7px; padding: 36px 38px; min-width: 0; }
+.inquiry-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 29px; }
+.inquiry-heading h3 { font-size: 21px; font-weight: 600; letter-spacing: -.65px; }
+.inquiry-heading p { font-size: 10px; color: #697269; }
+.inquiry-required { color: var(--blue); }
+.inquiry-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 22px; }
+.inquiry-field { min-width: 0; }
+.inquiry-field--wide { grid-column: 1 / -1; }
+.inquiry-field label, .inquiry-attachment-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 10px; }
+.inquiry-field label > span, .inquiry-attachment-label > span { font-size: 10px; font-weight: 400; color: #7a8477; margin-left: 5px; }
+.inquiry-field label .inquiry-required { color: var(--blue); }
+.inquiry-field input, .inquiry-field textarea { display: block; width: 100%; border: 1px solid #d2d8cb; border-radius: 4px; background: #fff9; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.5; padding: 13px 14px; transition: border-color .2s, box-shadow .2s; }
+.inquiry-field input::placeholder, .inquiry-field textarea::placeholder { color: #8a9286; }
+.inquiry-form :is(input, textarea):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
+.inquiry-field textarea { resize: vertical; min-height: 137px; }
+.inquiry-counter { margin-top: 7px; text-align: right; font: 10px monospace; color: #798474; }
+.inquiry-upload { position: relative; display: flex; align-items: center; justify-content: center; gap: 15px; padding: 21px 17px; border: 1px dashed #aebca1; border-radius: 4px; background: #e9eddf; transition: background .2s, border-color .2s; }
+.inquiry-upload:hover, .inquiry-upload.is-dragging { background: #e0e8d2; border-color: var(--blue); }
+.inquiry-upload:focus-within { outline: 2px solid var(--blue); outline-offset: 3px; }
+.inquiry-upload > svg { width: 24px; height: 24px; color: #617557; flex: none; }
+.inquiry-upload strong { display: block; font-size: 12px; font-weight: 500; line-height: 1.6; }
+.inquiry-upload small { display: block; font-size: 10px; color: #73816a; margin-top: 3px; line-height: 1.7; }
+.inquiry-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
+.inquiry-files { margin: 0; padding: 0; list-style: none; }
+.inquiry-files li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
+.inquiry-file-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.inquiry-file-size { font: 10px monospace; color: #697564; white-space: nowrap; }
+.inquiry-file-remove { display: grid; place-items: center; flex: none; width: 30px; height: 30px; font-size: 19px; background: #e4e9dc; border-radius: 50%; color: #4c5e44; }
+.inquiry-form button:focus-visible { outline-color: var(--blue); outline-offset: 3px; }
+.inquiry-upload-status { margin-top: 8px; font-size: 11px; line-height: 1.7; color: #53664c; }
+.inquiry-upload-status:empty { display: none; }
+.inquiry-upload-status.is-error { color: #a03827; }
+.inquiry-submit { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 18px 20px; background: var(--ink); color: var(--paper); border-radius: 4px; margin-top: 27px; font-size: 13px; font-weight: 600; transition: background .2s; }
+.inquiry-submit:hover { background: var(--blue); }
+.inquiry-submit:disabled { opacity: .55; cursor: not-allowed; }
+.inquiry-submit .arrow-icon { width: 22px; height: 22px; }
+.inquiry-noscript-note { color: #77816e; font-size: 10px; line-height: 1.7; text-align: center; margin-top: 13px; }
+html.inquiry-success-open { overflow: hidden; }
+.inquiry-dialog { width: min(460px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 48px 32px 25px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 28px 90px #101e2440; overflow: auto; }
+.inquiry-dialog::backdrop { background: #101e2499; backdrop-filter: blur(5px); }
+.inquiry-dialog-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; color: #677269; font-size: 27px; line-height: 1; }
+.inquiry-dialog-close:hover { background: #e4e9dc; }
+.inquiry-success-mark { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 26px; border-radius: 50%; background: #e2ebff; color: var(--blue); }
+.inquiry-success-mark svg { width: 38px; height: 38px; }
+.inquiry-success-label { color: var(--blue); font-size: 8px; font-weight: 600; letter-spacing: 1.2px; margin-bottom: 12px; }
+.inquiry-dialog h2 { font-size: 27px; font-weight: 600; line-height: 1.4; letter-spacing: -1.2px; }
+#inquiry-success-description { color: #65715e; font-size: 13px; line-height: 1.9; margin-top: 17px; }
+.inquiry-dialog-confirm { display: block; width: 100%; min-height: 48px; margin-top: 30px; border-radius: 4px; background: var(--blue); color: white; font-size: 13px; font-weight: 600; transition: background .2s; }
+.inquiry-dialog-confirm:hover { background: #1c43b7; }
+@media (max-width: 400px) {
+  .inquiry-dialog { padding: 43px 20px 23px; }
+  .inquiry-dialog h2 { font-size: 23px; letter-spacing: -.8px; }
+  #inquiry-success-description { font-size: 12px; }
+}
+
+@media (max-width: 1150px) {
+  .contact-form-layout { grid-template-columns: .8fr 1.2fr; gap: 40px; }
+  .inquiry-form { padding: 29px 27px; }
+  .contact-form-intro h2 { font-size: 36px; }
+  .contact-form-intro > p { font-size: 12px; }
+  .contact-form-intro > p br { display: none; }
+}
+@media (max-width: 850px) {
+  .contact-form-section .section-top { margin-bottom: 42px; }
+  .contact-form-layout { grid-template-columns: 1fr; gap: 35px; }
+  .contact-form-intro { padding-top: 0; position: relative; padding-right: 140px; }
+  .contact-form-intro > p { max-width: 420px; margin-top: 20px; }
+  .contact-form-art { position: absolute; right: 0; top: 10px; width: 100px; height: 130px; margin: 0 12px 0 0; }
+  .contact-form-art::before { width: 90px; height: 90px; border-radius: 14px; }
+  .contact-form-art::after { width: 110px; height: 110px; border-radius: 14px; }
+  .contact-form-art .arrow-icon { width: 50px; height: 50px; }
+  .contact-form-topics { margin-top: 20px; }
+  .contact-form-caption { display: none; }
+  .inquiry-form { padding: 32px; }
+}
+@media (max-width: 600px) {
+  .contact-form-section .section-top { align-items: flex-start; flex-direction: column; gap: 21px; margin-bottom: 37px; }
+  .contact-form-section h2 { font-size: clamp(31px, 8.1vw, 44px); }
+  .contact-form-intro { padding-right: 0; }
+  .contact-form-art { display: none; }
+  .contact-form-intro > p { font-size: 12px; max-width: 320px; }
+  .contact-form-topics span { font-size: 9px; padding: 8px 11px; }
+  .inquiry-form { padding: 26px 20px; }
+  .inquiry-heading { margin-bottom: 26px; gap: 10px; }
+  .inquiry-heading h3 { font-size: 20px; }
+  .inquiry-heading p { font-size: 9px; }
+  .inquiry-fields { grid-template-columns: 1fr; gap: 21px; }
+  .inquiry-field input, .inquiry-field textarea { font-size: 16px; padding: 12px; }
+  .inquiry-upload { padding: 20px 12px; gap: 10px; }
+  .inquiry-upload strong { font-size: 11px; }
+  .inquiry-upload small { font-size: 9px; }
+  .inquiry-noscript-note { font-size: 9px; }
+}
--- a/contact-form.js
+++ b/contact-form.js
@@ -0,0 +1,129 @@
+/* Local interaction preview: no requests, uploads, or storage. */
+(() => {
+  'use strict';
+  const form = document.querySelector('.inquiry-form');
+  if (!form) return;
+
+  const message = form.elements.message;
+  const counter = form.querySelector('[data-message-count]');
+  const input = form.elements.attachments;
+  const dropzone = form.querySelector('.inquiry-upload');
+  const list = form.querySelector('.inquiry-files');
+  const uploadStatus = form.querySelector('.inquiry-upload-status');
+  const dialog = document.querySelector('#inquiry-success-dialog');
+  const submitButton = form.querySelector('.inquiry-submit');
+  submitButton.disabled = false;
+  const maxFiles = 5;
+  const maxBytes = 20 * 1024 * 1024;
+  let files = [];
+  let dragDepth = 0;
+
+  function formatSize(size) {
+    return size >= 1024 * 1024 ? `${(size / 1024 / 1024).toFixed(1)} MB` : `${Math.max(1, Math.ceil(size / 1024))} KB`;
+  }
+
+  function showFiles() {
+    list.replaceChildren();
+    files.forEach((file, index) => {
+      const item = document.createElement('li');
+      const name = document.createElement('span');
+      name.className = 'inquiry-file-name';
+      name.textContent = file.name;
+      const size = document.createElement('span');
+      size.className = 'inquiry-file-size';
+      size.textContent = formatSize(file.size);
+      const remove = document.createElement('button');
+      remove.type = 'button';
+      remove.className = 'inquiry-file-remove';
+      remove.textContent = '×';
+      remove.setAttribute('aria-label', `${file.name} 삭제`);
+      remove.addEventListener('click', () => {
+        files.splice(index, 1);
+        showFiles();
+        const next = list.querySelectorAll('button')[Math.min(index, files.length - 1)];
+        (next || input).focus();
+      });
+      item.append(name, size, remove);
+      list.append(item);
+    });
+    uploadStatus.classList.remove('is-error');
+    uploadStatus.textContent = files.length ? `${files.length}개 선택 · 총 ${formatSize(files.reduce((sum, file) => sum + file.size, 0))}` : '';
+  }
+
+  function addFiles(selection) {
+    const next = [...files];
+    for (const file of selection) {
+      if (!next.some(existing => existing.name === file.name && existing.size === file.size && existing.lastModified === file.lastModified)) next.push(file);
+    }
+    let error = '';
+    if (next.length > maxFiles) error = '파일은 최대 5개까지 첨부할 수 있습니다.';
+    else if (next.reduce((sum, file) => sum + file.size, 0) > maxBytes) error = '첨부파일의 총 용량은 20MB 이하여야 합니다.';
+    input.value = '';
+    if (error) {
+      uploadStatus.textContent = error;
+      uploadStatus.classList.add('is-error');
+      return;
+    }
+    files = next;
+    showFiles();
+  }
+
+  input.addEventListener('change', () => addFiles([...input.files]));
+  dropzone.addEventListener('dragenter', event => {
+    event.preventDefault();
+    dragDepth++;
+    dropzone.classList.add('is-dragging');
+  });
+  dropzone.addEventListener('dragover', event => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
+  });
+  dropzone.addEventListener('dragleave', () => {
+    if (--dragDepth <= 0) dropzone.classList.remove('is-dragging');
+  });
+  dropzone.addEventListener('drop', event => {
+    event.preventDefault();
+    dragDepth = 0;
+    dropzone.classList.remove('is-dragging');
+    addFiles([...event.dataTransfer.files]);
+  });
+  // Avoid navigating away if a file is dropped just outside the attachment area.
+  for (const type of ['dragover', 'drop']) {
+    form.addEventListener(type, event => {
+      if ([...event.dataTransfer.types].includes('Files')) event.preventDefault();
+    });
+  }
+
+  form.addEventListener('input', event => {
+    if (event.target.matches('input, textarea')) event.target.setCustomValidity('');
+    counter.textContent = message.value.length.toLocaleString('ko-KR');
+  });
+  dialog.querySelectorAll('[data-close-inquiry]').forEach(button => {
+    button.addEventListener('click', () => dialog.close());
+  });
+  let backdropPressed = false;
+  function isBackdrop(event) {
+    const bounds = dialog.getBoundingClientRect();
+    return event.target === dialog && (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom);
+  }
+  dialog.addEventListener('pointerdown', event => { backdropPressed = isBackdrop(event); });
+  dialog.addEventListener('click', event => {
+    if (backdropPressed && isBackdrop(event)) dialog.close();
+    backdropPressed = false;
+  });
+  dialog.addEventListener('close', () => {
+    document.documentElement.classList.remove('inquiry-success-open');
+    submitButton.focus({ preventScroll: true });
+  });
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    for (const field of [form.elements.name, message]) {
+      field.setCustomValidity(field.value.trim() ? '' : '공백을 제외한 내용을 입력해 주세요.');
+    }
+    if (!form.reportValidity()) return;
+    if (!dialog.open) {
+      dialog.showModal();
+      document.documentElement.classList.add('inquiry-success-open');
+    }
+  });
+})();
--- a/index-form.html
+++ b/index-form.html
@@ -0,0 +1,385 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="theme-color" content="#f5f5ef">
+  <meta name="description" content="2008년부터 이어온 기술의 연결. 트론트는 스마트 모빌리티, 산업 관제, Web3, 모바일·웹 플랫폼으로 비즈니스의 다음을 만듭니다.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://tront.noname.company/index-form.html">
+  <meta property="og:image" content="https://tront.noname.company/assets/images/tront-logo.png">
+  <meta property="og:image:alt" content="TRONT — The road not taken">
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:image" content="https://tront.noname.company/assets/images/tront-logo.png">
+  <meta property="og:title" content="TRONT — 기술로 연결하고, 가능성을 확장하다">
+  <meta property="og:description" content="스마트 모빌리티부터 디지털 플랫폼까지. 2008년부터 함께해 온 IT 솔루션 파트너, 주식회사 트론트.">
+  <title>TRONT — 기술로 연결하고, 가능성을 확장하다</title>
+  <link rel="icon" href="assets/images/tront-logo.png" type="image/png">
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="portfolio.css?v=780175b64ad9">
+  <link rel="stylesheet" href="company.css">
+  <script src="script.js?v=20261006-contact-email" defer></script>
+  <script src="portfolio.js" defer></script>
+  <link rel="stylesheet" href="map-dialog.css">
+  <script src="map-dialog.js" defer></script>
+ <link rel="stylesheet" href="image-viewer.css">
+ <script src="image-viewer.js" defer></script>
+  <link rel="stylesheet" href="icons.css">
+  <link rel="stylesheet" href="contact-form.css">
+  <script src="contact-form.js" defer></script>
+</head>
+<body>
+  <!-- Shared arrow shape from assets/icons/arrow_right_alt.svg. -->
+  <svg class="icon-definitions" xmlns="http://www.w3.org/2000/svg" width="0" height="0" aria-hidden="true" focusable="false"><defs><symbol id="arrow-right-alt" viewBox="0 -960 960 960"><path d="m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z"/></symbol></defs></svg>
+  <a class="skip-link" href="#main">본문으로 바로가기</a>
+  <div class="scroll-progress" aria-hidden="true"></div>
+  <header class="site-header">
+    <div class="header-inner wrap">
+      <a class="brand" href="#home" aria-label="트론트 홈"><img src="assets/images/tront-logo.png" width="400" height="155" alt="TRONT — The road not taken"></a>
+      <nav class="desktop-nav" aria-label="주요 메뉴">
+        <a href="#about">회사소개</a><a href="#expertise">사업영역</a><a href="#work">프로젝트</a><a href="#patents">특허</a><a href="#journey">걸어온 길</a>
+      </nav>
+      <a class="header-contact" href="#contact">프로젝트 문의 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a>
+      <button class="menu-toggle" aria-label="메뉴 열기" aria-controls="mobile-menu" aria-expanded="false"><span></span><span></span></button>
+    </div>
+    <nav id="mobile-menu" class="mobile-menu" aria-label="모바일 메뉴" hidden>
+      <a href="#about"><span>01</span>회사소개 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#expertise"><span>02</span>사업영역 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#work"><span>03</span>프로젝트 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#patents"><span>04</span>특허 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#journey"><span>05</span>걸어온 길 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#contact"><span>06</span>프로젝트 문의 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a>
+      <p>THE ROAD NOT TAKEN.<br>YOUR NEXT TECHNOLOGY PARTNER.</p>
+    </nav>
+  </header>
+
+  <main id="main">
+    <section id="home" class="hero wrap" aria-labelledby="hero-title">
+      <div class="hero-content">
+        <p class="eyebrow"><span class="status-dot"></span> CONNECTING IDEAS. CREATING IMPACT.</p>
+        <h1 id="hero-title">기술로 연결하고,<br><span>가능성을 확장하다.</span></h1>
+        <p class="hero-description">모빌리티부터 디지털 플랫폼까지.<br>비즈니스의 다음을 함께 만드는 기술 파트너, 트론트.</p>
+        <div class="hero-actions"><a class="button button-dark" href="#work">우리가 만든 변화 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a><a class="text-link" href="#expertise">우리의 기술 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--down" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a></div>
+        <div class="hero-bottom"><span class="tiny-label">INNOVATION SINCE</span><strong>2008<span class="small-star" aria-hidden="true">✳</span></strong><span class="hero-note">경험은 깊게.<br>시선은 더 멀리.</span></div>
+      </div>
+      <div class="hero-art" aria-label="서로 연결된 기술을 표현한 푸른 입체 궤도 그래픽" role="img">
+        <div class="art-grid" aria-hidden="true"></div>
+        <span class="art-coordinate coordinate-top" aria-hidden="true">[ TRONT / CONNECTED FUTURE ]</span>
+        <canvas id="connection-canvas" aria-hidden="true"></canvas>
+        <div class="orbit-label orbit-label-one" aria-hidden="true"><span></span>TECHNOLOGY</div>
+        <div class="orbit-label orbit-label-two" aria-hidden="true"><span></span>POSSIBILITY</div>
+        <div class="art-caption" aria-hidden="true"><span class="crosshair">+</span><span>INDEPENDENT IDEAS.<br>INFINITE CONNECTIONS.</span><span class="art-index">01 — 05</span></div>
+      </div>
+      <a class="scroll-cue" href="#about"><span class="scroll-line" aria-hidden="true"></span> SCROLL TO EXPLORE</a>
+      <button class="motion-toggle" aria-pressed="false" aria-label="그래픽 애니메이션 일시정지"><span aria-hidden="true">Ⅱ</span></button>
+    </section>
+
+    <div class="ticker" aria-hidden="true"><div class="ticker-track"><span>SMART MOBILITY <i>✳</i> DIGITAL PLATFORM <i>✳</i> CONNECTED FUTURE <i>✳</i> INDUSTRIAL INTELLIGENCE <i>✳</i> </span><span>SMART MOBILITY <i>✳</i> DIGITAL PLATFORM <i>✳</i> CONNECTED FUTURE <i>✳</i> INDUSTRIAL INTELLIGENCE <i>✳</i> </span></div></div>
+
+    <section id="about" class="about section wrap" aria-labelledby="about-title">
+      <div class="section-top reveal"><p class="section-label"><span>01 /</span> ABOUT TRONT</p><span class="side-note">기술에 대한 깊이, 사람을 향한 방향</span></div>
+      <div class="about-layout">
+        <div class="about-intro reveal"><h2 id="about-title">복잡한 기술을<br><span class="muted">의미 있는 경험으로.</span></h2><div class="about-signature" aria-hidden="true"><span>✳</span><span>CONNECTING POSSIBILITIES<br>SINCE 2008</span></div></div>
+        <div class="about-copy reveal"><p>트론트는 모바일, 웹, 애플리케이션을 넘어 산업과 일상을 연결하는 IT 솔루션 전문 기업입니다. 2008년의 첫걸음부터 다양한 산업 현장에서 쌓아온 경험으로, 고객의 아이디어를 작동하는 서비스로 만듭니다.</p><p>지능형 관제, 디지털 플랫폼, 미래 모빌리티까지.<br>기술의 경계를 넘나들며 비즈니스에 필요한 연결을 설계합니다.</p><a class="text-link" href="docs/(주)트론트_회사소개서_ver.1.2.0_20251202_압축.pdf" download="TRONT_회사소개서.pdf">트론트 회사소개서 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--down" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span><small>PDF · 9.2 MB</small></a></div>
+      </div>
+      <div class="company-profile reveal" aria-label="트론트 회사 개요 및 조직">
+        <div class="company-identity">
+          <p class="tiny-label">COMPANY AT A GLANCE</p>
+          <h3>주식회사 트론트<span>TRONT Co., Ltd.</span></h3>
+          <dl class="company-data">
+            <div><dt>설립일</dt><dd><time datetime="2008-12-01">2008년 12월 1일</time></dd></div>
+            <div><dt>사업분야</dt><dd>모바일 솔루션 · 웹 서비스 · 산업용 애플리케이션 개발</dd></div>
+            <div><dt>소재지</dt><dd>대구광역시 북구 경대로17길 47<br>IT융합산업빌딩 1203호</dd></div>
+          </dl>
+          <a class="company-patent-link" href="#patents"><span class="company-link-mark" aria-hidden="true">✳</span>기술 연구와 특허 살펴보기<span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a>
+        </div>
+        <div class="company-organization">
+          <div class="organization-heading">
+            <div><p class="tiny-label">PEOPLE & ORGANIZATION</p><h3>함께 만드는 전문 조직</h3></div>
+            <div class="organization-people"><strong><span data-count="18">18</span><span>명</span></strong><small>2025.10 기준</small></div>
+          </div>
+          <div class="organization-chart" aria-label="대표이사 김칠수 아래 기술지원팀, 개발1팀, 개발2팀으로 구성">
+            <div class="organization-leader"><span>CEO · 대표이사</span><strong>김칠수</strong><i aria-hidden="true">✳</i></div>
+            <ul class="organization-teams">
+              <li><span class="team-index" aria-hidden="true">01</span><h4>기술지원팀</h4><p>TECHNICAL SUPPORT</p></li>
+              <li><span class="team-index" aria-hidden="true">02</span><h4>개발1팀</h4><p>Web 개발<br>모바일 앱 개발</p></li>
+              <li><span class="team-index" aria-hidden="true">03</span><h4>개발2팀</h4><p>내비게이션 개발</p></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="expertise" class="expertise section" aria-labelledby="expertise-title">
+      <div class="wrap"><div class="section-top reveal"><p class="section-label"><span>02 /</span> OUR EXPERTISE</p><span class="side-note">FIVE FIELDS. ONE CONNECTED VISION.</span></div>
+        <div class="expertise-layout"><div class="expertise-intro reveal"><h2 id="expertise-title">기술을 잇는<br>IT 전문가 그룹</h2><p>주식회사 트론트는 스마트 모빌리티, 산업 관제, 자산 관리, SaaS 플랫폼, <br>디지털 인터페이스 분야에서 고객의 디지털 혁신을 이끕니다.</p><div class="expertise-art" data-mode="mobility" aria-hidden="true">
+              <div class="expertise-art-top"><span>CAPABILITY IN FOCUS</span><span class="capability-index">01 / 05</span></div>
+              <div class="capability-sculpture"><i class="sculpture-plane plane-one"></i><i class="sculpture-plane plane-two"></i><i class="sculpture-plane plane-three"></i><i class="sculpture-plane plane-four"></i><div class="sculpture-core">HMI</div><span class="sculpture-point point-one"></span><span class="sculpture-point point-two"></span></div>
+              <div class="expertise-art-bottom"><span class="capability-name">SMART MOBILITY</span><div class="capability-dots"><i class="is-active"></i><i></i><i></i><i></i><i></i></div></div>
+            </div></div>
+          <div class="service-list reveal">
+            <details class="service" open><summary><span class="service-number">01</span><div><span class="tiny-label">SMART MOBILITY & HMI</span><h3>스마트 모빌리티 및 HMI 플랫폼</h3></div><span class="service-toggle" aria-hidden="true">+</span></summary><div class="service-content"><p>운전자와 차량 사이, 직관적인 연결을 만듭니다. 국내외 내비게이션 HMI와 차량 통신 기술을 바탕으로 새로운 이동 경험을 구현합니다.</p><div class="tags"><span>차량 통신</span><span>네비게이션 개발 연결성</span><span>관제 시스템</span></div></div></details>
+            <details class="service"><summary><span class="service-number">02</span><div><span class="tiny-label">INDUSTRIAL MONITORING & CONTROL</span><h3>산업 통합 관제 및 제어 시스템</h3></div><span class="service-toggle" aria-hidden="true">+</span></summary><div class="service-content"><p>현장의 데이터를 한눈에, 복잡한 운영을 더 명확하게. 실시간 모니터링과 데이터 송수신, 원격 제어를 통합해 산업 현장의 효율과 안전을 지원합니다.</p><div class="tags"><span>실시간 모니터링</span><span>데이터 송수신 프로토콜</span><span>시스템 통합(SI)</span><span>원격 제어 및 안전 시스템</span></div></div></details>
+            <details class="service"><summary><span class="service-number">03</span><div><span class="tiny-label">WEB3 & ASSET MANAGEMENT</span><h3>고도화된 Web3 & Asset 관리 솔루션</h3></div><span class="service-toggle" aria-hidden="true">+</span></summary><div class="service-content"><p>자산의 흐름에 정확함을, 운영에 투명함을 더합니다. 블록체인 기반 서비스와 RFID·NFC 기술을 활용해 데이터와 실물 자산을 연결합니다.</p><div class="tags"><span>블록체인 기반 투명성 확보</span><span>RFID / NFC 등 무선 통신 기반 자산 관리</span><span>금융 기술 융합</span></div></div></details>
+            <details class="service"><summary><span class="service-number">04</span><div><span class="tiny-label">COMMUNITY & SAAS PLATFORM</span><h3>전문 커뮤니티 및 SaaS 플랫폼</h3></div><span class="service-toggle" aria-hidden="true">+</span></summary><div class="service-content"><p>사람과 사람, 서비스와 일상을 연결합니다. 약국·교육·스포츠 등 도메인에 대한 이해를 바탕으로 모바일 앱, 웹, 관리자 시스템을 함께 구축합니다.</p><div class="tags"><span>도메인 특화 Web/App 서비스</span><span>GroupWare</span><span>LMS 개발</span></div></div></details>
+            <details class="service"><summary><span class="service-number">05</span><div><span class="tiny-label">FUTURE TECH & DIGITAL INTERFACE</span><h3>미래 기술 및 디지털 인터페이스</h3></div><span class="service-toggle" aria-hidden="true">+</span></summary><div class="service-content"><p>새로운 기술이 자연스러운 경험이 되도록. 가상현실 기반 웹 환경, 디지털 사이니지, 영상 분석과 UX 기술로 디지털 접점을 확장합니다.</p><div class="tags"><span>Virtual Reality기반 Web 환경</span><span>SIGNAGE</span><span>영상 분석 및 UX</span></div></div></details>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="work" class="work section wrap" aria-labelledby="work-title">
+      <div class="section-top reveal"><p class="section-label"><span>03 /</span> SELECTED WORK</p><span class="side-note">아이디어가 현실이 되는 순간</span></div>
+      <div class="section-heading reveal"><h2 id="work-title">기술로 만든<br><span class="muted">실제의 변화.</span></h2><p>다양한 산업에서 증명해 온 실행력.<br>트론트가 함께 만든 프로젝트를 소개합니다.</p></div>
+      <div class="project-toolbar reveal"><div class="project-filters" role="group" aria-label="프로젝트 분야 필터"><button class="filter is-active" data-filter="all" aria-pressed="true">전체 <sup>08</sup></button><button class="filter" data-filter="mobility" aria-pressed="false">모빌리티</button><button class="filter" data-filter="platform" aria-pressed="false">디지털 플랫폼</button><button class="filter" data-filter="industry" aria-pressed="false">관제 & 자산 관리</button></div><span class="project-count" aria-live="polite">8 PROJECTS</span></div>
+      <div class="project-grid">
+        <!-- 01 -->
+        <article id="project-mobility" class="project-card reveal" data-category="mobility">
+          <a class="project-open" data-project="mobility" href="projects/mobility.html" aria-label="현대 오토에버 국내향 및 해외향 내비게이션 HMI 개발 포트폴리오 보기">
+            <div class="project-meta"><span>현대 오토에버</span><span>2018 — 2025</span></div>
+            <h3>국내향 및 해외향 내비게이션 HMI 개발</h3>
+            <div class="project-scene scene--mobility" aria-hidden="true"><div class="scene-surface">
+  <div class="scene-grid"></div><div class="scene-kicker"><span>NAVIGATION / HMI</span><span>01 / 08</span></div>
+  <div class="scene-wordmark">Navigation<br><em>HMI.</em></div><div class="scene-phrase">NAVIGATION GUI / INTERFACE LAYER</div>
+  <div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
+  <div class="scene-visual"><img src="assets/images/mobility_01.png" alt="" loading="lazy" width="1577" height="727"></div>
+  <div class="scene-annotation">HYUNDAI / KIA</div>
+  <div class="scene-bottom"><span>차량용 내비게이션</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+ </div></div>
+            <div class="project-scope"><p>내비게이션 GUI 개발 · Interface layer 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
+          </a>
+        </article>
+        <!-- 02 -->
+        <article id="project-pharmacy" class="project-card reveal" data-category="platform">
+          <a class="project-open" data-project="pharmacy" href="projects/pharmacy.html" aria-label="모두의약국 약사님들의 커뮤니티 개발 포트폴리오 보기">
+            <div class="project-meta"><span>모두의약국</span><span>2022 — 2025</span></div>
+            <h3>약사님들의 커뮤니티 개발</h3>
+            <div class="project-scene scene--pharmacy" aria-hidden="true"><div class="scene-surface">
+  <div class="scene-grid"></div><div class="scene-kicker"><span>COMMUNITY PLATFORM</span><span>02 / 08</span></div>
+  <div class="scene-wordmark">모두의<br><em>약국.</em></div><div class="scene-phrase">A COMMUNITY FOR PHARMACISTS.</div>
+  <div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
+  <div class="scene-visual"><img src="assets/images/pharmacy_01.png" alt="" loading="lazy" width="702" height="1440"></div>
+  <div class="scene-annotation">APP / WEB / ADMIN</div>
+  <div class="scene-bottom"><span>모바일 앱 / 웹</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+ </div></div>
+            <div class="project-scope"><p>모바일 앱 · 사용자 웹 · 백엔드 개발 · 관리자 화면 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
+          </a>
+        </article>
+        <!-- 03 -->
+        <article id="project-bems" class="project-card reveal" data-category="industry">
+          <a class="project-open" data-project="bems" href="projects/bems.html" aria-label="BEMS 빌딩 에너지 통합 관리 시스템 BEMS 개발 포트폴리오 보기">
+            <div class="project-meta"><span>BEMS</span><span>2023 — 2024</span></div>
+            <h3>빌딩 에너지 통합 관리 시스템 BEMS 개발</h3>
+            <div class="project-scene scene--bems" aria-hidden="true"><div class="scene-surface">
+  <div class="scene-grid"></div><div class="scene-kicker"><span>BUILDING ENERGY MANAGEMENT</span><span>03 / 08</span></div>
+  <div class="scene-wordmark">BEMS<span class="word-period">.</span></div><div class="scene-phrase">SENSORS / ENERGY / MONITORING</div>
+  <div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
+  <div class="scene-visual"><img src="assets/images/bems_01.png" alt="" loading="lazy" width="1199" height="534"></div>
+  <div class="scene-annotation">BUILDING ENERGY MANAGEMENT</div>
+  <div class="scene-bottom"><span>웹</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+ </div></div>
+            <div class="project-scope"><p>사용자 웹 · 백엔드 개발 · 관리자 화면 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
+          </a>
+        </article>
+        <!--  -->
+        <article id="project-givon" class="project-card reveal" data-category="platform">
+          <a class="project-open" data-project="givon" href="projects/givon.html" aria-label="GivOn 블록체인 기반 기부 플랫폼 관리자 페이지 개발 포트폴리오 보기">
+            <div class="project-meta"><span>GivOn</span><span>2025</span></div>
+            <h3>블록체인 기반 기부 플랫폼 관리자 페이지 개발</h3>
+            <div class="project-scene scene--givon" aria-hidden="true"><div class="scene-surface">
+  <div class="scene-grid"></div><div class="scene-kicker"><span>DONATION PLATFORM / ADMIN</span><span>04 / 08</span></div>
+  <div class="scene-wordmark">Giv<em>On</em><span class="word-period">.</span></div><div class="scene-phrase">ORGANIZATIONS / DONATIONS / VOLUNTEERING</div>
+  <div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
+  <div class="scene-visual"><img src="assets/images/givon_01.png" alt="" loading="lazy" width="1774" height="528"></div>
+  <div class="scene-annotation">DONATION PLATFORM / ADMIN</div>
+  <div class="scene-bottom"><span>관리자 화면</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+ </div></div>
+            <div class="project-scope"><p>백엔드 개발 · 관리자 화면 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
+          </a>
+        </article>
+        <!-- 05 -->
+        <article id="project-bispet" class="project-card reveal" data-category="platform">
+          <a class="project-open" data-project="bispet" href="projects/bispet.html" aria-label="BISPET 애견인들 위한 커뮤니티 개발 포트폴리오 보기">
+            <div class="project-meta"><span>BISPET</span><span>2024 — 2025</span></div>
+            <h3>애견인들 위한 커뮤니티 개발</h3>
+            <div class="project-scene scene--bispet" aria-hidden="true"><div class="scene-surface">
+  <div class="scene-grid"></div><div class="scene-kicker"><span>SNS / COMMUNITY</span><span>05 / 08</span></div>
+  <div class="scene-wordmark">BIS<em>PET.</em></div><div class="scene-phrase">PROFILE / FEED / SCHEDULE / WALK</div>
+  <div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
+  <div class="scene-visual"><img src="assets/images/bispet_01.png" alt="" loading="lazy" width="702" height="1440"></div>
+  <div class="scene-annotation">MOBILE APP / ADMIN</div>
+  <div class="scene-bottom"><span>모바일 앱 / 관리자 화면</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+ </div></div>
+            <div class="project-scope"><p>모바일 앱 · 백엔드 개발 · 관리자 화면 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
+          </a>
+        </article>
+        <!--  -->
+        <article id="project-asset" class="project-card reveal" data-category="industry">
+          <a class="project-open" data-project="asset" href="projects/asset.html" aria-label="WideAsset S/W RF 자산관리 솔루션 구축 포트폴리오 보기">
+            <div class="project-meta"><span>WideAsset S/W</span><span>2014</span></div>
+            <h3>RF 자산관리 솔루션 구축</h3>
+            <div class="project-scene scene--asset" aria-hidden="true"><div class="scene-surface">
+  <div class="scene-grid"></div><div class="scene-kicker"><span>RF / ASSET MANAGEMENT</span><span>06 / 08</span></div>
+  <div class="scene-wordmark">Wide<em>Asset.</em></div><div class="scene-phrase">RFID TAG READER / WIDEASSET S/W</div>
+  <div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
+  <div class="scene-visual"><img src="assets/images/asset_01.png" alt="" loading="lazy" width="1399" height="652"></div>
+  <div class="scene-annotation">IT ASSETS / OFFICE EQUIPMENT</div>
+  <div class="scene-bottom"><span>PDA / WideAsset S/W</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+ </div></div>
+            <div class="project-scope"><p>RFID Tag Reader 인터페이스 개발 · 데이터 조회 및 업데이트 모듈 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
+          </a>
+        </article>
+        <!-- 07 -->
+        <article id="project-signage" class="project-card reveal" data-category="platform">
+          <a class="project-open" data-project="signage" href="projects/signage.html" aria-label="Signage 솔루션 빌딩(건물) 영상홍보 통합안내 시스템 포트폴리오 보기">
+            <div class="project-meta"><span>Signage 솔루션</span><span>2012</span></div>
+            <h3>빌딩(건물) 영상홍보 통합안내 시스템</h3>
+            <div class="project-scene scene--signage" aria-hidden="true"><div class="scene-surface">
+  <div class="scene-grid"></div><div class="scene-kicker"><span>DIGITAL SIGNAGE / NETWORK</span><span>07 / 08</span></div>
+  <div class="scene-wordmark">Signage<em>Network.</em></div><div class="scene-phrase">CONTENT / SCHEDULE / DISTRIBUTION</div>
+  <div class="scene-graphic"><svg viewBox="0 0 400 330" fill="none" aria-hidden="true" focusable="false">
+    <path class="signage-link" d="M100 183H170V82H222M170 183H268M170 183V270H215"/>
+    <circle cx="170" cy="183" r="4" fill="currentColor"/>
+    <rect class="signage-display" x="30" y="137" width="100" height="72" rx="5"/>
+    <rect class="signage-pane" x="39" y="146" width="82" height="45" rx="2"/>
+    <path class="signage-content" d="M66 158L85 168L66 179Z M69 218H91 M80 209V218"/>
+    <rect class="signage-display" x="222" y="32" width="130" height="91" rx="5"/>
+    <rect class="signage-pane" x="232" y="42" width="73" height="61" rx="2"/>
+    <path class="signage-content" d="M313 49H341M313 60H341M313 71H333M240 111H334M258 62L278 73L258 85Z"/>
+    <rect class="signage-display" x="268" y="151" width="65" height="108" rx="5"/>
+    <rect class="signage-pane" x="276" y="159" width="49" height="62" rx="2"/>
+    <path class="signage-content" d="M284 231H317M284 240H306"/>
+    <rect class="signage-display" x="215" y="278" width="127" height="30" rx="4"/>
+    <path class="signage-content" d="M228 293H272M281 293H330"/>
+    <path class="signage-link" d="M52 243H148V295H196M192 22H369V136"/>
+  </svg></div>
+  <div class="scene-annotation">ONE SYSTEM / MULTIPLE SCREENS</div>
+  <div class="scene-bottom"><span>MULTI-VISION / DID</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+ </div></div>
+            <div class="project-scope"><p>중앙 관리 시스템 및 서버 구축 · 스케줄 및 파일 전송 로직 구현 · Infotrans Editor 및 Multi Manager 기능 구현</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
+          </a>
+        </article>
+        <!-- 08 -->
+        <article id="project-gps-building" class="project-card reveal" data-category="mobility">
+          <a class="project-open" data-project="gps-building" href="projects/gps-building.html" aria-label="GPS 솔루션 GPS 트래킹 기반 위치확인 시스템 개발 포트폴리오 보기">
+            <div class="project-meta"><span>GPS 솔루션</span><span>2010</span></div>
+            <h3>GPS 트래킹 기반 위치확인 시스템 개발</h3>
+            <div class="project-scene scene--gps-building" aria-hidden="true"><div class="scene-surface">
+  <div class="scene-grid"></div><div class="scene-kicker"><span>GPS / LOCATION TRACKING</span><span>08 / 08</span></div>
+  <div class="scene-wordmark">GPS<em>Tracking.</em></div><div class="scene-phrase">LOCATE / SAVE / NAVIGATE</div>
+  <div class="scene-graphic"><svg viewBox="0 0 400 360" fill="none" aria-hidden="true" focusable="false">
+    <path class="gps-contour" d="M30 355C-25 291 16 235 84 235S186 278 234 226S241 128 314 111S384 37 364 0 M3 331C-14 281 33 254 79 257S188 307 252 242S259 147 326 131S412 53 386 0 M56 360C0 300 32 277 79 282S200 330 272 262S278 166 340 152S425 91 402 41"/>
+    <circle class="gps-contour" cx="284" cy="109" r="49"/><circle class="gps-contour" cx="284" cy="109" r="71"/><circle class="gps-contour" cx="284" cy="109" r="93"/>
+    <path class="gps-route" d="M73 281H151Q169 281 169 263V219Q169 202 189 202H263Q284 202 284 182V117"/>
+    <circle class="gps-point" cx="73" cy="281" r="7"/><circle class="gps-point" cx="169" cy="227" r="5"/>
+    <path class="gps-pin" d="M284 117S263 96 263 81A21 21 0 0 1 305 81C305 96 284 117 284 117Z"/>
+    <circle class="gps-pin-center" cx="284" cy="81" r="7"/>
+    <path class="gps-contour" d="M333 279H357M345 267V291M79 137H95M87 129V145"/>
+  </svg></div>
+  <div class="scene-annotation">POSITION / DESTINATION / DIRECTION</div>
+  <div class="scene-bottom"><span>GPS / OUTDOOR TRACKER</span><span class="scene-view">EXPLORE PROJECT <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+ </div></div>
+            <div class="project-scope"><p>GPS Manager · Location Manager · Navigation Manager 기반 디바이스 드라이버 개발</p><span>프로젝트 자세히 보기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></div>
+          </a>
+        </article>
+      </div>
+    </section>
+
+    <section id="patents" class="patents section" aria-labelledby="patents-title">
+      <div class="wrap">
+        <div class="section-top reveal"><p class="section-label"><span>04 /</span> PATENTS & R&D</p><span class="side-note">IDEAS INTO INTELLECTUAL PROPERTY</span></div>
+        <div class="patents-heading reveal">
+          <div><h2 id="patents-title">기술의 깊이를<br><span>보여주는 특허.</span></h2><p>특정 기술에 안주하지 않는 R&D 프로세스를 핵심 과정으로 삼고 있습니다.<br>미래 비즈니스 환경 변화에 선제적으로 대응하기 위해 지속적인 발굴 및 지식재산권 확보에 주력하고 있습니다.<br>특허와 인증은 당사가 미래에도 신뢰할 수 있는 파트너임을 증명하는 잠재적 능력입니다.</p></div>
+          <div class="patent-signature" aria-hidden="true"><span class="patent-seal"><i></i><i></i><i></i><b>✳</b></span><span>RESEARCH.<br>DEVELOPMENT.<br>INNOVATION.</span></div>
+        </div>
+        <div class="patent-grid">
+          <article class="patent-card reveal">
+            <a class="patent-document" href="assets/images/patent-virtual-image.png" target="_blank" rel="noopener" aria-label="객체 가상 이미지 구현 방법 특허증 크게 보기, 새 탭">
+              <span class="patent-document-label" aria-hidden="true">PATENT / 01</span>
+              <img src="assets/images/patent-virtual-image.png" alt="객체 가상 이미지 구현 방법 특허증, 제10-0951362호" loading="lazy" width="960" height="1396">
+              <span class="patent-document-action">특허증 크게 보기 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></span>
+            </a>
+            <div class="patent-information">
+              <p class="patent-kicker"><span>01</span> VIRTUAL IMAGE</p>
+              <h3>객체 가상 이미지 <span class="patent-title-line">구현 방법</span></h3>
+              <p class="patent-description">실제 객체를 기반으로 가상 이미지를 생성하고, 현실과 통합하는 기술입니다.</p>
+              <dl class="patent-data"><div><dt>특허번호</dt><dd>제10-0951362호</dd></div><div><dt>출원일</dt><dd><time datetime="2008-07-04">2008.07.04</time></dd></div><div><dt>등록일</dt><dd><time datetime="2010-03-30">2010.03.30</time></dd></div></dl>
+            </div>
+          </article>
+          <article class="patent-card reveal">
+            <a class="patent-document" href="assets/images/patent-liquid-dispenser.png" target="_blank" rel="noopener" aria-label="액체 세제 자동 판매 장치 특허증 크게 보기, 새 탭">
+              <span class="patent-document-label" aria-hidden="true">PATENT / 02</span>
+              <img src="assets/images/patent-liquid-dispenser.png" alt="액체 세제 자동 판매 장치 특허증, 제10-1099507호" loading="lazy" width="960" height="1424">
+              <span class="patent-document-action">특허증 크게 보기 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></span>
+            </a>
+            <div class="patent-information">
+              <p class="patent-kicker"><span>02</span> DEVICE CONTROL</p>
+              <h3>액체 세제 <span class="patent-title-line">자동 판매 장치</span></h3>
+              <p class="patent-description">액체 세제의 자동 판매 및 관리를 위한 기술로 효율적인 자판기 시스템 제어에 대한 특허.</p>
+              <dl class="patent-data"><div><dt>특허번호</dt><dd>제10-1099507호</dd></div><div><dt>출원일</dt><dd><time datetime="2010-07-28">2010.07.28</time></dd></div><div><dt>등록일</dt><dd><time datetime="2011-12-21">2011.12.21</time></dd></div></dl>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section id="journey" class="journey section" aria-labelledby="journey-title"><div class="wrap"><div class="section-top reveal"><p class="section-label"><span>05 /</span> OUR JOURNEY</p><span class="side-note">A CONTINUOUS JOURNEY OF INNOVATION</span></div><div class="journey-heading reveal"><h2 id="journey-title">새로운 길은,<br>계속됩니다.</h2><p>첫 서버에서 글로벌 모빌리티까지.<br>기술이 바뀌어도, 더 나은 답을 찾는 우리의 태도는 같습니다.</p></div><div class="timeline-tabs reveal" role="tablist" aria-label="트론트 주요 연혁"><button id="year-2008" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2008">2008<span>THE BEGINNING</span></button><button id="year-2012" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2012">2012<span>NEW CONNECTIONS</span></button><button id="year-2018" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2018">2018<span>MOVING FORWARD</span></button><button id="year-2022" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2022">2022<span>EVERYDAY IMPACT</span></button><button id="year-2025" role="tab" aria-selected="true" aria-controls="timeline-panel" tabindex="0" data-year="2025">2025<span>WHAT'S NEXT</span></button></div><div id="timeline-panel" class="timeline-panel reveal" role="tabpanel" aria-labelledby="year-2025" tabindex="0"><span class="timeline-year" aria-hidden="true">2025</span><div class="timeline-detail"><p class="eyebrow">WHAT'S NEXT</p><h3>더 넓은 연결, 다음의 가능성</h3><p class="timeline-description">블록체인 기반 기부 플랫폼 GivOn 관리자 개발과 소규모 기관차 관제 프로그램 개발로 기술의 쓰임을 넓혀갑니다.</p><div class="tags"><span>Web3</span><span>관제 시스템</span><span>디지털 플랫폼</span></div></div></div></div></section>
+
+    <section id="contact" class="contact contact-form-section section" aria-labelledby="contact-title">
+      <div class="wrap">
+        <div class="section-top reveal"><p class="section-label"><span>06 /</span> LET'S CONNECT</p></div>
+        <div class="contact-form-layout">
+          <div class="contact-form-intro reveal">
+            <h2 id="contact-title">어떤 프로젝트를<br><em>생각하고 계신가요?</em></h2>
+            <p>아직 구체적이지 않아도 괜찮습니다.<br> 만들고 싶은 서비스와 해결하고 싶은 문제를 들려주세요.<br> 아이디어의 다음 단계를 함께 고민하겠습니다.</p>
+            <div class="contact-form-topics" aria-label="문의 주제"><span>프로젝트 의뢰</span><span>기술 상담</span><span>파트너십</span></div>
+            <div class="contact-form-art" aria-hidden="true"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></div>
+            <div class="contact-form-caption" aria-hidden="true">YOUR IDEA. OUR NEXT CHAPTER.</div>
+          </div>
+          <form class="inquiry-form reveal" aria-labelledby="inquiry-title">
+            <div class="inquiry-heading"><h3 id="inquiry-title">프로젝트 문의</h3><p><span class="inquiry-required">*</span> 필수 입력</p></div>
+            <div class="inquiry-fields">
+              <div class="inquiry-field"><label for="inquiry-name">이름 <span class="inquiry-required">*</span></label><input id="inquiry-name" name="name" type="text" autocomplete="name" placeholder="성함을 입력해 주세요" maxlength="80" required></div>
+              <div class="inquiry-field"><label for="inquiry-company">회사명 <span>선택</span></label><input id="inquiry-company" name="company" type="text" autocomplete="organization" placeholder="회사 또는 팀 이름" maxlength="120"></div>
+              <div class="inquiry-field"><label for="inquiry-email">이메일 <span class="inquiry-required">*</span></label><input id="inquiry-email" name="email" type="email" autocomplete="email" placeholder="name@company.com" maxlength="254" required></div>
+              <div class="inquiry-field"><label for="inquiry-phone">연락처 <span>선택</span></label><input id="inquiry-phone" name="phone" type="tel" autocomplete="tel" placeholder="010-0000-0000" maxlength="40"></div>
+              <div class="inquiry-field inquiry-field--wide"><label for="inquiry-message">문의내용 <span class="inquiry-required">*</span></label><textarea id="inquiry-message" name="message" rows="4" placeholder="프로젝트 소개, 필요한 기능, 예상 일정 등을 자유롭게 남겨주세요." maxlength="2000" aria-describedby="inquiry-counter" required></textarea><p id="inquiry-counter" class="inquiry-counter"><span data-message-count>0</span> / 2,000</p></div>
+              <div class="inquiry-field inquiry-field--wide">
+                <label for="inquiry-attachments" class="inquiry-attachment-label">파일첨부 <span>선택</span></label>
+                <div class="inquiry-upload">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 10 4-4 4 4M12 6v10M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4"/></svg>
+                  <div><strong>파일을 선택하거나 여기에 놓아주세요</strong><small id="inquiry-file-help">소개서, 기획안 등 · 최대 5개, 총 20MB</small></div>
+                  <input id="inquiry-attachments" name="attachments" type="file" multiple aria-describedby="inquiry-file-help inquiry-upload-status">
+                </div>
+                <ul class="inquiry-files" aria-label="선택한 첨부파일"></ul>
+                <p id="inquiry-upload-status" class="inquiry-upload-status" role="status" aria-live="polite"></p>
+              </div>
+            </div>
+            <button class="inquiry-submit" type="submit" disabled>문의 보내기 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></button>
+            <noscript><p class="inquiry-noscript-note">문의 폼을 사용하려면 JavaScript를 활성화해 주세요.</p></noscript>
+          </form>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer"><div class="wrap"><div class="footer-top"><a class="footer-name" href="#home" aria-label="트론트 홈">TRONT<span class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a><p>THE ROAD NOT TAKEN.<br>THE FUTURE WE CREATE.</p><a class="back-top" href="#home" aria-label="맨 위로"><svg class="arrow-icon arrow-icon--up" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a></div><div class="footer-bottom"><span>주식회사 트론트 <span class="footer-divider">|</span> 대표이사 김칠수</span><span>© <span id="copyright-year">2026</span> TRONT. All rights reserved.</span><a href="docs/(주)트론트_회사소개서_ver.1.2.0_20251202_압축.pdf" download="TRONT_회사소개서.pdf">회사소개서 다운로드 <svg class="arrow-icon arrow-icon--down-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a></div></div></footer>
+
+  <dialog id="inquiry-success-dialog" class="inquiry-dialog" aria-labelledby="inquiry-success-title" aria-describedby="inquiry-success-description">
+    <button type="button" class="inquiry-dialog-close" data-close-inquiry aria-label="전송 완료 안내 닫기"><span aria-hidden="true">×</span></button>
+    <div class="inquiry-success-mark" aria-hidden="true"><svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m8 16 5 5L24 10"/></svg></div>
+    <p class="inquiry-success-label">THANK YOU FOR REACHING OUT</p>
+    <h2 id="inquiry-success-title">문의가 전송되었습니다.</h2>
+    <p id="inquiry-success-description">트론트에 관심을 가져주셔서 감사합니다.<br>남겨주신 내용을 확인한 후 연락드리겠습니다.</p>
+    <button type="button" class="inquiry-dialog-confirm" data-close-inquiry autofocus>확인</button>
+  </dialog>
+
+  <dialog id="map-dialog" class="map-dialog" aria-labelledby="map-dialog-title" aria-describedby="map-dialog-address">
+    <header class="map-dialog-header">
+      <div><p class="tiny-label">COME FIND US</p><h2 id="map-dialog-title">트론트 오시는 길</h2></div>
+      <button type="button" class="map-dialog-close" aria-label="지도 닫기" autofocus><span aria-hidden="true">×</span> 닫기</button>
+    </header>
+    <div class="map-dialog-body" aria-busy="true">
+      <div class="map-dialog-canvas"></div>
+      <div class="map-dialog-status" role="status"><p>지도를 불러오는 중입니다.</p><button type="button" class="map-dialog-retry" hidden>다시 불러오기</button></div>
+    </div>
+    <footer class="map-dialog-footer"><address id="map-dialog-address">대구광역시 북구 경대로17길 47<br><strong>IT융합산업빌딩 1203호</strong></address><span class="map-dialog-hint">바깥 영역을 누르면 닫힙니다.</span></footer>
+  </dialog>
+
+</body>
+</html>
--- a/index.html
+++ b/index.html
@@ -6,20 +6,27 @@
  <meta name="theme-color" content="#f5f5ef">
  <meta name="description" content="2008년부터 이어온 기술의 연결. 트론트는 스마트 모빌리티, 산업 관제, Web3, 모바일·웹 플랫폼으로 비즈니스의 다음을 만듭니다.">
  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://tront.noname.company/">
+  <meta property="og:image" content="https://tront.noname.company/assets/images/tront-logo.png">
+  <meta property="og:image:alt" content="TRONT — The road not taken">
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:image" content="https://tront.noname.company/assets/images/tront-logo.png">
  <meta property="og:title" content="TRONT — 기술로 연결하고, 가능성을 확장하다">
  <meta property="og:description" content="스마트 모빌리티부터 디지털 플랫폼까지. 2008년부터 함께해 온 IT 솔루션 파트너, 주식회사 트론트.">
  <title>TRONT — 기술로 연결하고, 가능성을 확장하다</title>
  <link rel="icon" href="assets/images/tront-logo.png" type="image/png">
  <link rel="stylesheet" href="styles.css">
-  <link rel="stylesheet" href="portfolio.css">
+  <link rel="stylesheet" href="portfolio.css?v=780175b64ad9">
  <link rel="stylesheet" href="company.css">
-  <script src="script.js" defer></script>
+  <script src="script.js?v=20261006-contact-email" defer></script>
  <script src="portfolio.js" defer></script>
  <link rel="stylesheet" href="map-dialog.css">
  <script src="map-dialog.js" defer></script>
 <link rel="stylesheet" href="image-viewer.css">
 <script src="image-viewer.js" defer></script>
  <link rel="stylesheet" href="icons.css">
+  <link rel="stylesheet" href="contact-email.css">
+  <script src="contact-email.js" defer></script>
 </head>
 <body>
  <!-- Shared arrow shape from assets/icons/arrow_right_alt.svg. -->
@@ -32,11 +39,11 @@
      <nav class="desktop-nav" aria-label="주요 메뉴">
        <a href="#about">회사소개</a><a href="#expertise">사업영역</a><a href="#work">프로젝트</a><a href="#patents">특허</a><a href="#journey">걸어온 길</a>
      </nav>
-      <a class="header-contact" href="#contact">함께 만들어가요 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a>
+      <a class="header-contact" href="#contact">프로젝트 문의 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a>
      <button class="menu-toggle" aria-label="메뉴 열기" aria-controls="mobile-menu" aria-expanded="false"><span></span><span></span></button>
    </div>
    <nav id="mobile-menu" class="mobile-menu" aria-label="모바일 메뉴" hidden>
-      <a href="#about"><span>01</span>회사소개 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#expertise"><span>02</span>사업영역 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#work"><span>03</span>프로젝트 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#patents"><span>04</span>특허 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#journey"><span>05</span>걸어온 길 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#contact"><span>06</span>함께 만들어가요 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a>
+      <a href="#about"><span>01</span>회사소개 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#expertise"><span>02</span>사업영역 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#work"><span>03</span>프로젝트 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#patents"><span>04</span>특허 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#journey"><span>05</span>걸어온 길 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a><a href="#contact"><span>06</span>프로젝트 문의 <svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a>
      <p>THE ROAD NOT TAKEN.<br>YOUR NEXT TECHNOLOGY PARTNER.</p>
    </nav>
  </header>
@@ -271,8 +278,6 @@
          </a>
        </article>
      </div>
-      <!-- footnote -->
-      <p class="work-footnote">소개서에 수록된 실제 프로젝트와 수행 기간을 기준으로 구성했습니다.</p>
    </section>

    <section id="patents" class="patents section" aria-labelledby="patents-title">
@@ -310,17 +315,39 @@
            </div>
          </article>
        </div>
-        <div class="patents-footnote reveal"><p>회사소개서에 수록된 특허증을 기준으로 소개합니다.</p><a class="text-link" href="docs/(주)트론트_회사소개서_ver.1.2.0_20251202_압축.pdf#page=4" target="_blank" rel="noopener">소개서에서 보기 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a></div>
      </div>
    </section>

    <section id="journey" class="journey section" aria-labelledby="journey-title"><div class="wrap"><div class="section-top reveal"><p class="section-label"><span>05 /</span> OUR JOURNEY</p><span class="side-note">A CONTINUOUS JOURNEY OF INNOVATION</span></div><div class="journey-heading reveal"><h2 id="journey-title">새로운 길은,<br>계속됩니다.</h2><p>첫 서버에서 글로벌 모빌리티까지.<br>기술이 바뀌어도, 더 나은 답을 찾는 우리의 태도는 같습니다.</p></div><div class="timeline-tabs reveal" role="tablist" aria-label="트론트 주요 연혁"><button id="year-2008" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2008">2008<span>THE BEGINNING</span></button><button id="year-2012" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2012">2012<span>NEW CONNECTIONS</span></button><button id="year-2018" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2018">2018<span>MOVING FORWARD</span></button><button id="year-2022" role="tab" aria-selected="false" aria-controls="timeline-panel" tabindex="-1" data-year="2022">2022<span>EVERYDAY IMPACT</span></button><button id="year-2025" role="tab" aria-selected="true" aria-controls="timeline-panel" tabindex="0" data-year="2025">2025<span>WHAT'S NEXT</span></button></div><div id="timeline-panel" class="timeline-panel reveal" role="tabpanel" aria-labelledby="year-2025" tabindex="0"><span class="timeline-year" aria-hidden="true">2025</span><div class="timeline-detail"><p class="eyebrow">WHAT'S NEXT</p><h3>더 넓은 연결, 다음의 가능성</h3><p class="timeline-description">블록체인 기반 기부 플랫폼 GivOn 관리자 개발과 소규모 기관차 관제 프로그램 개발로 기술의 쓰임을 넓혀갑니다.</p><div class="tags"><span>Web3</span><span>관제 시스템</span><span>디지털 플랫폼</span></div></div></div></div></section>

-    <section id="contact" class="contact section" aria-labelledby="contact-title"><div class="wrap"><div class="section-top reveal"><p class="section-label"><span>06 /</span> LET'S CONNECT</p><span class="side-note">YOUR NEXT CHAPTER STARTS HERE.</span></div><div class="contact-layout"><div class="contact-copy reveal"><h2 id="contact-title">다음의 가능성,<br>함께 만들까요<span>?</span></h2><p>새로운 서비스의 시작부터 복잡한 기술의 해답까지.<br>트론트와 새로운 프로젝트를 함께 만들어가요.</p><a class="contact-cta" data-contact-email href="mailto:hello@tront.example">함께 프로젝트 만들기 <span aria-hidden="true" class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a></div><div class="contact-details reveal"><div class="contact-row"><span class="tiny-label">EMAIL</span><div><a data-contact-email href="mailto:hello@tront.example">hello@tront.example</a><button class="copy-email" aria-label="이메일 주소 복사">복사 <span aria-hidden="true">⧉</span></button></div></div><div class="contact-row"><span class="tiny-label">PHONE</span><a data-contact-phone href="tel:0530000000">053-123-4567</a></div><p class="contact-placeholder">이메일과 연락처 정보 없음.</p><div class="contact-row address-row"><span class="tiny-label">COME FIND US</span><address>대구광역시 북구 경대로17길 47<br>IT융합산업빌딩 1203호</address><button type="button" class="map-link" aria-haspopup="dialog" aria-controls="map-dialog">지도에서 보기 <span aria-hidden="true">⌖</span></button></div></div></div></div></section>
+    <section id="contact" class="contact contact-email-section section" aria-labelledby="contact-title">
+      <div class="wrap">
+        <div class="section-top reveal"><p class="section-label"><span>06 /</span> LET'S CONNECT</p><span class="side-note">YOUR IDEA. OUR NEXT CHAPTER.</span></div>
+        <div class="email-intro reveal">
+          <h2 id="contact-title">다음의 가능성,<br>이 한 줄에서 <em>시작됩니다.</em></h2>
+          <p>아직 구체적이지 않아도 괜찮습니다.<br>만들고 싶은 것, 해결하고 싶은 것.<br>당신의 생각을 이메일로 들려주세요.</p>
+        </div>
+        <div class="email-channel reveal">
+          <div class="email-channel-meta"><span>01 — DIRECT CONNECTION</span><span>PROJECT / TECH / PARTNERSHIP</span></div>
+          <div class="email-address-row">
+            <span class="email-route" aria-hidden="true">↳</span>
+            <p class="email-address" id="contact-email-address">hello@tront.example</p>
+            <button class="email-copy" type="button" aria-label="이메일 주소 복사" aria-describedby="contact-email-address">
+              <img src="assets/icons/content_copy.svg" width="24" height="24" alt="">
+              <span class="email-copy-label">주소 복사</span><span class="email-copy-index arrow-slot" aria-hidden="true"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span>
+            </button>
+          </div>
+          <div class="email-channel-footer"><span class="email-channel-note">좋은 대화가, 좋은 프로젝트의 시작이니까요.</span><p class="email-copy-status" role="status" aria-live="polite">COPY THE ADDRESS. START A CONVERSATION.</p></div>
+          <noscript><p class="email-noscript">이메일 주소를 선택해 직접 복사해 주세요.</p></noscript>
+        </div>
+      </div>
+    </section>
  </main>

  <footer class="site-footer"><div class="wrap"><div class="footer-top"><a class="footer-name" href="#home" aria-label="트론트 홈">TRONT<span class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></span></a><p>THE ROAD NOT TAKEN.<br>THE FUTURE WE CREATE.</p><a class="back-top" href="#home" aria-label="맨 위로"><svg class="arrow-icon arrow-icon--up" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a></div><div class="footer-bottom"><span>주식회사 트론트 <span class="footer-divider">|</span> 대표이사 김칠수</span><span>© <span id="copyright-year">2026</span> TRONT. All rights reserved.</span><a href="docs/(주)트론트_회사소개서_ver.1.2.0_20251202_압축.pdf" download="TRONT_회사소개서.pdf">회사소개서 다운로드 <svg class="arrow-icon arrow-icon--down-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></a></div></div></footer>

+
+
  <dialog id="map-dialog" class="map-dialog" aria-labelledby="map-dialog-title" aria-describedby="map-dialog-address">
    <header class="map-dialog-header">
      <div><p class="tiny-label">COME FIND US</p><h2 id="map-dialog-title">트론트 오시는 길</h2></div>
@@ -333,6 +360,5 @@
    <footer class="map-dialog-footer"><address id="map-dialog-address">대구광역시 북구 경대로17길 47<br><strong>IT융합산업빌딩 1203호</strong></address><span class="map-dialog-hint">바깥 영역을 누르면 닫힙니다.</span></footer>
  </dialog>

-  <div class="toast" role="status" aria-live="polite"></div>
 </body>
 </html>
--- a/projects/asset.html
+++ b/projects/asset.html
@@ -5,7 +5,7 @@
 <meta name="theme-color" content="#f5f5ef"><meta name="description" content="국내향 RF 기반 IT 자산 및 사무기기 관리 솔루션 개발">
 <meta property="og:type" content="website"><meta property="og:title" content="WideAsset S/W — RF 자산관리 솔루션 구축 | TRONT"><meta property="og:description" content="국내향 RF 기반 IT 자산 및 사무기기 관리 솔루션 개발">
 <title>WideAsset S/W — RF 자산관리 솔루션 구축 | TRONT</title>
- <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
+ <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css?v=780175b64ad9"><script src="../portfolio.js" defer></script>
 <link rel="stylesheet" href="../image-viewer.css">
 <script src="../image-viewer.js" defer></script>
  <link rel="stylesheet" href="../icons.css">
@@ -27,7 +27,7 @@
  <div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
  <div class="scene-visual"><img src="../assets/images/asset_01.png" alt="" loading="eager" width="1399" height="652"></div>
  <div class="scene-annotation">IT ASSETS / OFFICE EQUIPMENT</div>
-  <div class="scene-bottom"><span>PDA / WideAsset S/W</span><span class="scene-view">PROJECT SCREENS <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+  <div class="scene-bottom"><span>PDA / WideAsset S/W</span><span class="scene-view">PROJECT SCREENS</span></div>
 </div></div></div>
  <nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>WideAsset S/W</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">시스템 구성</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
  <section id="overview" class="case-overview case-section wrap">
--- a/projects/bems.html
+++ b/projects/bems.html
@@ -5,7 +5,7 @@
 <meta name="theme-color" content="#f5f5ef"><meta name="description" content="빌딩 내 온/습도 센서, 공조기 가동 센서 및 사용 전력 관리를 전력 관리 관제 프로그램 개발">
 <meta property="og:type" content="website"><meta property="og:title" content="BEMS — 빌딩 에너지 통합 관리 시스템 BEMS 개발 | TRONT"><meta property="og:description" content="빌딩 내 온/습도 센서, 공조기 가동 센서 및 사용 전력 관리를 전력 관리 관제 프로그램 개발">
 <title>BEMS — 빌딩 에너지 통합 관리 시스템 BEMS 개발 | TRONT</title>
- <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
+ <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css?v=780175b64ad9"><script src="../portfolio.js" defer></script>
 <link rel="stylesheet" href="../image-viewer.css">
 <script src="../image-viewer.js" defer></script>
  <link rel="stylesheet" href="../icons.css">
@@ -27,7 +27,7 @@
  <div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
  <div class="scene-visual"><img src="../assets/images/bems_01.png" alt="" loading="eager" width="1199" height="534"></div>
  <div class="scene-annotation">BUILDING ENERGY MANAGEMENT</div>
-  <div class="scene-bottom"><span>웹</span><span class="scene-view">PROJECT SCREENS <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+  <div class="scene-bottom"><span>웹</span><span class="scene-view">PROJECT SCREENS</span></div>
 </div></div></div>
  <nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>BEMS</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">개발 화면</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
  <section id="overview" class="case-overview case-section wrap">
--- a/projects/bispet.html
+++ b/projects/bispet.html
@@ -5,7 +5,7 @@
 <meta name="theme-color" content="#f5f5ef"><meta name="description" content="반려 동물의 정보 관리 및 반려동물과 생활 기록(피드 작성, 일정, 산책 활동) 기록한 SNS 앱 개발">
 <meta property="og:type" content="website"><meta property="og:title" content="BISPET — 애견인들 위한 커뮤니티 개발 | TRONT"><meta property="og:description" content="반려 동물의 정보 관리 및 반려동물과 생활 기록(피드 작성, 일정, 산책 활동) 기록한 SNS 앱 개발">
 <title>BISPET — 애견인들 위한 커뮤니티 개발 | TRONT</title>
- <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
+ <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css?v=780175b64ad9"><script src="../portfolio.js" defer></script>
 <link rel="stylesheet" href="../image-viewer.css">
 <script src="../image-viewer.js" defer></script>
  <link rel="stylesheet" href="../icons.css">
@@ -27,7 +27,7 @@
  <div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
  <div class="scene-visual"><img src="../assets/images/bispet_01.png" alt="" loading="eager" width="702" height="1440"></div>
  <div class="scene-annotation">MOBILE APP / ADMIN</div>
-  <div class="scene-bottom"><span>모바일 앱 / 관리자 화면</span><span class="scene-view">PROJECT SCREENS <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+  <div class="scene-bottom"><span>모바일 앱 / 관리자 화면</span><span class="scene-view">PROJECT SCREENS</span></div>
 </div></div></div>
  <nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>BISPET</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">개발 화면</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
  <section id="overview" class="case-overview case-section wrap">
--- a/projects/givon.html
+++ b/projects/givon.html
@@ -5,7 +5,7 @@
 <meta name="theme-color" content="#f5f5ef"><meta name="description" content="기부를 위한 단체 관리, 기부/봉사 프로젝트 생성 및 기부 현황를 관리를 위한 관리자 화면 개발">
 <meta property="og:type" content="website"><meta property="og:title" content="GivOn — 블록체인 기반 기부 플랫폼 관리자 페이지 개발 | TRONT"><meta property="og:description" content="기부를 위한 단체 관리, 기부/봉사 프로젝트 생성 및 기부 현황를 관리를 위한 관리자 화면 개발">
 <title>GivOn — 블록체인 기반 기부 플랫폼 관리자 페이지 개발 | TRONT</title>
- <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
+ <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css?v=780175b64ad9"><script src="../portfolio.js" defer></script>
 <link rel="stylesheet" href="../image-viewer.css">
 <script src="../image-viewer.js" defer></script>
  <link rel="stylesheet" href="../icons.css">
@@ -27,7 +27,7 @@
  <div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
  <div class="scene-visual"><img src="../assets/images/givon_01.png" alt="" loading="eager" width="1774" height="528"></div>
  <div class="scene-annotation">DONATION PLATFORM / ADMIN</div>
-  <div class="scene-bottom"><span>관리자 화면</span><span class="scene-view">PROJECT SCREENS <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+  <div class="scene-bottom"><span>관리자 화면</span><span class="scene-view">PROJECT SCREENS</span></div>
 </div></div></div>
  <nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>GivOn</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">개발 화면</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
  <section id="overview" class="case-overview case-section wrap">
--- a/projects/gps-building.html
+++ b/projects/gps-building.html
@@ -5,7 +5,7 @@
 <meta name="theme-color" content="#f5f5ef"><meta name="description" content="GPS 트래킹 방식을 활용, 옥외 위치 추적기를 개발하고 사용자의 현재 위치 확인, 목적지 설정, 이동 방향 추적등 기능을 수행할 수 있도록 시스템 구축">
 <meta property="og:type" content="website"><meta property="og:title" content="GPS 솔루션 — GPS 트래킹 기반 위치확인 시스템 개발 | TRONT"><meta property="og:description" content="GPS 트래킹 방식을 활용, 옥외 위치 추적기를 개발하고 사용자의 현재 위치 확인, 목적지 설정, 이동 방향 추적등 기능을 수행할 수 있도록 시스템 구축">
 <title>GPS 솔루션 — GPS 트래킹 기반 위치확인 시스템 개발 | TRONT</title>
- <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
+ <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css?v=780175b64ad9"><script src="../portfolio.js" defer></script>
 <link rel="stylesheet" href="../image-viewer.css">
 <script src="../image-viewer.js" defer></script>
  <link rel="stylesheet" href="../icons.css">
@@ -34,7 +34,7 @@
    <path class="gps-contour" d="M333 279H357M345 267V291M79 137H95M87 129V145"/>
  </svg></div>
  <div class="scene-annotation">POSITION / DESTINATION / DIRECTION</div>
-  <div class="scene-bottom"><span>GPS / OUTDOOR TRACKER</span><span class="scene-view">PROJECT SCREENS <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+  <div class="scene-bottom"><span>GPS / OUTDOOR TRACKER</span><span class="scene-view">PROJECT SCREENS</span></div>
 </div></div></div>
  <nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>GPS 솔루션</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">시스템 구성</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
  <section id="overview" class="case-overview case-section wrap">
--- a/projects/mobility.html
+++ b/projects/mobility.html
@@ -5,7 +5,7 @@
 <meta name="theme-color" content="#f5f5ef"><meta name="description" content="현대, 기아 자동차 국내향 및 해외향(북미, 유럽, 남미, 중동, 호주) HMI 외주 개발 및 Engine App 개발">
 <meta property="og:type" content="website"><meta property="og:title" content="현대 오토에버 — 국내향 및 해외향 내비게이션 HMI 개발 | TRONT"><meta property="og:description" content="현대, 기아 자동차 국내향 및 해외향(북미, 유럽, 남미, 중동, 호주) HMI 외주 개발 및 Engine App 개발">
 <title>현대 오토에버 — 국내향 및 해외향 내비게이션 HMI 개발 | TRONT</title>
- <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
+ <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css?v=780175b64ad9"><script src="../portfolio.js" defer></script>
 <link rel="stylesheet" href="../image-viewer.css">
 <script src="../image-viewer.js" defer></script>
  <link rel="stylesheet" href="../icons.css">
@@ -27,7 +27,7 @@
  <div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
  <div class="scene-visual"><img src="../assets/images/mobility_01.png" alt="" loading="eager" width="1577" height="727"></div>
  <div class="scene-annotation">HYUNDAI / KIA</div>
-  <div class="scene-bottom"><span>차량용 내비게이션</span><span class="scene-view">PROJECT SCREENS <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+  <div class="scene-bottom"><span>차량용 내비게이션</span><span class="scene-view">PROJECT SCREENS</span></div>
 </div></div></div>
  <nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>현대 오토에버</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">개발 화면</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
  <section id="overview" class="case-overview case-section wrap">
--- a/projects/pharmacy.html
+++ b/projects/pharmacy.html
@@ -5,7 +5,7 @@
 <meta name="theme-color" content="#f5f5ef"><meta name="description" content="약사님들을 위한 구인/구직, 약국 매물, 약 정보, 커뮤니티를 제공하는 모바일 앱, 웹, 관리자 개발">
 <meta property="og:type" content="website"><meta property="og:title" content="모두의약국 — 약사님들의 커뮤니티 개발 | TRONT"><meta property="og:description" content="약사님들을 위한 구인/구직, 약국 매물, 약 정보, 커뮤니티를 제공하는 모바일 앱, 웹, 관리자 개발">
 <title>모두의약국 — 약사님들의 커뮤니티 개발 | TRONT</title>
- <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
+ <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css?v=780175b64ad9"><script src="../portfolio.js" defer></script>
 <link rel="stylesheet" href="../image-viewer.css">
 <script src="../image-viewer.js" defer></script>
  <link rel="stylesheet" href="../icons.css">
@@ -27,7 +27,7 @@
  <div class="scene-orbit"><i></i><i></i><i></i><i></i></div>
  <div class="scene-visual"><img src="../assets/images/pharmacy_01.png" alt="" loading="eager" width="702" height="1440"></div>
  <div class="scene-annotation">APP / WEB / ADMIN</div>
-  <div class="scene-bottom"><span>모바일 앱 / 웹</span><span class="scene-view">PROJECT SCREENS <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+  <div class="scene-bottom"><span>모바일 앱 / 웹</span><span class="scene-view">PROJECT SCREENS</span></div>
 </div></div></div>
  <nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>모두의약국</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">개발 화면</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
  <section id="overview" class="case-overview case-section wrap">
--- a/projects/signage.html
+++ b/projects/signage.html
@@ -5,7 +5,7 @@
 <meta name="theme-color" content="#f5f5ef"><meta name="description" content="빌딩(건물) 내 멀티비전 및 DID(Digital Information Display) TV 스크린을 활용, 영상 홍보 및 통합 안내 콘텐츠를 중앙에서 관리/분산 송출 하는 시스템 구축">
 <meta property="og:type" content="website"><meta property="og:title" content="Signage 솔루션 — 빌딩(건물) 영상홍보 통합안내 시스템 | TRONT"><meta property="og:description" content="빌딩(건물) 내 멀티비전 및 DID(Digital Information Display) TV 스크린을 활용, 영상 홍보 및 통합 안내 콘텐츠를 중앙에서 관리/분산 송출 하는 시스템 구축">
 <title>Signage 솔루션 — 빌딩(건물) 영상홍보 통합안내 시스템 | TRONT</title>
- <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css"><script src="../portfolio.js" defer></script>
+ <link rel="icon" href="../assets/images/tront-logo.png"><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../portfolio.css?v=780175b64ad9"><script src="../portfolio.js" defer></script>
 <link rel="stylesheet" href="../image-viewer.css">
 <script src="../image-viewer.js" defer></script>
  <link rel="stylesheet" href="../icons.css">
@@ -41,7 +41,7 @@
    <path class="signage-link" d="M52 243H148V295H196M192 22H369V136"/>
  </svg></div>
  <div class="scene-annotation">ONE SYSTEM / MULTIPLE SCREENS</div>
-  <div class="scene-bottom"><span>MULTI-VISION / DID</span><span class="scene-view">PROJECT SCREENS <b class="arrow-slot"><svg class="arrow-icon arrow-icon--up-right" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#arrow-right-alt"></use></svg></b></span></div>
+  <div class="scene-bottom"><span>MULTI-VISION / DID</span><span class="scene-view">PROJECT SCREENS</span></div>
 </div></div></div>
  <nav class="case-nav" aria-label="프로젝트 상세 메뉴"><div class="wrap"><span>Signage 솔루션</span><div><a href="#overview" aria-current="location">프로젝트 개요</a><a href="#screens">시스템 구성</a></div><span class="case-reading-progress" aria-hidden="true">00%</span></div></nav>
  <section id="overview" class="case-overview case-section wrap">
--- a/script.js
+++ b/script.js
@@ -1,27 +1,13 @@
-/* TRONT static website. Contact details below are intentionally temporary. */
+/* Shared interactions for the TRONT website. */
 (() => {
  'use strict';

-  const CONTACT = Object.freeze({
-    email: 'hello@tront.example', // Replace with the company's actual email.
-    phone: '053-000-0000',      // Replace with the company's actual phone.
-    temporary: true           // Set false after replacing both details.
-  });
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
  const $ = (selector, root = document) => root.querySelector(selector);
  const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];

  document.documentElement.classList.add('js-ready');
  $('#copyright-year').textContent = new Date().getFullYear();
-  $$('[data-contact-email]').forEach(link => {
-    link.href = `mailto:${CONTACT.email}`;
-    if (link.closest('.contact-row')) link.textContent = CONTACT.email;
-  });
-  $$('[data-contact-phone]').forEach(link => {
-    link.href = `tel:${CONTACT.phone.replace(/[^+\d]/g, '')}`;
-    link.textContent = CONTACT.phone;
-  });
-  $('.contact-placeholder').hidden = !CONTACT.temporary;

  // Mobile navigation is available without changing desktop navigation.
  const menuButton = $('.menu-toggle');
@@ -252,28 +238,6 @@
    });
  });

-  let toastTimer;
-  function notify(message) {
-    const toast = $('.toast');
-    toast.textContent = message;
-    toast.classList.add('is-visible');
-    clearTimeout(toastTimer);
-    toastTimer = setTimeout(() => toast.classList.remove('is-visible'), 3200);
-  }
-  $('.copy-email').addEventListener('click', async () => {
-    try {
-      if (!navigator.clipboard?.writeText) throw new Error('Clipboard unavailable');
-      await navigator.clipboard.writeText(CONTACT.email);
-      notify('이메일 주소를 복사했습니다.');
-    } catch {
-      const range = document.createRange();
-      range.selectNodeContents($('.contact-row [data-contact-email]'));
-      const selection = window.getSelection();
-      selection.removeAllRanges(); selection.addRange(range);
-      notify('이메일 주소를 선택했습니다. 복사 단축키를 사용해 주세요.');
-    }
-  });
-
  // Original Canvas artwork: an evolving, connected torus. No 3D library.
  const canvas = $('#connection-canvas');
  const ctx = canvas.getContext('2d');
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="000"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>`