/* 
✨ 실무용 완성형 레이아웃 시스템 v2.2 ✨
- 타이포그래피 시스템과 완벽 호환
- 테일윈드와 충돌 없는 네이밍
- 통일된 브레이크포인트 사용
- CSS 변수를 통한 유연한 커스터마이징
- 반응형 + 접근성 최적화
- 헤더 네비게이션 및 모바일 사이드바 포함
- 사이드바 수정사항 적용 완료
*/

/* ===== 미디어 쿼리 브레이크포인트 (타이포그래피와 통일) ===== */
/*
모바일: 0~640px
태블릿: 641px~1024px  
데스크톱: 1025px~
대형 화면: 1441px~
*/

/* ===== CSS 변수 ===== */
:root {
  /* 레이아웃 사이즈 */
  --container-max-width: 1280px;
  --container-padding: 24px;
  --container-padding-tablet: 16px;
  --container-padding-mobile: 12px;
  
  /* 헤더/푸터 */
  --header-height: 100px;
  --header-height-mobile: 48px;
  --footer-height: 300px;
  --footer-height-mobile: 48px;

  /* [ADD] 헤더 테마 색상 변수 */
  --header-bg: #ffffff;                /* 스크롤 후 배경 */
  --header-fg: #111111;                /* 스크롤 후 글자색 */
  --header-transparent: transparent;   /* 최상단 배경 */
  --header-fg-on-hero: #ffffff;        /* 히어로 위 글자색 */
  --nav-link-color-light: rgba(255,255,255,.95);
  --nav-link-color-light-hover: #ffffff;
  --nav-link-color-dark: #1f2937;      /* gray-800 */
  --nav-link-color-dark-hover: #4CAF92;/* green hover */
  --hamburger-color-light: #ffffff;
  --hamburger-color-dark: #333333;
  
  /* 사이드바 */
  --sidebar-width: 260px;
  --sidebar-width-tablet: 200px;
  --sidebar-width-mobile: 80vw;
  
  /* 간격 */
  --gutter-xs: 8px;
  --gutter-sm: 12px;
  --gutter-md: 16px;
  --gutter-lg: 24px;
  --gutter-xl: 32px;
  
  /* 모바일 네비게이션 */
  --mobile-nav-height: 56px;
  
  /* z-index 레이어 (수정됨) */
  --z-header: 100;
  --z-sidebar: 200;
  --z-mobile-nav: 300;
  --z-modal: 1000;
  --z-dropdown: 1100;
  --z-tooltip: 1200;
  
  /* 트랜지션 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;


}

/* ===== 로고 스타일 ===== */
.navbar-brand .logo,
.navbar-brand img.logo,
a.navbar-brand img.logo,
img.logo,
.logo {
  width: 200px ;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  transition: transform var(--transition-fast) !important;
  max-width: none !important;
  flex-shrink: 0 !important;
}

/* 로고 반응형 크기 조정 */
@media (max-width: 1024px) {
  .navbar-brand .logo,
  a.navbar-brand .logo,
  .logo { width: 120px !important; }
}
@media (max-width: 768px) {
  .navbar-brand .logo,
  a.navbar-brand .logo,
  .logo { width: 100px !important; }
}
@media (max-width: 640px) {
  .navbar-brand .logo,
  a.navbar-brand .logo,
  .logo { width: 90px !important; }
}
@media (max-width: 480px) {
  .navbar-brand .logo,
  a.navbar-brand .logo,
  .logo { width: 110px !important; }
}

/* ===== 컨테이너 (테일윈드와 충돌 방지) ===== */
.app-container {
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  height: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  box-sizing: border-box;
}
.app-container-full {
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}
@media (max-width: 768px) {
  .app-container { padding: 0 15px; }
}

/* 컨테이너 사이즈 변형 */
.app-container-sm { max-width: 768px; }
.app-container-md { max-width: 1024px; }
.app-container-lg { max-width: 1280px; }
.app-container-xl { max-width: 1536px; }
.app-container-full { max-width: none; }

/* ===== 헤더/푸터 ===== */
.app-header, .app-footer {
  width: 100%;
  min-height: var(--header-height);
  align-items: center;
  box-sizing: border-box;
  z-index: var(--z-header);
  transition: all var(--transition-normal);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 각 영역 */
.nav-left {
  height: 100%;
  display: flex;
  align-items: center;
}
.nav-center { display: flex; justify-content: center; }
.nav-right { display: flex; justify-content: flex-end; }

.header-login-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 999px;
  background: linear-gradient(134deg, var(--main-green) 0%, var(--main-green-dark) 100%);
  color: #fff !important;
  font-weight: 400;
    font-size: 16px;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 6px 18px rgba(44,139,110,0.25);
}
.header-login-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(44,139,110,0.35);
  color: #fff !important;
    text-decoration: none;
}
.header-login-btn i{
  font-size: 16px;
}

