From b5eb0d68c04de0770020e7518319f97dedd831d1 Mon Sep 17 00:00:00 2001
From: ypshim <ypshim71@gmail.com>
Date: Fri, 23 Oct 2026 11:33:45 +0900
Subject: [PATCH] =?UTF-8?q?feat(view):=20move=20all=203D=20info=20panels?=
 =?UTF-8?q?=20to=20the=20right=20stack=20(=EB=B6=80=EC=9E=AC=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C,=20=EC=8B=9C=EC=A0=90,=20=EC=83=89=20=EA=B8=B0?=
 =?UTF-8?q?=EC=A4=80,=20=EC=9B=90=EC=A0=90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The four panels are in one stack on the right of the 3D view, 180 px wide, with the ⓘ origin note opening to its left.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 index.html    | 2 +-
 src/style.css | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 4c53ede..ac69238 100644
--- a/index.html
+++ b/index.html
@@ -76,7 +76,7 @@
             <h2 id="viewer-title">교각 3D 뷰</h2>
           </div>
           <div id="canvas" class="canvas" aria-label="교각 3D 뷰"></div>
-          <div class="viewer-stack viewer-stack-left">
+          <div class="viewer-stack viewer-stack-right">
             <details class="info-panel parts-info" id="parts-info">
               <summary>부재 표시 <span id="parts-count" class="panel-state"></span></summary>
               <div id="parts"></div>
diff --git a/src/style.css b/src/style.css
index 8e68c68..36243db 100644
--- a/src/style.css
+++ b/src/style.css
@@ -766,7 +766,7 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
 #viewer-block .viewer-head { display: none; }
 .viewer-stack { display: flex; flex-direction: column; gap: 8px; width: 168px; z-index: 5; pointer-events: none; }
 .viewer-stack > * { pointer-events: auto; }
-#viewer-block .viewer-stack-left { position: absolute; top: 8px; left: 8px; width: 180px; align-items: stretch; }
+#viewer-block .viewer-stack-right { position: absolute; top: 8px; right: 8px; width: 180px; align-items: stretch; }
 #viewer-block .info-panel { background: rgba(255, 255, 255, 0.92); border: 1px solid #d5dde6; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); padding: 0 8px 8px; font-size: 13px; }
 #viewer-block .info-panel > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: #18212b; list-style-position: outside; }
 #viewer-block .parts-info #parts label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
@@ -779,12 +779,13 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
 #viewer-block #views.views-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; display: flex; flex-direction: column; gap: 0; padding: 4px; margin-top: 4px; background: #ffffff; border: 1px solid #c3cbd4; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); }
 #viewer-block #views.views-list .btn { min-height: 44px; justify-content: flex-start; text-align: left; border: 0; background: transparent; }
 #viewer-block #views.views-list .btn[aria-pressed='true'] { background: #1f5fa8; color: #ffffff; }
-#viewer-block .origin-wrap { position: relative; align-self: flex-start; }
+#viewer-block .origin-wrap { position: relative; align-self: flex-end; }
 #viewer-block .info-btn { min-width: 44px; min-height: 44px; border: 1px solid #c3cbd4; border-radius: 6px; background: #ffffff; font-size: 16px; cursor: pointer; }
-#viewer-block .origin-pop { position: absolute; top: 100%; left: 0; z-index: 10; margin-top: 4px; padding: 6px 10px; background: #ffffff; border: 1px solid #c3cbd4; border-radius: 6px; font-size: 12px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
+#viewer-block .origin-pop { position: absolute; top: 100%; right: 0; z-index: 10; margin-top: 4px; padding: 6px 10px; background: #ffffff; border: 1px solid #c3cbd4; border-radius: 6px; font-size: 12px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
 #viewer-block .panel-state { font-weight: 400; color: #55606e; margin-left: 6px; font-size: 12px; }
 @media (max-width: 600px) {
   #viewer-block .viewer-head { display: flex; height: auto; margin: 0 0 8px; }
   #viewer-block .viewer-stack { position: static; width: auto; margin-top: 8px; pointer-events: auto; }
-  #viewer-block .viewer-stack-left { position: static; width: auto; }
+  #viewer-block .origin-wrap { align-self: flex-start; }
+  #viewer-block .viewer-stack-right { position: static; width: auto; }
 }