/* 폰트 등록 */
/* Noto Sans KR 웹폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

/* 롯데리아 챱 폰트 로컬 등록 */
@font-face {
    font-family: 'LotteriaChab';
    src: url('/assets/fonts/chab.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* 피그마 디자인 시스템 변수 등록 */
    --color-primary: #B8A8FF;
    /* 메인 보라색 */
    --color-primary-dark: #9C8CF2;
    /* 메인 보라색2 */
    --color-primary-light1: #D6CCFF;
    /* 메인 보라색-light */
    --color-primary-light2: #F6F4FF;
    /* 메인 보라색-light */

    --color-text-main: #4C4C4C;
    /* 기본 메뉴/본문 회색 */
    --color-text-secondary: #757575;
    /* 더 어두운 텍스트 ( 필요시 ) */

    --color-white: #ffffff;
    /* 흰색 배경 */
    --color-offwhite: #F8F8F8;
    /* 오프화이트 색상 */

    --color-border-default: #DDDDDD;
    /* 기본 테두리 색상 */

    /* 카테고리 운영 태그 배경색 */
    --color-category-bg: #F1F5F9;

    /* Sub 색깔 */
    --color-sub-green: #3FBE6E;
    --color-sub-light-green: #DBFCE7;
    --color-sub-dark-blue: #5DADFF;
    --color-sub-sky-blue: #CDE7FF;
    --color-sub-blue: #90C6FF;


    /* 피그마 폰트 두께 */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* 자주 쓰는 고정 여백 등록 */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;

    /* 피그마 테두리 둥글기(Radius) 변수 등록 */
    --radius-xs: 4px;
    /* 아주 살짝 둥글게 (예: 작은 태그, 체크박스) */
    --radius-sm: 8px;
    /* 일반적인 작은 버튼1 */
    --radius-lg: 12px;
    /* 일반적인 팝업 카드, 태그(운영중+카테고리), 찜하기 버튼 */
    --radius-xl: 16px;
    /* 모달 팝업창, 대형 카드 뉴스 컨테이너 */
    --radius-full: 9999px;
    /* 완벽한 알약 모양 (예: 카테고리 버튼칸, 프로필 이미지) */
}

/* 브라우저 기본 여백 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 기본 폰트 고정 */
    font-family: 'Noto Sans KR', sans-serif;
}

/* 특별한 경우(로고, 포인트 타이틀)에만 쓸 챱 폰트 클래스 */
.font-point {
    font-family: 'LotteriaChab', sans-serif !important;
}

/* 로고 스타일 */
.logo {
    text-decoration: none;
    color: var(--color-white);
    font-size: 24px;
    line-height: normal;
    position: relative;
    z-index: 1;
}

/* 글자 뒤에 보라색 테두리 레이어 */
.logo::after {
    content: "PORONG";
    /* HTML에 적은 로고 텍스트와 똑같이 채우기 */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary-dark);
    -webkit-text-stroke: 6px var(--color-primary-dark);
    z-index: -1;
}

/* 기본 스타일 (모바일 ~ 태블릿 구간: 360px 이상 ~ 1023px 이하) */
body {}

/* PC 스타일 (1024px 이상부터 적용) */
@media screen and (min-width: 1024px) {
    body {}
}

/* 기본 설정 및 모바일 레이아웃 (360px ~ 1023px) */
.common-header {
    width: 100%;
    height: 70px;
    background-color: var(--color-white);
    border-bottom: 1px solid #dbdbdb;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    width: 100%;
    min-width: 360px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 수직 중앙 정렬 */
    padding: 0 16px;
    position: relative;
}

.header-logo {
    display: flex;
    align-items: center;
}

.header-right-group {
    display: flex;
    align-items: center;
    gap: 40px;
}

.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #9C8CF2;
    display: flex;
    align-items: center;
}

/* 햄버거 버튼 */
.hamburger-button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 16px;
    cursor: pointer;
}

.hamburger-button span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #757575;
    transition: 0.3s;
}

.menu-checkbox {
    display: none;
}

