/* ===========================================================
   Koreana
   Design System v1
   Mobile First
=========================================================== */


/* ===========================================================
   RESET
=========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    width:100%;
    height:100%;
    font-size:16px;
    -webkit-text-size-adjust:100%;
}

body{

    width:100%;
    height:100%;

    overflow:hidden;
    font-family:"Inter",sans-serif;
    background:#F5F6F8;
    color:#111827;
    touch-action:manipulation;
    -webkit-font-smoothing:antialiased;

}

button{

    border:none;
    outline:none;
    background:none;
    font-family:inherit;
    cursor:pointer;

}

input{

    outline:none;
    border:none;
    font-family:inherit;

}


/* ===========================================================
   COLOR SYSTEM
=========================================================== */

:root{

    --color-primary:#E8213B;
    --color-background:#F5F6F8;
    --color-surface:#FFFFFF;
    --color-border:#E5E7EB;
    --color-text:#111827;
    --color-sub:#6B7280;
    --color-shadow:rgba(0,0,0,0.12);
    --safe-top:env(safe-area-inset-top);
    --safe-bottom:env(safe-area-inset-bottom);

}


/* ===========================================================
   HEADER
=========================================================== */

#header{

    position:fixed;
    top:0;
    left:0;
    right:0;
    height:64px;
    padding-top:var(--safe-top);

    background:white;
    display:flex;
    align-items:center;
    gap:12px;
    padding-left:16px;
    padding-right:16px;
    z-index:5000;
    box-shadow:0 2px 10px rgba(0,0,0,.05);

}

.brand-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-items: center;
    flex-shrink: 0;
}

#logo {
    line-height: 0;
    justify-content: center;
}

.koreana-logo {
    display: block;
    width: 65px;
    height: auto;
}

.brand-tagline {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 500;
    color: #555;
    white-space: nowrap;
}


/* ===========================================================
   SEARCH
=========================================================== */

#searchContainer{

    flex:1;
    position:relative;

}

#searchBox{

    width:100%;
    height:42px;
    border-radius:22px;
    background:#F1F3F5;
    padding:0 18px;
    font-size:15px;

}

#searchResult{

    position:absolute;

    top:100%;
    left:0;
    right:0;

    background:white;
    border-radius:12px;
    box-shadow:0 4px 16px rgba(0,0,0,.15);
    display:none;
    max-height:320px;
    overflow-y:auto;
    z-index:6000;

}

.search-item{

    padding:12px 16px;
    border-bottom:1px solid #eee;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:10px;

}

.search-item:hover{

    background:#f5f5f5;

}

.search-title{

    font-size:15px;
    font-weight:600;

}

.search-address{

    font-size:12px;
    color:#888;
    margin-top:2px;

}

.search-category{

    font-size:11px;
    color:#1976d2;
    margin-top:4px;

}

.search-highlight{

    background:#ffe082;
    color:#000;
    border-radius:3px;
    padding:0 2px;

}


/* ===========================================================
   LANGUAGE Dropdown
=========================================================== */

#languageDropdown {

    position: relative;

}


/* -----------------------------------------------------------
   Language Button
----------------------------------------------------------- */

#languageButton {

    border: none;
    background: #F1F3F5;
    width: auto;
    min-width: 72px;
    height: 36px;
    padding: 0 12px;
    border-radius: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;

}


/* -----------------------------------------------------------
   Language Menu
----------------------------------------------------------- */

#languageMenu {

    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 120px;

    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 5px;
    display: none;
    z-index: 1000;

}


/* -----------------------------------------------------------
   Open
----------------------------------------------------------- */

#languageDropdown.open #languageMenu {

    display: block;

}


/* -----------------------------------------------------------
   Option
----------------------------------------------------------- */

.languageOption {

    width: 100%;
    border: none;
    background: transparent;
    padding: 9px 12px;
    border-radius: 7px;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;

}


.languageOption:hover {

    background: #F1F3F5;

}


/* -----------------------------------------------------------
   Current Language
----------------------------------------------------------- */

.languageOption.active {

    font-weight: 700;
    background: #F1F3F5;

}


/* ===========================================================
   CATEGORY
=========================================================== */

#categoryBar{

    position:fixed;
    top:64px;
    left:0;
    right:0;
    height:58px;

    background:white;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    overflow-x:auto;
    white-space:nowrap;
    z-index:450;
    scrollbar-width:none;

}

#categoryBar::-webkit-scrollbar{

    display:none;

}

.category{

    height:36px;
    padding:0 18px;
    border-radius:18px;
    background:#F3F4F6;
    font-size:14px;
    font-weight:600;
    color:#444;
    flex-shrink:0;

}

.category.active{

    background:var(--color-primary);
    color:white;

}


.categoryButton{

    width:44px;
    height:44px;

    padding:0;
    border-radius:22px;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#f3f3f3;
    transition:.2s;

}

.categoryButton.active{

    background:#1976D2;
    box-shadow:0 3px 10px rgba(25,118,210,.35);

}

