@charset 'utf-8';
@import url(common.css);

html {font-size: 13px;}

#wrap {background-color: #fff; margin-left: auto; margin-right: auto; min-height: 100vh; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
#wrap:has(.index) {background:radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);}
#wrap:has(footer nav) {padding-bottom: 7rem}
#wrap:has(.sub-top) header {display: none}
#wrap:has(.bg) {background-color: #f3f4f8}

.swiper .swiper-pagination {width: 100%;bottom: 1rem; font-size: 0; }
.swiper .swiper-pagination-bullet {margin: 0 .25rem !important;-webkit-transition: all 0.3s;transition: all 0.3s;opacity: 1;background: #d3d3d3;width: .6rem;height: .6rem;border-radius: 1rem;}
.swiper .swiper-pagination-bullet-active {background-color: var(--dark-blue);}

/* -------------------
common               |
------------------- */
/* header */
header {background:rgba(116, 172, 235, 0.9);  box-shadow: 0 .325rem 10px rgba(0, 0, 0, 0.1); position: sticky;top: 0; transition: all 0.3s; z-index: 99}
header h1 {margin: 0;font-size: 1.1rem; color: #666; font-weight: normal}
header h1 img {max-height: 3.2rem;display: block;margin: 0 auto}
header .top-logo-area {display: flex; padding: 0 15px; align-items: center; font-size: 0; justify-content: space-between; height: 5.5rem}
header .top-logo-area>a:first-of-type {order: -1}
header .top-logo-area>a img {max-height: 1.5rem;}
header nav {border-top: 1px solid #f1f1f1;border-bottom: 1px solid #e5e5e5; font-size: 1.4rem; font-weight: bold; width: 100%;  overflow: hidden;}
header nav ul {display: flex; justify-content: center}
header nav a {display: block; padding: .5rem 1rem}

/* footer */
footer {}
.scroll-top {position:fixed; right:14px; bottom: 0; font-size: 0; border-radius: 50%; background: var(--main); color: #fff; width: 1.8rem; height: 1.8rem;  cursor:pointer; transition:all 0.3s;opacity: 0;z-index: -1}
.scroll-top.is-showing {bottom: 72px; opacity: 1; z-index: 10}
.scroll-top i {display: block;}

#wrap:has(.index) footer nav {background:#6d80a2/*rgba(0, 0, 0, 0.6)*/;}
footer nav {position: fixed; left: 0;right: 0;; bottom: 0; height: 5.5rem; background:#6d80a2; max-width: 480px; box-shadow: 0 -.5rem 10px rgba(0, 0, 0, 0.1); font-size: 1rem;margin: 0 auto; z-index: 106;}
footer nav ul {display: flex; height: 100%; align-items: center; text-align: center;}
footer nav li {flex: 1 0 0; color: #fff; }
footer nav li img[src*=on] {display: none}
footer nav li:hover img {display: none}
footer nav li:hover img[src*=on] {display: block; }
footer nav li.active {color: var(--text01)}
footer nav li.active img {display: none}
footer nav li.active img[src*=on] {display: block}
footer nav li img {display: block; margin: 0 auto .25rem; max-height: 1.8rem}

/* category */
#snb {background-color: #;position: fixed;left: 0;top: 0;width: 80%;max-width: 320px;height: 100%;overflow: hidden;visibility: hidden;z-index: 999}
#snb .btn {position: absolute;right: 0;top: 0;color: #fff; font-size: 3rem;padding: 0;z-index: 201; line-height: 1;transform: translate(100%, 0)}
#snb nav {background:radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%); color: #fff; font-size: 1.25rem; font-weight:500; height: 100%;position: relative;z-index: 200; transition: all 0.4s ease-in-out; transform: translate(-100%,0)}
#snb li {border-bottom: 1px solid rgba(255, 255, 255, 0.2)}
#snb li a {padding: 1rem 1.5rem; display: block;}
#snb .overlay {opacity: 0;transition: all 0.4s ease-in-out;}
.open #snb {overflow: visible;visibility: visible}
.open #snb nav {transform: translate(0,0)}
.open #snb .overlay {opacity: 1;}

/* ----index -- */
.main-content {padding: 1.5rem 1rem;}
.main-content .select-type {margin: 2rem 0}
.main-content .select-type:before {display: none}
.main-content .select-type b {margin-bottom: 0}
.main-content .select-type p {font-size: 1rem; color: #ffe368;}

.visual {position: relative;padding: 2rem 1.5rem 3rem;margin: 0 -15px; overflow: hidden;}
.visual {border-top: 1px solid #e5e5e5}
.visual .copy {font-size: 1.725rem; line-height: 1.3}
.visual .highlight {display: inline;  box-shadow: inset 0 -10px 0 #d2e1fe;}
.visual ul {font-size: 1.3rem; color: var(--dark-blue); margin-top: 2rem; }
.visual li {border: 1px solid var(--dark-blue); border-radius: 2rem; padding:1rem; display: flex; justify-content: center; align-items: center; }
.visual li~li {margin-top: .25rem}
.visual .img {position: absolute;right: -15px;bottom: 0;font-size: 0; height: 80%;}
.visual .img img {height: 100%;}

.main-content section {background:rgba(255, 255, 255, 0.15); box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.05); border-radius:1.25rem; }
.main-content h3 {display:block; text-align:center; font-size:1.5rem; color:#fff; text-shadow: .5px .1rem 2px rgba(0, 0, 0, 0.2); margin:2rem 0 1rem 0; }

.main-content nav {font-size: 1.2rem; line-height: 1.2; padding:1.5rem 1rem; }
.main-content nav ul {display: flex;justify-content: space-between}
.main-content nav li {flex-grow: 1;max-width: 24%; text-align: center; color:#fff; font-weight:500;  font-size: 1.125rem; text-shadow: .5px .1rem 2px rgba(0, 0, 0, 0.2); }
.main-content nav img {width: 80%;display: block;margin: 0 auto 1rem}

.main-content section ul.cate {display: flex; flex-wrap: wrap; gap: 5px; padding:1.5rem 1rem; padding-bottom:0rem; }
.main-content section ul.cate li { flex: 0 0 calc(25% - 5px); text-align: center; color: #fff; font-weight:500;  font-size: 1.125rem; text-shadow: .5px .1rem 2px rgba(0, 0, 0, 0.2);  line-height:1.2; margin-bottom:1rem; }
.main-content section ul.cate li img {width: 80% ;display: block;margin: 0 auto 1rem}

.main-content ul.search-friend { display: flex; justify-content: space-between; gap: 2%; /* li 간격 */ padding: 0; margin: 0; }
.main-content ul.search-friend li { flex-grow: 1; max-width: 18%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #fff; font-size: 1.125rem; }
.main-content ul.search-friend li a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center; text-decoration: none; color: inherit; font-weight:700; }
.main-content ul.search-friend li:nth-child(2),
.main-content ul.search-friend li:nth-child(3),
.main-content ul.search-friend li:nth-child(4) { background: #ffd4e7; color: #232323; font-size: 1.5rem; }
.main-content ul.search-friend li:nth-child(3) { background: #ffda93; }
.main-content ul.search-friend li:nth-child(4) { background: #caaeff; }
/* 이미지가 있는 경우 */
.main-content ul.search-friend li:nth-child(1) img { width: 40%; margin-bottom: 0rem; }
.main-content ul.search-friend li:nth-child(5) img  { width:50%; }

.schedule {background:#fff; border-radius:1.25rem; padding:1.5rem; }
.schedule .year { display: flex; font-size:2.125rem; justify-content: space-between; color:#2f2f2f; }
.schedule .year span {display:inline-block; margin:0; font-weight:900; }
.schedule ul {display: grid; grid-template-columns: repeat(7, 1fr); }
.schedule ul li { aspect-ratio: 1 / .75; color: #2f2f2f; font-weight:700; font-size: 1.215rem; display: flex; justify-content: center; align-items: center; margin:.5rem .25rem; text-align:center; }
.schedule ul li:nth-child(7n+1) { color:var(--blue); }
.schedule ul li:nth-child(7n+7) { color:var(--red); }
.schedule hr {border-top: 1px solid rgba(0, 0, 0, 0.3); margin:.25rem 0; }
.schedule ul li.good { background:#ec4899; border-radius:2rem; padding:.125rem .125rem; color:#fff;}
.schedule ul li.bad { background:#777; border-radius:2rem; padding:.125rem .125rem; color:#fff; }
.schedule ul li.blue { background:#60a5fa; border-radius:2rem; padding:.125rem .125rem; color:#fff; }
.schedule ul li.emo2 { background:#a68bfa; border-radius:2rem; padding:.125rem .125rem; color:#fff; }
.schedule .desc { display: flex; justify-content: flex-end; }
.schedule .desc dl {display: grid; grid-template-columns: repeat(4, 1fr);}
.schedule .desc dl dd {position:relative; flex-grow: 1;max-width: 30%; text-indent:1rem; }
.schedule .desc dl dd+dd {margin-right:1rem; }
.schedule .desc dl dd span {position:absolute; top:.35rem; left:0; width:.75rem; height:0.75rem; background:#ec4899; border-radius:50%; }
.schedule .desc dl dd+dd span { background:#60a5fa; }
.schedule .desc dl dd+dd+dd span { background:#a68bfa; }
.schedule .desc dl dd+dd+dd+dd span { background:#777; }
.schedule a span { display:block; margin-top:-1rem; background:#ff4176; border-radius:3rem; color:#fff; padding:0.5rem 1.5rem; font-size:1.125rem; }

/*.review {margin-top: 2rem}
.review .swiper-slide {padding: 0 0 2rem; min-height: 17rem;}
.review .img {position: absolute; right: 0; bottom: 0;max-width: 15rem}
.review strong {font-size: 1.6rem;display: block; padding-right: 10rem; position: relative; z-index: 1}
.review p {font-size: 1.1rem; color: #666;  padding-right: 16rem; margin: 1rem 0;overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical}
.review .swiper-slide span {font-size: 1.1rem; color: #7e7e7e; display: block; margin-top: 1.5rem}
.review .swiper-pagination {text-align: left;bottom: 0}
.review .swiper-pagination-bullet {margin-left: 0 !important;margin-right: .5rem !important}*/

/* -------------------
sub                  |
------------------- */
.sub-top {position: sticky;top: 0;height: 4.5rem; background:/* rgba(116, 172, 235, 1)*/linear-gradient(45deg,rgba(76, 96, 199, 1) 0%, rgba(250, 90, 157, 1) 100%); z-index: 10; border-bottom: 1px solid rgba(0, 0, 0, 0.1); color:#fff; }
.sub-top h1 {font-size: 1.625rem; font-weight:700; margin-bottom: 0; }
.sub-top .container {display: flex;align-items: center;height: 100%;}
.sub-top .go-back {font-size: 1.5rem;width: 2.5rem;}
.sub-top .go-back.set {background: url(/img/ic_set_w.png) no-repeat 0 50%;}
.sub-top .set-icon {justify-content: flex-end;margin-left: auto;}
.sub-top .set-icon i { font-size:1.75rem; }
.sub-top .top-icons {width: 25%;justify-content: flex-end;margin-left: auto;display: flex;font-size: 0;}
.sub-top .top-icons li {position: relative;margin-left: .5rem;}
.sub-top .top-icons li .badge {position: absolute;}
.sub-top .top-icons li.cart .badge {left: 12px;bottom: 0;}
.sub-top .top-icons li.noti .badge {right: 0; bottom: auto;top: 0;background-color: #E50025;font-size: 0;width: 6px;height: 6px;min-height: auto; border: 0;}
.sub-top button {justify-content: flex-end;margin-left: auto;}

.sub-content {padding: 1.5rem 0; font-size: 1.1rem;}
.sub-content:has(.sample-image) .container {min-height: calc(100vh - 20rem); display: flex; flex-direction: column; justify-content: flex-start;align-items: flex-start}
.sub-content h3 { display:block; font-size: 1.5rem; margin-top: 2rem;margin-bottom: .75rem}
.sub-content h4 {font-size: 1.2rem; margin-top: 2rem;margin-bottom: .75rem}
.sub-content h4.center {font-size: 1.325rem; margin-top: 1rem;margin-bottom: .75rem}

.sub-content .or { margin: 2rem 0 1rem 0; position: relative; text-align: center; color:#232323; }
.sub-content .or:before { content: ""; position: absolute; left: 0; right: 0; top: 50%; margin-top: -1px; border-top: 1px solid #666; z-index: 0; }
.sub-content .or span { display: inline-block; background:#fff; padding: 5px 15px; position: relative; /* 필수 */ z-index: 3; }

.guide-text {font-size: 2rem;margin-top: 2rem; margin-bottom: 1.5rem;line-height: 1.3}
.guide-text.small {font-size: 1.6rem}

.flow {margin-bottom: 1.5rem; text-align: center}
.flow ol {display: flex;margin-left: -.5rem;margin-right: -.5rem}
.flow li {flex-grow: 1;flex-basis: 0;margin: 0 .5rem;border-radius: 1.5rem;padding: .75rem 0;background-color: #f3f4f8; font-size: 1rem; color: #777; position: relative}
.flow li:after {content: "\F285"; font-family: bootstrap-icons; color: #c8c8c8; position: absolute;left: -1rem;width: 1rem;}
.flow li:first-child:after {display: none}
.flow li.active {background-color: var(--main); color: #fff;}

.search-form {margin: 1.5rem 0;display: flex; position: relative}
.search-form .form-control {flex-grow: 1;padding-right: 7rem;font-size: 1.2rem;}
.search-form .btn {border-radius: .25rem;padding: .25rem .5rem;position: absolute;right: 1.5rem;top: 50%;transform: translate(0, -50%);}

.img img {width: 100%;}

/* 작성 */
.select-type {display: flex; justify-content: space-between;position: relative;margin-left: -.25rem;margin-right: -.25rem;}
.select-type:before {content: "";background: url(/img/img_guide.png) no-repeat 50% 0 / contain;width: 50%;height: 9.7rem; position: absolute;right: 0;top: -8.5rem;}
.select-type li {cursor: pointer;position: relative;padding: 2.5rem 0 0;flex-basis: 0; flex-grow: 1;margin: 0 .25rem; overflow: hidden;border-radius: 1rem; background-color: var(--blue); color: #fff; text-align: center;display: flex;flex-direction: column;}
.select-type img {align-self: center; height: 2.95rem}
.select-type b {display: block;font-size: 1.5rem;margin: 1rem 0}
.select-type p {margin-bottom: 2rem;padding: 0 .5rem}
.select-type span {display: block; background-color: var(--dark-blue);margin-top: auto; padding: 1rem 0}
.sample-image {flex-grow: 1;width: 100%; display: flex; align-items: center;justify-content: center; margin: 0 auto;}

#imageBox {width: 65%; position: relative; border: 1px solid #111; overflow: hidden;z-index: 1}
#imageBox label {padding-top: 147%;display: block; position: relative}
#imageBox.sample label:before {content:"샘플화면";box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.3); background-color: #8b8b8b; position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); z-index: 1; padding: .75rem 1.5rem; color: #fff;border-radius: 2rem;}
#imageBox #previewImage {position: absolute;left: 0;top: 0;width: 100%;height: 100%;object-fit: cover}
#imageInput {opacity: 0;position: absolute;top: -99999999999999em}

/*일상의탈출*/
.timeline { position: relative; margin: 0 auto; padding-left: 10px; margin-left:10px; border-left: 3px solid #ddd; max-width: 500px; } 
.timeline-item { position: relative; margin-bottom: 30px; padding-left: 10px; } 
.timeline-item::before { content: ''; position: absolute; left: -22px; top: 0; width: 20px; height: 20px; background: #ddd; border-radius: 50%; } 
.timeline-item.active::before {background: #8e7dff;}
.time { font-weight: bold; color: #555; margin-bottom: 8px; margin-left:-5px } 
.timeline-item img { width: 100%; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } 
.desc { margin-top: 8px; font-size: 1.25rem; color: #333; }
.desc span { display:block; color:#999; font-size:1.125rem; }
/* 모바일 대응 
@media (max-width: 480px) { 
	.timeline { padding-left: 15px; } 
	.desc { font-size: 13px; } 
}*/ 
.timeline ol {margin-top:.5rem; }
.timeline ol>li:nth-child(1), .timeline ol>li:nth-child(2) {padding-right: 1rem;}
.timeline ol>li { display:inline-block; font-size:1.125rem; color:#666; }
.timeline ol>li i {color:var(--pink); vertical-align:middle; font-weight:bold; }

.timeline.none { position: relative; margin: 0 auto; padding-left: 0px; margin-left:0px; border-left:0px solid #ddd; max-width: 500px; } 
.timeline.none .timeline-item { padding-left: 0px; }
.timeline.none .timeline-item::before {display:none;}

.escape-list .thumb {}
.escape-list .thumb img {border-radius:1rem;}
.escape-list .info {font-size:1.25rem; color:#333; }
.escape-list+.escape-list {margin-top:1rem; }

.sample-image>img {width: 100%}
.sample-image.mod #imageBox {width: 100%; border: 0;}
.sample-image.mod #imageBox.sample label:before {content:"이미지 수정";}

/*추억남기기*/
.memory { position:relative; }
.memory span { position:absolute; right:1.5rem; bottom:.5rem; color:#888; font-size:1.025rem; }

/*오늘의 위로*/
.card-box { background:#fff; border-radius:1rem;/*display:flex;*/ gap:12px;align-items:; box-shadow:0 6px 18px rgba(22,27,32,0.06); position:relative; overflow:visible; }
.comfort {display:flex; padding:1.5rem; position:relative; }
.comfort+.comfort {border-top:1px solid #eee; }
.comfort .avatar { width:4rem;height:4rem;border-radius:50%;background:linear-gradient(135deg,#e9e9f7,#f3f6ff);display:flex;align-items:center;justify-content:center;font-weight:700;color:#6b6f7a;font-size:1.125rem;flex-shrink:0; margin-right:1rem; overflow:hidden; }
.comfort .meta {align-items:center;gap:8px;margin-bottom:6px}
.comfort .name {font-weight:700;font-size:1.25rem}
.comfort .email { clear:both; font-size:1rem;color:#aaa; }
.comfort .text {font-size:1.125rem;color:#333;margin-bottom:8px;line-height:1.45}
.comfort .actions {display:flex;gap:12px;align-items:center;font-size:13px;color:#888; }
.comfort .actions i {color:var(--pink); }
.comfort .action {display:flex;align-items:center;gap:6px}
.comfort .action svg{width:16px;height:16px;opacity:0.9}
/* mood badge on the right */
.comfort .mood {position:absolute;right:12px;top:12px;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;color:white;box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.comfort .mood.good {background:#21bf73}
.comfort .mood.sad {background:#ffb74d}
.comfort .mood.bad {background:#ff6b6b}

/* small heart icon sticker bottom-right */
.sticker{position:absolute;right:12px;bottom:10px}
.sticker svg{width:20px;height:20px}

.guide-chat {display: flex;margin-bottom: -1rem;}
.guide-chat .img {width: 5.5rem; padding-left:.5rem;padding-right: .5rem; flex-shrink: 0;}
.guide-chat .text {flex-grow: 1; font-size: 1.2rem;}
.guide-chat .box {margin-top:-.75rem; padding: 1rem; background-color: #fff; border-radius: 0 1rem 1rem; font-size: 1.5rem; word-break:break-all; }

.todo {margin-left: -1rem;margin-right: -1rem;display: flex;flex-wrap: wrap; background: url(/img/bg_todo.png) no-repeat calc(100% - 2rem) 100% / 10.85rem}
.todo li {width: calc(50% - 2rem); margin: 0 1rem; background-color: #1754d1;  color:#fff; border-radius: 1rem; margin-bottom: 2rem; position: relative; display: flex; flex-direction: column; height: 12rem;}
.todo li span {display: flex; flex-grow: 1; align-items: center; justify-content: center; text-align: center; font-size: 1.4rem; font-weight: bold;}
.todo li a {font-size: 1rem; background-color: var(--dark-blue); display: block; padding: .75rem;text-align: center; border-radius: 0 0 1rem 1rem}
.todo li:after {content: "\F285"; font-family: bootstrap-icons; color: #888; position: absolute;right: -2rem;width: 2rem;top: 50%;text-align: center;font-weight: bold;transform: translate(0,-50%); line-height: 1}
.todo li:nth-child(2):after, .todo li:nth-child(3):after {content: "\F282"; top: auto;bottom: -2rem;left: 50%;right: auto; height: 2rem;line-height: 1.9; transform: translate(-50%,0)}
.todo li:nth-child(4):after {content: "\F284";left: -2rem;right: auto;}
.todo li:last-child {margin-bottom: 0}
.todo li:last-child:after {display: none;}

.b-box.pic {position: relative; background:#fff; min-height:300px}
.b-box.pic h5 {display:block; color: var(--dkpink); display: block; font-size: 1.325rem; margin-top: 14em}
.b-box.pic .img {width: 7rem; height: 7rem; object-fit: cover; border-radius: 1rem; overflow:hidden; position: absolute;right: 1rem;top: 1rem; z-index:10; }
.b-box.pic .img-bg { display:block;  width:100%; max-height:240px; border-radius: 1rem 1rem 0 0 ; overflow:hidden; position: absolute;right: 0;top: 0; left:0; border-bottom:1px solid #eee; }
.b-box.pic .img-bg img {width:100%;}
.b-box.pic ol>li:nth-child(1), .b-box.pic ol>li:nth-child(2) {padding-right: 1rem;}
.b-box.pic ol>li { display:inline-block; font-size:1.125rem; color:#666; }
.b-box.pic ol>li i {color:var(--pink); vertical-align:middle; font-weight:bold; }
.b-box.pic ol {display:block; margin-top:-1rem;}
.b-box.pic+.b-box.pic {margin-top:1rem; }

@media (max-width: 360px) {	
	.b-box.pic {position: relative; background:#fff; min-height:280px}
	.b-box.pic h5 {margin-top:15rem; }
}

.b-box ol>li b {color: var(--dark-blue); display: block; font-size: 1.3rem; margin-bottom: .5rem}
.b-box ol>li~li {margin-top: 1.5rem;}
.b-box ol>li ul {margin-top: .5rem;margin-bottom: 1rem;}
.b-box .dot>li~li {margin-top: .25rem}
.b-box .bar {color: #666; font-size: 1rem}

.checkbox a {margin-left: auto;}

/* 알림 */
.sub h4 {display: block;font-size:1.35rem}
.sub .card {overflow: hidden}
.sub .card+.card {margin-top: 1rem;}
.sub .card-header {background-color: #fff;border: 0; display: flex; align-items: center; padding: 1.5rem; padding-bottom: 0;}
.sub .card-header .no {display: inline-block;line-height: 1;border-radius: .25rem; padding: .35rem .75rem;color: #8c8b8b; background-color: #f3f4f8 }
.sub .card-header .icons {font-size: 0;margin: 0 auto}
.sub .card-header .icons img {max-height:6rem}
.sub .card-header .btn { margin-left: auto;border-radius: .5rem; font-size: 1.1rem;}
.sub .card-body strong {display: block; font-size: 1.625rem; position: relative; text-align:center; }
/*.sub .card-body strong:after {content: "\F285"; font-family: bootstrap-icons; position: absolute;right: 0;top: 50%;transform: translate(0, -50%); font-weight: normal;}*/
.sub .card-body .date {display:block; color: #666; font-size: 1.25rem; text-align:center; padding:.5rem 0; }
.sub .card-body .flag {display:block; background:var(--main); color:#fff; width:92%; border-radius:3rem; padding:1rem; margin:1rem auto; text-align:center; }
.sub .card-footer {border: 0;padding: 1.5rem; background-color: #f7fbff; font-size: 1.1rem; color: var(--main)}
.sub .card-footer a {margin-right: 1rem;display: inline-flex; align-items: center;}
.sub .card-footer a .bi {font-size: .5rem;margin-left: .25rem}

#musicList .card .thumb {border-radius:8px; overflow:hidden; }
#musicList .card .info {padding:1rem; }
#musicList .card .info h4 {margin-top:0; }
#musicList .card .info p {color:#666; }

.push .checkbox-toggle {width: 5rem !important; font-size: .825rem;}
.push .checkbox-toggle input {opacity: 0;position: absolute}
.push .checkbox-toggle label {width: 5rem; height: 2.25rem;border: 1px solid rgba(0, 0, 0, 0.1);background: #ddd; border-radius: 2rem;margin: 0; position: relative;}
.push .checkbox-toggle label:before {content: "";position: absolute;left: 0;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width: 2.5rem;height: 2.25rem;background: #fff;border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 2rem;-webkit-transition: all 0.3s;transition: all 0.3s}
.push .checkbox-toggle label:after {content: "OFF";position: absolute;color: #fff;right: .75rem;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%)}
.push .checkbox-toggle :checked+label {background: linear-gradient(45deg,rgba(148, 187, 233, 1) 0%, rgba(238, 174, 202, 1) 100%); }
.push .checkbox-toggle :checked+label:before {content: ""; margin-left:2.4rem; -webkit-transition: all 0.3s;transition: all 0.3s;border-color: #8e7dff; }
.push .checkbox-toggle :checked+label:after {content: "ON"; left: .75rem;right: auto}

.table td {vertical-align:middle !important; }

/* 설정 */
.my-info {margin:1rem; }
.my-info .user {position: relative;  display: flex; align-items: center}
/*.my-info .user:after {content: "\F285"; font-family: bootstrap-icons; font-size: 1.5rem; position: absolute;right: 0;top: 50%;transform:translate(0, -50%); font-weight: bold;}*/
.my-info .user .pic {width: 4rem; margin-top:-1.5rem; font-size: 0}
.my-info .user .info {padding-left: 1rem;}
.my-info .user .info .name {font-size: 1.5rem; display: block; }
.my-info .user .info .p {opacity: .8; font-size: .916rem;}
.my-info .user .info .grade {display:block; width:10rem; background:var(--main); color:#fff; padding:0; border-radius:3rem; text-align:center; line-height:2rem; margin-top:.5rem;  }
.my-info .user .info .grade img { width:1.5rem; vertical-align:middle; margin-right:.25rem; margin-top:-.25rem; }

.mypage-main {}
.mypage-main>ul li {border: 1px solid #e5e5e5; padding: 1.5rem 1.25rem; padding-right: 3rem;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);position: relative; border-radius: 1rem; background:#fff; }
.mypage-main>ul li+li {margin-top: .5rem;}
.mypage-main>ul li:after {content: "\F285"; font-family: bootstrap-icons;opacity: .5; position: absolute;right: 1.25rem;top: 50%;transform:translate(0, -50%); font-weight: bold;}
.mypage-main>ul li a {display: flex; align-items: center; flex-grow: 1; font-size: 1.25rem; font-weight: 500}
.mypage-main>ul li img {width:1.75rem; margin-right:.5rem; }

.list-top {text-align: right;}
.list-top .btn {font-size: 1.1rem; border-radius: .5rem}
.list li {display: flex;align-items: center;padding: 15px 0;border-bottom: 1px solid #e5e5e5; position: relative;  cursor: pointer;}
.list li small {display: block; color: #666; font-size: .857rem}
.list li p {margin: 2px 0 4px}
.list li strong {display: block; font-weight: bold;}
.list li.no-list {padding: 2rem 0 !important;display: block; }

.list.normal li {display: block}
.list.qna {margin-top: -1rem}
.list.qna li {display: block;padding-right: 6rem}
.list.qna strong a {display: flex; align-items: center;}
.list.qna strong a img {margin-right: 5px;}
.list.qna .date {font-size: .857rem; color: #666; display: block; margin-top: 8px;}
.list.qna .control {position: absolute;right: 15px; top: 15px; font-size: 0;}
.list.qna .control .btn {font-weight: normal; padding: 0}
.list.qna .control .btn+.btn:before {content: ""; width: 1px; height: 10px;background-color: #e5e5e5; margin: 0 5px; display: inline-block;}

/* form */
.form {font-size: 1.2rem;}
.form .price {font-size: 1.5rem}
.form .form-row {align-items: center;}
.form .form-row:first-child .col-form-label {margin-top: 0;}
.col-form-label {font-size: 1.3rem;font-weight: 500;}
.form .form-row .row {align-items: center;height: calc(1.5em + 1rem + 2px)}
.form .form-row+.form-row {margin-top: .5rem;}
.form .form-row .row+.row {margin-top: .5rem;}
.form .form-row.has-btn {position: relative}
.form .form-row.has-btn .form-control {padding-right: 9rem}
.form .form-row.has-btn .btn {border-radius: .25rem;padding: .25rem .5rem;position: absolute;right: 1.5rem;top: 50%;transform: translate(0, -50%);width: auto}
.form-row .btn {width: 100%;}
.form-row .col-12+.col-12 {margin-top: .5rem;}
.input-group .btn {min-width: 5rem; border: 0;}
.form .file-upload {width: 60px;height: 60px;}
.form .file-upload.preview-image .thumb-preview {background: #eee; border-radius: 6px;}
.form .file-upload.preview-image .thumb-preview:before {content:"";width: 20px;height: 20px; display: block;background: url(/img/ic_upload_w.png) no-repeat 50% 50%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}

/* member */
.terms-check {}
.terms-check u {cursor: pointer}
.terms-check li {display: flex;}
.terms-check p.help-desk { color:#666; font-size:1rem; margin-left:1.5rem; }
.terms-check li~li {margin-top: .5rem}
.terms-check li span {color: #666}

.modal#view img {display: block;margin: 0 auto;}

.rank-list { display: grid; width:100%; gap: 10px; list-style: none; padding: 0; }
.rank-item { border: 1px solid rgba(0, 0, 0, 0.05); background:#fff; padding: 1rem 1.5rem; border-radius: 1rem; display: flex; gap: 10px; align-items: flex-start; }
.rank-item b {display:block; color:var(--main)}
.rank-icon { width: 2rem; height: 2rem; flex-shrink: 0; margin-right:1rem; margin-top:.5rem; } 
.rank-content { display: flex; flex-direction: column; }
.rank-title { font-weight: bold; margin-bottom: 5px;  font-size: 1.125em; font-weight:bold; }
.rank-conditions { font-size: 1em; line-height: 1.4; color:#555; }

.sort-date {display: block; width:50%; float:right; margin-bottom:1rem; overflow:hidden; }
.sort-date .select {border-radius: 1rem;height: calc(4rem - 2px); border-color: transparent;background-color: #fff;padding: .75rem 1rem; }
.sort-date select {width:100%; background: #f3f4f8 url(/img/chevron_down_g.png) no-repeat calc(100% - 10px) 50% / 1.3rem; text-align: left; outline:none; }

.card.point {box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}
.card-title {font-size:1.5rem; font-weight:bold; }
.card-title small {color:#555; font-size:1rem; }
.card-title img { width:1.825rem; vertical-align:middle; margin-right:.5rem; }
.point-use {display:block; font-size:2rem; margin-top:-1rem; margin-left:2.15rem; color:var(--main) }
.point-desc { border-radius:3rem; background:#f8f8f8; margin-top:1rem; padding:1rem 2rem;}
.point-desc span { float:right; }

.goods-list {margin-top: 0; background:#fff; border-radius:1rem; padding:0 1.5rem; }
.list.goods:not {}
.list.goods>li {display: flex; border-bottom:0; }
.list.goods>li+li {padding-top: 1.5rem;margin-top: 1rem;border-top: 1px dashed #e5e5e5;}
.list.goods .thumb {width: 30%; align-self: flex-start; border-radius: 1rem;}
.list.goods .thumb img {width:100%; border-radius:1rem; }
.list.goods .info {flex-grow: 1; padding: 0 0 0 1.5rem; font-size:1.025rem; }
.list.goods .info strong { font-size:1.325rem; color:var(--main); }

.list.goods .loc-guide {background: #f8f8f8; border-radius: 1rem; padding: .75rem; margin-top: .5rem; color: #888; font-size: 1rem;}
.list.goods .loc-guide li {padding: 0; padding-left: .5rem; border-bottom:0; }
.list.goods .loc-guide li span {display:inline-block; width:4rem; color:#333; }

.card .btn-box {margin:1rem; }

/*친구찾기*/
.emotion {background:#f8f8f8; border-radius:3rem; padding:1rem 2rem; font-size:1.25rem; }
.emotion a {display:block; }
.emotion img { width:2rem; vertical-align:middle; margin-right:.5rem; }
.emotion span {display:inline-block; float:right; width:1.25rem; height:1.25rem; background:#ff4176; border-radius:50%; margin-top:.25rem; }
.emotion span.good {background:#ff4176;}
.emotion span.blue {background:#60a5fa;}
.emotion span.bad {background:#777;}

.emo textarea.form-control { background-image: url('/img/bg_letter.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; border:1px solid rgba(0, 0, 0, 0.05)}

.list.tag { border-top:0px solid #555; }
.list.tag li {display:block; padding-left:1rem; }
.list.tag span.title {display:inline-block; min-width:5rem; background:#ff4176; border-radius:3rem; color:#fff; padding:.5rem 1.25rem; text-align:center;}
.list.tag span.title.blue {background:#60a5fa; }
.list.tag span.title.bad {background:#777;}

span.title {display:inline-block; min-width:5rem; background:#ff4176; border-radius:3rem; color:#fff; padding:.5rem 1.25rem; text-align:center; margin-bottom:1rem; }
span.title.bad {background:#777;}
span.title.blue {background:#60a5fa; }

ul.mate { display: grid; grid-template-columns: repeat(4, 1fr); /* 4열 고정 */ gap: 1rem; /* 행, 열 간격 */ padding:; margin: 0; list-style: none; height: 100%; background:#fff; border-radius:1rem; }
ul.mate li { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; color: #fff; background: #ccc; font-size: 1.215rem; display: flex; justify-content: center; align-items: center; }

.msg {margin:1rem 0; }
.msg span.thumb{ display: flex; justify-content: center; align-items: center; width:7rem; height:7rem; border-radius: 50%; background:#eee; align-items: center; justify-content: center; margin:0 auto; overflow:hidden; }
.msg span.name { display:block; font-size:1.75rem; margin:.5rem 0; }
.msg span.tag { display:inline-block; min-width:5rem; background:#ff4176; border-radius:3rem; color:#fff; padding:.325rem 1rem; text-align:center; }
.msg span.tag.blue {background:#60a5fa;}
.msg span.tag.bad {background:#777;}

/*소설을 쓰시네*/
.text-box {border:1px solid #eee; border-radius:1rem; padding:1.5rem; margin-top:1rem; background:#f8f8f8; }
.novel svg{width:2rem;height:2rem;opacity:0.9}
.sym {padding-top:0rem; padding-left:.5rem; }

/* -------------------
팝업            |
------------------- */
.modal-body ul.pop-friend { display: grid; grid-template-columns: repeat(4, 1fr); /* 4열 고정 */ gap: 1rem; /* 행, 열 간격 */ padding: 1.25rem; margin: 0; list-style: none; height: 100%; background:#f5f5f5; border-radius:1rem; }
.modal-body ul.pop-friend li { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; color: #fff; background: #f5658d; font-size: 1.215rem; display: flex; justify-content: center; align-items: center; }
.modal-body ul.pop-friend li a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center; text-decoration: none; color: inherit; }
.modal-body ul.pop-friend li.item1 { background: #3d98ff; }
.modal-body ul.pop-friend li.item2 { background: #f184d8; }
.modal-body ul.pop-friend li.item3 { background: #3d98ff; }
.modal-body ul.pop-friend li.item4 { background: #f5658d; }

.modal-body .select-sort {padding: 1.25rem; margin: 0; background:#f5f5f5; border-radius:1rem;  }

/* -------------------
마이페이지            |
------------------- */
@media (max-width: 320px) {
    html {font-size: 10px}
}

div[id*=layer] {box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);max-height:80vh;overflow: auto;position:fixed;left:50%;top:50%;transform:translate(-50%, -50%);z-index: 9999;}
div[id*=layer] .title {padding: 5px 15px;display: flex;color:#000;justify-content:space-between;align-items:center;background: #f8f8f8;}
div[id*=layer] .title span {font-size:2rem;cursor:pointer}

@media (min-width: 1000px) {
    body {height: 100%; overflow: hidden; margin: 0; padding: 0; background: #f5f5f5 url(/img/bg_web.png) no-repeat 50% 100%; background-attachment: fixed; }
    footer nav {max-width: 420px;margin-left: 0; margin-right: 0;left: 50%;margin-left: 8%}
    #wrap {max-width: 420px; margin-right: 0;left: 50%;position: relative;margin-left: 8%;}
	
	.sub-content {position: absolute; top: 4.5rem; left: 0; right: 0; bottom: 6rem; overflow-y: auto; -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */}
	.main-content {position: absolute; padding-bottom:3rem; top: 5.5rem; left: 0; right: 0; bottom: 5.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */}
		
    .modal-dialog-bottom {left: 50%;max-width: 400px; margin-left: 9.5%;margin-right: 0;}
	
	div[id*=layer] {max-width:385px;margin-left: calc(8% + 18px);width: 100%;transform:none !important;margin-top: -25vh;}
}