@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff');
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff');
  font-weight: 900;
  font-display: swap;
}


@charset "utf-8";

/* ===================== 변수 ===================== */
:root{
    --c-point:#007BFF;
    --c-point-lt:#cee2f8;
    --c-tit:#333d4b;
    --c-txt:#6b7684;
    --c-sub:#8b95a1;
    --c-line:#E5E5E5;
    --c-white:#fff;
    --c-red:#f4514f;
    --c-bg:#f2f4f6;

    --fs-14:1.4rem;
    --fs-16:1.6rem;
    --fs-17:1.7rem;
    --fs-18:1.8rem;
    --fs-26:2.6rem;
    --fs-13:1.3rem;
    --fs-15:1.5rem;
    --fs-20:2rem;

    /* 하단 탭바 높이 (tab_bar.php와 공유) */
    --h-tabbar:8rem;
    /* 경로 카드 헤드의 아이콘 행 높이 (padding-bottom 제외, 즐겨찾기 삭제 버튼 정렬 기준) */
    --h-routehead:3rem;
}

/* ===================== 공통 뼈대 ===================== */
#wrap{display:flex;flex-direction:column;min-height:100vh;padding-top:env(safe-area-inset-top, 0px);background:var(--c-white);}
#wrap.is-gray{background:var(--c-bg);}
main{display:flex;flex-direction:column;flex:1 1 auto;}
.container{width:100%;margin:0 auto;padding:0 2rem;}

/* 공통 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:1.2rem;background:var(--c-point);color:var(--c-white);font-size:var(--fs-18);font-weight:700;line-height:1;text-decoration:none;}
.btn-full{width:100%;height:5rem;margin-top: 2rem;}

/* 공통 카드 리스트 */
.card-list{border:.1rem solid var(--c-line);border-radius:1.6rem;overflow:hidden;}
.card-list > li + li{border-top:.1rem solid var(--c-line);}
.card-item{display:flex;align-items:center;gap:1.4rem;width:100%;padding:1.8rem 1.6rem;}
.card-ico img{width:4rem;}
.card-txt{display:flex;flex-direction:column;gap:.4rem;min-width:0;}
.card-tit{font-size:var(--fs-17);font-weight:700;color:var(--c-tit);}
.card-desc{font-size:var(--fs-14);font-style:normal;color:var(--c-sub);}

/* ===================== 온보딩 : 타이틀 ===================== */
.onb-intro{padding-top:4.8rem;text-align:center;}
.onb-logo{display:inline-flex;width:6.4rem;height:6.4rem;}
.onb-logo img{width:100%;}
.onb-tit{margin-top:2.4rem;font-size:var(--fs-26);font-weight:800;letter-spacing:-.05rem;color:var(--c-tit);}
.onb-desc{margin-top:1.4rem;font-size:var(--fs-16);line-height:1.5;color:var(--c-txt);}

/* ===================== 온보딩 : 비주얼 ===================== */
.onb-visual{padding-top:2.4rem;}
.visual-box{width:100%;display: flex;align-items: center;justify-content: center;}
.visual-box img{width:100%;max-width:33.5rem;}

/* ===================== 온보딩 : 기능 / 버튼 ===================== */
.onb-feature{padding-top:3.2rem;}
.onb-action{margin-top:auto;padding:4rem 0 2.4rem;padding-bottom:calc(2.4rem + env(safe-area-inset-bottom));}



/* ===================== 공통 추가 ===================== */
.blind{position:absolute;width:.1rem;height:.1rem;margin:-.1rem;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.is-hide{display:none !important;} /* 유틸리티 : 뒤에 오는 컴포넌트의 display를 눌러야 하므로 important */

/* 공통 상단 헤더 */
.hd{padding-top: 1rem;}
.hd .container{position:relative;display:flex;align-items:center;justify-content:center;height:5.6rem;}
.hd-back{position:absolute;left:2.4rem;top:50%;transform:translateY(-50%);display:flex;width:2.4rem;padding:0;border:0;background:none;cursor:pointer;}
.hd-back img{width:100%;transform:scaleX(-1);} /* chevron.png(오른쪽)을 뒤집어 뒤로가기로 사용 */
.hd-tit{font-size:var(--fs-18);font-weight:600;color:var(--c-tit);}
.hd-act{position:absolute;right:2.4rem;top:50%;transform:translateY(-50%);padding:0;border:0;background:none;font-family:inherit;font-size:var(--fs-16);font-weight:500;color:var(--c-point);cursor:pointer;}

/* 공통 섹션 타이틀 */
.sec-tit{font-size:var(--fs-20);font-weight:600;letter-spacing:-.05rem;color:var(--c-tit);}

/* 공통 탭 */
.tab{display:flex;margin:0 -2.4rem;border-bottom:.1rem solid var(--c-line);}
.tab-btn{flex:1 1 0;height:4.8rem;border:0;border-bottom:.2rem solid transparent;margin-bottom:-.1rem;background:none;font-family:inherit;font-size:var(--fs-15);font-weight:700;color:var(--c-sub);cursor:pointer;}
.tab-btn.is-active{border-bottom-color:var(--c-point);color:var(--c-point);}
.tab-panel{flex:1 1 auto;padding:1.6rem 0 2.4rem;background:var(--c-bg);}
.tab-panel.is-empty{background:var(--c-white);}
.tab-panel.is-hide{display:none;}

/* 공통 : 출발/도착 점선 트랙 */


/* 공통 : 데이터 없음 */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8rem 0;}
#placeEmpty{padding: 16rem 0;}
.empty-ico{display:flex;width:5.6rem;}
.empty-ico img{width:100%;}
.empty-txt{margin-top:2.4rem;font-size:var(--fs-18);font-weight:600;color:var(--c-tit);}
.empty-sub{margin-top:1rem;font-size:var(--fs-15);line-height:1.5;text-align:center;color:var(--c-sub);}