/* [REPLACE] 헤더: 기본 흰색 배경 / 투명은 at-top 클래스로만 제어 */
.app-header{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-height);
  z-index: 1000;
  background: var(--header-bg);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: none;
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease, color .2s ease;
}

/* 기본 헤더 스타일 (일반 페이지용) */
.app-header .header-footer { 
  color: var(--header-fg); 
}
.app-header .nav-link { 
  color: var(--nav-link-color-dark); 
}
.app-header .nav-link:hover { 
  color: var(--nav-link-color-dark-hover); 
}
.app-header .hamburger-line { 
  background-color: var(--hamburger-color-dark); 
}
.app-header .logo {
  filter: none;
}

/* 최상단 투명 상태 (메인 페이지 전용) */
.app-header.at-top{
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.app-header.at-top .header-footer { 
  color: var(--header-fg-on-hero) !important; 
}
.app-header.at-top .logo {
  filter: brightness(0) invert(1) !important;
}
.app-header.at-top .nav-link { 
  color: #ffffff !important; 
}
.app-header.at-top .nav-link:hover { 
  color: var(--main-green) !important;
}
.app-header.at-top .hamburger-line { 
  background-color: var(--hamburger-color-light) !important; 
}
.app-header.at-top .header-topbar {
  color: var(--tertiary-text-color);
  border-bottom-color: transparent;
}

/* 스크롤 후 그림자 효과 */
.app-header.is-scrolled{
  background: var(--header-bg);
  border-bottom-color: rgba(0,0,0,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* 어두운 배경 위에 있을 때 (투명 헤더일 때만 적용) */
.header-footer{
  color: var(--primary-text-color);
  transition: color .2s ease, fill .2s ease;
}
.header-footer a, 
.header-footer a:hover, 
.header-footer a:active { color: inherit; }

.header-footer.is-light { 
  color: var(--tertiary-text-color) !important; 
}
.header-footer.is-light a:hover { 
  color: var(--primary-text-color) !important; 
}
.header-footer.is-light a:active{ 
  color: var(--primary-text-color) !important; 
}

.app-header .app-container {
  padding: 0 var(--container-padding);
  height: 100%;
}
.app-header nav {
  height: var(--header-height);
}
.app-footer {
  min-height: var(--footer-height);
  margin-top: clamp(32px, 6vw, 80px);
  width: 100%;
}

/* 모바일 헤더 최적화 */
@media (max-width: 768px) {
  .app-header {
    height: 70px;
    min-height: 70px;
  }
  .app-header nav {
    height: 70px;
  }
  .app-header .app-container {
    padding: 0 16px;
  }
  .nav-bar {
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .app-header {
    height: 60px;
    min-height: 60px;
  }
  .app-header nav {
    height: 60px;
  }
  .app-header .app-container {
    padding: 0 12px;
  }
  .nav-bar {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .app-header {
    height: 56px;
    min-height: 56px;
  }
  .app-header nav {
    height: 56px;
  }
  .app-header .app-container {
    padding: 0 10px;
  }
  .nav-bar {
    gap: 6px;
  }
}

/* 헤더 변형 유틸리티(필요 시) */
.app-header-sticky { position: sticky; top: 0; background-color: #ffffff; }
.app-header-fixed { position: fixed; top: 0; left: 0; right: 0; }

/* ===== 네비게이션 스타일 ===== */
.desktop-nav { display: flex; align-items: center; }

@media (max-width: 768px) {
  .app-header .desktop-nav,
  .app-header .nav-menu,
  .app-header .user-menu,
  .app-header .nav-menu li,
  .app-header .user-menu li { display: none !important; }
}

.nav-menu, .user-menu{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; align-items: center;
}
.nav-menu li, .user-menu li { margin: 0; }

/* 공통 기본 링크(상태 클래스가 덮어씀) */
.nav-link {
  color: var(--nav-link-color-dark);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 16px;
  transition: all var(--transition-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.nav-link:hover, .nav-link:focus { text-decoration: none; }
.nav-link:hover { color: var(--nav-link-hover-color, var(--nav-link-color-dark-hover)); }
.nav-link i { margin-right: 4px; font-size: 14px; }
.nav-link.is-active,
.nav-link.active {
  background: var(--bg-green-light) 0% 0% no-repeat padding-box;
  border-radius: 24px;
  color: var(--main-green) !important;
}
.nav-link.is-active:hover,
.nav-link.active:hover {
  color: var(--main-green) !important;
}

/* ===== 모바일 햄버거 버튼 개선 ===== */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px; height: 100%;
  background: none; border: none; cursor: pointer; padding: 0;
  position: relative;
  min-height: 44px; /* 터치 친화적 최소 크기 */
}
@media (max-width: 768px) {
  .app-header .mobile-menu-btn {
    display: flex !important;
    width: 44px;
    margin-left: 8px;
  }
}
@media (max-width: 640px) {
  .app-header .mobile-menu-btn {
    width: 40px;
    margin-left: 4px;
  }
}
@media (max-width: 480px) {
  .app-header .mobile-menu-btn {
    width: 38px;
    margin-left: 0;
  }
}
.mobile-menu-btn:hover, .mobile-menu-btn:focus { outline: none; }
.mobile-menu-btn:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

/* 햄버거 라인 스타일 */
.hamburger-line {
  width: 24px; height: 3px; border-radius: 2px;
  background-color: var(--hamburger-color-dark);
  margin: 2px 0; transition: all 0.3s ease;
}
@media (max-width: 640px) {
  .hamburger-line {
    width: 22px;
    height: 2.5px;
  }
}
@media (max-width: 480px) {
  .hamburger-line {
    width: 20px;
    height: 2px;
  }
}
/* active 상태에서 X자 만들기 */
.mobile-menu-btn.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-btn.active .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* ===== 메인/콘텐츠 ===== */
.app-main {
  max-width: var(--container-max-width);
  padding: var(--header-height) 20px clamp(40px, 6vw, 80px) 20px; /* 상단 헤더 높이 + 하단 여백 */
  min-height: 100vh;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 768px) {
  .app-main { padding-top: calc(var(--header-height-mobile) + 52px); }
}
@media (min-width: 769px) {
  .app-main { padding-top: var(--header-height); }
}

/* ===== 사이드바 수정 부분 ===== */
.app-sidebar {
  position: fixed;
  /* top: 0; */
  right: -100%;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--header-bg);
  z-index: 1001;
  transition: left 0.3s ease;
  overflow-y: auto;
  display: none;
}
.app-sidebar.open { right: 0 !important; }
.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); }

/* 헤더 상단바 (프로젝트에 따라 미사용 가능) */
.header-topbar {
  width: 100%;
  background: var(--header-top-bg);
  font-size: 12px;
  height: 19px;
  padding: 12px 0px;
}
.topbar-link { color: var(--tertiary-text-color); text-decoration: none; }
.topbar-link:hover { color: var(--tertiary-text-color); }
.topbar-user { color: #d3d3d3; font-weight: 500; }

@media (max-width: 768px) {
  .app-sidebar { display: block !important; }
  .app-sidebar-overlay { display: block !important; }
}
@media (min-width: 769px) {
  .app-sidebar { display: none !important; right: -100%; }
  .app-sidebar-overlay { display: none !important; }
}

/* ===== 사이드바 헤더 개선 ===== */
.sidebar-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 20px; height: var(--header-height);
}
.sidebar-logo { display: flex; align-items: center; text-decoration: none; }
.sidebar-close-btn {
  background: none; border: none; font-size: 18px; cursor: pointer; color: #666; padding: 5px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-close-btn:hover, .sidebar-close-btn:focus {
  color: var(--close-btn-hover-color);
  outline: none;
}
.sidebar-close-btn:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

/* 사이드바 헤더 모바일 최적화 */
@media (max-width: 768px) {
  .sidebar-header {
    height: 70px;
    padding: 12px 16px;
  }
}
@media (max-width: 640px) {
  .sidebar-header {
    height: 60px;
    padding: 10px 14px;
  }
  .sidebar-close-btn {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .sidebar-header {
    height: 56px;
    padding: 8px 12px;
  }
  .sidebar-close-btn {
    font-size: 18px;
    min-width: 40px;
    min-height: 40px;
  }
}

/* 사이드바 네비게이션 */
.sidebar-nav { padding: 20px 0; }
.sidebar-menu, .sidebar-user-menu { list-style: none; margin: 0; padding: 0; }
.sidebar-menu li, .sidebar-user-menu li { margin-bottom: 4px; }
.sidebar-link {
  display: block; color: var(--sidebar-link-color);
  text-decoration: none; padding: 12px 20px; transition: all 0.3s ease;
}
.sidebar-link:hover {
  background-color: #ffffff;
  color: var(--primary-text-color);
  text-decoration: none;
}
.sidebar-link i { margin-right: 8px; width: 16px; text-align: center; }
.sidebar-divider { height: 1px; background-color: var(--divider-color); margin: 20px 0; }

/* ===== 사이드바 오버레이 개선 ===== */
.app-sidebar-overlay {
  position: fixed; top: 0; right: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000; opacity: 0; visibility: hidden;
  transition: all 0.3s ease; display: none;
}
.app-sidebar-overlay.active { opacity: 1; visibility: visible; display: block !important; }

/* ===== body 스크롤 방지 개선 ===== */
body.sidebar-open { overflow: hidden; height: 100vh; }
@media (max-width: 640px) {
  body.sidebar-open { position: fixed; width: 100%; top: 0; left: 0; }
}

/* ===== 콘텐츠 영역 (사이드바와 함께) ===== */
.app-content { padding: var(--gutter-lg) 0; transition: margin-left var(--transition-normal); min-height: 100vh; }
.app-content-full { margin-left: 0; }

/* ===== 그리드 레이아웃 ===== */
.layout-grid { display: grid; gap: var(--gutter-lg); }
.layout-grid-2 { grid-template-columns: 1fr 1fr; }
.layout-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.layout-grid-4 { grid-template-columns: repeat(4, 1fr); }
.layout-grid-5 { grid-template-columns: repeat(5, 1fr); }
.layout-grid-6 { grid-template-columns: repeat(6, 1fr); }
.layout-grid-auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

@media (max-width: 1024px) {
  .layout-grid { gap: var(--gutter-md); }
  .layout-grid-4, .layout-grid-5, .layout-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .nav-link, .sidebar-link { padding: 10px 14px; }
}
@media (max-width: 640px) {
  .layout-grid { gap: var(--gutter-sm); }
  .layout-grid-2, .layout-grid-3, .layout-grid-4, .layout-grid-5, .layout-grid-6 { grid-template-columns: 1fr; }
  .nav-link, .sidebar-link { padding: 12px 16px; }
}

/* 그리드 아이템 스팬 */
.grid-span-2 { grid-column: span 2; }
.grid-span-3 { grid-column: span 3; }
.grid-span-4 { grid-column: span 4; }
.grid-span-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .grid-span-2, .grid-span-3, .grid-span-4 { grid-column: span 1; }
}

/* ===== 플렉스 레이아웃 ===== */
.layout-flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { align-items: center; justify-content: space-between; }
.flex-around { align-items: center; justify-content: space-around; }
.flex-evenly { align-items: center; justify-content: space-evenly; }
.flex-start { align-items: flex-start; justify-content: flex-start; }
.flex-end { align-items: flex-end; justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* 플렉스 아이템 */
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }
.flex-grow { flex-grow: 1; }
.flex-shrink { flex-shrink: 1; }

/* ===== 간격(Gap) 유틸리티 ===== */
.gap-xs { gap: var(--gutter-xs); }
.gap-sm { gap: var(--gutter-sm); }
.gap-md { gap: var(--gutter-md); }
.gap-lg { gap: var(--gutter-lg); }
.gap-xl { gap: var(--gutter-xl); }

.gap-x-xs { column-gap: var(--gutter-xs); }
.gap-x-sm { column-gap: var(--gutter-sm); }
.gap-x-md { column-gap: var(--gutter-md); }
.gap-x-lg { column-gap: var(--gutter-lg); }
.gap-x-xl { column-gap: var(--gutter-xl); }

.gap-y-xs { row-gap: var(--gutter-xs); }
.gap-y-sm { row-gap: var(--gutter-sm); }
.gap-y-md { row-gap: var(--gutter-md); }
.gap-y-lg { row-gap: var(--gutter-lg); }
.gap-y-xl { row-gap: var(--gutter-xl); }

/* ===== z-index 레이어 ===== */
.z-header { z-index: var(--z-header); }
.z-sidebar { z-index: var(--z-sidebar); }
.z-mobile-nav { z-index: var(--z-mobile-nav); }
.z-modal { z-index: var(--z-modal); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-tooltip { z-index: var(--z-tooltip); }

/* ===== 포지션 유틸리티 ===== */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }
.sticky-top { position: sticky; top: 0; z-index: var(--z-header); }
.sticky-bottom { position: sticky; bottom: 0; z-index: var(--z-header); }

/* ===== 크기 유틸리티 ===== */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }
.w-screen { width: 100vw; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.h-fit { height: fit-content; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* ===== 오버플로우 ===== */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }

/* ===== 섹션/영역 ===== */
.section { padding: var(--gutter-xl) 0; }
.section-sm { padding: var(--gutter-lg) 0; }
.section-md { padding: var(--gutter-xl) 0; }
.section-lg { padding: calc(var(--gutter-xl) * 2) 0; }
.section-xl { padding: calc(var(--gutter-xl) * 3) 0; }

/* ===== 접근성 개선 ===== */
.app-sidebar[aria-hidden="true"] { visibility: hidden; }
.app-sidebar[aria-hidden="false"] { visibility: visible; }

/* ===== 접근성 ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.not-sr-only {
  position: static; width: auto; height: auto; padding: 0; margin: 0;
  overflow: visible; clip: auto; white-space: normal;
}

/* 포커스 가시성 개선 */
.focus-visible:focus-visible,
.mobile-menu-btn:focus-visible,
.sidebar-close-btn:focus-visible,
.nav-link:focus-visible,
.sidebar-link:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* ===== 다크모드 대응 ===== */
@media (prefers-color-scheme: dark) {
  .app-sidebar { background: rgba(255, 255, 255, 0.4); /* 조금 더 옅은 색 */
  backdrop-filter: blur(12px) saturate(120%); /* 블러 + 채도 강화 */
  -webkit-backdrop-filter: blur(12px) saturate(120%); /* 사파리 대응 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 유리 테두리 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); /* 입체감 */}
  .app-mobile-nav {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(71, 85, 105, 0.5);
  /* } */
}

/* ===== 고대비 모드 대응 ===== */
@media (prefers-contrast: high) {
  .app-header { border-bottom-width: 2px; }
  .nav-link, .sidebar-link { border: 1px solid transparent; }
  .nav-link:hover, .nav-link:focus,
  .sidebar-link:hover, .sidebar-link:focus { border-color: currentColor; }
  .sidebar-divider { height: 2px; }
  .card { border: 1px solid currentColor; }
  .app-sidebar { border-right: 1px solid currentColor; }
}

/* ===== 애니메이션 감소 대응 ===== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hamburger-line, .nav-link, .sidebar-link,
  .mobile-menu-btn, .sidebar-close-btn, .app-sidebar, .app-sidebar-overlay {
    transition: none !important;
  }
}

/* ===== 데모용 스타일 ===== */
.demo-content { max-width: 800px; margin: 0 auto; padding: 20px; }
.demo-card {
  background: #fff; border: 1px solid #e9ecef; border-radius: 8px;
  padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 마이페이지 이미지 설정 */
.mypage-avatar-wrap img{
  height: 120px; border-radius: 50%;
  box-shadow: 2px 2px 9px rgba(0,0,0,0.1);
  border: #dddddd 3px solid;
}

/* ==== MyPage: Password Modal ==== */
.mypage-modal{ position: fixed; inset: 0; display: none; z-index: 1100; }
.mypage-modal.open{ display:block; }
.mypage-modal-overlay{ position:absolute; inset:0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.mypage-modal-dialog{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) scale(.98);
  width: min(480px, calc(100% - 32px));
  background:#fff; border:1px solid #e5e7eb; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  overflow:hidden; opacity:0;
  transition: transform .18s ease, opacity .18s ease;
}
.mypage-modal.open .mypage-modal-dialog{ transform: translate(-50%,-50%) scale(1); opacity:1; }
.mypage-modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #f1f3f5;
}
.mypage-modal-header h3{ margin:0; font-size:18px; font-weight:700; color:#2c3e50; }
.mypage-modal-close{
  appearance:none; border:none; background:transparent;
  font-size:24px; line-height:1; cursor:pointer; color:#6c757d;
}
.mypage-modal-close:hover{ color:#2c3e50; }
.mypage-modal-body{ padding:16px; }
.mypage-modal-footer{
  display:flex; justify-content:flex-end; gap:8px;
  padding:12px 16px; border-top:1px solid #f1f3f5;
}

/* 폼  정리 */
#mypagePwModal .form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
#mypagePwModal label{ font-size:13px; color:#475569; }
#mypagePwModal input{
  border:1.5px solid #e5e7eb; padding:8px 10px; border-radius:4px;
  outline:none; font-size:14px;
}
#mypagePwModal input:focus{ border-color:#b8c0c7; box-shadow:0 0 0 3px rgba(44,62,80,.08); }
.mypage-profile-actions{ display: flex; justify-content: center; }

/* 편집 전용 요소 표시/숨김 */
.edit-only { display: none; }
.mypage-grid.is-editing .edit-only { /* JS로 제어 */ }

}
.btn-cart-link{
    gap: 3px;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: transparent linear-gradient(117deg, var(--main-green) 0%, var(--main-green-dark) 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 8px 20px var(--main-green)73;
    border-radius: 24px;
    opacity: 1;
    color: #fff !important;
    text-decoration: none;
}
.btn-cart-link img{
    filter: brightness(0) invert(1);
    transition: filter .2s ease;
}
.btn-cart-link:hover,
.btn-cart-link:focus,
.btn-cart-link:active{
    color: #fff !important;
    text-decoration: none;
}

.app-header.is-scrolled .btn-cart-link img{
    filter: brightness(0) invert(1);
}