@charset "UTF-8";

html {
    height: 100%;
    overflow: auto;
	padding: 0;
    margin: 0;  
}
body {
    height: 100%;
	padding: 0;
    margin: 0;
}
div#outer {
    display: table;
    height: 100%;
    width: 100%;
}
div#inner {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
div#container {
	display: flex;
	flex-direction: column;
	justify-content: center;
    min-width: 800px;
    min-height: 580px;
}
img {
    width: 300px;
    height: 300px;
    margin: 30px 0;
}
p#header {
    font-family: Roboto-Medium;
    font-size: 28px;
    color: #323C46;
    text-align: center;
    line-height: 36px;
    margin-top: 0;
    margin-bottom: 12px;
}
p#paragraph {
    font-family: Roboto-Regular;
    font-size: 13px;
    color: #323C46;
    text-align: center;
    line-height: 20px;
	margin: 0 auto;
}
/* 공통 파스텔 버튼 스타일 */
.btn-pastel {
    display: inline-block;
    
    width: 300px;           /* 1. 버튼 전체 너비 고정 (원하는 크기로 변경 가능) */
    text-align: center;     /* 2. 텍스트 가운데 정렬 */
    padding: 12px 0;        /* 3. 상하 패딩은 고정값(px), 좌우 패딩은 0으로 설정 */
    box-sizing: border-box; /* 4. 패딩과 테두리가 width에 포함되도록 설정 */
    
    font-size: 15px;
    font-weight: 600;
    color: #4a5568; /* 과하지 않은 깔끔한 다크 그레이 텍스트 */
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    outline: none;
}

/* 마우스 호버(Hover) 효과 */
.btn-pastel:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* 클릭(Active) 효과 */
.btn-pastel:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* 색상 옵션들 */
.btn-blue {
    background-color: #e0f2fe;
    color: #0369a1;
}
.btn-blue:hover {
    background-color: #bae6fd;
}

.btn-pink {
    background-color: #fce7f3;
    color: #be185d;
}
.btn-pink:hover {
    background-color: #fbcfe8;
}

.btn-green {
    background-color: #dcfce7;
    color: #15803d;
}
.btn-green:hover {
    background-color: #bbf7d0;
}

.btn-purple {
    background-color: #f3e8ff;
    color: #6b21a8;
}
.btn-purple:hover {
    background-color: #e9d5ff;
}


.tooltip-container {
      position: relative;
      display: inline-block;
}

.tooltip-container img {
  width: 300px;
  display: block;
  border-radius: 8px;
}

/* 툴팁 메시지 상자 */
.tooltip-text {
  visibility: hidden;
  width: 60px;
  background-color: transparent;
  color: #000;
  text-align: center;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 15px;

  /* 위치 설정 (이미지 하단 가운데) */
  position: absolute;
  z-index: 1;
  bottom: 250px;
  left: 75%;
  transform: translateX(-50%);

  /* 부드러운 전환 효과 */
  opacity: 0;
  transition: opacity 0.3s;
}

/* 마우스 호버 시 툴팁 표시 */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}