.categoryButton.active img{

    filter:brightness(0) invert(1);

}

.categoryButton.active .toolbar-icon{

    filter:brightness(0) invert(1);

}

.toolbar-icon{

    width:32px;
    height:32px;

    pointer-events:none;

}

.toolbar-divider{

    width:20px;

    flex-shrink:0;

}

.categoryButton:hover{

    background:#e8e8e8;

}

/*==================================================
  Home Panel
==================================================*/

.home-section {
    margin-bottom: 12px;
}


/*--------------------------------------------------
  Section Header
--------------------------------------------------*/

.home-section-header {

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 4px;

    border: 0;
    background: none;

    cursor: pointer;

    font-size: 16px;
    font-weight: 700;

    text-align: left;

}


.home-section-title {
    flex: 1;
}


.home-section-arrow {

    width: 24px;
    text-align: center;
    font-size: 13px;

}


/*--------------------------------------------------
  Section Content
--------------------------------------------------*/

.home-section-content {

    padding: 4px 0 12px;

}


/*--------------------------------------------------
  Featured Day
--------------------------------------------------*/

.home-day {

    margin-bottom: 14px;

}


.home-day-title {

    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 700;

}


.home-place-list {

    display: flex;
    flex-direction: column;
    gap: 6px;

}


.home-place-button {

    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;

    background: #fff;
    text-align: left;
    cursor: pointer;

}


.home-place-button:hover {

    background: #f7f7f7;

}

/*============================
Top Buttons
=============================*/
/* ==========================================================
   Toolbar Icon Button
========================================================== */

.toolbar-icon-button {

    position: relative !important;

}


/* ==========================================================
   Tooltip
========================================================== */
.toolbar-icon-button::after {

    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    padding: 6px 10px;

    background: #222;
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;

    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 999999;
    transition: opacity 0.15s ease;

}


/*--------------------------------------------------
  Home panel- City Landmark Icon
--------------------------------------------------*/

.home-section-icon {

    width: 45px;
    height: 45px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 8px;
    vertical-align: middle;

}


.home-section-title {

    display: flex;
    align-items: center;
    gap: 0;

}

/*--------------------------------------------------
  City Landmark Section
--------------------------------------------------*/

.home-section-title-text {

    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    font-size: 15px;

}


.home-section-title-main {

    display: block;
    font-weight: 700;
    line-height: 1.3;

}


