/* ================================
   Reset & 기본 설정
================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a.clean-link,
a.clean-link:visited,
a.clean-link:hover,
a.clean-link:active,
a.clean-link:focus,
a.clean-link *,
a.clean-link *:hover,
a.clean-link *:active,
a.clean-link *:focus {
    all: unset;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    color: inherit !important;
    display: flex;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS에서 길게 눌러 메뉴 뜨는 것도 방지 */
    user-select: none; /* 텍스트 선택되는 것도 방지 */
}

html {
    background-color: #f5f5f5; /* 좌우 여백 컬러 */
}

body {
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 48px 0;
    gap: 48px;
    max-width: 479px;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    color: #333333;
    background-color: #ffffff;
}

/* ================================
   유틸리티 클래스
================================ */
/* Flexbox 관련 */
.u-flex {
    display: flex;
}
.u-flex-col {
    display: flex;
    flex-direction: column;
}
.u-flex-row {
    display: flex;
    flex-direction: row;
}

/* 여백 및 패딩 */
.u-gap-8 {
    gap: 8px;
}
.u-gap-16 {
    gap: 16px;
}
.u-px-20 {
    padding-left: 20px;
    padding-right: 20px;
}
.u-py-16 {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* 라운드 */
.u-rounded-4 {
    border-radius: 4px;
}
.u-rounded-8 {
    border-radius: 8px;
}
.u-rounded-16 {
    border-radius: 16px;
}
.u-rounded-999 {
    border-radius: 999px;
}

/* 텍스트 스타일 */
.text-24 {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
}
.text-18 {
    font-size: 18px;
}
.text-16 {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
}
.text-14 {
    font-size: 14px;
}
.text-11 {
    font-size: 11px;
}
.text-light {
    font-weight: 300;
    color: #777777;
}
.text-primary {
    color: #003366;
}
.text-warning {
    color: #f63d58;
    font-weight: 700;
}

/* Grid */
.u-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* 멀티라인 말줄임 (최대 2줄) */
.multiline-ellipsis {
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
    overflow-wrap: break-word;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ================================
   차트 공통 Componemt
================================ */
/* 차트 컨테이너에 relative를 주어 내부 tooltip의 절대 위치 지정 가능 */
.chart-container {
    position: relative;
    height: 250px;
}
#flight-chart {
    width: 100%;
    height: 100%;
    background-color: #f7f7f9; /* 연한 회색 배경 */
    border-radius: 16px;
    padding: 16px;
    margin: 0;
}
#rentacar-chart {
    width: 100%;
    height: 100%;
    background-color: #f7f7f9; /* 연한 회색 배경 */
    border-radius: 16px;
    padding: 16px;
    margin: 0;
}
#tna-chart {
    width: 100%;
    height: 100%;
    background-color: #f7f7f9; /* 연한 회색 배경 */
    border-radius: 16px;
    padding: 16px;
    margin: 0;
}
/* 고정 tooltip 스타일 (그림자 제거, z-index로 항상 위에 표시) */
.fixed-tooltip {
    position: absolute;
    pointer-events: none;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 16px;
    font-family: "Pretendard";
    font-size: 14px;
    text-align: center;
    /* box-shadow 제거 */
    z-index: 1000;
}
/* 개별적으로 텍스트 색상 조정 가능 (예시) */
#min-tooltip__flight .title {
    font-weight: 400;
    text-align: left;
    color: #ff0000;
}
#min-tooltip__flight .body {
    color: #ff0000;
}
#max-tooltip__flight .title {
    font-weight: 400;
    text-align: left;
    color: #848484;
}
#max-tooltip__flight .body {
    color: #848484;
}
/* 원하는 패딩 및 폰트 사이즈 적용 */
#min-tooltip__flight,
#max-tooltip__flight,
#min-tooltip__rentacar,
#max-tooltip__rentacar,
#min-tooltip__tna,
#max-tooltip__tna {
    padding: 8px;
    font-family: "Pretendard";
    font-size: 11px;
    line-height: 1.4em;
    opacity: 0.9;
    font-weight: 300;
}
/* 개별적으로 텍스트 색상 조정 가능 (예시) */
#min-tooltip__rentacar .title {
    font-weight: 400;
    text-align: left;
    color: #ff0000;
}
#min-tooltip__rentacar .body {
    color: #ff0000;
}
#max-tooltip__rentacar .title {
    font-weight: 400;
    text-align: left;
    color: #848484;
}
#max-tooltip__rentacar .body {
    color: #848484;
}
/* 개별적으로 텍스트 색상 조정 가능 (예시) */
#min-tooltip__tna .title {
    font-weight: 400;
    text-align: left;
    color: #ff0000;
}
#min-tooltip__tna .body {
    color: #ff0000;
}
#max-tooltip__tna .title {
    font-weight: 400;
    text-align: left;
    color: #848484;
}
#max-tooltip__tna .body {
    color: #848484;
}

