body {
  font-family: Arial, sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #fff;
  color: #000;
  padding: 1rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

header img {
  width: 45px;
  height: 45px;
}

main {
  flex: 1;
  display: flex;
  background-color: #f4f4f4;
}

aside {
  width: 25%;
  background-color: #f4f4f4;
  padding: 1rem;
  text-align: left;
}

aside img {
  width: 100px;
  height: 100px;
  margin-bottom: 1rem;
}

section {
  flex: 1;
  padding: 1rem;
}

.app-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border: 1px solid #ddd;
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: #fff;
}

.app-desc {
  flex: 1;
  padding-right: 2rem;
}
.app-title {
  display: flex;
  align-items: center; /* 세로 가운데 정렬 */
  gap: 10px;           /* 아이콘과 제목 사이 간격 */
}

.app-title .app-icon {
  width: 40px;   /* 아이콘 크기 조정 */
  height: 40px;
}


.app-qr {
  flex: 1;
  text-align: center;
}

.app-qr h4 {
  margin-top: 1rem;
}

img.qr {
  width: 180px;
  height: 180px;
  display: block;
  margin: 0.5rem auto;

  /* 외곽선 스타일 */
  border: 2px solid #333;   /* 두께와 색상 */
  border-radius: 8px;       /* 모서리 둥글게 */
  padding: 5px;             /* 이미지와 테두리 사이 여백 */
  background-color: #fff;   /* 배경색 (QR 코드 대비용) */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* 그림자 효과 */
}

.carousel {
  position: relative;
  overflow: hidden;
  width: calc(100% - 40px); /* 좌우 margin 합계 고려 */
  max-width: 800px;
  margin: 10px auto;

  /* row 스타일 */
  border: 2px solid #ccc;       /* 외곽선 */
  border-radius: 8px;           /* 모서리 둥글게 */
  background-color: #f9f9f9;    /* 배경색 */
  padding: 10px;                /* 안쪽 여백 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 살짝 그림자 */
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel img {
  width: calc((100% / 6) - 10px); /* 6개씩 보이도록 */
  margin: 0 5px;                  /* 이미지 사이 여백 */
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid #ddd;         /* 각 이미지에도 얇은 테두리 */
  border-radius: 4px;
  background-color: #fff;         /* 이미지 배경 */
}
/* 모달 기본 스타일 */
/* 1. 모달 전체 배경 (화면 전체 레이어) */
.modal {
  display: none;       /* 기본 상태: 숨김 */
  position: fixed;     /* 화면에 고정 (스크롤해도 따라옴) */
  top: 0;
  left: 0;
  width: 100vw;        /* 화면 전체 너비 */
  height: 100vh;       /* 화면 전체 높이 */
  background-color: rgba(0, 0, 0, 0.8); /* 배경을 어둡게 하여 팝업 강조 */
  z-index: 10000;      /* 최상위 레이어 설정 */
  
  /* 자식 요소(콘텐츠)를 화면 중앙에 배치 */
  justify-content: center;
  align-items: center;
}

/* 2. 활성화 상태 */
.modal.show {
  display: flex !important;
}

/* 3. 실제 팝업 박스 (가로 50% 크기) */
.modal-content {
  position: relative;
  width: 20%;          /* 화면 너비의 정확히 1/4 */
  max-width: 500px;    /* PC에서 너무 커지는 것 방지 */
  min-width: 300px;    /* 모바일에서 너무 작아지는 것 방지 */
  background: #fff;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7); /* Floating 그림자 효과 */
  animation: popUpAnim 0.3s ease-out;      /* 나타날 때 애니메이션 */
}

/* 이미지 스타일 */
.modal-content img {
  width: 100%;         /* 박스 너비에 꽉 채움 */
  height: auto;
  display: block;
  border-radius: 10px;
}

/* 닫기 버튼 */
.close {
  position: absolute;
  top: -45px;
  right: 0;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}

/* 등장 애니메이션 */
@keyframes popUpAnim {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1rem;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}