.home-section-subtitle {

    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;

    color: #888;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}


/* ==========================================================
   Hover
========================================================== */

.toolbar-icon-button:hover::after {

    opacity: 1;
    visibility: visible;

}



/*--------------------------------------------------
  Weather
--------------------------------------------------*/

.home-weather {

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;

}


.home-weather-icon {

    font-size: 34px;

}


.home-weather-temperature {

    font-size: 24px;
    font-weight: 700;

}


.home-weather-status {

    margin-top: 3px;
    font-size: 13px;
    color: #777;

}

/*--------------------------------------
  Data Source 기상청, 한국관광공사
--------------------------------------*/

.home-data-source {

    margin-top: 12px;
    padding-top: 8px;

    border-top: 1px solid #e5e5e5;

    text-align: center;
    font-size: 10px;
    line-height: 1.6;

    color: #999;

}


.home-tourism-source {
    padding: 0 16px;
}

.home-tourism-source .home-data-source {
    margin-top: 8px;
    padding-top: 8px;

    text-align: center;

    font-size: 10px;
    line-height: 1.5;

    color: #999;
}



/*--------------------------------------
  Festival
--------------------------------------*/

.home-festivals {

    width: 100%;

}


.home-festival-button {

    display: block;
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 5px;
    border: 1px solid #e5e5e5;

    border-radius: 8px;
    background: #fff;
    text-align: left;
    font-size: 14px;
    cursor: pointer;

}


.home-festival-button:hover {

    background: #f7f7f7;

}


/*--------------------------------------
  Festival List
--------------------------------------*/

.home-festival-item {

    display: block;
    width: calc(100% - 0px);
    box-sizing: border-box;
    padding: 11px 13px;
    margin-bottom: 6px;

    border: 1px solid #dedede;
    border-radius: 9px;
    background: #ffffff;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;

}


.home-festival-item {

    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    margin-bottom: 6px;

    border: 1px solid #dedede;
    border-radius: 9px;
    background: #ffffff;
    color: #222;

    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;

}

.home-festival-item:hover {

    background: #f7f7f7;

}


/*--------------------------------------
  Festival Detail
--------------------------------------*/

.festival-detail {

    margin-top: 10px;

}


.festival-detail-row {

    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;

}


.festival-detail-label {

    flex: 0 0 75px;
    font-weight: 600;
    color: #666;

}


.festival-detail-value {

    flex: 1;
    color: #222;

}



/*--------------------------------------------------
  Access
--------------------------------------------------*/

.home-access-list {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.home-access-item {
    flex: 1;
    text-align: center;
}

.home-access-period {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
}

.home-access-value {
    margin-top: 5px;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.2;
}

.home-access-languages {

    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #E5E7EB;
    text-align: center;
    font-size: 11px;
    color: #888;
    line-height: 1.6;
    word-break: keep-all;

}


.home-access-language {

    white-space: nowrap;

}


.home-access-label {

    margin-top: 4px;
    font-size: 12px;
    color: #777;

}


.home-panel-content {
    padding-bottom: 20px;
    margin-bottom: 20px;
}


/* ==========================
// Weather new - on Map
============================*/

#mapWeatherOverlay {

    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1000;
    display: flex;

    align-items: center;
    gap: 6px;
    pointer-events: none;
    user-select: none;
    color: #222;

    text-shadow:
        0 1px 3px rgba(255,255,255,0.9),
        0 -1px 3px rgba(255,255,255,0.9);

}


.map-weather-icon img {

    width: 32px;
    height: 32px;
    display: block;

}


.map-weather-info {

    display: flex;
    flex-direction: column;
    line-height: 1.05;

}


.map-weather-temperature {

    font-size: 17px;
    font-weight: 700;

}


.map-weather-description {

    font-size: 11px;
    font-weight: 600;

}


.map-weather-time {

    margin-top: 2px;
    font-size: 10px;
    font-weight: 500;

}


/*--------------------------------------
  Weather 2 - old
--------------------------------------*/

.home-weather-card {
    padding: 10px 12px 12px;
    text-align: center;
}

.home-weather-location {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.home-weather-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.home-weather-icon {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.home-weather-icon img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    display: block;
}

.home-weather-temperature {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.home-weather-unit {
    font-size: 11px;
    align-self: flex-end;
    margin-bottom: 1px;
}

.home-weather-description {
    margin-top: 7px;
    font-size: 11px;
    font-weight: 500;
}

.home-weather-range {
    display: flex;
    justify-content: center;
    gap: 9px;

    margin-top: 6px;
    font-size: 10px;
}

.home-weather-range strong {
    font-weight: 600;
}



/*--------------------------------------------------
  Banner
--------------------------------------------------*/

.home-banner {

    width: 100%;
    min-height: 0;
    margin: 4px 0;

}


.home-empty {

    padding: 20px 10px;
    text-align: center;
    color: #999;
    font-size: 13px;

}


/*==================================================
  Logo : 홈 버튼 
==================================================*/

#logo {
    cursor: pointer;
    user-select: none;
}


/*==================================================
  Home Ranking
==================================================*/

.home-ranking-list {

    display: flex;
    flex-direction: column;
    gap: 4px;

}


.home-ranking-item {

    width: 100%;
    display: flex;
    align-items: center;
    min-height: 42px;

    gap: 10px;
    padding: 10px 8px;
    border: 0;
    border-bottom: 1px solid #eeeeee;
    background: transparent;
    cursor: pointer;
    text-align: left;

}


.home-ranking-item:hover {

    background: #f7f7f7;

}


.home-ranking-number {

    width: 32px;
    flex-shrink: 0;
    font-weight: 700;
    text-align: center;

}


.home-ranking-title {

    flex: 1;
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}


.home-ranking-count {

    flex-shrink: 0;
    font-size: 12px;

}


/*-----------------------------------
Ranking Title 줄 맞추기 
-----------------------------------*/

.home-section-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    box-sizing: border-box;
}

.home-section-title {
    flex: 1;
    min-width: 0;

    white-space: normal;
    line-height: 1.35;

    font-size: 16px;
    font-weight: 700;

    text-align: center;
}

.home-section-arrow {
    flex: 0 0 20px;
    margin-left: 10px;

    text-align: center;
}


/*-------------------
Favrorite, Recent Placs 
-------------------*/

.panelTitleText{

    font-size:90%;

}


/*-------------------
Landmarks Sleelcted 
-------------------*/
.landmark-card{

    display:flex;
    gap:12px;
    padding:12px;
    border-radius:10px;
    cursor:pointer;

    margin-bottom:10px;
    background:white;
    border:1px solid #e6e6e6;
    transition:.15s;

}

.landmark-card:hover{

    transform:translateY(-2px);
    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.landmark-card-image{

    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:8px;
    flex-shrink:0;

}

.landmark-card-body{

    flex:1;

}

.landmark-card-title{

    font-weight:700;
    margin-bottom:6px;

}

.landmark-card-overview{

    font-size:13px;
    color:#666;
    line-height:1.5;

}


.landmark-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.landmark-card-distance{

    font-size:12px;

    color:#888;

    white-space:nowrap;

}

.detail-section{

    margin-top:24px;

}

.detail-section-title{

    font-size:20px;
    font-weight:700;

    margin-bottom:14px;

}

#detailRelatedList,
#detailLandmarkNearbyList{

    display:flex;
    flex-direction:column;
    gap:12px;

}


/* -----------------
Naver Places (search)
------------------*/

.search-group-header{

    margin:16px 0 8px 16px;
    font-size:13px;
    font-weight:700;
    color:#666;
    letter-spacing:.5px;
    text-transform:uppercase;

}


/* ----------------
Search icons
----------------*/

.search-title{

    display:flex;
    align-items:center;
    gap:8px;

}

.search-icon{

    width:20px;
    height:20px;
    flex-shrink:0;
    object-fit:contain;

}




/* ----------------
nearby
----------------*/


#nearbySummary{

    margin-bottom:14px;

}