/* 통신 실패 : 다시 시도 버튼. 잠겨 있는 동안(연타 방지)은 눌리지 않는 걸 보여준다 */
.empty-act{margin-top:2.4rem;min-width:14rem;height:4.4rem;padding:0 2.4rem;font-size:var(--fs-15);}
.empty-act[disabled]{opacity:.45;pointer-events:none;}

/* 로딩 스피너 */
.spinner{display:block;width:3.2rem;height:3.2rem;border:.3rem solid var(--c-line);border-top-color:var(--c-point);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* 하단 탭바 높이만큼 확보 (탭바 없는 페이지는 #wrap에 .no-tabbar) */
main{padding-bottom:calc(var(--h-tabbar) + env(safe-area-inset-bottom, 0px));}
.no-tabbar main{padding-bottom:env(safe-area-inset-bottom, 0px);}

/* ===================== 장소 검색 (오버레이) ===================== */
.srch-layer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);background:var(--c-white);}
.srch-field{padding:.8rem 0 1.6rem;}
.srch-inp{display:block;width:100%;height:4.8rem;padding:0 1.6rem;border:0;border-radius:1.4rem;background:var(--c-bg);font-family:inherit;font-size:var(--fs-17);color:var(--c-tit);}
.srch-inp::placeholder{color:var(--c-sub);}
.srch-inp:focus {
  outline: 2px solid #888780;
  outline-offset: 2px;
}
.srch-bar{height:1.2rem;background:var(--c-bg);}
.srch-result{flex:1 1 auto;}

.place-list li:first-child{border: none;}
.place-list > li{border-top:.1rem solid #eee;}
.place-item{display:block;width:100%;padding:1.6rem 0;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer;}
.place-tit{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-17);font-weight:600;color:var(--c-tit);}
.place-tit .hl{color:var(--c-point);font-weight:inherit;} /* 검색어와 겹치는 부분 */
.place-desc{display:block;margin-top:.4rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-15);font-style:normal;color:var(--c-sub);}

/* ===================== 홈 : 길찾기 검색 ===================== */
.home-search{padding:3rem 0 2.4rem;}
.search-box{padding:2rem 1.6rem;border:.1rem solid var(--c-line);border-radius:1.6rem;}
.search-field{position:relative;display:flex;padding-left:3rem;}
.search-track{position:absolute;left:0;top:0;bottom:0;width:3rem;}
.search-track img{height:100%;object-fit:fill;}
.field{flex:1 1 auto;min-width:0;}
.field-row{display:flex;align-items:center;gap:1rem;height:5rem;padding:0 1.4rem;border:.1rem solid var(--c-line);border-radius:1.2rem;}
.field-row + .field-row{margin-top:1rem;}
.field-ico{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:2.6rem;}
.field-ico img{width:100%;}
.field-inp{flex:1 1 auto;min-width:0;height:100%;border:0;background:none;font-family:inherit;font-size:var(--fs-16);color:var(--c-tit);}
.field-inp::placeholder{color:var(--c-sub);}
.field-add{flex:0 0 auto;width:2.4rem;height:2.4rem;padding:0;border:0;background:none;cursor:pointer;}
.field-add img{width:100%;}

/* ===================== 홈 : 저장된 경로 ===================== */
.home-route{display:flex;flex-direction:column;flex:1 1 auto;}
.home-route .sec-tit{margin-bottom:.8rem;}

