*{
 margin : 0;
 padding: 0;
 box-sizing: border-box;
}


/* 화면 전체 설정 및 중앙 정렬 */
body 
{
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: papayawhip; 
    font-family: sans-serif; 
}

/* 상단 아스키 타이틀 영역 */

.ascii-title {
    font-size: 11px; /* 글자가 너무 크면 잘리므로 적당히 조절 */
    line-height: 1.1;
    color: #333;
    font-weight: bold;
    text-align: center;
    white-space: pre;  아스키 아트 공백 유지 필수 
    align-items: flex-start;
    position: absolute;
    top: 60px;

}



.ascii-dog {
	position : absolute;
	top: 550px;
	left: 292px;
	font-size: 11pt;
	color: #333;

}

.ascii-cow {
	position : absolute;
	top: 500px;
	left: 155px;
	font-size: 11pt;
	color: #333;

}

.ascii-sun {
    font-size: 7px; /* 글자가 너무 크면 잘리므로 적당히 조절 */
    line-height: 1.3;
    color: navy;
    font-weight: bold;
    position: absolute;
    top: 20px;
    right:50px;

}


 /*집 전체 컨테이너 (중앙 정렬 유지) */
.house-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
}

/*사다리꼴 지붕 구현 (CSS border 활용) */
.roof {
    width: 526px;
    height: 180px;
    border-bottom: 165px solid darkkhaki; 
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    margin-bottom: -2px; /* 본체와의 미세한 틈 제거 */
}

/* 집 본체 */
.house-body {
    width: 435px;
    height: 300px;
    background-color: #ffffff; /* 집 벽 색상 */
    border: 1.5px dashed gray;
    /*border-radius: 4px;*/
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* 창문 3개를 담는 상단 영역 */
.windows-wrapper {
    display: flex;
    gap: 50px; /* 창문 사이 간격 */
    position: absolute;
    top: 45px;
}

/* 개별 창문 스타일 (링크) */
.window {
    width: 85px;
    height: 55px;
    border: 2px dotted gray;
    background-color: aliceblue;
    transition: transform 0.5s, background-color 0.2s;
    font-size: 11pt;
    
}

.window:hover {
    transform: scale(1.02);
    background-color: lightblue;
}

/* 문 스타일 (링크) */
.door {
    width: 60px;
    height: 85px;
    border: 1.8px dashed gray;
    border-bottom: none;
    /*border-top-left-radius: 25px;
    border-top-right-radius: 25px;*/
    background-color: lemonchiffon;
    transition: transform 0.2s, background-color 0.2s;
    font-size: 10pt;
    padding:11px;
    
}

.door:hover {
    transform: scale(1.02);
    background-color: #ffe082;
}

a {
	text-decoration:  none;
	color: tomato;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	
}


.ascii-blog {
  font-family: monospace;
  font-size: 13px;
  line-height: 0.85;
  color: black;
   position: absolute;
  left: 50px;
  top: 605px;
  margin: 0;
  border: 1.5px dashed black;
    border-radius: 0 0 35px 35px;

    display: flex;
  align-items: center;      /* 세로 기준 정가운데 */
  justify-content: center;

  min-width: 20px;  /* 밥그릇의 최소 가로 크기 (필요에 따라 조절) */
  height: 35px;     /* 밥그릇의 세로 크기 (필요에 따라 조절) */
  padding: 0 10px;

}

.ascii-blog a {
  color: inherit;
  text-decoration: none;
}

.ascii-blog a:hover {
  opacity: 0.5;
}


.ascii-insta {
  font-family: monospace;
  font-size: 13px;
  line-height: 1.2;
  color: black;
   position: absolute;
  left: 408px;
  top: 605px;
  margin: 0;
  border: 1.5px dashed black;
    border-radius: 0 0 35px 35px;

    display: flex;
  align-items: center;      /* 세로 기준 정가운데 */
  justify-content: center;

  min-width: 20px;  /* 밥그릇의 최소 가로 크기 (필요에 따라 조절) */
  height: 35px;     /* 밥그릇의 세로 크기 (필요에 따라 조절) */
  padding: 0 10px;

}


.ascii-insta a {
  color: inherit;
  text-decoration: none;
}

.ascii-insta a:hover {
  opacity: 0.5;
}



@media only screen and (max-width: 600px) {




    .house-container {
        transform: scale(0.64);
    }

.ascii-title {
    font-size: 7.2px; /* 글자가 너무 크면 잘리므로 적당히 조절 */
    line-height: 1.1;
    color: #333;
    font-weight: bold;
    text-align: center;
    white-space: pre;  아스키 아트 공백 유지 필수 
    align-items: flex-start;
    position: absolute;
    top: 130px;

}


.ascii-sun {
    font-size: 4px; /* 글자가 너무 크면 잘리므로 적당히 조절 */
    line-height: 1.3;
    color: navy;
    font-weight: bold;
    position: absolute;
    top: 65px;
    right:20px;

}

 .house-body {
  border-left: 1px dashed #000;
  border-right: 1px dashed #000;
}

 .door {
  border-left: 1px dashed #000;
  border-right: 1px dashed #000;


 
 }
/*.roof {
    width: 300px;
    height: 100px;
    border-bottom: 50px solid darkkhaki; 
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    margin-bottom: -2px;


} */
}