feat(ui): apply inquiry list and modal design

Apply the supplied inquiry layout to the list and native write/detail dialogs while preserving existing API requests, author controls, attachments, comments and search. Keep legacy entry links and confirm before discarding drafts.

Validation: 98 tests and syntax checks pass; mocked Chromium desktop/mobile and six author/session visibility scenarios pass.

egbim/index.html

@@ -1,29 +1,208 @@
 <!doctype html>
-<html lang="ko">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="description" content="EG-BIM Q&A 문의 게시판">
-  <title>EG-BIM Q&A | 바론컨설턴트</title>
-  <link rel="stylesheet" href="../assets/styles.css?v=20261030-owner-1">
-</head>
-<body>
-  <main class="qa-list-page">
-    <section class="page-hero">
-      <div class="hero-inner"><span class="hero-kicker">EG-BIM SUPPORT</span><h1>Q&amp;A</h1><p>EG-BIM 관련 문의하기</p></div>
-      <nav class="sub-nav" aria-label="EG-BIM 지원 메뉴"><div class="sub-nav-inner"><a href="index.html" aria-current="page">문의하기(Q&amp;A)</a><a href="#" aria-disabled="true" class="disabled-tab">원격지원</a></div></nav>
-    </section>
-    <section class="page-shell">
-      <div class="qa-list-heading"><h1>문의하기(Q&amp;A)</h1></div>
-      <form class="filter-panel" id="searchForm">
-        <div class="filter-row"><div class="chip-group"><label class="chip"><input type="radio" name="category" value="전체" checked>전체</label><label class="chip"><input type="radio" name="category" value="일반문의">일반</label><label class="chip"><input type="radio" name="category" value="개선문의">개선</label><label class="chip"><input type="radio" name="category" value="오류문의">오류</label></div><label class="check"><input type="checkbox" id="onlyMine">내가 작성한 글</label><span class="filter-spacer"></span><div class="search-form"><input id="query" type="search" maxlength="120" placeholder="검색어 입력 (오타·초성 지원)" aria-label="제목·내용·회사·부서·작성자 검색 (오타·초성 지원)"><button class="button search-button" type="submit"><span aria-hidden="true">⌕</span> 검색</button></div></div>
-      </form>
-      <p id="searchStatus" class="help-text" role="status" aria-live="polite" hidden></p>
-      <div class="table-wrap"><table class="qa-table"><caption class="sr-only">EG-BIM 문의 목록</caption><colgroup><col style="width:6%"><col style="width:8%"><col style="width:13%"><col style="width:11%"><col style="width:7%"><col style="width:38%"><col style="width:11%"><col style="width:6%"></colgroup><thead><tr><th>번호</th><th>구분</th><th>회사</th><th>부서</th><th>작성자</th><th>제목</th><th>등록일</th><th>상태</th></tr></thead><tbody id="qaRows"></tbody></table><div class="table-empty" id="tableEmpty">검색 조건에 맞는 문의가 없습니다.</div></div>
-      <div class="list-footer"><div class="pagination" id="pagination" aria-label="페이지 이동"></div><a class="button button-primary" href="write.html">문의등록</a></div>
-    </section>
-  </main>
-  <div id="toast" class="toast" role="status" aria-live="polite"></div>
-  <script src="config.js?v=20260921-3"></script><script src="app.js?v=20261030-owner-1"></script>
-</body>
-</html>
+<html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="EG-BIM 소프트웨어 문의"><title>S/W 문의 | 바론컨설턴트</title><link rel="stylesheet" href="../assets/styles.css?v=20261102-ui-1"><link rel="stylesheet" href="../assets/inquiry/inquiry.css?v=20261102-ui-1"></head><body>
+<main class="inquiry-page">
+        <section class="inquiry-hero" aria-labelledby="inquiry-title">
+          <div class="inquiry-hero__copy">
+            <h1 id="inquiry-title">S/W 문의</h1>
+            <p>소프트웨어 관련 문의하기</p>
+          </div>
+        </section>
+
+        <div class="inquiry-workspace">
+          <div class="inquiry-tabs-shell">
+            <div class="inquiry-tabs" role="tablist" aria-label="문의할 소프트웨어">
+              <button type="button" role="tab" id="tab-egbim" aria-controls="inquiry-panel" aria-selected="true" data-service="egbim" aria-label="EG-BIM 문의">
+                <span class="inquiry-tab-description">BIM 모델</span>
+                <picture class="inquiry-tab-logo"><source media="(max-width: 600px)" srcset="../assets/inquiry/egbim-symbol.svg" width="49" height="25" /><img src="../assets/inquiry/egbim.svg" alt="EG-BIM" width="150" height="26" /></picture>
+              </button>
+              <button type="button" role="tab" id="tab-tova" aria-controls="inquiry-panel" aria-selected="false" aria-disabled="true" disabled tabindex="-1" data-service="tova" aria-label="TOVA 문의">
+                <span class="inquiry-tab-description">통합 교통 수요분석 <span class="inquiry-coming-soon">준비중</span></span>
+                <span class="inquiry-tab-logo"><img src="../assets/inquiry/tova.svg" alt="TOVA" width="104" height="26" /></span>
+              </button>
+              <button type="button" role="tab" id="tab-gaia" aria-controls="inquiry-panel" aria-selected="false" aria-disabled="true" disabled tabindex="-1" data-service="gaia" aria-label="GAIA 문의">
+                <span class="inquiry-tab-description">지반조사 <span class="inquiry-coming-soon">준비중</span></span>
+                <span class="inquiry-tab-logo"><img src="../assets/inquiry/gaia.svg" alt="GAIA" width="82" height="33" /></span>
+              </button>
+            </div>
+          </div>
+        <section class="inquiry-board" id="inquiry-panel" role="tabpanel" aria-labelledby="tab-egbim">
+          <div class="inquiry-board__heading">
+            <h2 id="boardHeading" tabindex="-1">문의 내역</h2>
+            <a class="inquiry-remote" href="https://939.co.kr/saman/" target="_blank" rel="noopener noreferrer" aria-label="원격지원 (새 창)">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="13" rx="2" /><path d="M8 21h8M12 17v4m-1-13 4 3-4 3" /></svg>
+              <span>원격지원</span>
+            </a>
+          </div>
+          <form class="inquiry-controls" role="search" id="searchForm">
+            <div class="inquiry-filters">
+              <fieldset class="inquiry-categories">
+                <legend class="inquiry-sr-only">문의 구분</legend>
+                <label><input type="radio" name="category" value="전체" checked /><span>전체</span></label>
+                <label><input type="radio" name="category" value="일반문의" /><span>일반</span></label>
+                <label><input type="radio" name="category" value="개선문의" /><span>개선</span></label>
+                <label><input type="radio" name="category" value="오류문의" /><span>오류</span></label>
+              </fieldset>
+              <label class="inquiry-mine"><input type="checkbox" name="mine" id="onlyMine" /> 내가 작성한 글</label>
+            </div>
+            <div class="inquiry-search">
+              <label class="inquiry-sr-only" for="query">제목 및 내용 검색</label>
+              <input type="search" id="query" name="keyword" placeholder="제목 또는 내용 검색" autocomplete="off" maxlength="120" aria-label="제목·내용·회사·부서·작성자 검색 (오타·초성 지원)" />
+              <button type="submit" class="inquiry-search-button" aria-label="검색"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="10" cy="10" r="6.5" /><path d="m15 15 6 6" /></svg></button>
+            </div>
+          </form>
+          <p class="inquiry-scroll-hint">좌우로 밀어 문의 목록을 확인하세요.</p>
+          <div class="inquiry-table-scroll" tabindex="0" role="region" aria-label="문의 목록. 작은 화면에서는 좌우로 스크롤할 수 있습니다.">
+            <table class="inquiry-table">
+              <caption class="inquiry-sr-only"><span data-service-name>EG-BIM</span> 문의 목록</caption>
+              <colgroup><col class="col-number" /><col class="col-category" /><col class="col-company" /><col class="col-team" /><col class="col-author" /><col /><col class="col-date" /><col class="col-status" /></colgroup>
+              <thead><tr><th scope="col">번호</th><th scope="col">구분</th><th scope="col">회사</th><th scope="col">부서</th><th scope="col">작성자</th><th scope="col">제목</th><th scope="col">등록일</th><th scope="col">상태</th></tr></thead>
+              <tbody id="qaRows"></tbody>
+            </table><div class="table-empty" id="tableEmpty">문의 목록을 불러오는 중입니다.</div>
+          </div>
+          <p class="help-text" id="searchStatus" role="status" aria-live="polite" hidden></p>
+          <nav class="inquiry-pagination" aria-label="문의 목록 페이지" id="pagination"></nav>
+          <div class="inquiry-board__bottom">
+            <span id="resultCount" class="help-text" aria-live="polite"></span>
+            <button type="button" class="inquiry-button inquiry-write" id="writeButton" data-open-write><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m4 15 12-12 5 5L9 20l-6 1 1-6Zm10-10 5 5M4 15l5 5" /></svg>문의등록</button>
+          </div>
+        </section>
+        </div>
+      </main>
+<dialog class="inquiry-dialog" id="composeModal" aria-labelledby="composeHeading"><div data-modal-content></div></dialog>
+<dialog class="inquiry-dialog" id="detailModal" aria-labelledby="detailHeading"><div data-modal-content></div></dialog>
+<template id="writeTemplate">
+<div class="inquiry-dialog__heading"><h2 id="composeHeading" tabindex="-1">문의등록</h2><button type="button" class="inquiry-close" data-modal-close aria-label="문의등록 닫기">×</button></div>
+<p class="help-text" data-auth-state>로그인 상태를 확인하고 있습니다.</p><div class="form-error" id="formError" role="alert"></div>
+<form id="qaForm" novalidate><div id="writeFields">
+<div class="inquiry-form-grid">
+<label>서비스<select disabled aria-label="서비스"><option>EG-BIM</option></select></label>
+<label for="category">문의 구분<select id="category" required><option value="">선택해주세요</option><option>일반문의</option><option>개선문의</option><option>오류문의</option></select></label>
+<label>회사<input id="writeCompany" type="text" readonly placeholder="확인 중"></label>
+<label>부서<input id="writeDepartment" type="text" readonly placeholder="확인 중"></label>
+<label>작성자<input id="writeAuthor" type="text" readonly placeholder="확인 중"></label>
+<label>이메일<input id="writeEmail" type="email" readonly placeholder="확인 중"></label>
+</div>
+<label class="inquiry-form-wide" for="title">제목<input id="title" type="text" maxlength="100" placeholder="문의 제목을 입력하세요" required></label>
+<label class="inquiry-secret"><input id="secret" type="checkbox">비밀글로 등록</label>
+<label class="inquiry-form-wide" for="content">내용<textarea id="content" rows="6" placeholder="문의 내용을 입력하세요" required></textarea></label>
+<label class="inquiry-form-wide" for="attachment">첨부파일<input id="attachment" type="file" multiple></label>
+<p class="help-text">파일당 최대 30MB. 개인정보, 비밀번호, 인증번호 등 민감한 정보는 입력하지 마세요.</p>
+</div><div class="inquiry-dialog__actions"><button type="button" class="inquiry-button inquiry-button--light" data-modal-close>취소</button><button type="submit" class="inquiry-button" id="submitButton">등록</button></div></form>
+</template>
+<template id="detailTemplate">
+  <section id="detail">
+  <div class="inquiry-dialog__heading">
+  <h2 id="detailHeading" data-detail-title tabindex="-1">문의 내용을 불러오는 중입니다.</h2>
+  <button type="button" class="inquiry-close" data-modal-close aria-label="문의 내용 닫기">×</button>
+  </div>
+  <article class="detail-card">
+  <div class="detail-head">
+  <div class="inquiry-detail__summary">
+  <span class="category" data-detail-category>
+  </span>
+  <span class="status review" data-detail-status>
+  </span>
+  </div>
+  <div class="detail-meta">
+  <span data-detail-date>
+  </span>
+  <span data-detail-author>
+  </span>
+  <span data-detail-company>
+  </span>
+  <span data-detail-department>
+  </span>
+  <span data-detail-secret hidden>🔒 비밀글</span>
+  </div>
+  </div>
+  <div class="detail-body" data-detail-content>
+  </div>
+  <div class="attachments">
+  <h3>첨부파일</h3>
+  <div data-detail-attachments>
+  <span class="help-text">첨부된 파일이 없습니다.</span>
+  </div>
+  </div>
+  <div id="completionNotice" class="completion-notice" hidden>
+  <div>
+  <strong>처리 완료 안내</strong>
+  <p>담당자가 처리를 완료했습니다. 내용을 확인하셨다면 완료 확인을 눌러주세요.</p>
+  </div>
+  <button class="button button-primary" id="completionButton" type="button">완료 확인</button>
+  </div>
+  <div id="completionDoneNotice" class="completion-done-notice" hidden>완료 처리 된 요청 건입니다.</div>
+  <div class="detail-actions">
+  <div class="owner-actions">
+  <button class="button button-outline" id="editButton" type="button" hidden>수정</button>
+  <button class="button button-danger" id="deleteButton" type="button" hidden>삭제</button>
+  </div>
+  </div>
+  </article>
+  <form id="editForm" class="edit-form" hidden>
+  <h3>문의 수정</h3>
+  <div class="form-row">
+  <label class="form-label" for="editCategory">구분</label>
+  <div class="form-control">
+  <select id="editCategory" class="select">
+  <option value="오류문의">오류문의</option>
+  <option value="개선문의">개선문의</option>
+  <option value="일반문의">일반문의</option>
+  </select>
+  </div>
+  </div>
+  <div class="form-row">
+  <label class="form-label" for="editTitle">제목</label>
+  <div class="form-control">
+  <input id="editTitle" class="input" maxlength="200" required>
+  </div>
+  </div>
+  <div class="form-row">
+  <label class="form-label" for="editContent">내용</label>
+  <div class="form-control column">
+  <textarea id="editContent" class="textarea" maxlength="10000" required>
+  </textarea>
+  </div>
+  </div>
+  <div class="form-row">
+  <div class="form-label">설정</div>
+  <div class="form-control">
+  <label class="check">
+  <input id="editSecret" type="checkbox"> 비밀글</label>
+  </div>
+  </div>
+  <div class="form-footer">
+  <button class="button button-outline" id="editCancel" type="button">취소</button>
+  <button class="button button-primary" type="submit">수정 저장</button>
+  </div>
+  <div id="editError" class="form-error" role="alert" hidden>
+  </div>
+  </form>
+  <section class="comment-box">
+  <h3>답변 <span id="commentCount">0</span>
+  </h3>
+  <div id="comments">
+  </div>
+  <form id="commentForm" class="comment-form">
+  <label class="sr-only" for="commentContent">댓글 내용</label>
+  <textarea id="commentContent" class="textarea" maxlength="5000" placeholder="답변 또는 추가 문의를 입력해주세요" required>
+  </textarea>
+  <div class="comment-attachment-input">
+  <label class="button button-primary comment-image-button" for="commentImages">이미지 첨부</label>
+  <input id="commentImages" type="file" accept="image/*" multiple>
+  <div id="commentImagePreview" class="comment-image-preview">
+  </div>
+  </div>
+  <div class="comment-form-actions">
+  <span id="commentError" class="form-error" role="alert" hidden>
+  </span>
+  <button class="button button-primary" id="commentSubmit" type="submit">댓글 등록</button>
+  </div>
+  </form>
+  </section>
+  <div class="inquiry-dialog__actions">
+  <button class="inquiry-button" type="button" data-modal-close>목록으로</button>
+  </div>
+  </section>
+  </template>
+<div id="toast" class="toast" role="status" aria-live="polite"></div><script src="config.js?v=20260921-3"></script><script src="app.js?v=20261102-ui-1"></script>
+</body></html>