.nearbySummaryItem{

    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid #f0f0f0;

}

.nearbySummaryIcon{

    width:22px;
    height:22px;

}

.nearbySummaryTitle{

    flex:1;
    font-weight:600;

}

.nearbySummaryCount{

    color:#666;
    font-weight:700;

}


/* ---------------
판넬의 overview 
---------------- */

#detailExtraInfo{
    
    gap:8px;
    margin-top:5px;
    height: auto;

}

.placeOverview{

    background:#f2f2f9;
    border-radius:18px;
    padding:18px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);

}

.placeOverview {
    margin-top: 16px;
}


#detailCategory{

    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;

}

#detailCategoryIcon{

    width:20px;
    height:20px;

}

#detailCategoryName{

    font-size:14px;
    font-weight:600;
    color:#666;

}


#nearbySection{

    display:none;
    margin-top:24px;
    padding-top:16px;
    border-top:1px solid #ececec;

}

#nearbySection h3{

    margin:0 0 12px;
    font-size:18px;
    font-weight:600;

}

#nearbyList{

    display:flex;
    flex-direction:column;
    gap:10px;

}


.nearbyItem{

    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid #f3f3f3;
    cursor:pointer;

}

.nearbyItem:hover{

    background:#f8f8f8;

}

.nearbyIcon{

    width:22px;
    height:22px;
    flex-shrink:0;

}

.nearbyTitle{

    flex:1;
    font-size:14px;
    font-weight:500;

}

.nearbyDistance{

    color:#666;
    font-size:13px;

}

.nearbyBody{

    flex:1;

}

.nearbyCategory{

    font-size:12px;
    color:#888;
    margin-top:2px;

}


.travelConvenience{

    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:20px;

}

.travelItem{

    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px;
    border-radius:12px;
    background:#fafafa;
    cursor:pointer;
    transition:.2s;

}

.travelItem:hover{

    background:#eeeeee;

}

.travelLeft{

    display:flex;
    align-items:center;
    gap:10px;

}

.travelIcon{

    width:22px;
    height:22px;

}

.travelTitle{

    font-weight:600;
    font-size:14px;

}

.travelDistance{

    color:#666;
    font-size:13px;

}

/*=========================================
Toolbar
=========================================*/

#topHeader{

    position:fixed;

    top:0;
    left:0;
    right:0;

    background:white;

    z-index:1000;

}

/* =========================================================
   Top Button Toolbar
   - Explore + Essential 전체 가로 스크롤
========================================================= */

.toolbar {

    position: fixed;

    left: 0;
    right: 0;

    box-sizing: border-box;
    background: white;

    z-index: 450;
    padding: 8px 14px;

    /* Explore + Divider + Essential을 한 줄로 배치 */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    align-items: center;

    /* 그룹 사이 간격 */
    gap: 10px;

    width: 100%;
    max-width: 100%;

    /* 전체 Toolbar가 좌우 스크롤 */
    overflow-x: auto;
    overflow-y: hidden;

    /* 모바일 부드러운 터치 스크롤 */
    -webkit-overflow-scrolling: touch;

    /* Firefox 스크롤바 숨김 */
    scrollbar-width: none;

    min-width: 0;

}


/* Chrome / Safari 스크롤바 숨김 */

.toolbar::-webkit-scrollbar {

    display: none;

}


/* =========================================================
   Toolbar Position
========================================================= */

.toolbar:first-of-type {

    top: 64px;

}

.toolbar:last-of-type {

    top: 126px;

}


/* =========================================================
   Toolbar Title
========================================================= */

.toolbar-title {

    font-size: 13px;
    font-weight: 600;

    color: #666;

    margin-bottom: 6px;
    padding-left: 6px;

}


/* =========================================================
   Toolbar Button Groups
   - exploreToolbar
   - essentialToolbar
========================================================= */

.toolbar-buttons {

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    align-items: center;

    gap: 8px;

    /* 각 그룹 자체는 스크롤하지 않음 */
    overflow: visible;

    /* 화면 폭에 맞춰 그룹이 압축되지 않도록 */
    flex: 0 0 auto;

    /* 내부 버튼 전체 크기만큼 가로폭 유지 */
    width: max-content;

}


/* =========================================================
   Category Buttons
========================================================= */

.toolbar-buttons .categoryButton {

    /* 버튼 크기가 줄어들지 않도록 */
    flex: 0 0 auto;

}


/* =========================================================
   Divider
========================================================= */

.toolbar-divider {

    width: 1px;

    /* 가로 Flex 안에서 폭 유지 */
    flex: 0 0 auto;

    /* 세로 구분선 */
    align-self: stretch;

    background: #ddd;

}