/* ================================
      컴포넌트별 스타일 (BEM 방식)
================================ */

/* City Header */
.spot-header,
.city-header {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    gap: 16px;
}

.spot-header__title-wrap,
.city-header__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.spot-header__title,
.city-header__title {
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    line-height: 1.3;
}
.spot-header__subtitle,
.city-header__subtitle {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 300;
    color: #777777;
    font-family: "Pretendard JP";
    font-feature-settings: "ss05";
    gap: 0;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spot-header__description,
.city-header__description {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 1.7em;
    text-align: justify;
    padding: 0;
}
.spot-header__cover,
.city-header__cover {
    position: relative;
    width: 100%;
    height: 250px;
}
.spot-header__cover-image,
.city-header__cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
}
.spot-header__cover-copyright,
.city-header__cover-copyright {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

/* ================================
   Highlight 및
   기본 공통 Componemt
================================ */
.youtube,
.nearbyspot,
.tnaprice,
.cityvideo,
.nearbycity,
.gift,
.menu,
.transportation,
.information,
.category,
.extra,
.highlight {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    gap: 16px;
    line-height: 1.6em;
    word-spacing: 0.05em;
    letter-spacing: 0.02em;
}
.extra-list,
.highlight-list {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    gap: 16px;
}
.spot-title,
.nearbyspot-title,
.tnaprice-title,
.cityvideo-title,
.nearbycity-title,
.gift-title,
.menu-title,
.transportation-title,
.information-title,
.category-title,
.highlight-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3em;
}
.highlight-description {
    display: flex;
    flex-direction: row;
    gap: 14px;
    font-size: 14px;
    color: #333333;
    align-items: center;
    font-weight: 400;
    text-align: justify;
}
.extra-item {
    display: flex;
    flex-direction: row;
    gap: 16px;
    font-size: 14px;
    color: #333333;
    align-items: center;
    font-weight: 400;
    text-align: justify;
}
.extra-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3em;
}

/* ================================
   Category 공통 Componemt
================================ */
.category-list {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 16px;
    column-gap: 4px;
    padding: 0 16px;
}