/* [모바일] 서브 메뉴 토글 창 스타일 */
.nav-container {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.center-menu {
    display: flex;
    flex-direction: column;
}

.center-menu a {
    padding: 14px 20px;
    text-decoration: none;
    color: #757575;
    font-size: 20px;
    border-bottom: 1px solid #f9f9f9;
}

.header-right-group .login-link {
    display: inline-block;
    /* PC 모드 전용 노출 */
    padding: 0;
    border: none;
    font-size: 20px;
    color: #757575;
    font-weight: var(--weight-regular);
    text-decoration: none;
}

.menu-checkbox:checked~.header-right-group .hamburger-button span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-checkbox:checked~.header-right-group .hamburger-button span:nth-child(2) {
    opacity: 0;
}

.menu-checkbox:checked~.header-right-group .hamburger-button span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.menu-checkbox:checked~.nav-container {
    max-height: 300px;
}


/* PC 레이아웃 세팅 (1024px 이상부터 바뀜) */
@media screen and (min-width: 1024px) {
    .common-header {
        height: 70px;
        width: 100%;
    }

    .header-container {
        max-width: 100%;
        width: 100%;
        padding: 0 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-container {
        position: static;
        width: auto;
        max-height: none;
        overflow: visible;
        border: none;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
    }

    /* 햄버거 버튼 완전 제거 */
    .hamburger-button {
        display: none;
    }

    .hamburger-button {
        display: none;
        /* PC에선 햄버거 아웃 */
    }

    /* 모바일용 메뉴 레이아웃 해제 후 정중앙 배치 */
    .nav-container {
        position: static;
        width: auto;
        max-height: none;
        overflow: visible;
        border: none;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        /* 가로 공간을 차지해 센터링 유도 */
    }

    /* 가운데 메뉴 4개 가로 정렬 및 수직 중앙 맞춤 */
    .center-menu {
        flex-direction: row;
        gap: 60px;
        /* 메뉴 간격 */
    }

    .center-menu a {
        padding: 0;
        border: none;
        font-size: 20px;
        color: #757575;
        font-weight: 400;
        transition: color 0.2s;
    }

    .center-menu a:hover {
        color: #9C8CF2;
    }

    /* 우측 그룹 정렬 방식 및 로그인 링크 복구 */
    .header-right-group {
        gap: 40px;
        /* 돋보기 아이콘과 로그인 간격 */
    }

    .header-right-group .login-link {
        display: inline-block;
        /* PC 모드 전용 노출 */
        padding: 0;
        border: none;
        font-size: 20px;
        color: #757575;
        font-weight: 400;
        text-decoration: none;
    }

    .header-right-group .login-link:hover {
        color: #9C8CF2;
    }
}

/* 데이터를 불러오지 못할 때 */
.error-msg {
    color: var(--color-text-secondary);
    font-weight: var(--weight-regular);
    font-size: 16px;
    padding: 20px;
}


/* 공통 컴포넌트 - 모든 페이지에서 공유할 팝업 카드 기본 규격 */
.popup-card {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 218px;
    gap: 8px;
}

/* 다음 스텝에서 디테일하게 잡을 썸네일 박스 기본 틀 */
.card-image-wrap {
    position: relative;
    overflow: hidden;
    background-color: var(--color-offwhite);
    cursor: pointer;
}

.card-thumb {
    border-radius: var(--radius-sm);
    width: 100%;
    height: 100%;
    object-fit: cover;
    height: 302px;
    pointer-events: none;
}

/* 찜하기 전체 버튼 스타일 */
.wish-btn {
    width: 100%;
    height: 40px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: var(--weight-regular);
    cursor: pointer;
    transition: all 0.2s;

    display: flex;
    justify-content: center;
    /* 가로 기준 정중앙 */
    align-items: center;
    /* 세로 기준 정중앙 */
    gap: 6px;
}

.heart-icon {
    /* 다른 스타일에 의해 크기가 찌그러지지 않도록 고정 */
    flex-shrink: 0;
    width: 19px;
    height: 19px;

    /* 폴더 구조에 맞춰 저장해 둔 빈 하트 이미지 호출 */
    background: url('/assets/images/icons/icon-heart-empty.png') no-repeat center / contain;
    display: inline-block;
}

/* 호버 효과 */
.wish-btn:hover {
    background-color: var(--color-primary-light2);
}

.wish-btn:hover .heart-icon {
    background-image: url('/assets/images/icons/icon-heart-fill.png');
}

/* 통신 중 광클 방지 disabled 상태일 때 커서 변경 */
.wish-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* 눌렸을 때 */
.wish-btn.active {
    background-color: var(--color-primary-light2);
}

/* 활성화되었을 때 채워진 하트 이미지로 교체 */
.wish-btn.active .heart-icon {
    background-image: url('/assets/images/icons/icon-heart-fill.png');
}

/* 카드 타이틀 */
.card-title {
    font-size: 18px;
    font-weight: var(--weight-semibold);
    color: var(--color-text-main);

    white-space: nowrap;
    /* 글자가 길어져도 아래 줄로 안 넘어가고 한 줄로 유지 */
    overflow: hidden;
    /* 카드 너비(218px)를 벗어나는 글자는 화면에서 숨김 */
    text-overflow: ellipsis;
    /* 숨겨진 글자 끝부분을 자동으로 '...'으로 변경 */
}

.card-location .card-date {
    font-size: 12px;
    font-weight: var(--weight-regular);
    color: var(--color-text-main);
}

.card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-category {
    font-size: 14px;
    width: fit-content;
    padding: 6px;
    background: var(--color-category-bg);
    text-align: center;
    border-radius: var(--radius-xs);
}

/* 운영 태그 */
.card-status {
    width: fit-content;
    padding: 6px;
    background: var(--color-sub-light-green);
    color: var(--color-sub-green);
    text-align: center;
    border-radius: var(--radius-xs);
    font-size: 14px;
}

/* 운영중 */
.card-status.is-running {
    background-color: var(--color-sub-light-green);
    color: var(--color-sub-green);
}

/* 운영 마감 */
.card-status.is-closed {
    background-color: var(--color-border-default);
    color: var(--color-text-main);
}

/* 운영 예정 */
.card-status.is-upcoming {
    background-color: var(--color-sub-sky-blue);
    color: var(--color-sub-dark-blue);
}

/* 카드를 감싸고 있는 가로 스크롤 부모 박스 */
.card-scroll-container {
    display: flex;
    gap: 16px;

    /* 가로축(X축)으로 화면이 넘치면 스크롤을 허용, 세로축(Y축)은 넘침 차단 */
    overflow-x: auto;
    overflow-y: hidden;

    /* 카드들의 그림자나 둥글기가 스크롤 박스에 잘리지 않도록 상하좌우 미세 여백 제공 */
    padding: var(--space-xs) 4px var(--space-md) 4px;
    width: 100%;
    box-sizing: border-box;

    /* 브라우저 기본 가로 스크롤바 디자인 숨기기 */
    -ms-overflow-style: none;
    /* IE, Edge 대응 */
    scrollbar-width: none;
    /* Firefox 대응 */
}

/* Chrome, Safari, Opera 브라우저 스크롤바 숨기기 */
.card-scroll-container::-webkit-scrollbar {
    display: none;
}


/* 리뷰 카드 */
.review-grid-container {
    display: flex;
    gap: 16px;
    width: 100%;
    table-layout: fixed;
}

/* 개별 리뷰 박스 */
.review-card {
    flex: 1;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    padding: 20px;
    min-width: 0;
    height: 430px;
}

/* 상단 헤더 - 이름 / 날짜 */
.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reviewer-name {
    font-size: 16px;
    font-weight: var(--weight-regular);
    color: var(--color-text-main);
}

.review-date {
    font-size: 14px;
    font-weight: var(--weight-regular);
    color: var(--color-text-secondary);
}

.review-stats-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.rating-wrap {
    display: flex;
    align-items: center;
}

/* 별점 아이콘 무리 가로 정렬 */
.rating-stars {
    display: flex;
    gap: 4px;
    /* 별끼리의 미세 간격 */
    margin-right: 6px;
}

.rating-stars img {
    /* 별 크기 지정 */
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.rating-num {
    font-weight: var(--weight-semibold);
    color: var(--color-primary-dark);
    margin-right: 4px;
}

.rating-max {
    font-weight: var(--weight-medium);
    color: var(--color-text-main);
    margin-left: 4px;
}

.congestion-wrap {
    display: flex;
    align-items: center;
}

/* 혼잡도 사람 아이콘 무리 가로 정렬 */
.congestion-icons {
    display: flex;
    gap: 4px;
    /* 사람끼리의 미세 간격 */
    margin-right: 6px;
}

.congestion-text {
    font-weight: var(--weight-medium);
    color: var(--color-text-main);
    margin-right: 4px;
}

.congestion-strong {
    font-weight: var(--weight-medium);
    color: var(--color-sub-dark-blue);
}

.congestion-icons img {
    /* 사람 크기 지정 */
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* 리뷰 본문 텍스트 공간 자동 확장 및 제한 */
.review-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 리뷰 본문 텍스트 */
.review-content p {
    font-size: 16px;
    color: var(--color-text-main);
    line-height: 1.4;
    /* 영문이나 이모티콘 빠져나감 방지 */
    word-break: break-all;
    margin: 0;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 3줄까지만 보여줌 */
    -webkit-line-clamp: 1;
}

/* 이미지가 없을 때 글자 수용량 */
.review-card.has-no-image .review-content p {
    -webkit-line-clamp: 7;
}

/* 중앙 첨부 이미지 박스 */
.review-attach-box {
    width: 150px;
    /* 비율 */
    aspect-ratio: 1 / 1;
    background-color: var(--color-border-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 0 auto;
    /* 본문이 길어져도 이미지가 찌그러지지않게 */
    flex-shrink: 0;
}

.review-attached-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 하단 연보라색 대상 팝업 미니 링크 카드 */
.review-target-popup {
    background-color: var(--color-primary-light2);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    display: flex;
    gap: 12px;
    align-items: center;
    box-sizing: border-box;
}

.target-thumb-wrap {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.target-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.target-info-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.target-tags {
    display: flex;
    gap: 6px;
}

.target-title {
    font-size: 16px;
    color: var(--color-text-main);
    font-weight: var(--weight-medium);

    /* 길어지면 찌그러지지 않게 말줄임표 처리 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.target-location {
    font-size: 14px;
    color: var(--color-text-main);
    font-weight: var(--weight-regular);
}

/* 공통 로그아웃 컴포넌트 */

.logout-section {
    width: 100%;
    max-width: 956px;
    margin: 50px auto 80px auto;
    padding: 0;
    box-sizing: border-box;
}

.btn-logout-wide {
    display: flex;
    padding: 12px 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-logout-wide:hover {
    background-color: #f9fafb;
}

/* 공통 푸터 컴포넌트 */
.common-footer {
    width: 100%;
    background-color: var(--color-white);
    border-top: none;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.footer-container {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
    background-color: var(--color-offwhite);

    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* 푸터 전용 로고 */
.footer-info .footer-logo {
    font-family: 'LotteriaChab', sans-serif !important;
    font-size: 24px;
    color: var(--color-white);

    position: relative;
    display: inline-block;
    z-index: 1;
}

/* 글자 뒤에 보라색 테두리 레이어 */
.footer-info .footer-logo::after {
    content: "PORONG";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    color: var(--color-primary-dark);
    -webkit-text-stroke: 6px var(--color-primary-dark);
    z-index: -1;
}

/* 우측 묶음 영역 */
.footer-info2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 가로로 정렬 */
.footer-infodng {
    display: flex;
    gap: var(--space-sm);
    font-size: 16px;
}

.footer-infodng p:first-child {
    color: var(--color-text-main);
    width: 60px;
    flex-shrink: 0;
    /* 찌그러짐 방지 */

    font-weight: var(--weight-medium);
}

.footer-infodng p:last-child {
    color: var(--color-text-main);
}

.footer-infodng a {
    color: var(--color-text-main);
    font-weight: var(--weight-regular);
}

.footer-infodng a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
}