/*=========================================
Badge
=========================================*/

#detailBadges{

    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:12px 0 16px;

}

.detailBadge{

    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border:1px solid #e6e6e6;
    border-radius:20px;
    background:#ffffff;
    font-size:13px;
    font-weight:600;

}

.badgeIcon{

    width:18px;
    height:18px;
    object-fit:contain;

}

.badgeCheap{

    background:#49e743;

}

.badgeRecommended{

    background:#ff9800;

}

.badgeForeigner{

    background:#2196f3;

}

.badgeHidden{

    background:#8e44ad;

}


/* ----------------------------
// Badge - Halal, Vegetarian, cheap
---------------------------------*/

.recommend-badge-image {

    width: 20px;
    height: 20px;
    display: block;

}



.ev-info {
    margin-top: 16px;
}

.ev-charger-count {
    display: flex;
    gap: 12px;
}

.ev-info-item {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    background: #f5f5f5;
}

.ev-info-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    opacity: 0.7;
}

.ev-info-item strong {
    font-size: 18px;
}

.ev-vehicles {
    margin-top: 14px;
}

.ev-vehicle-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ev-vehicle {
    padding: 5px 8px;
    border-radius: 12px;
    background: #f2f2f2;
    font-size: 12px;
}


/* --------------------------------
// Panel - Franchise badge
----------------------------------*/

.franchise-badge {

    display: inline-flex;
    align-items: center;

    gap: 6px;
    margin-top: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;

}

.franchise-icon {

    width: 20px;
    height: 20px;
    display: block;

}


/* =========================================================
   marker 클릭한 Access count
========================================================= */

.detail-access-count {

    display: flex;
    justify-content: flex-end;
    align-items: center;

    width: 100%;
    margin-top: 10px;
    margin-bottom: 8px;

    font-size: 12px;
    line-height: 1;
    color: #777;

}

#labelAccessCount {
    margin-right: 5px;
}

#labelAccessCount,
#accessCountValue {
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
}

#accessCountValue {

    font-size: 12px;
    font-weight: 500;

}



/* =========================================================
   ATM Detail
========================================================= */

.atmDetail {

    margin-top: 14px;

}


.atmDetailHeader {

    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 16px;

}


.atmCount {

    font-size: 12px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 12px;
    background: #f1f3f5;

}


.atmStationInfo {

    margin-bottom: 10px;
    font-size: 13px;
    color: #666;

}


.atmInfoCard {

    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fafafa;

}


.atmInfoTitle {

    margin-bottom: 9px;
    font-size: 14px;
    font-weight: 700;

}


.atmInfoRow {

    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;

}


.atmInfoLabel {

    flex: 0 0 65px;
    color: #777;

}


.atmInfoValue {

    flex: 1;
    min-width: 0;
    color: #222;

}


/*=========================================
Active Filters
=========================================*/

#activeFilters{

    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:8px 12px;
    background:white;

}

.filterChip{

    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:18px;
    background:#f3f3f3;
    font-size:13px;
    font-weight:600;

}

.filterRemove{

    cursor:pointer;
    color:#888;
}


/* ==========================================
   Section Icon
========================================== */

.sectionIcon{

    width:24px;
    height:24px;
    object-fit:contain;
    flex-shrink:0;
    margin-right:8px;
    vertical-align:middle;

}

.sectionHeader{

    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:12px;

}

.sectionHeader span{

    font-size:20px;
    font-weight:600;

}


/* ===========================================================
   MAP
=========================================================== */

#mainContainer{

    position:fixed;
    top:122px;
    left:0;
    right:0;
    bottom:0;

}

#map{

    width:100%;
    height:100%;

}


.currentMarker{

    position:relative;
    width:64px;
    height:64px;

}
.currentDot{

    position:absolute;
    left:50%;
    top:50%;
    width:26px;
    height:26px;
    transform:translate(-50%,-50%);
    z-index:3;

}
.currentPulse{

    position:absolute;

    left:50%;
    top:50%;
    width:26px;
    height:26px;
    border-radius:50%;
    background:rgba(7,113,254,.35);    
    filter:blur(1px);
    transform:translate(-50%,-50%);
    animation:pulse 2.4s ease-out infinite;
    opacity:.35;

}
.currentPulse.delay1{

    animation-delay:.8s;

}
.currentPulse.delay2{

    animation-delay:1.6s;

}
@keyframes pulse{

    0%{

        transform:translate(-50%,-50%) scale(1);
        opacity:.45;

    }

    100%{

        transform:translate(-50%,-50%) scale(4.3);
        opacity:0;

    }

}




/* ===========================================================
   FLOAT BUTTON
=========================================================== */

#currentLocationButton{

    position:fixed;
    right:20px;
    bottom:150px;
    width:56px;
    height:56px;
    border-radius:50%;

    background:white;
    box-shadow:0 6px 18px rgba(0,0,0,.15);
    z-index:600;
    font-size:24px;

}


/* ===========================================================
   BOTTOM SHEET
=========================================================== */