.subcategory-item {
    border-radius: 999px;
    background-color: #EFF8FF;
    border: 1px solid #CCE7FF; /* 약간 더 짙은 연하늘색 테두리 */
    display: flex;
    flex-direction: column;
    list-style: none;
    justify-content: center;
    box-sizing: border-box;
}
.subcategory-item__title{
    padding: 8px 16px;
}
.subcategory-item.selected {
    background-color: #34548B;
    border: 1px solid #34548B; /* 약간 더 짙은 연하늘색 테두리 */
    color: white;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 60px;
    box-sizing: border-box;
}
.category-item__image.selected {
    background-color: #34548B;
    border: 1px solid #34548B; /* 약간 더 짙은 연하늘색 테두리 */
    color: white;
}
.category-item__image {
    border-radius: 999px;
    height: 60px;
    width: 60px;
    padding: 8px;
    background-color: #EFF8FF;
    border: 1px solid #CCE7FF; /* 약간 더 짙은 연하늘색 테두리 */
    align-content: center;
    text-align: center;
    -webkit-user-drag: none;
}
.category-item__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 60px;
    text-align-last: center;
    font-size: 12px;
    font-weight: 400;
}
/* ================================
   Information 공통 Componemt
================================ */
.information-list {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
    border-radius: 4px 4px 16px 16px;
    background-color: #f7f7f9;
}
.information-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.information-map {
    border-radius: 16px 16px 4px 4px;
    border: 0;
}
.information-item {
    display: flex;
    flex-direction: row;
    gap: 16px;
}
.information-descriptions {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.information-description__title {
    font-size: 11px;
    color: #333333;
}
.information-description__content {
    font-size: 14px;
    color: #333333;
}
.information-businesshour__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.information-businesshour__item {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}
.information-businesshour__item-closeday {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-content: center;
    color: #f63d58;
}
.information-businesshour__item-selected {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 8px 16px;
    background-color: #003366;
    border-radius: 4px;
    color: #ffffff;
    font-weight: 600;
    justify-content: center;
    align-items: center;
}
.information-businesshour__item-time-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.information-businesshour__item-time {
    display: flex;
    flex-direction: row;
    gap: 4px;
}
.information-businesshour__item-notice {
    font-size: 11px;
    display: flex;
    flex-direction: column;
    line-height: 1.7em;
    align-content: center;
    color: #848484;
}
body .mono {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 100;
}

/* ================================
   Price Compare 공통 Componemt
================================ */
/* Translation */
.translation-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}
.translation-wrap__row {
    display: flex;
    flex-direction: row;
    gap: 8px;
}
.translation-subtitle__wrap {
    display: flex;
    flex-direction: column;
}
.translation-subtitle {
    font-size: 14px;
    font-weight: 400;
}
.translation-subtitle__subheading {
    font-size: 11px;
    font-weight: 300;
}
.translation-airline__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.translation-airline__item {
    display: flex;
    flex-direction: row;
/*    padding: 16px 8px;
    border-radius: 8px;
    background-color: #f7f7f9;*/
    gap: 8px;
}
.translation-airline__item-title {
    font-size: 14px;
    font-weight: 300;
}

