헤더 다국어 토글 추가

src/components/Header.jsx

@@ -331,12 +331,13 @@ export default function PalRenewalHeader() {
           </nav>
 
           <div className="pal-header-util">
-            <div className="pal-header-lang">
+            <div className="pal-header-lang" role="group" aria-label="언어 선택">
-              <button type="button" className="is-active">
+              <button type="button" className="pal-header-lang-btn is-active" aria-pressed="true">
                 KOR
               </button>
-              <span className="pal-header-lang-divider">|</span>
+              <button type="button" className="pal-header-lang-btn" aria-pressed="false">
-              <button type="button">ENG</button>
+                ENG
+              </button>
             </div>
 
             <button type="button" className={`pal-header-hamburger ${isMobileMenuOpen ? "is-active" : ""}`} aria-label={isMobileMenuOpen ? "모바일 메뉴 닫기" : "모바일 메뉴 열기"} aria-expanded={isMobileMenuOpen} aria-controls="pal-mobile-menu" onClick={toggleMobileMenu}>
@@ -454,7 +455,18 @@ export default function PalRenewalHeader() {
               );
             })}
           </ul>
-
+          {/* 모바일 언어 토글 */}
+          <div className="pal-mobile-lang">
+            <span className="pal-mobile-lang-label">Language</span>
+            <div className="pal-mobile-lang-toggle" role="group" aria-label="언어 선택">
+              <button type="button" className="pal-mobile-lang-btn is-active" aria-pressed="true">
+                KOR
+              </button>
+              <button type="button" className="pal-mobile-lang-btn" aria-pressed="false">
+                ENG
+              </button>
+            </div>
+          </div>
           <div className="pal-mobile-contact-box">
             <p>프로젝트 문의 및 협업 상담이 필요하시면 연락해 주세요.</p>
             <Link to="/contact" className="pal-mobile-contact-link" onClick={closeAllMenus}>

src/css/header.css

@@ -91,7 +91,7 @@ body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-ope
 .pal-mobile-nav{margin:0;padding:0;list-style:none;}
 .pal-mobile-nav-item{border-bottom:1px solid rgba(17,17,17,.06);}
 .pal-mobile-nav-link,.pal-mobile-nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:20px 4px;border:0;background:none;color:#111;text-align:left;text-decoration:none;cursor:pointer;}
-.pal-mobile-nav-link span,.pal-mobile-nav-toggle span{font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-0.03em;}
+.pal-mobile-nav-link span,.pal-mobile-nav-toggle span{font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-0.03em;text-transform:uppercase;}
 .pal-mobile-nav-toggle:focus-visible,.pal-mobile-nav-link:focus-visible{outline:none;}
 .pal-mobile-nav-arrow{position:relative;display:block;flex:0 0 auto;width:18px;height:18px;}
 .pal-mobile-nav-arrow::before,.pal-mobile-nav-arrow::after{content:"";position:absolute;top:8px;width:10px;height:2px;border-radius:999px;background:#111;transition:transform .28s ease,background .28s ease;}
@@ -123,6 +123,24 @@ body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-ope
 .pal-mobile-contact-link{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:999px;background:var(--color-primary);color:#fff;font-size:14px;font-weight:700;line-height:1;text-decoration:none;transition:background .28s ease,transform .28s ease,box-shadow .28s ease;}
 .pal-mobile-contact-link:hover,.pal-mobile-contact-link:focus-visible{background:var(--color-primary-light);transform:translateY(-2px);box-shadow:0 12px 24px rgba(42,145,201,.22);outline:none;}
 
+.pal-header-lang{display:inline-flex;align-items:center;height:36px;padding:3px;border:1px solid rgba(17,17,17,.12);border-radius:999px;background:#fff;transition:border-color .3s ease,background .3s ease;}
+.pal-header-lang-btn{height:100%;padding:0 14px;border:0;border-radius:999px;background:transparent;color:rgba(17,17,17,.55);font-size:12px;font-weight:700;letter-spacing:.3px;line-height:1;cursor:pointer;transition:background .25s ease,color .25s ease;}
+.pal-header-lang-btn:hover{color:#111;}
+.pal-header-lang-btn.is-active{background:#111;color:#fff;}
+.pal-header-lang-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
+
+body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-open) .pal-header-lang{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
+body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-open) .pal-header-lang-btn{color:rgba(255,255,255,.6);}
+body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-open) .pal-header-lang-btn:hover{color:#fff;}
+body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-open) .pal-header-lang-btn.is-active{background:#fff;color:#111;}
+
+.pal-mobile-lang{display:flex;align-items:center;justify-content:space-between;padding:18px 4px 4px;margin-top:8px;border-top:1px solid rgba(17,17,17,.08);}
+.pal-mobile-lang-label{font-size:13px;font-weight:500;color:rgba(17,17,17,.55);letter-spacing:.3px;}
+.pal-mobile-lang-toggle{display:inline-flex;align-items:center;height:36px;padding:3px;border:1px solid rgba(17,17,17,.12);border-radius:999px;background:#fff;}
+.pal-mobile-lang-btn{height:100%;padding:0 14px;border:0;border-radius:999px;background:transparent;color:rgba(17,17,17,.55);font-size:12px;font-weight:700;letter-spacing:.3px;line-height:1;cursor:pointer;transition:background .25s ease,color .25s ease;}
+.pal-mobile-lang-btn:hover{color:#111;}
+.pal-mobile-lang-btn.is-active{background:#111;color:#fff;}
+
 @media (max-width:1440px){
 .pal-header-inner{padding:0 24px;}
 .pal-mega-panel-inner{padding:24px 24px 24px;}
@@ -144,6 +162,7 @@ body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-ope
 .pal-header-util{min-width:auto;}
 .pal-mega-panel{display:none;}
 .pal-header-dim{display:none;}
+.pal-header-lang{display:none;}
 }
 
 @media (max-width:767px){