#sidePanel{

    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:120px;

    background:white;
    border-radius:24px 24px 0 0;
    box-shadow:0 -8px 30px rgba(0,0,0,.12);
    z-index:550;
    transition: height .35s ease, transform .35s ease;
    padding:20px;
    padding-bottom:calc(20px + var(--safe-bottom));

}


/* Handle */

#panelHandle{

    width:48px;
    height:6px;
    margin:10px auto 18px;
    border-radius:999px;
    background:#D1D5DB;

}


#panelContent{

    display:flex;
    flex-direction:column;
    height:100%;

}


#panelScroll{

    flex:1;
    overflow-y:auto;
    padding:16px 20px;
    box-sizing:border-box;

}


#panelActions{

    position:sticky;
    bottom:0;
    display:flex;
    gap:10px;
    padding:14px;
    background:white;
    border-top:1px solid #ddd;
    z-index:100;
    box-shadow:0 -2px 10px rgba(0,0,0,.08);

}

.panelButton{

    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    height:60px;

}

.panelButtonIcon{

    font-size:22px;
    line-height:1;

}


.convenienceHeader{

    margin-top:20px;

}

.favoriteRow{

    display:flex;
    align-items:flex-start;

}

.favoriteHeader{

    padding-left:18px;
    margin-top:16px;

}

.favoriteHeader{

    display:flex;
    align-items:center;
    gap:10px;

}

.favoriteCount{

    margin-left:8px;
    padding:2px 8px;
    border-radius:999px;
    background:#f3f3f3;
    color:#666;
    font-size:13px;
    font-weight:600;

}

.favoriteMarkerIcon{

    width:28px;
    height:28px;
    margin-right:12px;    
    flex-shrink:0;

}

.favoriteInfo{

    flex:1;

}

.favoriteTitle{

    font-size:15px;
    font-weight:600;
    color:#222;

}

.favoriteAddress{

    margin-top:4px;
    font-size:12px;
    color:#888;
    line-height:1.4;

}

.favoriteCountBadge{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    width:28px;
    height:28px;
    margin-left:10px;
    border-radius:50%;

    background:#f0f0f0;
    color:#333;

    font-size:14px;
    font-weight:700;

}

.favoriteRemove{

    width:32px;
    height:32px;

    border:none;
    background:none;
    cursor:pointer;

    font-size:20px;
    color:#ff4b6a;
    transition:.2s;

    transform:translateY(-6px);

}

.favoriteRemove:hover{

    transform:scale(1.15);

}

.favoriteRemove{

    min-width:40px;
    min-height:40px;
}


#favoriteListButton{

    width:44px;
    height:44px;
    border:none;
    background:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;

}

#favoriteListButton img{

    width:24px;
    height:24px;

}


/*--------------------------------------
  Header Favorite / Recent
--------------------------------------*/

.header-actions {

    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;

}

#favoriteListButton,
#recentListButton {

    width: 44px;
    height: 44px;
    padding: 0;

    border: none;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;

}

#favoriteListButton img,
#recentListButton img {

    width: 24px;
    height: 24px;

}




#favoritePanel{

    position:fixed;
    top:70px;
    right:20px;
    width:320px;
    max-height:420px;
    overflow-y:auto;
    background:white;
    border-radius:16px;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    display:none;
    z-index:900;

}

.favoriteItem{

    padding:16px;
    border-bottom:1px solid #eee;
    cursor:pointer;
    transition:.2s;

}

.favoriteItem:hover{

    background:#f7f7f7;

}

.favoriteItem{

    padding:16px;
    border-bottom:1px solid #ececec;
    cursor:pointer;
    transition:.2s;

}

.favoriteItem:hover{

    background:#f7f7f7;

}

.favoriteTitle{

    font-weight:600;
    font-size:16px;

}

.favoriteAddress{

    color:#777;
    font-size:13px;
    margin-top:6px;

}


/*--------------------------------------
  Review Write
--------------------------------------*/


.review-write {

    padding: 20px 18px 90px;

}

.review-place-title {

    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;

}

.review-section {

    margin-bottom: 24px;

}

.review-label {

    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;

}


.review-rating {

    margin-bottom: 24px;

}

.review-stars {

    display: flex;
    gap: 5px;

}

.review-stars button {

    width: 36px;
    height: 36px;
    padding: 0;

    border: none;
    background: transparent;

    font-size: 30px;
    line-height: 1;
    cursor: pointer;

}

.review-message {

    margin-bottom: 20px;

}

.review-message textarea {

    width: 100%;
    min-height: 140px;
    box-sizing: border-box;
    padding: 12px;

    border: 1px solid #ddd;
    border-radius: 10px;
    resize: vertical;
    font-size: 14px;

}

.review-submit {

    width: 100%;
    height: 46px;
    border: none;
    border-radius: 10px;

    background: #1976d2;
    color: white;

    font-size: 15px;
    font-weight: 600;
    cursor: pointer;

}

.review-options {

    display: flex;
    flex-direction: column;
    gap: 8px;

}