/* ================================
   Menu Item, 
   Gift Item 공통 Componemt
================================ */
.simple-item__list {
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    gap: 16px;
}
.simple-item {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
}
.simple-item__image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    -webkit-user-drag: none;
}
.simple-item__descriptions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    padding: 8px 0;
    min-width: 0;
}
.simple-item__title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.simple-item__price {
    color: #f63d58;
    font-size: 14px;
    font-weight: 700;
}
.simple-item__poi {
    display: flex;
    gap: 4px;
    flex: 1;
    align-items: flex-end;
    align-self: stretch;
    min-width: 0;
}
.simple-item__poi-title {
    font-size: 14px;
    font-weight: 700;
    width: 100%;
    min-width: 0;
    align-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.viewall-button {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 16px;
}
.viewall-button__title {
    display: flex;
    padding: 16px 0;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 999px;
    font-size: 14px;
    color: #036;
    font-weight: 600;
    border: 1px solid #036;
}

/* ================================
   NearbyCity Item, 
   Video Item 공통 Componemt
================================ */
.category-item__list,
.nearbyspot-list,
.cityvideo-list,
.nearbycity-list {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    white-space: nowrap;
    padding-right: 20px;
    -webkit-overflow-scrolling: touch;
    cursor: grab; /* 기본 커서를 grab으로 설정 */

    /* 스크롤바 숨기기 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge */
}
.category-item__list::-webkit-scrollbar,
.nearbyspot-list::-webkit-scrollbar,
.cityvideo-list::-webkit-scrollbar,
.nearbycity-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* 드래그 중에는 grabbing 스타일 적용 */
.category-item__list.grabbing,
.nearbyspot-list.grabbing,
.cityvideo-list.grabbing,
.nearbycity-list.grabbing {
    cursor: grabbing;
    user-select: none;
}
.category-item__list > *:first-child,
.nearbyspot-list > *:first-child,
.cityvideo-list > *:first-child,
.nearbycity-list > *:first-child {
    margin-left: 20px;
}
.category-item__list > *:last-of-type .category-item__list > *:last-child,
.nearbyspot-list > *:last-of-type .nearbyspot-list > *:last-child,
.cityvideo-list > *:last-of-type .cityvideo-list > *:last-child,
.nearbycity-list > *:last-of-type .nearbycity-list > *:last-child {
    margin-right: 20px;
}

/* ================================
   NearbyCity Item Componemt
================================ */
.nearbycity-item {
    display: flex;
    flex-direction: row;
    width: 130px;
    gap: 16px;
}
.nearbycity-item__image {
    width: 130px;
    height: 130px;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
    -webkit-user-drag: none;
}
.nearbycity-item__descriptions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    line-height: 1.3em;
    min-width: 0; /* flex 구조일 때 반드시 필요 */
}
.nearbyciy-item__title {
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nearbycity-item__description {
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
    overflow-wrap: break-word;

    display: -webkit-box;
    -webkit-line-clamp: 2; /* ← 요거! 2줄까지 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    white-space: normal;
}

/* ================================
   Video Item Componemt
================================ */
.cityvideo-item {
    display: flex;
    flex-direction: row;
    width: 276px;
    gap: 16px;
    box-sizing: border-box;
}
.cityvideo-item__image {
    width: 276px;
    height: 155px;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
    min-width: 0;
    -webkit-user-drag: none;
}
.cityvideo-item__descriptions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 276px;
    min-width: 0;
}
.cityvideo-item__title {
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    line-height: 1.3em;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* ← 요거! 2줄까지 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
.cityvideo-item__channel {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.cityvideo-item_channel-title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0; /* 자식이 줄어들 수 있게! */
    max-width: 100%; /* 부모보다 넘지 않게! */
}

/* ================================
   Spot Detail Page
================================ */
.sns-list {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
}
.nearbyspot-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}
.nearbyspot-item__image {
    width: 200px;
    height: 130px;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
    -webkit-user-drag: none;
}
.nearbyspot-item__descriptions {
    display: flex;
    flex-direction: column;
    width: 200px;
    gap: 0 !important;
}
.nearbyspot-item__category {
    font-size: 11px;
    font-weight: 300;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nearbyspot-item__title {
    font-size: 14px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nearbyspot-item__description {
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.3em;
}
.tnaprice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tnaprice-item {
    display: flex;
    flex-direction: row;
    padding: 24px 16px;
    border-radius: 16px;
    gap: 8px;
    flex: 1;
    background-color: aliceblue;
}
.tnaprice-item__title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    line-height: 1em;
}
.tnaprice-item__price-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    line-height: 1em;
    gap: 8px;
}
.tnaprice-item_price{
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tnaprice-item_rating-wrap{
    display: flex;
    gap: 4px;
    align-items: center;
    align-self: stretch;
    font-size: 11px;
    font-weight: 300;
}
.closedday,
.tnaprice-item__price {
    font-weight: 600;
    font-size: 14px;
    color: #f63d58;
    white-space: nowrap;
}

/* ================================
   Spot List Page
================================ */
.spot-wrap {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 16px;
}
.spot-list {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    gap: 16px;
}
.spot-item {
    display: flex;
    flex-direction: row;
    height: 100%;
    gap: 16px;
}
.spot-item__image {
    width: 100px;
    height: 150px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    -webkit-user-drag: none;
}
.spot-item__descriptions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    align-self: stretch;
    padding: 8px 0;
    min-width: 0;
}
.spot-item__content {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    align-self: stretch;
}
.spot-item__location-wrap {
    display: flex;
    gap: 4px;
    flex: 1;
    height: 100%;
    align-self: stretch;
    align-items: flex-end;
}
.spot-item__location {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
}
.spot-item__location-text {
    font-size: 14px;
    font-weight: 300;
    align-content: center;
}
.spot-item__title {
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    min-width: 0;
}

/* ================================
   Youtube Page
================================ */
.youtube-wrap {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
    border-radius: 16px;
    background-color: #f8f8f8;
}
.youtube-iframe__wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.youtube-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 0;
    overflow-clip-margin: content-box !important;
}
.youtube-title {
    font-weight: 600;
    font-size: 18px;
}
.youtube-description {
    font-weight: 300;
    font-size: 14px;
    text-align: justify;
}
.youtube-channel__wrap {
    display: flex;
    flex-direction: column;
}
.youtube-channel {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.youtube-channel__title {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================================
   네비게이션 
================================ */
.navigation-wrap {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 479px;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1000;
    padding: 20px 0;
    display: flex;
    justify-content: center;
}
.navigation {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 479px;
    gap: 16px;
}
.navigation-title {
    padding: 0 20px 0 20px;
    width: 100%;
    max-width: 479px;
    display: flex;
    align-items: center;
}
.navigation-image {
    cursor: pointer;
    position: relative;
    z-index: 2;
    -webkit-user-drag: none;
}
.navigation-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-weight: 600;
    font-size: 18px;
    margin-left: -25px;
    z-index: 1;
}




.review {
    display: flex;
    flex-direction: column;
    gap: 32px;
    border-radius: 36px;
    background-color: aliceblue;
    padding: 32px 20px;
    margin: 20px;
}
.review-rating{
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    background-color: aliceblue;
}
.review-rating__number-wrap{
    display: flex; 
    flex-direction: row; 
    gap: 8px; 
    align-items: center; 
    align-self: center;
}
.review-rating__number{
    font-size: 36px; 
    font-weight: 600;
}
.review-rating__rule{
    font-size: 18px; 
    font-weight: 400;
}
.review-rating__count{
    display: flex; 
    flex-direction: row; 
    gap: 8px; 
    align-items: center; 
    align-self: center; 
    font-weight: 300;
}
.review-list {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    gap: 16px;
}
.review-item {
    display: flex;
    flex-direction: row;
    gap: 16px;
    font-size: 14px;
    color: #333333;
    align-items: center;
    font-weight: 400;
    text-align: justify;
}


/* ================================
   페이지 영역
================================ */
.pagination-wrap
{
    display: flex;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
}
.pagination-item
{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    color: #333333;
    width: 40px;
    height: 40px;
    border: 0 solid transparent;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.pagination-item:hover {
    border: 2px solid #34548B;
}
.pagination-item.selected
{
    color: #ffffff;
    background-color: #34548B;
}


/* ================================
   Footer 영역
================================ */
.footer{
    display: flex;
    flex-direction: column;
    color: #8A8A8A;
    font-size: 12px;
    padding: 0 20px 40px 20px;
    gap: 16px;
    max-width: 1200px;
    width: 100%; /* 부모 컨테이너 너비에 맞춰 확장 */
    box-sizing: border-box;
}
.footer__policy{
    display: flex;
    align-items: center;
    flex-direction: row;
    cursor: pointer; /* 마우스 오버 시 클릭 가능한 모양으로 변경 */
    font-weight: 600;
    gap: 4px;
}
.footer__logo{
    display: flex;
    align-items: center;
}
.footer__content{
    font-size: 12px;
    font-weight: 300;
    line-height: 1.5em;
}
.footer__title{
    font-size: 12px;
    font-weight: 600;
}
.footer__companyinfo{
    display: flex;
    cursor: pointer; /* 마우스 오버 시 클릭 가능한 모양으로 변경 */
    font-weight: 600;
    flex-direction: row;
    align-items:center;
    gap: 4px;
}
.footer__companyitems{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer__companycheck{
    display: inline-flex;
    cursor: pointer; /* 마우스 오버 시 클릭 가능한 모양으로 변경 */
    font-weight: 300;
    border-radius: 8px;
    gap: 8px;
    flex-direction: row;
    padding: 8px;
    place-items: center;
    background-color: #F2F2F2;
    width: fit-content;
}
.footer__companyitem{
    display: flex;
    flex-direction: row;
    gap: 16px;
}
.footer__sns{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* 마우스 오버 시 클릭 가능한 모양으로 변경 */
    gap: 16px;
}
.footer__appstore{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* 마우스 오버 시 클릭 가능한 모양으로 변경 */
    gap: 16px;
}