/* Basic styles will go here */
body {
    font-family: sans-serif;
    margin: 20px;
}

#start-page, #question-page {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
}

button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    margin-top: 15px;
}

#question-area h2 {
    margin-bottom: 15px;
}

#answer-options label {
    display: block;
    margin-bottom: 10px;
    text-align: left;
    padding-left: 30%; /* Adjust as needed */
}

#progress-bar {
    margin-bottom: 20px;
}

/* Style adjustments for results page */
.skin-type-summary {
    margin-bottom: 2em; /* Add space below the summary title */
    text-align: center; /* Center align the summary text */
}

/* Add margin below each detail section */
.skin-type-details {
    margin-bottom: 1.5em; /* Add space after each skin type detail block */
}

.skin-type-details h2 {
    margin-top: 25px; /* Add some space above the skin type name */
}

.skin-type-details h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.1em; /* Adjust font size to be slightly larger than body text */
}

/* Style for the detail title (e.g., "복합성 피부") when multiple types are shown */
.skin-type-details h3.detail-title {
    font-size: 1.25em; /* Larger than sub-titles, smaller than main summary */
    /* Keep other h3 styles like margin if needed, or define separately */
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Style for sub-titles (e.g., "[ 관리 요령 ]") - slightly larger than body */
.skin-type-details h3:not(.detail-title) { /* Apply only if it DOESN'T have the detail-title class */
    font-size: 1.1em; 
    margin-top: 20px; /* Keep consistent margins */
    margin-bottom: 10px;
}

/* Align care tips list items to the left */
.skin-type-details ul {
    list-style-position: inside; /* Ensures list markers are aligned left too */
    padding-left: 0; /* Removes default ul padding */
}

.skin-type-details ul li {
    text-align: left;
    margin-bottom: 8px; /* Add some space between list items */
}

/* Style for ingredients paragraph */
.skin-type-details p.ingredients {
    text-align: left;
    background-color: #f8f8f8;
    padding: 10px;
    border-radius: 4px;
    line-height: 1.6;
}