.review-option {

    display: flex;
    align-items: center;

    gap: 9px;
    min-height: 38px;
    padding: 8px 10px;

    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;

}

.review-option input {

    width: 18px;
    height: 18px;
    flex-shrink: 0;

}

/*후기: -----*/
.review-section textarea {

    width: 100%;
    min-height: 120px;

    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;

    font-size: 14px;
    resize: vertical;

}

/*등록 버튼: -----*/
.review-submit {

    width: 100%;
    height: 46px;

    border: none;
    border-radius: 9px;

    background: #1976d2;
    color: #fff;

    font-size: 15px;
    font-weight: 600;
    cursor: pointer;

}



/*--------------------------------------
  Review More Button
--------------------------------------*/

.review-more-button {

    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px;

    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;

}

.review-more-button:hover {

    background: #f7f7f7;

}

.review-item-header {

    display: flex;
    align-items: center;
    gap: 8px;

}

.review-owner-badge {

    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 10px;

    background: #f1f3f5;
    color: #666;
    font-size: 11px;
    font-weight: 500;

}

.review-item-actions {

    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;

}

.review-edit-button,
.review-delete-button {

    border: 0;
    background: transparent;
    padding: 3px 5px;
    font-size: 12px;
    cursor: pointer;

}

.review-edit-button {

    color: #555;

}

.review-delete-button {

    color: #999;

}


/* -------------------------------
// Korean Tim
---------------------------------*/

.weather-time {
    margin-bottom: 8px;
}

.weather-korea-time {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;

}

.weather-time-label {

    font-size: 12px;
    color: #777;

}

.weather-time-value {

    font-size: 13px;
    font-weight: 600;
    color: #333;

}



/*--------------------------------------
  Detail Reviews
--------------------------------------*/

.detail-reviews {

    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eee;

}

.detail-reviews-header {

    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;

}

.detail-reviews-header h3 {

    margin: 0;
    font-size: 17px;

}

.review-count {

    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;

    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;

}

.review-empty {

    padding: 20px 0;
    color: #888;
    font-size: 13px;

}


/*==================================================
후기 보기
==================================================*/

.detail-review-item {

    padding: 16px 0;
    border-bottom: 1px solid #eee;

}

.review-item-header {

    margin-bottom: 8px;

}

.review-item-stars {

    font-size: 17px;
    letter-spacing: 1px;

}

.review-item-tags {

    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 9px;

}

.review-tag {

    padding: 4px 8px;
    border-radius: 12px;
    background: #f5f5f5;
    font-size: 11px;

}

.review-item-text {

    font-size: 13px;
    line-height: 1.6;
    color: #444;

}

/* ------ 후기 카운트 ------------ 
---------------------------------*/

.detail-reviews-header h3 {

    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 17px;

}

.review-count {

    font-size: 12px;
    font-weight: 500;
    color: #777;

}


/*--------------------------------------
  Review Summary
--------------------------------------*/

.review-summary-section {

    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee;

}

.review-summary-title {

    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 700;

}

.review-summary-list {

    display: flex;
    flex-direction: column;
    gap: 10px;

}

.review-summary-info {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

}

.review-summary-label {

    font-size: 12px;
    color: #444;

}

.review-summary-percent {

    font-size: 11px;
    color: #777;

}

.review-summary-bar {

    width: 100%;
    height: 6px;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 3px;
    background: #e9e9e9;

}

.review-summary-progress {

    height: 100%;
    border-radius: 3px;
    background: #4a90e2;

}



/*==================================================
Gallery
==================================================*/

#galleryContainer{

    position:relative;
    margin-bottom:20px;

}

#detailImage{

    display:none;
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:12px;

}

.galleryButton{

    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.45);
    color:white;
    cursor:pointer;
    font-size:18px;

}

#galleryPrev{

    left:10px;

}

#galleryNext{

    right:10px;

}

#galleryCounter{

    position:absolute;
    bottom:10px;
    right:10px;
    background:rgba(0,0,0,.55);
    color:white;
    padding:4px 10px;
    border-radius:12px;
    font-size:13px;

}

/*==================================================
Gallery Dot
==================================================*/

#galleryDots{

    position:absolute;
    bottom:12px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;

}

.galleryDot{

    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    transition:.25s;

}

.galleryDot.active{

    background:white;
    transform:scale(1.35);

}



/* ==========================================
   SVG ICON
========================================== */

.icon{

    width:24px;
    height:24px;
    display:block;
    object-fit:contain;

}

.iconSmall{

    width:18px;
    height:18px;

}

.iconLarge{

    width:32px;
    height:32px;

}


#detailImage{

    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:12px;
    display:none;

    opacity:1;
    transition:opacity .25s;
}


#detailTitle{

    font-size:24px;
    font-weight:700;

}


#detailAddress{

    color:#666;
    line-height:1.5;

}

#detailTel,
#detailHomepage{

    color:#666;
    font-size:15px;
    line-height:1.5;
}

#detailOverview{

    line-height:1.8;
    font-size:15px;
}

