/* ============================================================
   EMERALD GLOBAL LAYOUT — 공용 헤더 / 엣지 스와이프 드로어 / 푸터 스타일
   모든 페이지(index/join/member-login/mypage/products/reset-password/signup)가
   이 파일 하나를 <head>에서 불러와 쓴다. 페이지마다 따로 복붙되어 있던 헤더/푸터
   CSS를 여기 하나로 합쳐서, 앞으로는 여기 한 곳만 고치면 모든 페이지에 반영된다.
   (admin/ 페이지는 이번 통합 범위에서 제외 — 별도 관리자 전용 레이아웃 유지)

   각 페이지의 :root 컬러 변수(--bg, --emerald 등)는 그대로 사용하고, 여기서는
   재정의하지 않는다 — 페이지 고유 색상 시스템을 깨지 않기 위해서.
   ============================================================ */

/* 공용 컨테이너 폭 - 페이지에 이미 .wrap이 정의되어 있으면 그게 우선 적용되고
   (동일한 값이라 문제 없음), mypage.html처럼 없는 페이지는 여기서 보장된다. */
.wrap{width:min(1200px, 100% - 2.5rem);margin:0 auto;position:relative;z-index:2;}
@media(max-width:720px){.wrap{width:min(1200px, 100% - 1.5rem);}}

/* ---- ACCESSIBILITY: 키보드 포커스 표시 ----
   이 파일은 admin/ 제외 전 페이지(index/join/member-login/mypage/products/
   reset-password/signup)가 공통으로 불러오므로, 여기 한 번만 정의하면 헤더/
   드로어/푸터의 링크·버튼 전반에 키보드 포커스 링이 일괄 적용된다.
   :focus-visible을 써서 마우스/터치 클릭에는 안 뜨고 키보드 탐색(Tab)에만 뜬다. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--emerald, #00A86B);
  outline-offset:3px;
}

/* ---- HEADER ---- */
/* 하드 룰: 320~1920px 전체에서 로고/CTA(회원가입 또는 내 정보)/지구본이 반드시
   한 줄에, 줄바꿈·잘림·가로스크롤 없이 들어와야 한다. Login 버튼은 헤더에 없다
   (기능 자체는 member-login.html에 그대로 있음 - 진입 경로만 헤더에서 제거). */
