*{ margin: 0; padding: 0; box-sizing: border-box; }
html{font-size: 18px; font-family: 'Nunito', sans-serif; color: #2E261C;}
body{background-color: #F7F1E8; padding: 0 0.5rem; display: flex; flex-direction: column; align-items: center;}
h1, h2, h3, h4>a, #title{font-family: 'Playwrite US Trad',cursive; font-size: 125%;}
h2, h3, h4>a, #title{color: #A8570C;}
h2{font-size: 180%;}

/* main form>*{font-size: 125%;}
main form input{padding: 0.25rem; border-radius: 3px; border: 1px solid #888; background-color: #FFF;}
main form button{padding: 0.25rem;} */

/* edit.html */
input[type="number"][size="3"] { width: calc(3ch + 2rem); }
input[type="text"][size="3"] { width: calc(3ch + 2rem); }
input[type="text"][size="7"] { width: calc(7ch + 2rem); }
input[type="text"][size="25"] { width: calc(25ch + 2rem); }

.edit-title{display: flex; justify-content: space-between; align-items: start;}
#title{resize: vertical;}
.steps ol > li{padding-bottom: 1rem;}
.steps ol > li ul{padding-left: 1rem;}
.steps ol > li ul > li{padding-top: 0.25rem;}
.steps ol > li ul > li input{padding-right: 0.25rem;}
.steps ol li textarea{vertical-align: top;}
.steps ol li ul li{list-style: circle;}
textarea{width: 100%; resize: vertical;}

/* Output Error */
output {color: red;}

/* global */
header form{display: flex; gap: 0.25rem;}
header form>*{padding: 0.25rem;}

ul>li{list-style-type: none;}
ul>li>a{color: #8B5E34;}
a{text-decoration: none;}
a:hover{color: #A8570C; text-decoration: underline;}

header, main{max-width: 700px; width: 100%;}
main>*,
main form.edit>* {padding-bottom: 2rem;}


/* Grid Card Layout */
.container-grid{padding-top: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1rem; row-gap: 1rem;}
.container-grid li article{padding: 0.5rem; overflow: hidden;}
.container-grid ul{display: flex; flex-wrap: wrap; column-gap: 0.5rem;}
img{width: 100%; height: 100%; object-fit: cover;}


/* html>header */
header {display: flex; flex-direction: column; margin-bottom: 3rem; gap: 0.25rem;}
header>div:first-child {border-bottom: 2px solid #8B5E34; display: flex; justify-content: space-between;}
header>div:last-child {display: flex; justify-content: space-between;}
header nav ul{display: flex; gap: 1rem;}
header h1{color: #8B5E34;}
header p{color: #2E261C; align-content: end;}
header a{color: #8B5E34;}
.visually-hidden{display: none;}


/* html>main */
main {padding: 1rem; border: solid 1.5px #888; border-radius: 30px; background-color: #FFF9F1;}
main section ul li article{background-color: #FFF; border-radius: 10px; box-shadow: 0px 2px 4px #888;}
main section ul li article li{color: #888;}
main section ul li article ul li>a{color: #8B5E34;}


/* index.html */
.container-buttons{display: flex; column-gap: 1rem; justify-content: center; padding-top: 1rem;}
.index-button{padding: 0.5em 1em; border-radius: 999px; background-color: #8B5E34; color: #F7F1E8;}
.index-button:hover{background-color: #FFF9F1; color: #A8570C;}


/* profile.html */
.profile{display: flex; flex-direction: row; justify-content: space-between;}
.profile>div{display: flex; flex-direction: column;}
.profile>div>div{display: flex; gap: 2rem;}
.profile img{width: 5rem; height: 5rem;}
.profile figure{margin: 0;}

/* login.html*/
form.login > * {font-size: 125%;}
form.login input{padding: 0.25rem; border-radius: 3px; border: 1px solid #888; background-color: #FFF;}
form.login button{padding: 0.25rem;}
form.login{display: flex; flex-direction: row; flex-wrap: wrap; row-gap: 1rem; align-items: baseline;}
form.login label{flex: 0 0 20%;}
form.login input{flex: 0 0 80%;}
form.login button{width: 50%; margin: 0 auto;}

form.login label:last-of-type{flex: 0 0 70%;}
#view-password{flex: 0 0 10%; height: 30px; border-radius: 20px; align-self: flex-end;}

/* search.html */
#tagsearch {width: 100%; min-width: 200px;}
form.search > * {font-size: 125%;}
form.search input{padding: 0.25rem; border-radius: 3px; border: 1px solid #888; background-color: #FFF;}
form.search button{padding: 0.25rem;}

/* recipe.html  && edit.html*/
.container-info,
.container-recipe{display: flex; gap: 1rem;}
.container-info>:first-child,
.container-recipe>:first-child{flex: 1 2 0;}

form.recipe,
form.edit {display: contents;}

form.recipe input,
form.edit input {padding: 0.25rem; border-radius: 3px; border: 1px solid #888; background-color: #FFF;}
form.recipe button,
form.edit button {padding: 0.25rem;}

/* with: calc(100%- 1em /3 */
.container-info>:last-child,
.container-recipe>:last-child{flex: 2 1 0;}
.container-info img{width: 200px; height: 200px; margin-bottom: 0.5rem; transform: rotate(2deg); border: 5px solid #FFF; border-radius: 3px;}
.description,
.ingredients ul,
.steps ol{line-height: 1.25;}


.recipe-header span {color:#8B5E34;}
.recipe-header div{display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 1.5rem;}
.recipe-header ul{display: flex; flex-direction: row; column-gap: 0.5rem;}
.recipe-header ul li{color: #888;}
.recipe-header>div:last-child{display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 0.5rem;}
/* 여기 위에 column-gap: 0.5rem; 재확인해야됨 */

.ingredients ul li{padding-left: 1rem; text-indent: -1rem;}
.steps ol{padding-left: 1rem;}

dl{display: flex; flex-wrap: wrap; column-gap: 0.5rem; row-gap: .25rem;}
dl dt{font-weight: 600; flex: 0 0 calc((100% - .5rem)*.25);}
dl dd{flex: 0 0 calc((100% - .5rem)*.75);}

@media (max-width: 700px){
    form.login{flex-direction: column; row-gap: 0; column-gap: 0;}
    form.login label,
    form.login input {width: 100%;}
    form.login label[for="password"]{margin-top: 1rem;}
    form.login button{margin-top: 1rem;}
}

@media (max-width: 600px){
    .container-grid{grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 500px){
    body{padding: 0;}
    main{border: 0;}
    header{padding: 0.5rem;}
    .container-info,
    .container-recipe{flex-direction: column; gap: 2rem;}
}

@media (max-width: 400px){
    .container-grid{grid-template-columns: repeat(1, 1fr);}
}