/* COMMON */
body {touch-action: manipulation;}
#wrap { height: 100dvh; display: flex; flex-direction: column;}
.inner {padding: 0 1.5rem;}

header {padding: 1.5rem 0; background: #fff; border-bottom: 1px solid #ddd; flex-shrink: 0;}
header a {display: block; text-align: center;}
header img {width: 17rem;}

main {padding: 1.5rem 0;}

/* splash */
#splash {display: flex; align-items: center; justify-content: center; height: 100dvh;}
#splash img {width: 80%; max-width: 24rem; transform: translateY(-15%);}

/* nav */
nav {background: #fff; border: 1px solid #ddd; border-radius: 5rem; padding: 1rem 1.5rem;}
nav ul {display: flex; align-items: center;}
nav ul li.home {width: 20%;}
nav ul li.bookmark {width: 27%;}
nav ul li.guide {width: 31%;}
nav ul li.note {width: 22%;}
nav ul li a {font-size: 1.6rem; font-weight: 600; display: block; text-align: center; color: #494949; padding: .5rem 0}
nav ul li.on a {background: #4b89a0; color: #fff; border-radius: 5rem;}

/* bookmark.php */
#bookmark { flex: 1; min-height: 0;}
#bookmark .inner {padding-bottom: 1.5rem;}
#bookmark .bookmark_wrap { margin-top: 3rem; }
#bookmark .bookmark_wrap ul { display: flex; flex-direction: column; gap: 2.5rem;}
#bookmark .bookmark_wrap ul li { border-radius: 2rem; background-color: #fff; padding: 2rem 2rem; border: 1px solid #ddd; position: relative; display: flex; gap: 1rem; align-items: flex-start;}
#bookmark .bookmark_wrap ul li .text_box { flex: 1; min-width: 0;}
#bookmark .bookmark_wrap ul li h4 { font-size: 1.6rem; font-weight: 600;}
#bookmark .bookmark_wrap ul li p { font-size: 1.5rem; line-height: 1.5; margin-top: 2rem;}
#bookmark .bookmark_wrap ul li img {flex-shrink: 0; width: 3rem;}
#bookmark .empty {text-align: center; min-height: calc(100dvh - 15rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.3rem;}
#bookmark .empty h5 {font-size: 2.3rem; font-weight: 600; color: #000}

/* guide.php */
#guide .guide_wrap {margin-top: 3rem;}
#guide .guide_wrap ul {display: flex; flex-direction: column; gap: 2.8rem;}
#guide .guide_wrap ul li h4 {font-size: 1.6rem; font-weight: 600; background: #4b89a0; padding: 2.2rem 1.8rem; color: #fff; border-radius: 1.5rem; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; margin-bottom: 1.5rem;}
#guide .guide_wrap ul li p {font-size: 1.5rem; line-height: 1.5;}
#guide .guide_wrap ul li p b {font-weight: 600; color: #444;}

/* note.php */
#note .empty {text-align: center; min-height: calc(100dvh - 15rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.3rem;}
#note .empty h5 {font-size: 2.3rem; font-weight: 600; color: #000}
#note .empty .insert_btn {display: block; background: #4b89a0; font-size: 1.7rem; padding: 1.2rem 7.5rem; border-radius: 3rem; color: #fff; width: fit-content; margin: 0 auto; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 5px;}
#note .list_wrap .insert_btn {font-size: 1.5rem; color: #0484a0; font-weight: 600; display: block; margin-left: auto; width: fit-content; margin-top: 1.5rem; margin-bottom: 1.5rem;}
#note .list_wrap ul {display: flex; flex-direction: column; gap: 4rem;}
#note .list_wrap ul li {border: 1px solid #ddd; border-radius: 1.5rem; overflow: hidden; box-shadow: rgba(99, 99, 99, 0.15) 0px 2px 5px 0px;}
#note .list_wrap ul li .title_wrap {display: flex; align-items: center; justify-content: space-between; background: #4b89a0; padding: .8rem 1.8rem;}
#note .list_wrap ul li .title_wrap p {font-size: 1.6rem; color: #fff; font-weight: 600;}
#note .list_wrap ul li .title_wrap .btn_wrap {display: flex; align-items: center; gap: 1rem;}
#note .list_wrap ul li .title_wrap .btn_wrap a,
#note .list_wrap ul li .title_wrap .btn_wrap button {display: block; width: 2.8rem;}
#note .list_wrap ul li .title_wrap .btn_wrap img {width: 100%;}
#note .list_wrap ul li .content_wrap {background: #fff; padding: .8rem 1.8rem; display: flex; align-items: center; justify-content: space-between;}
#note .list_wrap ul li .content_wrap h6 {font-size: 1.5rem; font-weight: 600;}
#note .list_wrap ul li .content_wrap p {font-size: 1.5rem; max-width: 21rem; line-height: 1.4;}
#note .list_wrap ul li .content_wrap:not(:last-of-type) {border-bottom: 1px solid #ddd;}

/* note_insert.php */
#note_insert .input_wrap {margin-top: 4rem;}
#note_insert .input_wrap ul {display: flex; flex-direction: column; gap: 3.5rem;}
#note_insert .input_wrap ul li {display: flex; flex-direction: column; gap: 1rem;}
#note_insert .input_wrap ul li label {font-size: 1.7rem; font-weight: 600; color: #0484a0;}
#note_insert .input_wrap ul li input[type="text"],
#note_insert .input_wrap ul li input[type="tel"],
#note_insert .input_wrap ul li input[type="date"] {background: none; border-bottom: 1px solid #999; font-size: 1.6rem; padding: .7rem 0; outline: none; border-radius: 0; width: 100%;}
#note_insert .input_wrap ul li input[type="date"]::-webkit-date-and-time-value {text-align: left;}
#note_insert .input_wrap .save_btn {display: block; background: #4b89a0; color: #fff; font-size: 1.8rem; width: 100%; padding: 1.5rem 0; text-align: center; border-radius: 1rem; margin-top: 5rem; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}


/* home.php */
.search_area { display: flex; align-items: center; border-radius: 1.5rem; background-color: #0484a0; padding: 0.8rem 2rem; margin-top: 1rem;}
.search_area input { background-color: transparent; color: #fff; font-size: 1.7rem; outline: none; flex: 1; min-width: 0; font-weight: 500;}
.search_area input::placeholder { color: #fff;}
.search_area img{ width: 2.5rem; flex-shrink: 0;}

#home { height: 100%; position: relative; padding: 0;}
#home #map { overflow: hidden; z-index: 0; height: 100%;}
#home nav{ position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%); width: calc(100% - 3rem); z-index: 1;}
#home .map_wrap { height: 100%; z-index: 0;}
#home .custom-infowindow { background-color: #fff; border-radius: 1.2rem 1.2rem 1.2rem 0; text-align: left; padding: 1.2rem 1.6rem; border-width: 0.5rem; position: relative; transform: translate(50%, -1.2rem); max-width: 20rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
#home .custom-infowindow::before {content: ''; position: absolute; bottom: 1px;	left: 0;	width: 0;	height: 0;	border: 1.2rem solid transparent;	border-top-color: #fff;	border-bottom: 0;	border-left: 0;		margin-bottom: -1.2rem; }
#home .custom-infowindow h3 {font-size: 1.6rem; font-weight: 600; line-height: 1.4;}