body {min-height: 100dvh; background: url("../img/bg-img.webp") no-repeat 0 0 / cover;}
.inner {padding: 0 1.5rem;}

/* HEADER */
header {margin-bottom: 1.5rem;}
header .inner {display: flex; justify-content: space-between; align-items: center;}
header a {display: block; padding: 1.2rem 0;}
header a  img {width: 5rem;}
header a .logo {width: 5rem;}
header a .board_write {width: 4rem;}

/* navigation */
nav {position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); width: 100%;}
nav .inner {position: relative;}
nav ul {display: flex; align-items: center; justify-content: space-between; background: #898989; border-radius: 10rem; padding: 2rem 4rem;}
nav ul li {position: relative;}
nav ul li a {display: block;}
nav ul li a img {height: 3.5rem;}
nav ul li.on::after {content: ""; display: block; position: absolute; top: -2.1rem; left: 50%; transform: translateX(-50%); width: 6rem; height: 6.5rem; background: url("../img/icon-10.png") no-repeat 0 0 / contain;}
nav ul li.on a img {filter: brightness(0) invert(1);}
nav .write {position: absolute; top: -7.7rem; right: 1.5rem; width: 5rem; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;border-radius: 100%;}
nav .write img {width: 100%; height: 100%;}

/* index.php */
#index .logo_wrap {display: flex; align-items: center; justify-content: center; width: 100%; height: 100dvh;}
#index .logo_wrap img {width: 20rem; margin-bottom: 10rem;} 

/* home.php */
#home .main_wrap {overflow-y: auto; margin-bottom: 15rem; position: relative;}
#home .main_wrap::-webkit-scrollbar {display: none;}
#home .main_wrap img {width: 185rem; padding-right: 2rem;}

/* detail.php */
#detail .main_wrap {border: 3px solid #fff; display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.5rem; padding-right: 0; margin-bottom: 5rem;}
#detail .main_wrap .left_wrap {display: flex; flex-direction: column; gap: 1rem;}
#detail .main_wrap .left_wrap h2 {font-size: 2.5rem; color: #fff;}
#detail .main_wrap .left_wrap .symbol_wrap {display: flex; align-items: flex-end; gap: 1.8rem;}
#detail .main_wrap .left_wrap .symbol_wrap p {font-size: 4.5rem; font-weight: 600; color: #fff;}
#detail .main_wrap .left_wrap .symbol_wrap p.red {color: #f86466;}
#detail .main_wrap .left_wrap .symbol_wrap p.blue {color: #3b7cff;}
#detail .main_wrap .left_wrap .symbol_wrap span {font-size: 2.2rem; color: #fff;}
#detail .main_wrap .right_wrap {display: flex; flex-direction: column; align-items: flex-end; gap: 1.2rem;}
#detail .main_wrap .right_wrap button {margin-right: 1.5rem;}
#detail .main_wrap .right_wrap button img {width: 3.4rem;}
#detail .main_wrap .right_wrap p {font-size: 1.6rem; font-weight: 600; background: #d2e6ff; padding: .8rem 1.5rem; color: #000;}
#detail .main_wrap .right_wrap p.yellow {background: #fffbc5;}
#detail .main_wrap .right_wrap p.red {background: #ffd7d7;}
#detail .main_wrap .right_wrap p.green {background: #edffe9;}

#detail .list_wrap {margin-bottom: 15rem;}
#detail .list_wrap ul {display: flex; flex-direction: column; gap: 3.5rem;}
#detail .list_wrap ul li {display: flex; align-items: center; justify-content: space-between;}
#detail .list_wrap ul li h4 {border: 1px solid #fff; border-radius: 1rem; padding: 1rem .8rem; color: #fff; font-weight: 500; font-size: 1.8rem; width: 32%; white-space: nowrap; position: relative;}
#detail .list_wrap ul li h4::before {content: ""; position: absolute; top: 50%; right: -28%; transform: translateY(-50%); width: 28%; background: #fff; height: 1px;}
#detail .list_wrap ul li h4::after {content: ""; display: block; position: absolute; top: 50%; right: -36%; transform: translateY(-50%); width: 2.5dvw; height: 2.5dvw; background: #fff; border-radius: 100%;}
#detail .list_wrap ul li .figure {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; padding-bottom: .6rem; width: 52%}
#detail .list_wrap ul li .figure p {font-size: 1.6rem; color: #fff;}
#detail .list_wrap ul li .figure span {font-size: 1.6rem; color: #fff;}

/* search.php */
#search .search_wrap {margin-bottom: 4rem;}
#search .search_wrap form {display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 1rem; padding: 0 1.5rem;}
#search .search_wrap input[type="text"] {width: 88%; height: 7rem; font-size: 2.1rem; font-weight: 500; outline: none;}
#search .search_wrap button img {width: 2.8rem;}

#search .list_wrap {margin-bottom: 14rem;}
#search .list_wrap ul {display: flex; flex-direction: column; gap: 3rem;}
#search .list_wrap ul li a {display: flex; align-items: center; gap: 2.5rem;}
#search .list_wrap ul li h4 {width: 7rem; height: 7rem; background: #d2e6ff; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.3rem; font-weight: 500; line-height: 1; color: #000;}
#search .list_wrap ul li h4.yellow_bg {background: #fffbc5;}
#search .list_wrap ul li h4.red_bg {background: #ffd7d7;}
#search .list_wrap ul li h4.green_bg {background: #edffe9;}
#search .list_wrap ul li h4.red_color {color: #f86466;}
#search .list_wrap ul li h4.blue_color {color: #3b7cff;}


#search .list_wrap ul li .name_wrap span {display: inline-block; color: #fff; font-size: 2rem; margin-bottom: .5rem; font-weight: 300;}
#search .list_wrap ul li .name_wrap p {color: #fff; font-size: 2.1rem;}

/* like.php */
#like .title_wrap {display: flex; align-items: center; gap: 1rem; border: 3px solid #fff; padding: 1.6rem 1.5rem; margin-bottom: 4rem;}
#like .title_wrap img {width: 3.2rem;}
#like .title_wrap h2 {font-size: 2.7rem; font-weight: 500; color: #fff;}

#like .list_wrap {margin-bottom: 14rem;}
#like .list_wrap ul {display: flex; flex-direction: column; gap: 3rem;}
#like .list_wrap ul li {display: flex; align-items: center; gap: 2.5rem;}
#like .list_wrap ul li h4 {width: 7rem; height: 7rem; background: #edffe9; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.3rem; font-weight: 500; line-height: 1; color: #000;}
#like .list_wrap ul li .name_wrap span {display: inline-block; color: #fff; font-size: 2rem; margin-bottom: .5rem; font-weight: 300;}
#like .list_wrap ul li .name_wrap p {color: #fff; font-size: 2.1rem;}
#like .list_wrap ul li button {margin-left: auto;}
#like .list_wrap ul li button img {width: 4.8rem;}

.search_wrap input {border: 3px solid #fff; width: 100%; height: 6rem; background: url("../img/search-2.png") no-repeat right 1.5rem center; background-size: 3rem; filter: brightness(0) invert(1); padding-right: 4rem; padding-left: 2rem; font-size: 2rem; font-weight: 600;}
.search_wrap input::placeholder {font-size: 2rem; font-weight: 600;}

/* board.php */
#board .search_wrap {margin-bottom: 4rem;}
#board .list_wrap {padding-bottom: 20rem;}
#board .list_wrap ul {display: flex; flex-direction: column; gap: 3rem;}
#board .list_wrap ul li a {border: 3px solid #fff; border-radius: 1rem; padding: 2rem 1.5rem; background: #fff; display: flex; flex-direction: column; gap: 10px;}
#board .list_wrap ul li h2 {font-size: 2rem;}
#board .list_wrap ul li .post_content {color: #a3a3a3; font-size: 1.8rem; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#board .list_wrap ul li span {font-size: 1.8rem; display: flex; align-items: center; gap: 0.5rem;}
#board .list_wrap ul li span img {width: 0.8rem;}
#board .list_wrap ul li.empty_message {text-align: center; padding: 2rem;}
#board .list_wrap ul li.empty_message p {color: #fff; font-size: 1.8rem;}
#board .list_wrap ul li[data-content] {display: block;}

/* board_detail.php */
#board_detail .post_detail_wrap {padding-bottom: 20rem;}
#board_detail .post_detail_item {border: 3px solid #fff; border-radius: 1rem 1rem 0 0; padding: 2rem 1.5rem; background: #fff; display: flex; flex-direction: column; gap: 1.5rem;}
#board_detail .post_detail_item .post_user_name {font-size: 1.8rem; color: #666; font-weight: 500; margin: 0; padding-bottom: 2rem; border-bottom: 1px solid #000;}
#board_detail .post_detail_item .post_detail_content {font-size: 1.8rem; word-break: break-word; white-space: pre-wrap; margin: 0; color: #666;}
#board_detail .post_detail_item.empty_message {text-align: center; padding: 2rem;}
#board_detail .post_detail_item.empty_message p {color: #fff; font-size: 1.8rem; margin: 0;}

#board_detail .comment_wrap {border-top: 3px solid #000; border-bottom: 3px solid #000;}
#board_detail .comment_list_wrap {background: #fff; padding: 1rem 2rem;}
#board_detail .comment_list_wrap ul {display: flex; flex-direction: column; gap: 1rem;}
#board_detail .comment_list_wrap ul li {padding: 1.5rem 0; border-bottom: 1px solid #000;}
#board_detail .comment_list_wrap ul li:last-child {border-bottom: none;}
#board_detail .comment_list_wrap ul li .comment_item {display: flex; flex-direction: column; gap: 0.8rem;}
#board_detail .comment_list_wrap ul li .comment_user_name {font-size: 1.8rem; color: #666; font-weight: 500; margin: 0;}
#board_detail .comment_list_wrap ul li .comment_content {font-size: 1.8rem; word-break: break-word; white-space: pre-wrap; margin: 0; color: #999;}

#board_detail .comment_form_wrap {background: #fff; padding: 1.5rem 2rem; border-radius: 0 0 1rem 1rem;}
#board_detail .comment_form_wrap form {width: 100%;}
#board_detail .comment_form_wrap textarea {border: 3px solid #fff; border-radius: 1.5rem; padding: 1.5rem; font-size: 1.8rem; font-family: inherit; resize: none; outline: none; width: 100%; box-sizing: border-box; background: #ededed; color: #666;}
#board_detail .comment_form_wrap textarea::placeholder {color: #999;}

/* board_write.php */
#board_write .write_wrap {background: #fff; border-radius: 1rem; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 2rem;}
#board_write .write_item {display: flex; flex-direction: column; gap: 1.5rem;}
#board_write .write_wrap .write_user_name {font-size: 1.8rem; color: #666; font-weight: 500; margin: 0; padding-bottom: 2rem; border-bottom: 1px solid #000; display: inline-block; width: 100%;}
#board_write .write_item form {display: flex; flex-direction: column; gap: 0;}
#board_write .write_item textarea {border: none; border-radius: 0; padding: 0; font-size: 1.8rem; font-family: inherit; resize: none; outline: none; width: 100%; box-sizing: border-box; background: transparent; color: #666; min-height: 20rem;}
#board_write .write_item textarea::placeholder {color: #999;}
#board_write .write_submit_btn {border: 3px solid #fff; border-radius: 1rem; padding: 1.5rem; font-size: 1.8rem; font-weight: 600; background: #ededed; color: #000; cursor: pointer; width: 100%;}
#board_write button {margin-top: 4rem;}