header{position:fixed;z-index:60;top:0;left:0;right:0;background:linear-gradient(#000,transparent);
  border-bottom:1px solid transparent;transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease;}
header.scrolled{background:rgba(0,0,0,0.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border, #1C1D1E);}
.el-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:1.15rem 0;}
.el-brand-group{display:flex;align-items:center;gap:10px;min-width:0;}

/* 보석 아이콘 메뉴 버튼 - 데스크톱(≥1024px)에서는 상단 내비게이션이 이미 다 보이므로
   숨기고, 모바일에서만 로고 왼쪽에 보여서 누르면 사이트 메뉴(드로어)가 열린다.
   기존 화면 왼쪽 가장자리의 초록색 엣지 힌트 탭을 대신하는 더 눈에 띄는 진입점. */
.el-gem-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;
  border:none;background:transparent;padding:0;cursor:pointer;border-radius:8px;transition:transform .15s ease;}
.el-gem-btn:hover{transform:scale(1.08);}
.el-gem-btn img{width:100%;height:100%;border-radius:8px;display:block;}
@media (min-width:1024px){.el-gem-btn{display:none;}}

/* flex-shrink:1 + 말줄임 - 폰트 로딩 실패 등으로 로고 텍스트가 예상보다 넓게
   그려지는 상황에서도 CTA/지구본과 겹치지 않고 안전하게 줄어든다. CTA/지구본은
   절대 줄어들면 안 되는 하드 룰 항목이라 대신 로고 쪽이 양보한다. */
.el-brand{font-family:'Syne','Segoe UI',-apple-system,Roboto,Arial,sans-serif;font-weight:800;font-style:italic;font-size:1.3rem;letter-spacing:-0.04em;color:var(--text,#fff);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;min-width:0;max-width:40vw;}
.el-nav-links{display:none;gap:1.75rem;font-size:0.86rem;font-weight:600;letter-spacing:.01em;flex-shrink:0;}
@media (min-width:1024px){.el-nav-links{display:flex;}}
.el-nav-links a{color:#C7CCC9;transition:color .15s ease;white-space:nowrap;}
.el-nav-links a:hover{color:var(--text,#fff);}

/* Actions: (Sign Up 또는 내 정보) / Globe - 항상 이 순서, 항상 한 줄, 절대 안 줄어듦 */
.el-nav-right{display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;flex-shrink:0;position:relative;}
.el-btn-pill{font-size:0.88rem;font-weight:650;padding:0.68rem 1.3rem;border-radius:999px;border:1px solid var(--emerald,#00A86B);
  background:var(--emerald,#00A86B);color:var(--emerald-on,#03170F);
  transition:transform .22s ease, box-shadow .25s ease, padding .2s ease, font-size .2s ease;
  white-space:nowrap;flex-shrink:0;box-shadow:0 10px 32px rgba(0,168,107,0.12);cursor:pointer;}
.el-btn-pill:hover{transform:translateY(-1px);box-shadow:0 14px 40px rgba(0,168,107,0.28);}
/* 로그인 상태에서 데스크톱(≥1024px)에서만 "내 정보" 옆에 작은 원형 캐럿 버튼이
   따로 붙고, 클릭하면 관리자 페이지/로그아웃 미니 메뉴가 뜬다(내 정보 버튼 자체는
   그냥 mypage.html로 바로 이동하는 링크 - 캐럿을 안에 중첩시키지 않음).
   모바일에서는 캐럿을 안 보여주고(터치 드롭다운 UX 복잡성 회피), 관리자/로그아웃은
   엣지 스와이프 드로어로 접근한다. */
.el-caret-btn{display:none;width:34px;height:34px;border-radius:999px;border:1px solid #2E3134;background:#101211;color:var(--text,#fff);
  align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0;font-size:10px;transition:border-color .15s ease;}
.el-caret-btn:hover{border-color:#565C61;}
@media (min-width:1024px){.el-caret-btn.el-show{display:flex;}}

.el-user-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:168px;background:#0B0C0D;border:1px solid var(--border,#1C1D1E);
  border-radius:12px;padding:6px;display:none;flex-direction:column;gap:1px;box-shadow:0 20px 48px rgba(0,0,0,0.5);z-index:70;}
.el-user-menu.open{display:flex;}
.el-user-menu a,.el-user-menu button{text-align:left;font-family:var(--sans);font-size:0.82rem;font-weight:550;color:#B5B9BC;background:transparent;border:none;
  border-radius:8px;padding:0.62rem 0.7rem;cursor:pointer;transition:background .15s ease,color .15s ease;width:100%;}
.el-user-menu a:hover,.el-user-menu button:hover{background:#16181A;color:var(--text,#fff);}
.el-user-menu .el-logout-opt{color:var(--danger,#FF2400);}
.el-user-menu .el-logout-opt:hover{background:rgba(255,36,0,.08);}

.lang-switcher{position:relative;flex-shrink:0;}
.lang-trigger{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:0.72rem;font-weight:650;letter-spacing:0.5px;color:var(--text,#fff);
  background:#0E0F11;border:1px solid #2E3134;border-radius:999px;padding:0.55rem 0.75rem;cursor:pointer;transition:border-color .15s ease, padding .2s ease;}
.lang-trigger:hover{border-color:#565C61;}
.lang-trigger::before{content:'';width:13px;height:13px;flex-shrink:0;display:inline-block;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A86B' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z'/%3E%3C/svg%3E");}
.lang-panel{position:absolute;top:calc(100% + 8px);right:0;min-width:148px;background:#0B0C0D;border:1px solid var(--border,#1C1D1E);
  border-radius:12px;padding:6px;display:none;flex-direction:column;gap:1px;box-shadow:0 20px 48px rgba(0,0,0,0.5);z-index:70;}
.lang-panel.open{display:flex;}
.lang-option{text-align:left;font-family:var(--sans);font-size:0.82rem;font-weight:550;color:#B5B9BC;background:transparent;border:none;
  border-radius:8px;padding:0.62rem 0.7rem;cursor:pointer;transition:background .15s ease,color .15s ease;width:100%;}
.lang-option:hover{background:#16181A;color:var(--text,#fff);}
.lang-option.active{color:var(--emerald,#00A86B);}

/* ---- 모바일 헤더 하드 룰: 좁아질수록 padding/gap/폰트를 단계적으로 줄인다.
   Sign Up 라벨은 어떤 화면에서도 "회원가입"을 그대로 유지 - "가입"으로 줄이지
   않는다(요청사항). 대신 padding을 계속 줄여서 자리를 만든다. ---- */
@media (max-width:480px){
  .wrap.el-nav{width:min(1200px, 100% - 1.1rem);}
  .el-nav{gap:8px;}
  .el-nav-right{gap:0.4rem;}
  .el-btn-pill{padding:0.6rem 0.95rem;font-size:0.82rem;}
  .lang-trigger{padding:0.5rem 0.6rem;}
  .lang-trigger .lang-code{display:none;} /* 아주 좁은 화면에서는 지구본 아이콘만 */
}
@media (max-width:360px){
  .el-brand{font-size:1.02rem;}
  .el-btn-pill{padding:0.56rem 0.8rem;font-size:0.78rem;}
}

/* ============ EDGE SWIPE NAVIGATION DRAWER ============ */
/* 햄버거 버튼이 없다 - 화면 왼쪽 가장자리에서 오른쪽으로 스와이프하면 열린다.
   (data-edge-hint 요소는 화면에 살짝 보이는 잡을 손잡이 - 스와이프 기능이
   있다는 걸 시각적으로 암시하는 최소한의 힌트, 클릭도 가능) */
/* 클릭도 가능 - 스와이프 제스처를 못 쓰는 상황(마우스/키보드/접근성 도구)의 대체 진입점 */
/* 예전엔 여기에 화면 왼쪽 가장자리 중간에 보이는 초록색 손잡이 탭이 있었는데,
   헤더의 보석 아이콘 버튼(.el-gem-btn)이 더 눈에 띄는 진입점이라 그걸로 대체했다.
   스와이프 제스처 자체는 그대로 살아있고(엣지에서 오른쪽으로 스와이프), 이 요소는
   화면에 보이지 않는 채로 클릭 대체 진입점 역할만 유지한다. */
.el-edge-hint{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:55;
  width:16px;height:64px;border:none;padding:0;background:transparent;opacity:0;pointer-events:none;}

.el-backdrop{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;
  transition:opacity .28s ease, visibility 0s linear .28s;}
.el-backdrop.open{opacity:1;visibility:visible;transition:opacity .28s ease;}

.el-drawer{position:fixed;top:0;left:0;bottom:0;z-index:96;width:min(86vw,380px);background:#000;
  border-right:1px solid var(--border,#1C1D1E);display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .32s cubic-bezier(.16,1,.3,1);}
.el-drawer.open{transform:translateX(0);}
.el-drawer.dragging{transition:none;}
.el-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.15rem 20px;flex-shrink:0;}
.el-drawer-close{width:36px;height:36px;border-radius:999px;border:1px solid #2E3134;background:#101211;color:var(--text,#fff);
  font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.el-drawer-close:hover{border-color:#565C61;}
.el-drawer-list{flex:1;display:flex;flex-direction:column;padding:12px 4px 32px;overflow-y:auto;}
.el-drawer-item{display:flex;align-items:center;gap:14px;color:var(--text,#fff);font-family:var(--disp);font-weight:700;
  font-size:clamp(20px,5vw,26px);letter-spacing:-0.01em;padding:16px 20px;border:none;background:none;text-align:left;
  cursor:pointer;width:100%;transition:color .15s ease, background .15s ease;min-height:44px;}
.el-drawer-item:hover{color:var(--emerald,#00A86B);background:rgba(0,168,107,.06);}
.el-drawer-item .el-no{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--emerald,#00A86B);letter-spacing:.08em;min-width:22px;}
.el-drawer-item.el-logout-item{color:var(--danger,#FF2400);}
.el-drawer-item.el-logout-item:hover{color:#ff8f8a;background:rgba(255,36,0,.06);}
@media (prefers-reduced-motion:reduce){.el-drawer,.el-backdrop{transition:none;}}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--border,#1C1D1E);padding:56px 0 28px;}
.el-footer-top{display:flex;flex-direction:column;gap:40px;padding-bottom:36px;}
@media (min-width:768px){.el-footer-top{flex-direction:row;justify-content:space-between;align-items:flex-start;}}
.el-footer-brand{font-family:var(--disp);font-weight:800;font-style:italic;font-size:1.3rem;letter-spacing:-0.04em;color:var(--text,#fff);}
.el-footer-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}
@media (min-width:640px){.el-footer-groups{grid-template-columns:repeat(3,1fr);gap:56px;}}
.el-footer-group-title{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#9BA39D);margin-bottom:14px;}
.el-footer-group a,.el-footer-group span{display:block;font-size:13px;color:#C7CCC9;padding:5px 0;}
.el-footer-group a{transition:color .15s ease;}
.el-footer-group a:hover{color:var(--emerald-bright,#00C878);}
.el-footer-bottom{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid var(--border,#1C1D1E);font-size:11px;color:var(--muted,#9BA39D);}
@media (min-width:640px){.el-footer-bottom{flex-direction:row;justify-content:space-between;align-items:center;}}