.logo {
    width: 480px;
    margin: auto;
}

.font {
    font-family: 'Nanum Gothic',
}


body {
    background: white; 
    width: 480px;
    margin: auto;
}


h2 {
    color:black;
    text-align: center;
    line-height: center; 
}

#main, #result {
    border-radius: 10px;
    padding: 20px 15px;
    background-color: white;
    font-size:24px;         /*처음페이지(이름, 성별, 색상, 숫자) 리설트페이지(내용) 텍스트 크기*/
    line-height: 200%;
}

#name, #favNum, #favColor {
    width: 305px;
    height: 46px;
    border: 2px solid dodgerBlue;
    background-color: #eeeeff;
    padding-left: 10px;
    font-size:20px;
}

#name:focus, #favColor:focus, #favNum:focus {
    border-left: 0px;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    padding-left: 20px;    /*인풋 내부 텍스트 간격*/
    font-size:18px;
    
}

#submit , #details {
    display: block;
    margin: auto;
    border:0;
    border-radius: 30px;
    color: #fff;
    margin: 100px auto;
    padding: 0px 10px;
    width: 250px;
    background-color: #0000ff;
    font-size: 26px;
    line-height: 220%;     /*처음 페이지 '테스트' 버튼 크기*/
    text-align: center;
}

#intro {
    color:blue;
    font-size:24px;        /*리설트 페이지 상단 제목 텍스트 크기*/
}

#col, #num {
    color: gray;
    font-size: 20px;
    line-height: 170%;
    padding: 15px 0 10px 0;
    word-break: keep-all;
}

.result-title {
  display: block;
  font-size: 2em;    /* 기본 글자 크기의 2배 */
  font-weight: bold;
  margin-bottom: 7px; /* 아래 문장과 살짝 여백 */
  text-align: left;
}

#result span[style*="font-weight:bold"] {
    display: inline-block;
    margin-top: 7px;
    margin-bottom: 4px;
}

.small-green-desc {
  font-size: 12px !important;
  color: #27ae60;
}

.small-red-desc    { font-size: 28px !important; color: #e74c3c; }
.small-blue-desc   { font-size: 28px !important; color: #3498db; }
.small-purple-desc { font-size: 28px !important; color: #9b59b6; }
.small-orange-desc { font-size: 28px !important; color: #f39c12; }
.small-yellow-desc { font-size: 28px !important; color: #f7dc6f; }
.small-green-desc  { font-size: 28px !important; color: #27ae60; }
.small-pink-desc   { font-size: 28px !important; color: #ffb6c1; }
.small-black-desc  { font-size: 28px !important; color: #444; }
.small-white-desc  { font-size: 28px !important; color: #bbb; }
.small-brown-desc  { font-size: 28px !important; color: #9e7657; }

.small-num1-desc { font-size: 28px !important; color: #e67e22; }
.small-num2-desc { font-size: 28px !important; color: #e5c100; }
.small-num3-desc { font-size: 28px !important; color: #f79d25; }
.small-num4-desc { font-size: 28px !important; color: #4caf50; }
.small-num5-desc { font-size: 28px !important; color: #00bcd4; }
.small-num6-desc { font-size: 28px !important; color: #f06292; }
.small-num7-desc { font-size: 28px !important; color: #673ab7; }
.small-num8-desc { font-size: 28px !important; color: #212121; }
.small-num9-desc { font-size: 28px !important; color: #00bfae; }


#result {
    background: #fffbe7;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-size: 22px;
    line-height: 180%;
    padding: 25px 20px 30px 20px;
}

#resultImg {
    display: block;
    margin: auto;
}

#resultImg_d1,
#resultImg_d2 {
  display: block;
  margin: 100px auto 40px auto !important;  /* 위, 아래 60px 여백 */
  max-width: 100%;
}

#retry-btn{
    display: block;
    margin: auto;
    border:0;
    border-radius: 30px;
    color: #fff;
    padding: 0px 10px;
    width: 250px;
    background-color: orange;     /* 다시하기 버튼 */
    font-size: 26px;
    line-height: 220%;     
    text-align: center;
}

#retry-btn {
    margin-top: 60px !important;  /* 원하는 만큼(px 단위) 넓혀주세요 */
}

#test-btn{
    display: block;
    margin: auto;
    border:0;
    border-radius: 30px;
    color: #fff;
    padding: 0px 10px;
    width: 250px;
    background-color: orange;    /* 공유하기 버튼 */
    font-size: 26px;
    line-height: 220%;     
    text-align: center;
}

#end {
    display: block;
    margin: auto;
    width: 480px;
    text-align: center;
    font-size:16px;
    color: orange;             /* end, footer 설정*/
}