From fb986dd178a938621205f37cf9db58269e99ebcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?siyeon00=28=EC=9D=B4=EC=8B=9C=EC=97=B0=29?=
 <siyeon00@palnet.co.kr>
Date: Thu, 28 May 2026 10:14:33 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=EC=B0=BE=EC=95=84=EC=98=A4=EC=8B=9C?=
 =?UTF-8?q?=EB=8A=94=EA=B8=B8=20=EC=88=9C=EC=84=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/common.css                 |  24 ++++---
 src/pages/company/LocationPage.jsx | 101 ++++++++++++++++-------------
 2 files changed, 70 insertions(+), 55 deletions(-)

diff --git a/src/css/common.css b/src/css/common.css
index b782f01..9112e65 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -165,7 +165,14 @@ body{overflow-x:hidden;}
 .location-tab { padding: 10px 24px; border-radius: 100px; border: 1px solid #e8e8e8; background: #fff; font-size: 14px; font-weight: 600; color: #999; cursor: pointer; transition: all 0.2s ease; }
 .location-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
 .location-tab:hover:not(.active) { border-color: #ccc; color: #333; }
-.location-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 4rem; align-items: start; padding-bottom: 6rem; }
+.location-wrap {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+  gap: 4rem;
+  align-items: start;
+  padding-bottom: 6rem;
+}
+
 .location-map { width: 100%; height: 480px; border-radius: 20px; overflow: hidden; }
 .location-map iframe { width: 100%; height: 100%; border: none; display: block; }
 .location-info-card { display: flex; flex-direction: column; }
@@ -199,24 +206,23 @@ body{overflow-x:hidden;}
 .location-transport-route-title { font-size: 12px; font-weight: 700; color: #333; margin: 0; }
 .location-transport-route-desc { font-size: 12px; color: #888; line-height: 1.6; margin: 0; white-space: pre-line; }
 .location-info-section-title { display: none; font-size: 16px; font-weight: 700; color: #111; letter-spacing: -0.03em; margin: 0 0 20px; }
-
 @media (max-width: 768px) {
 .location-tabs { margin-bottom: 24px; }
-.location-wrap { grid-template-columns: 1fr; gap: 2rem; }
-.location-map { height: 260px; }
-.location-transport {padding-bottom: 0rem;}
+.location-wrap { display: flex; flex-direction: column; gap: 0; padding-bottom: 4rem; }
+.location-map-wrap { order: 1; width: 100%; }
+.location-info-wrapper { order: 2; position: static; max-height: none; margin-top: 32px; width: 100%; }
+.location-transport-wrap { order: 3; width: 100%; margin-top: 32px; margin-bottom: 4rem; }
+.location-map { height: 260px; width: 100%;}
+.location-transport { padding-bottom: 0; }
 .location-transport-list { grid-template-columns: 1fr; }
-.location-info-card { padding: 28px 24px; margin-bottom: 4rem; background: #fff; border-radius: 16px; border: 1px solid #e8e8e8; margin-top: 24px; }
+.location-info-card { padding: 28px 24px; width: 100%; box-sizing: border-box; background: #fff; border-radius: 16px; border: 1px solid #e8e8e8; margin-top: 0; margin-left: 0; margin-right: 0; }
 .location-info-list { gap: 20px; margin-bottom: 28px; }
 .location-hours { margin-top: 0; padding-top: 20px; margin-bottom: 20px; }
 .location-inquiry-btn { margin-top: 0; border-radius: 12px; }
 .location-info-section-title { display: block; }
-.location-info-wrapper { position: static; }
-
 }
 
 
-
 /*연혁*/
 
 /* ── Inner Wrap (공통 max-width) ── */
diff --git a/src/pages/company/LocationPage.jsx b/src/pages/company/LocationPage.jsx
index 0d5d2f3..3f7ea9d 100644
--- a/src/pages/company/LocationPage.jsx
+++ b/src/pages/company/LocationPage.jsx
@@ -168,7 +168,6 @@ export default function LocationPage() {
             <em className="ht-header-sub">팔네트웍스 사업장 위치 안내입니다</em>
           </motion.div>
 
-          {/* 탭 메뉴 */}
           <div className="location-tabs">
             <button
               className={`location-tab ${isIncheon ? "active" : ""}`}
@@ -186,9 +185,10 @@ export default function LocationPage() {
 
           <section className="sub-section">
             <div className="location-wrap">
-              {/* 지도 + 교통편 */}
+              {/* 지도 */}
               <motion.div
-                key={tab}
+                className="location-map-wrap"
+                key={tab + "-map"}
                 initial={{ opacity: 0, y: 24 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
@@ -202,48 +202,9 @@ export default function LocationPage() {
                     title="팔네트웍스 위치"
                   />
                 </div>
-
-                <div className="location-transport">
-                  <h3 className="location-transport-title">교통편 안내</h3>
-                  <div className="location-transport-list">
-                    {currentTransport.map((t, i) => (
-                      <motion.div
-                        key={t.badge}
-                        className="location-transport-item"
-                        initial={{ opacity: 0, y: 24 }}
-                        whileInView={{ opacity: 1, y: 0 }}
-                        viewport={{ once: true }}
-                        transition={{
-                          duration: 0.5,
-                          ease: [0.4, 0, 0.2, 1],
-                          delay: i * 0.1,
-                        }}
-                      >
-                        <div className="location-transport-item-top">
-                          <div className="location-transport-icon">
-                            <img src={t.icon} alt={t.badge} />
-                          </div>
-                          <span className="location-transport-badge">
-                            {t.badge}
-                          </span>
-                        </div>
-                        <div className="location-transport-routes">
-                          {t.items.map((item, j) => (
-                            <div key={j} className="location-transport-route">
-                              <p className="location-transport-route-title">
-                                {item.title}
-                              </p>
-                              <p className="location-transport-route-desc">
-                                {item.desc}
-                              </p>
-                            </div>
-                          ))}
-                        </div>
-                      </motion.div>
-                    ))}
-                  </div>
-                </div>
               </motion.div>
+
+              {/* 회사 정보 */}
               <motion.div
                 className="location-info-wrapper"
                 initial={{ opacity: 0, y: 40 }}
@@ -256,8 +217,6 @@ export default function LocationPage() {
                 }}
               >
                 <p className="location-info-section-title">회사 정보</p>
-
-                {/* 연락처 카드 */}
                 <motion.div
                   key={tab + "-info"}
                   className="location-info-card"
@@ -313,6 +272,56 @@ export default function LocationPage() {
                   </Link>
                 </motion.div>
               </motion.div>
+
+              {/* 교통편 */}
+              <motion.div
+                className="location-transport-wrap"
+                key={tab + "-transport"}
+                initial={{ opacity: 0, y: 24 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
+              >
+                <div className="location-transport">
+                  <h3 className="location-transport-title">교통편 안내</h3>
+                  <div className="location-transport-list">
+                    {currentTransport.map((t, i) => (
+                      <motion.div
+                        key={t.badge}
+                        className="location-transport-item"
+                        initial={{ opacity: 0, y: 24 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{
+                          duration: 0.5,
+                          ease: [0.4, 0, 0.2, 1],
+                          delay: i * 0.1,
+                        }}
+                      >
+                        <div className="location-transport-item-top">
+                          <div className="location-transport-icon">
+                            <img src={t.icon} alt={t.badge} />
+                          </div>
+                          <span className="location-transport-badge">
+                            {t.badge}
+                          </span>
+                        </div>
+                        <div className="location-transport-routes">
+                          {t.items.map((item, j) => (
+                            <div key={j} className="location-transport-route">
+                              <p className="location-transport-route-title">
+                                {item.title}
+                              </p>
+                              <p className="location-transport-route-desc">
+                                {item.desc}
+                              </p>
+                            </div>
+                          ))}
+                        </div>
+                      </motion.div>
+                    ))}
+                  </div>
+                </div>
+              </motion.div>
             </div>
           </section>
         </div>