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

- 메인 문의 영역을 이메일 주소와 복사 버튼으로 구성하고 복사 결과 안내를 추가
- 문의 폼 페이지를 별도로 보존하고 입력 검증, 파일 첨부 및 완료 안내 동작을 추가
- 제거된 문의 요소를 참조하던 공통 스크립트를 정리해 초기화 오류 방지
- 이메일 복사 버튼의 특수 문자 화살표를 공통 SVG로 통일
- 공유 시 특허증 대신 트론트 로고를 사용하도록 공유 메타 정보 지정
- 공통 스크립트와 포트폴리오 CSS에 버전 URL을 적용해 이전 CDN 캐시 우회
- 프로젝트 및 특허 영역의 자료 기준 안내와 소개서 보기 링크 제거
- 프로젝트 상세 페이지 8개의 상단 썸네일 화살표를 제거하고 마우스 반응 효과 유지
- 특허증 이미지 파일을 갱신하고 문의 구조와 동작 설명을 README에 반영

검증: 공통·이메일·문의 폼 JavaScript 문법 검사 및 변경 공백 검사 통과
확인: 버전이 붙은 운영 사이트 JS와 CSS가 로컬 파일과 동일함
참고: 문의 폼은 서버 전송 없이 화면 동작만 제공하며 이메일 주소는 임시 값 유지

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>