.detail-gallery{
    position:relative;
    width:100%;
    margin:12px 0;
}

.gallery-image{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:12px;
}

.gallery-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.5);
    color:#fff;
    cursor:pointer;
}

#galleryPrev{
    left:10px;
}

#galleryNext{
    right:10px;
}

/* ---------------------------
Recommand
-----------------------------*/

.recommend-list{

    display:flex;
    flex-wrap:wrap;
    gap:10px;

}


.recommend-button{

    position:relative;

    width:64px;
    height:82px;
    border:none;
    border-radius:12px;

    background:#f5f5f5;
    cursor:pointer;
    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;
    transition:.2s;

}

.recommend-check{

    display:none;
}

.recommend-button.selected .recommend-check{

    display:flex;
    position:absolute;

    top:6px;
    right:6px;
    width:18px;
    height:18px;

    border-radius:50%;
    background:#4CAF50;

    justify-content:center;
    align-items:center;

}

.recommend-button.selected .recommend-check::after{

    content:"✓";
    color:white;
    font-size:11px;
    font-weight:bold;

}

.recommend-check:empty{

    display:none;

}


.recommend-icon{

    font-size:24px;

}

.recommend-title{

    margin-top:4px;
    font-size:11px;
    font-weight:600;

}


.recommend-count{

    margin-top:4px;
    font-size:11px;
    color:#6b6a6a;

}


.recommend-button:hover{

    background:#eeeeee;

}

.recommend-button.selected{ 

    background:#E3F2FD;
    border:2px solid #1976D2;

}


.recommend-button.selected .recommend-count{

    color:#1976D2;
    font-weight:700;

}


.recommend-button.pop{

    animation:recommendPop .18s ease;

}

@keyframes recommendPop{

    0%{ transform:scale(1); }
    50%{ transform:scale(1.15); }
    100%{ transform:scale(1); }

}


/*--------------------------------------
  툴바 : My Location
--------------------------------------*/

.toolbar-my-location {

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 4px;
    padding: 0 6px;

    border: none;
    outline: none;
    background: transparent;
    color: #1976d2;

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;

}

.toolbar-my-location:hover {
    opacity: 0.8;
}

.toolbar-my-location:active {
    opacity: 0.6;
}

.my-location-icon {
    font-size: 24px;
    line-height: 1;
}


/* ===========================================================
   나의 위치에서 이동하는 방향 화살표
=========================================================== */

.currentHeading {

    position: absolute;
    left: 50%;
    top: 50%;

    width: 24px;
    height: 24px;

    transform:
        translate(-50%, -50%)
        rotate(0deg);

    transform-origin: center;
    z-index: 10;
    display: none;

}

.currentHeading::before {

    content: "";
    position: absolute;
    left: 50%;
    top: 0;

    transform: translateX(-50%);
    width: 0;
    height: 0;

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 14px solid #4285F4;

}



/* ===========================================================
   Tour Convenience '전체보기 >>' 글자
=========================================================== */

.nearby-map-toggle {
    margin-left: auto;
}


/* ===========================================================
   Nearby
=========================================================== */

#labelNearbyRadius {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #888;
}



/* ===========================================================
   LOADING
=========================================================== */

#loadingScreen{

    position:fixed;
    inset:0;
    background: transparent;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:20px;
    z-index:1000;
    pointer-events: none;

}

.spinner{

    width:56px;
    height:56px;
    border-radius:50%;
    border:4px solid #DDD;
    border-top:4px solid var(--color-primary);
    animation:spin .8s linear infinite;

}

.loadingText{

    color:#666;
    font-size:15px;

}


/* ===========================================================
   TOAST
=========================================================== */

/*==========================================================
Toast
==========================================================*/

#toast{

    position:fixed;
    left:50%;
    bottom:30px;
    transform:translateX(-50%) translateY(20px);
    background:#333;
    color:white;
    padding:14px 24px;
    border-radius:30px;
    opacity:0;
    transition:.3s;
    z-index:99999;
    pointer-events:none;
    font-size:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);

}

#toast.show{

    opacity:1;
    transform:translateX(-50%) translateY(0);

}


/* ===========================================================
   ANIMATION
=========================================================== */

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ===========================================================
   TABLET
=========================================================== */

@media(min-width:768px){

    #sidePanel{

        width:360px;
        top:122px;
        bottom:0;
        right:auto;
        left:0;
        border-radius:0;

    }

    #sidePanel::before{

        display:none;

    }

    #mainContainer{

        left:360px;

    }

}


/* ===========================================================
   DESKTOP
=========================================================== */

@media(min-width:1200px){

    #sidePanel{

        width:400px;

    }

    #mainContainer{

        left:400px;

    }

}

/*==========================================================
Bottom Sheet State
==========================================================*/

/* 접힘 */

#sidePanel.collapsed{

    height:120px;

}

/* 절반 */

#sidePanel.half{

    height:45vh;

}

/* 전체 */

#sidePanel.expanded{

    height:80vh;

}