/* common.css — GLOBAL COMMON (nav/page-header/footer)
   6개 파일(index, products, projects, technical, contact, cases) 공통 사용
   2026-06-30 기준, setup.py의 CSS 블록과도 동기화 필요 */

/* ================================================================
   GLOBAL COMMON — nav / page-header / footer
   모든 파일 동일 적용, 수치 고정
   ================================================================ */

/* ── 공통 네비게이션 ── */
.global-header{position:fixed;top:0;left:0;right:0;z-index:200;height:54px;background:rgba(255,255,255,.97);border-bottom:.5px solid var(--line);display:flex;align-items:center;padding:0 56px;gap:32px;backdrop-filter:blur(10px)}
.global-header .nav-logo{display:flex;align-items:baseline;gap:8px;flex-shrink:0;text-decoration:none}
.global-header .nav-logo-main{font-family:'DM Sans',sans-serif;font-size:14px;letter-spacing:.16em;color:var(--navy);font-weight:500}
.global-header .nav-logo-sub{font-size:9px;color:#bbb;letter-spacing:.06em}
.global-header .nav-menu{display:flex;margin-left:auto;list-style:none;padding:0;margin-bottom:0}
.global-header .nav-menu a{display:flex;align-items:center;padding:0 16px;height:54px;font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#aaa;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s;text-decoration:none}
.global-header .nav-menu a:hover,.global-header .nav-menu a.active{color:var(--navy);border-bottom-color:var(--navy)}
.global-header .nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* 로그인 버튼 / 유저칩 */
#btn-login{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:.12em;color:var(--navy);border:.5px solid var(--navy);padding:6px 16px;border-radius:2px;text-transform:uppercase;transition:background .2s,color .2s;cursor:pointer;background:white}
#btn-login:hover{background:var(--navy);color:white}
.user-chip{font-family:'DM Sans',sans-serif;font-size:9px;color:var(--titan);letter-spacing:.06em;border:.5px solid var(--line);padding:6px 14px;border-radius:2px;cursor:pointer;background:white}
.user-drop{display:none;position:absolute;top:calc(100% + 4px);right:0;background:white;border:.5px solid var(--line);border-radius:2px;min-width:140px;box-shadow:0 4px 16px rgba(0,0,0,.08);z-index:300}
.user-drop a,.user-drop button{display:block;width:100%;text-align:left;padding:10px 16px;font-size:11px;color:var(--text);transition:background .15s;letter-spacing:.02em;border:none;background:none;cursor:pointer}
.user-drop a:hover,.user-drop button:hover{background:var(--off)}
#nav-user-wrap{display:none;position:relative}

/* 햄버거 버튼 */
#nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;padding:4px;cursor:pointer;background:none;border:none;margin-left:auto;flex-shrink:0}
#nav-hamburger span{display:block;width:20px;height:.5px;background:var(--navy);transition:transform .25s,opacity .25s}
#nav-hamburger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
#nav-hamburger.open span:nth-child(2){opacity:0}
#nav-hamburger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* 모바일 드롭 메뉴 */
#mobile-menu{display:none;position:fixed;top:54px;left:0;right:0;background:rgba(255,255,255,.98);border-bottom:.5px solid var(--line);backdrop-filter:blur(10px);z-index:199;flex-direction:column;padding:8px 0}
#mobile-menu.open{display:flex}
#mobile-menu a{display:block;padding:13px 24px;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#888;border-bottom:.5px solid var(--line2);transition:color .15s;text-decoration:none}
#mobile-menu a:last-child{border-bottom:none}
#mobile-menu a:hover,#mobile-menu a.active{color:var(--navy)}

/* ── 공통 페이지 헤더 (서브페이지) ── */
.page-header{margin-top:54px;padding:56px 56px 40px;border-bottom:.5px solid var(--line);background:var(--off)}
.page-header .ph-over{font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:.32em;color:var(--bronze);text-transform:uppercase;margin-bottom:16px}
.page-header .ph-h1{font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:300;color:var(--navy);line-height:1.1;letter-spacing:-.01em;margin-bottom:0}
.page-header .ph-h1 strong{font-weight:500}
.page-header .ph-rule{width:24px;height:.5px;background:var(--bronze);margin:20px 0}
.page-header .ph-desc{font-size:13px;color:var(--muted);line-height:1.9;max-width:640px;margin:0}

/* ── 공통 푸터 ── */
.global-footer{border-top:.5px solid var(--line);padding:48px 56px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;background:var(--white)}
.global-footer .ft-logo-sub{font-size:9px;color:#bbb;letter-spacing:.06em;margin-bottom:16px}
.global-footer .ft-addr{font-size:12px;color:var(--muted);line-height:2;letter-spacing:.02em}
.global-footer .ft-about{font-size:12px;color:var(--muted);line-height:1.9;letter-spacing:.02em;margin-top:16px;border-top:.5px solid var(--line2);padding-top:16px}
.global-footer .ft-about-en{font-size:11px;color:#bbb;line-height:1.9;letter-spacing:.02em;margin-top:10px;font-style:italic}
.global-footer .ft-col h4{font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:.2em;color:var(--navy);text-transform:uppercase;margin-bottom:14px;font-weight:500}
.global-footer .ft-col a{display:block;font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.04em;color:var(--muted);margin-bottom:8px;transition:color .2s;text-decoration:none}
.global-footer .ft-col a:hover{color:var(--navy)}

/* ================================================================
   AUTH MODAL — 로그인/회원가입 (auth-modal.php와 짝)
   6개 파일 공통 사용
   ================================================================ */
#auth-overlay{display:none;position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.45);align-items:center;justify-content:center}
#auth-overlay.open{display:flex}
#modal{background:white;width:100%;max-width:420px;border-radius:4px;overflow:hidden}
.modal-head{padding:24px 28px 0;display:flex;justify-content:space-between;align-items:center}
.modal-head h2{font-size:13px;color:var(--navy);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
#modal-close{font-size:18px;color:#ccc;line-height:1;transition:color .2s;background:none;border:none;cursor:pointer}
#modal-close:hover{color:var(--navy)}
.modal-tabs{display:flex;margin:16px 28px 0;border-bottom:.5px solid var(--line)}
.mtab{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#bbb;padding:10px 0;margin-right:20px;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer}
.mtab.active{color:var(--navy);border-bottom-color:var(--navy)}
.modal-body{padding:24px 28px 28px}
.fg{margin-bottom:14px}
.fg label{display:block;font-size:8px;letter-spacing:.14em;color:var(--titan);text-transform:uppercase;margin-bottom:6px}
.fg input,.fg select{width:100%;padding:10px 12px;border:.5px solid var(--line);border-radius:2px;font-size:12px;color:var(--text);font-family:inherit;outline:none;transition:border-color .2s}
.fg input:focus,.fg select:focus{border-color:var(--navy)}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-submit{width:100%;padding:12px;background:var(--navy);color:white;border:none;border-radius:2px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-top:6px;transition:opacity .2s;cursor:pointer}
.btn-submit:hover{opacity:.85}
#modal-msg{font-size:11px;text-align:center;margin-top:10px;min-height:18px;letter-spacing:.02em}
#modal-msg.ok{color:#2E7D52}
#modal-msg.err{color:#C8302A}
/* ================================================================
   END AUTH MODAL
   ================================================================ */
.ft-copy{border-top:.5px solid var(--line2);padding:16px 56px;font-size:9px;color:#ccc;letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center;background:var(--white)}

/* ── 반응형 공통 (680px) ── */
@media(max-width:680px){
  .global-header{padding:0 20px;gap:12px}
  .global-header .nav-menu{display:none}
  #nav-hamburger{display:flex}
  .global-header .nav-actions{margin-left:0}
  .page-header{padding:36px 20px 28px}
  .page-header .ph-h1{font-size:28px}
  .page-header .ph-desc{font-size:12px}
  .global-footer{grid-template-columns:1fr;padding:36px 20px;gap:28px}
  .ft-copy{padding:12px 20px;flex-direction:column;gap:6px;text-align:center}
}
/* ================================================================
   END GLOBAL COMMON