/* 샵 화면 CSS — branch 영역
 * 화면: main, main.news, main.news_view, main.news_write, main.review, main.talk
 * :where(.pg-화면이름) 이 붙은 규칙은 그 화면에만 적용된다(우선순위는 그대로). 규칙: public/css/shop/README.md */


/* ───────── main/news ───────── */
/* resources/views/shop/main/news.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
.main-news-wrap {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px 40px;
}
/* 말머리 배지 */
.main-news-badge {
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            padding: 2px 8px;
            border-radius: 3px;
            margin-bottom: 6px;
}
.main-news-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
}
/* 정렬은 왼쪽, 검색+글쓰기는 오른쪽에 묶음 */
.main-news-toolbar .sp-search { margin-left: auto; }
/* 갤러리 그리드 */
.main-news-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
}
/* 카드 */
.main-news-card {
            display: block;
            text-decoration: none;
            color: inherit;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            transition: transform 0.18s, box-shadow 0.18s;
            background: #fff;
}
.main-news-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.14);
            color: inherit;
            text-decoration: none;
}
/* 썸네일 */
.main-news-card-thumb {
            position: relative;
            width: 100%;
            padding-top: 75%;
            overflow: hidden;
            background: #f0f0f0;
}
.main-news-card-thumb img {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
}
.main-news-card:hover .main-news-card-thumb img { transform: scale(1.05); }
.main-news-photo-badge {
            position: absolute;
            bottom: 8px; right: 10px;
            background: rgba(0,0,0,0.55);
            color: #fff;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 20px;
}
/* 카드 본문 */
.main-news-card-body { padding: 14px; }
.main-news-card-title {
            font-size: 18px;
            font-weight: 600;
            line-height: 1.4;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin: 4px 0;
            color: #222;
}
.main-news-card-meta {
            gap: 10px;
            font-size: 14px;
            color: var(--gm-text-sub,#555);
}
/* 빈 결과 */
.main-news-empty {
            text-align: center;
            padding: 80px 0;
            color: var(--gm-text-muted,#6e6e6e);
            font-size: 15px;
}
@media (max-width: 768px) {
    .main-news-toolbar {
                flex-wrap: wrap;
                align-items: center;
                gap: 8px;
    }
    .main-news-toolbar .sp-sorts { flex: 1; }
    /* 검색 펼침 시 입력창만 아래 줄로 (정렬·글쓰기는 첫 줄 유지) */
    .main-news-toolbar .sp-search { margin-left: 0; }
    .main-news-toolbar .sp-search.open { order: 3; }
    .main-news-toolbar .sp-write { flex-shrink: 0; }
    .main-news-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
    }
}

@media (max-width: 480px) {
    .main-news-grid { grid-template-columns: 1fr; }
}


/* ───────── main/news_view ───────── */
/* resources/views/shop/main/news_view.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
        /* 이전글/다음글 (후기 상세와 같은 카드형) */
.news-view-nav {
            margin-top: 40px;
            display: flex;
            gap: 14px;
}
.news-nav-col { flex: 1; min-width: 0; }
.news-nav-label {
            font-size: 13px;
            color: var(--gm-text-sub,#555);
            font-weight: 500;
            margin-bottom: 8px;
}
.news-nav-card {
            display: block;
            position: relative;
            aspect-ratio: 16 / 10;
            border-radius: 8px;
            overflow: hidden;
            background: #222;
            text-decoration: none;
}
.news-nav-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
}
.news-nav-card-title {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            padding: 14px 16px;
            background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
}
.news-nav-empty {
            aspect-ratio: 16 / 10;
            border-radius: 8px;
            background: #f1f3f5;
            color: var(--gm-text-muted,#6e6e6e);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
}
.news-view-wrap {
            max-width: 900px;
            margin: 0 auto;
            padding: 30px 15px 60px;
}
.news-view-header {
            padding-bottom: 20px;
            border-bottom: 1px solid #d5d5d5;
            margin-bottom: 30px;
}
.news-view-badge {
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            padding: 3px 10px;
            border-radius: 3px;
            margin-bottom: 10px;
}
.news-view-title {
            font-size: 24px;
            font-weight: 700;
            color: #222;
            line-height: 1.4;
            margin: 0 0 12px;
}
.news-view-meta {
            display: flex;
            gap: 14px;
            font-size: 14px;
            color: var(--gm-text-sub,#555);
}
.news-view-body {
            font-size: 16px;
            line-height: 1.8;
            color: #333;
            word-break: break-word;
}
.news-view-body img {
            max-width: 100%;
            height: auto;
            border-radius: 6px;
            margin: 10px 0;
}
.news-view-photos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.news-view-photos a { display: block; flex: 0 0 auto; }
.news-view-photos img { max-width: 100%; max-height: 480px; border-radius: 8px; object-fit: cover; }
.news-view-footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #d5d5d5;
            text-align: center;
}
.news-view-owner-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-bottom: 16px;
}
.btn-news-edit,
.btn-news-delete {
            display: inline-flex; align-items: center;
            padding: 7px 16px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            border: 1px solid #ddd;
}
.btn-news-edit { background: #fff; color: #555; }
.btn-news-edit:hover { background: #f5f5f5; color: #333; }
.btn-news-delete { background: #fff; color: #e74c3c; border-color: #f0c4c0; }
.btn-news-delete:hover { background: #fff0ef; }
.btn-news-list {
            display: inline-block;
            padding: 10px 32px;
            background: #222;
            color: #fff;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: background .15s;
}
.btn-news-list:hover {
            background: #444;
            color: #fff;
            text-decoration: none;
}
@media (max-width: 768px) {
    .news-view-title { font-size: 20px; }
    .news-view-body { font-size: 15px; }
}


/* ───────── main/news_write ───────── */
/* resources/views/shop/main/news_write.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
.cat-write-wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px 60px; }
.cat-write-title { font-size: 20px; font-weight: 800; margin-bottom: 20px; }
.cat-write-title span { color: var(--gm-primary); }
.cat-write-error { background: #fff0f0; color: #d33; border: 1px solid #f3c0c0; border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.cat-write-form { display: flex; flex-direction: column; gap: 8px; }
.cat-write-label { font-size: 14px; font-weight: 700; color: #444; margin-top: 14px; }
.cat-write-input { width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 12px 14px; font-size: 15px; outline: none; box-sizing: border-box; }
.cat-write-input:focus { border-color: var(--gm-primary); }
.cat-write-textarea { width: 100%; box-sizing: border-box; }
.cat-write-photo-area { margin-top: 14px; border: 1px solid #eee; border-radius: 8px; padding: 12px; }
.cat-write-photo-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 700; color: #444; }
.cat-write-photo-add { background: var(--gm-primary); color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cat-write-photo-add:hover { background: #1db3de; }
.cat-write-photo-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cat-write-photo-empty { margin-top: 10px; font-size: 12px; color: var(--gm-text-muted,#6e6e6e); }
.cw-photo-item { position: relative; width: 110px; border-radius: 8px; overflow: hidden; border: 1px solid #e5e5e5; }
.cw-photo-thumb { position: relative; width: 110px; height: 90px; }
.cw-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-photo-main-badge { position: absolute; left: 0; bottom: 0; background: var(--gm-primary); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; }
.cw-photo-actions { display: flex; }
.cw-photo-actions button { flex: 1; border: none; background: #f4f4f4; color: #555; font-size: 12px; padding: 6px 0; cursor: pointer; }
.cw-photo-actions button:hover { background: #e8e8e8; }
.cw-photo-actions .cw-photo-del { color: #e74c3c; border-left: 1px solid #e5e5e5; }
.cat-write-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.cat-write-cancel { padding: 11px 22px; border-radius: 8px; background: #f1f3f5; color: #555; text-decoration: none; font-weight: 600; }
.cat-write-submit { padding: 11px 26px; border-radius: 8px; background: var(--gm-primary); color: #fff; border: none; font-weight: 700; font-size: 15px; cursor: pointer; }
.cat-write-submit:hover { background: #1db3de; }

/* ───────── main/review ───────── */
/* resources/views/shop/main/review.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
.main-review-wrap {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px 40px;
}
.main-review-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
}
/* 정렬 왼쪽, [검색 + 후기쓰기]는 오른쪽으로 (공용 .sp-write 사용) */
.main-review-toolbar .sp-search { margin-left: auto; }
/* 제목 두 줄까지 허용 */
.review-info .title {
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.3;
}
/* 별점·방문월 + 작성자 한 줄로 */
.review-meta-line {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 4px;
}
.review-meta-line .review-meta {
            flex-direction: row;
            align-items: center;
            gap: 6px;
            width: auto;
}
.review-meta-line .review-stars { letter-spacing: -2px; }
.review-meta-line .review-meta-author-row {
            width: auto;
            margin-bottom: 0;
            flex-shrink: 0;
}
/* 리뷰 카드 하단 메타 */
.review-meta-bottom {
            display: flex;
            gap: 10px;
            font-size: 12px;
            color: var(--gm-text-sub,#555);
            margin-top: 4px;
}
.review-like { color: #e74c3c; }
.review-helpful { color: #3498db; }
@media (max-width: 768px) {
    .main-review-toolbar {
                flex-direction: row;
                align-items: center;
                flex-wrap: wrap;
    }
    .main-review-toolbar .sp-sorts { flex: 1; }
    .main-review-toolbar .sp-search { margin-left: 0; }
    /* 검색 펼치면 입력창만 아랫줄로 (정렬·후기 버튼은 첫 줄 유지) */
    .main-review-toolbar .sp-search.open { order: 3; }
}


/* ───────── main/talk ───────── */
/* resources/views/shop/main/talk.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
        /* 좋아요 강조 */
.main-talk-vote {
            width: 50px;
            flex-shrink: 0;
            text-align: center;
            padding-top: 4px;
}
.main-talk-vote::before {
            content: "♥";
            font-size: 16px;
            color: red;
            line-height: 1;
            display: block;
}
.main-talk-vote-count {
            font-size: 18px;
            font-weight: 900;
            color: red;
            line-height: 1.2;
}
.main-talk-vote-label {
            font-size: 12px;
            color: var(--gm-text-muted,#6e6e6e);
            margin-top: 2px;
}
/* 사이드바 없이 talk-content 중앙 정렬 */
.branch-tabs + .talk-wrap {
            display: block;
            padding-top: 10px;
}
/* ── 인라인 펼치기 (메인 토크와 동일) ── */
.talk-item-toggle { cursor: pointer; }
.talk-entry.open {
            border: 1.5px solid #20B2D6; border-radius: 12px; background: #f5fbfd;
            box-shadow: 0 4px 16px rgba(32,178,214,.16); margin: 10px 0; overflow: hidden;
}
.talk-entry.open .talk-item { background: transparent; border-bottom: 1px solid #d7ecf3; padding: 18px 16px; }
.talk-entry.open .talk-item-desc { display:none; }
.talk-entry.open .talk-item-thumb { display:none; }
.talk-detail-panel { display:none; padding: 0; border-bottom:1px solid #eee; background:#fbfdfe; }
.talk-entry.open .talk-detail-panel { display:block; }
.td-inner { padding: 18px 20px 22px; }
.td-loading { padding: 24px; text-align:center; color: var(--gm-text-muted,#6e6e6e); font-size:14px; }
.td-body { font-size:15px; line-height:1.85; color:#333; white-space:pre-wrap; word-break:break-word; }
.td-photos { margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.td-photos a { display:block; }
.td-photos img { max-width:100%; border-radius:8px; max-height:420px; object-fit:cover; }
.td-actions { margin-top:16px; display:flex; align-items:center; gap:10px; }
.td-like { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border:1px solid #e0e0e0; border-radius:20px; background:#fff; cursor:pointer; font-size:14px; color:#555; }
.td-like.liked { background:#ffeef0; border-color:#ffccd2; color:#e0245e; }
.td-comments { margin-top:18px; border-top:1px solid #eee; padding-top:14px; }
.td-comments-h { font-size:14px; font-weight:700; color:#333; margin-bottom:12px; }
.td-c-item { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid #f3f3f3; }
.td-c-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; background:#e6f6fb; }
.td-c-main { flex:1; min-width:0; }
.td-c-meta { display:flex; align-items:center; gap:8px; font-size:12px; color: var(--gm-text-sub,#555); }
.td-c-nick { font-weight:700; color:#333; font-size:13px; }
.td-c-del { margin-left:auto; color: var(--gm-text-muted,#6e6e6e); background:none; border:none; cursor:pointer; font-size:12px; }
.td-c-del:hover { color:#e0245e; }
.td-c-text { font-size:14px; color:#333; line-height:1.6; margin-top:3px; white-space:pre-wrap; word-break:break-word; }
.td-c-empty { color: var(--gm-text-muted,#6e6e6e); font-size:13px; padding:8px 0; }
.td-c-form { display:flex; gap:8px; margin-top:14px; }
.td-c-form textarea { flex:1; border:1px solid #ddd; border-radius:8px; padding:10px 12px; font-size:14px; resize:vertical; min-height:42px; font-family:inherit; }
.td-c-form button { flex:none; background:#20B2D6; color:#fff; border:none; border-radius:8px; padding:0 18px; font-weight:700; cursor:pointer; }
.td-c-login { margin-top:12px; font-size:13px; color: var(--gm-text-sub,#555); }
.td-c-login a { color:#20B2D6; font-weight:700; }

/* ───────── main/widgets/_layout ───────── */
/* resources/views/shop/main/widgets/_layout.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
.branch-widgets {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 18px;
        max-width: 1180px;
        margin: 18px auto;
        padding: 0 14px;
}
.bw-cell { min-width: 0; }
.bw-block { background: #fff; }
.bw-title {
        font-size: 17px; font-weight: 700; color: #222;
        margin: 4px 0 12px; display: flex; align-items: center; gap: 8px;
}
.bw-title .more { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--gm-text-sub,#555); text-decoration: none; }
/* 카드 그리드 공통 */
.bw-grid { display: grid; gap: 12px; }
.bw-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.bw-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.bw-card { display: block; border: 1px solid #ececec; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; background:#fff; }
.bw-card .thumb { width: 100%; aspect-ratio: 4/3; background: #f2f2f2 center/cover no-repeat; }
.bw-card .body { padding: 10px 12px; }
.bw-card .tt { font-size: 14px; font-weight: 600; color: #222; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bw-card .meta { font-size: 12px; color: var(--gm-text-sub,#555); margin-top: 6px; display:flex; gap:8px; align-items:center; }
.bw-stars { color: #ffb400; font-size: 13px; letter-spacing: 1px; }
.bw-banner img { width: 100%; border-radius: 10px; display: block; }
@media (max-width: 768px) {
    .branch-widgets { gap: 14px; }
    .bw-cell { grid-column: span 12 !important; }
    .bw-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}


/* ───────── partials/branch_popup ───────── */
/* resources/views/shop/partials/branch_popup.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
.bpopup { position: fixed; z-index: 12000; display: none; }
.bpopup.show { display: block; }
.bpopup-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: -1; }
.bpopup-sheet { position: relative; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.22); }
.bpopup-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bpopup-slides::-webkit-scrollbar { display: none; }
.bpopup-slide { flex: 0 0 100%; scroll-snap-align: start; }
.bpopup-slide,
.bpopup-slide a { display: block; }
/* 권장 비율 37:26 고정 — 다른 비율 이미지는 cover로 잘라 일관 노출 */
.bpopup-slide img { width: 100%; aspect-ratio: 37 / 26; object-fit: cover; display: block; }
/* 화살표 + 인디케이터 (우하단 펜던트) */
.bpopup-nav {
 position: absolute; right: 12px; bottom: 56px; display: flex; align-items: center; gap: 6px;
        background: rgba(0,0,0,.55); color: #fff; border-radius: 16px; padding: 3px 8px;
}
.bpopup-arrow {
 background: none; border: none; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
        display: inline-flex; align-items: center; justify-content: center; height: 16px;
}
.bpopup-idx { font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
/* 하단 바 */
.bpopup-bar { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; background: #222; }
.bpopup-today,
.bpopup-close { background: none; border: none; color: #fff; font-size: 14px; cursor: pointer; padding: 0; }
.bpopup-today { color: #ccc; }
@media (max-width: 768px) {
    .bpopup { left: 0; right: 0; bottom: 0; }
    .bpopup.show .bpopup-backdrop { display: block; }
    .bpopup-sheet { max-width: 500px; margin: 0 auto; border-radius: 14px 14px 0 0; overflow: hidden; }
}

@media (min-width: 769px) {
    .bpopup { right: 10%; top: 100px; }
    .bpopup-sheet { width: 360px; border-radius: 16px; overflow: hidden; }
}