.route-list > li + li{margin-top:1.2rem;}
.route-item{display:block;padding:1.6rem;border-radius:1.6rem;background:var(--c-white);text-decoration:none;}
.route-head{display:flex;align-items:center;gap:1.2rem;padding-bottom:1.4rem;border-bottom:.1rem solid var(--c-line);}
.route-ico{flex-shrink: 0;}
.route-ico img{width:2.8rem;}
.route-ico.type-blue{background:var(--c-point-lt);}
.route-ico.type-purple{background:#eceafe;}
.route-ico.type-orange{background:#ffeee2;}
.route-name{flex:1 1 auto;min-width:0;font-size:var(--fs-20);font-weight:600;color:var(--c-tit);}
.route-arrow{flex:0 0 auto;display:flex;width:2.5rem;}
.route-arrow img{width:100%;}

.route-path{--path-pt:1.4rem;position:relative;display:block;padding:var(--path-pt) 0 0 2rem;}
.path-track{position:absolute;left:0;top:var(--path-pt);bottom:0;width:1rem;}
.path-track img{height:100%;object-fit:fill;}
.path-txts{display:block;}
.path-txt{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-15);font-style:normal;line-height:1.4;color:var(--c-tit);}
.path-txt + .path-txt{margin-top:1.2rem;}

/* ===================== 경로 저장하기 ===================== */
.save-sec{padding-top:2.4rem;}
.save-action{padding:3.2rem 0 2.4rem;}
.save-box{padding:1.6rem;border:.1rem solid var(--c-line);border-radius:1.6rem;background:var(--c-white);margin-top: 1rem;}
.save-box .route-path{--path-pt:0;}
.save-preview .route-path{--path-pt:1.4rem;}
.save-preview .route-head{min-height:var(--h-routehead);}

.save-tit{font-size:var(--fs-20);font-weight:600;color:var(--c-tit);}
.save-desc{margin-top:.4rem;font-size:var(--fs-15);color:var(--c-sub);}
.save-inp{display:block;width:100%;height:5rem;margin-top:1.2rem;padding:0 1.6rem;border:0;border-radius:1.2rem;background:var(--c-bg);font-family:inherit;font-size:var(--fs-17);color:var(--c-tit);}
.save-inp::placeholder{color:var(--c-sub);}
.save-inp:focus{outline:none;}
.save-help{margin-top:.8rem;font-size:var(--fs-15);color:var(--c-sub);}

.ico-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:1.6rem .8rem;margin-top:1.6rem;}
.ico-btn{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:0;border:0;background:none;font-family:inherit;cursor:pointer;}
.ico-btn img{width:100%;opacity:.4;} /* 미선택 아이콘은 흐리게 */
.ico-btn span{white-space:nowrap;font-size:var(--fs-13);font-weight:500;color:var(--c-sub);}
.ico-btn.is-on img{opacity:1;}
.ico-btn.is-on span{font-weight:700;color:var(--c-tit);}

/* 공통 토스트 (하단 탭바 위에 뜬다) */
.toast{position:fixed;left:1.6rem;right:1.6rem;bottom:calc(var(--h-tabbar) + env(safe-area-inset-bottom, 0px) + 1.2rem);z-index:150;display:flex;align-items:center;gap:1rem;max-width:calc(42rem - 3.2rem);margin:0 auto;padding:1.4rem 1.6rem;border-radius:1.2rem;background:var(--c-tit);}
.toast-ico{flex:0 0 auto;display:flex;width:2.4rem;}
.toast-ico img{width:100%;}
.toast-txt{flex:1 1 auto;min-width:0;font-size:var(--fs-15);font-weight:500;color:var(--c-white);}
.toast-act{flex:0 0 auto;padding:0;border:0;background:none;font-family:inherit;font-size:var(--fs-15);font-weight:500;color:#c9cfd8;cursor:pointer;}

/* ===================== 즐겨찾기 ===================== */
.fav-sec{padding:.8rem 0 2.4rem;}
.fav-cell{position:relative;}
/* 삭제 버튼 정렬 기준을 고정한다. 1.4rem은 .route-head의 padding-bottom */
.fav-cell .route-head{min-height:calc(var(--h-routehead) + 1.4rem);}
/* 카드 안(=a 태그 안)에 버튼을 넣을 수 없어 형제로 두고 화살표 자리에 겹친다.
   top = 카드 패딩(1.6rem) + 아이콘 행 높이의 절반 */
.route-del{display:none;position:absolute;right:1.6rem;top:calc(1.6rem + var(--h-routehead) / 2);transform:translateY(-50%);padding:.6rem 1.4rem;border:0;border-radius:1rem;background:#ffe1e1;font-family:inherit;font-size:var(--fs-15);font-weight:600;color:var(--c-red);cursor:pointer;}
.route-list.is-manage .route-arrow{visibility:hidden;}
.route-list.is-manage .route-del{display:block;}
.route-list.is-manage .route-item{pointer-events:none;}

/* ===================== 홈 : 최근 경로 ===================== */
.route-notice{display:flex;align-items:center;justify-content:center;gap:.6rem;width:fit-content;max-width:100%;margin:0 auto 1.2rem;padding:.8rem 1.6rem;border-radius:1rem;background:var(--c-point-lt);font-size:var(--fs-15);font-weight:600;color:var(--c-point);}
.route-notice img{flex:0 0 auto;width:1.6rem;}

.recent-item{display:flex;align-items:center;gap:1.2rem;padding:1.6rem;border-radius:1.6rem;background:var(--c-white);}
.recent-link{flex:1 1 auto;min-width:0;display:block;text-decoration:none;}
.recent-link .route-path{--path-pt:0;}
.recent-fav{flex:0 0 auto;width:2.8rem;height:2.8rem;padding:0;border:0;background:none;cursor:pointer;}
.recent-fav img{width:100%;height:100%;object-fit:contain;}