/*
 * 파구스 공용 디자인 시스템 — DESIGN.md 참조.
 * 노스스타: The Trusted Neighbor. 초록 하나만 신뢰 신호, 그림자 없이 테두리로만 입체감.
 */

:root {
    --color-fern: #206b58;
    --color-pine: #173b35;
    --color-mint: #d9f2e9;
    --color-linen: #f7f3ec;
    --color-paper: #fffdf7;
    --color-charcoal: #2b2620;
    --color-taupe: #6b6259;
    --color-border: #ded4c3;

    --color-error: #8a3b2b;
    --color-error-border: #e0b7a8;
    --color-error-bg: #f6e4de;

    --radius-sm: 6.4px;
    --radius-md: 8px;
    --radius-pill: 999px;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;

    color-scheme: light;
}

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

html { color: var(--color-charcoal); font-family: var(--font-sans); }

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-linen);
    color: var(--color-charcoal);
    font-family: var(--font-sans);
    line-height: 1.5;
}

h1, h2, h3 { color: var(--color-charcoal); font-weight: 700; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 var(--space-md); }
h2 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; margin: 0 0 var(--space-xs); }

p { margin: var(--space-xs) 0; }

a { color: var(--color-fern); }
a:hover { color: var(--color-pine); }

:focus-visible {
    outline: 2px solid var(--color-pine);
    outline-offset: 2px;
}

/* 폼 요소 공통 */
input, select, textarea, button { font: inherit; }

input, select, textarea {
    background: var(--color-paper);
    color: var(--color-charcoal);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .65rem .75rem;
    width: 100%;
}

input::placeholder, textarea::placeholder { color: var(--color-taupe); }

label {
    display: block;
    font-size: .9rem;
    color: var(--color-taupe);
    margin-bottom: var(--space-xs);
}

label input, label select, label textarea { margin-top: var(--space-xs); }

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: .9rem;
    color: var(--color-charcoal);
    margin: 0 var(--space-sm) var(--space-xs) 0;
}
.checkbox-label input { width: auto; }

.checkbox-group { display: flex; flex-wrap: wrap; margin: var(--space-xs) 0 var(--space-md); }

fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); margin: 0 0 var(--space-md); }
legend { padding: 0 var(--space-xs); font-weight: 600; }

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-fern);
    color: #fff;
    border: 1px solid var(--color-fern);
    border-radius: var(--radius-md);
    padding: .65rem .9rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
button:hover, .btn:hover { background: var(--color-pine); border-color: var(--color-pine); }

.btn-ghost { background: transparent; color: var(--color-fern); border-color: var(--color-border); }
.btn-ghost:hover { background: var(--color-paper); border-color: var(--color-fern); color: var(--color-pine); }

.btn-danger { background: var(--color-paper); color: var(--color-error); border-color: var(--color-error-border); }
.btn-danger:hover { background: var(--color-error-bg); border-color: var(--color-error); }

.btn-sm { padding: .4rem .65rem; font-size: .9rem; }

.inline-form { display: inline; }
.inline-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }

.form-grid { display: grid; gap: var(--space-sm); }
.form-section { display: grid; gap: var(--space-sm); background: var(--color-paper); border-color: var(--color-border); padding: var(--space-lg); margin: 0; }
.form-section legend { color: var(--color-pine); font-size: 1.05rem; font-weight: 600; padding: 0 var(--space-sm); }
.form-section > .location-search { margin: 0; }
.form-section > .form-row { margin-top: var(--space-xs); }
.form-row { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.form-row > * { flex: 1 1 12rem; }
.admin-search-form { align-items: flex-end; }
.admin-search-form .inline-actions { align-items: center; margin-bottom: var(--space-xs); }

/* 상태 배너 */
[role="status"], [role="alert"] {
    padding: .65rem .9rem;
    border-radius: var(--radius-md);
    margin: 0 0 var(--space-md);
    font-size: .9rem;
}
[role="status"] { background: var(--color-mint); color: var(--color-pine); }
[role="alert"] { background: var(--color-error-bg); color: var(--color-error); }

/* 상태 배지(공개/숨김/활성 등). 카드·버튼과 다른 완전 원형(pill) 형태는 배지 전용 예외다. */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: var(--radius-pill);
    font-size: .9rem;
    font-weight: 600;
}
.badge-on { background: var(--color-mint); color: var(--color-pine); }
.badge-off { background: var(--color-border); color: var(--color-taupe); }

/* ===== 공개 사이트 헤더/푸터 ===== */
.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);
    padding: var(--space-md) 5vw;
    background: var(--color-pine);
    color: #fff;
}
.site-header h1 { display: flex; align-items: center; gap: var(--space-sm); margin: 0; color: #fff; }
.site-header h1 a { display: flex; align-items: center; gap: var(--space-sm); color: inherit; text-decoration: none; }
.site-header h1 a:hover, .site-header h1 a:focus-visible { text-decoration: underline; }
.brand-mark { display: block; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); }
.site-header nav { display: flex; flex-wrap: wrap; gap: var(--space-md); }

@media (max-width: 480px) {
    .site-header h1 { font-size: 1.05rem; }
}
.site-header nav a { color: var(--color-mint); text-decoration: none; }
.site-header nav a:hover, .site-header nav a:focus-visible { text-decoration: underline; }
.site-header .nav-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-mint);
    font-size: inherit;
}
.site-header .nav-button:hover, .site-header .nav-button:focus-visible { background: transparent; border-color: transparent; color: #fff; text-decoration: underline; }

.site-footer {
    padding: var(--space-lg) 5vw;
    background: var(--color-pine);
    color: var(--color-mint);
}
.site-footer h2 { color: #fff; }
.site-footer p { margin: var(--space-xs) 0; }
.site-footer a { color: var(--color-mint); }

.contact-dialog {
    width: min(28rem, calc(100% - 2rem));
    margin: auto;
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-paper);
    color: var(--color-charcoal);
}
.contact-dialog::backdrop { background: rgb(23 59 53 / 65%); }
.contact-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.contact-dialog__header h2 { margin: 0; }
.contact-dialog .btn-ghost { flex: 0 0 auto; }

/* ===== 홈: 지도 + 목록 ===== */
.home-main {
    display: grid;
    grid-template-columns: minmax(18rem, 28rem) 1fr;
    grid-template-rows: 1fr;
    flex: 1 1 auto;
    min-height: 0;
}
.home-aside { padding: var(--space-lg); overflow-y: auto; background: var(--color-linen); }
.search-form { margin-bottom: var(--space-md); }
.result-summary { color: var(--color-taupe); font-size: .9rem; margin: var(--space-md) 0; }

.restaurant-card {
    display: block;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}
.restaurant-title {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-charcoal);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.restaurant-title:hover, .restaurant-title:focus-visible {
    background: transparent;
    border-color: transparent;
    color: var(--color-pine);
}
.restaurant-card.is-selected { border-color: var(--color-fern); }
.restaurant-card.is-selected .restaurant-title { color: var(--color-fern); }
.restaurant-card p { color: var(--color-taupe); font-size: .9rem; }
.restaurant-card .category { color: var(--color-fern); font-weight: 600; }

.empty-state { padding: var(--space-xl) 0; color: var(--color-taupe); }

#map { min-height: 0; background: var(--color-border); }

/* Kakao InfoWindow가 콘텐츠 바깥에 만드는 기본 프레임을 제거한다. */
#map div:has(> div > .map-popup) {
    border: 0 !important;
    background: transparent !important;
}

.map-popup {
    width: min(18rem, calc(100vw - 4rem));
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-linen);
    color: var(--color-charcoal);
    font: inherit;
}
.map-popup__header { margin-bottom: var(--space-sm); }
.map-popup__kicker { display: block; margin-bottom: var(--space-xs); color: var(--color-taupe); font-size: .9rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.map-popup h3 { margin: 0; color: var(--color-pine); font-size: 1.05rem; line-height: 1.3; }
.map-popup__category-row { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; margin-bottom: var(--space-sm); }
.map-popup__category { display: inline-flex; min-width: 0; max-width: 100%; margin: 0; padding: .25rem .5rem; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-mint); color: var(--color-pine); font-size: .9rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.map-popup__details { display: grid; grid-template-columns: 3.5rem 1fr; gap: .4rem .6rem; margin: 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); font-size: .9rem; line-height: 1.45; }
.map-popup__details dt { color: var(--color-taupe); font-weight: 700; }
.map-popup__details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.map-popup__summary { display: -webkit-box; margin: var(--space-sm) 0 0; overflow: hidden; color: var(--color-taupe); font-size: .9rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.map-popup__actions { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.map-popup__link { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .55rem .75rem; border-radius: var(--radius-sm); background: var(--color-fern); color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none; }
.map-popup__link:hover, .map-popup__link:focus-visible {
    background: var(--color-pine);
    color: #fff;
}
.map-popup__share { flex: 0 0 auto; padding: .35rem .5rem; white-space: nowrap; }

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-md);
    padding: 0;
    list-style: none;
}
.pagination li { display: block; }
.pagination a {
    display: block;
    padding: .45rem .7rem;
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    color: var(--color-fern);
    text-decoration: none;
    border: 1px solid var(--color-border);
}
.pagination a:hover, .pagination a:focus-visible { border-color: var(--color-fern); }
.pagination li.active a { background: var(--color-fern); color: #fff; border-color: var(--color-fern); }

@media (max-width: 720px) {
    .home-main { display: flex; flex-direction: column-reverse; }
    #map { min-height: 55vh; }
    .home-aside { min-height: 45vh; }
}

/* ===== 맛집 상세 ===== */
.detail-main { flex: 1 1 auto; width: min(100%, 56rem); margin: 0 auto; padding: var(--space-xl) 5vw; }
.detail-main > section { margin: var(--space-xl) 0; }
.restaurant-info { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper); }
.detail-hero { padding: var(--space-lg); }
.detail-hero h1 { margin-bottom: var(--space-xs); font-size: 1.5rem; }
.detail-address { margin-top: var(--space-md); color: var(--color-taupe); }
.detail-facts { display: grid; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border); background: var(--color-linen); }
.detail-facts p { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-md); margin: 0; }
.detail-facts span { color: var(--color-taupe); font-size: .9rem; }
.detail-main .category { color: var(--color-fern); font-weight: 600; }
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-md) 0; }
.directions-link { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .55rem .75rem; border-radius: var(--radius-sm); background: var(--color-fern); color: #fff; font-weight: 700; text-decoration: none; }
.directions-link:hover, .directions-link:focus-visible { background: var(--color-pine); color: #fff; }
.restaurant-info > .detail-section { margin: 0; padding: var(--space-lg); border-top: 1px solid var(--color-border); }
.restaurant-info > .detail-section h2 { margin-bottom: var(--space-sm); }

.photo-grid { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0; }
.photo-trigger { display: block; padding: 0; border: 0; background: transparent; }
.photo-trigger:hover, .photo-trigger:focus-visible { background: transparent; border-color: transparent; }
.photo-grid img {
    width: 12rem;
    height: 9rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-paper);
}
.photo-dialog {
    width: fit-content;
    max-width: 90vw;
    max-height: 90vh;
    margin: auto;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-paper);
}
.photo-dialog::backdrop { background: rgb(23 59 53 / 75%); }
.photo-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.photo-dialog__header h2 { margin: 0; }
.photo-dialog__header h2 span { color: var(--color-taupe); font-size: .85em; font-weight: 500; }
.photo-dialog__header .btn-ghost { flex: 0 0 auto; }
.photo-dialog__viewer { position: relative; max-width: calc(90vw - 2rem); }
.photo-dialog__viewer > img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(90vh - 6rem); object-fit: contain; }
.photo-nav { position: absolute; top: 50%; z-index: 1; width: 2.5rem; height: 2.5rem; padding: 0; transform: translateY(-50%); border: 1px solid var(--color-border); border-radius: 50%; background: rgb(255 253 247 / 90%); color: var(--color-pine); font-size: 1.5rem; line-height: 1; }
.photo-nav:hover { background: var(--color-mint); }
.photo-nav:disabled { cursor: not-allowed; opacity: .35; }
.photo-nav--previous { left: var(--space-sm); }
.photo-nav--next { right: var(--space-sm); }

/* ===== 운영자 화면 공통 ===== */
.admin-shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--color-linen); }

.admin-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md) 5vw;
    background: var(--color-pine);
    color: #fff;
}
.admin-header a { color: var(--color-mint); text-decoration: none; }
.admin-header a:hover, .admin-header a:focus-visible { text-decoration: underline; }
.admin-header-brand { display: flex; align-items: center; gap: var(--space-sm); font-weight: 700; font-size: 1.05rem; color: #fff; text-decoration: none; }
.admin-header-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.admin-header-user { color: var(--color-mint); font-size: .9rem; }

.admin-main { flex: 1 1 auto; padding: var(--space-lg) 5vw var(--space-xl); max-width: 64rem; margin: 0 auto; }

.admin-section {
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin: 0 0 var(--space-lg);
}

.admin-table { width: 100%; border-collapse: collapse; margin: var(--space-md) 0; }
.admin-table th, .admin-table td {
    text-align: left;
    padding: .6rem var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    font-size: .9rem;
    vertical-align: middle;
}
.admin-table th { color: var(--color-taupe); font-weight: 600; }
.admin-table tbody tr:hover { background: var(--color-linen); }

.admin-list { list-style: none; margin: var(--space-sm) 0; padding: 0; }
.admin-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding: .6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.admin-photo-thumb {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-paper);
}

.location-search { margin: var(--space-sm) 0; }
.location-search input { max-width: 24rem; }
.category-recommend-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.category-recommend-controls input { flex: 1 1 16rem; }
.category-recommend-controls button { flex: 0 0 auto; }
.location-search-message { color: var(--color-taupe); font-size: .9rem; }
.address-result {
    display: block;
    width: 100%;
    margin: var(--space-xs) 0;
    padding: .5rem .65rem;
    text-align: left;
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    color: var(--color-charcoal);
}
.address-result:hover, .address-result:focus-visible {
    background: var(--color-paper);
    border-color: var(--color-fern);
    color: var(--color-charcoal);
}
.reference-attribution { color: var(--color-taupe); font-size: .9rem; }
.tag-chip-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xs) 0; }
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    border-radius: var(--radius-md);
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    color: var(--color-charcoal);
    font-size: .9rem;
    text-decoration: none;
}
a.tag-chip:hover { border-color: var(--color-fern); color: var(--color-fern); }
.tag-chip button { border: 0; background: none; color: var(--color-taupe); cursor: pointer; font-size: 1rem; line-height: 1; }
.tag-chip button:hover { color: var(--color-charcoal); }

/* ===== 상세: 후기 영역 ===== */
.review-section { margin-top: var(--space-xl); padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-mint); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.section-heading h2 { margin: 0; font-size: 1.05rem; }
.section-count, .composer-mark { color: var(--color-fern); font-weight: 700; }
.review-list { display: grid; gap: var(--space-sm); }
.review-item { padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper); }
.review-item header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.review-item header > div { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.review-item header small, .review-item > small { color: var(--color-taupe); font-size: .9rem; }
.review-item > p { margin: var(--space-md) 0; white-space: normal; }
.review-rating { color: var(--color-fern); letter-spacing: .08em; }
.review-owner-actions { margin-top: var(--space-md); border-top: 1px solid var(--color-border); padding-top: var(--space-sm); }
.review-owner-actions summary { color: var(--color-taupe); cursor: pointer; font-size: .9rem; }
.review-owner-actions form, .review-report-form { display: grid; gap: var(--space-sm); margin-top: var(--space-md); padding: var(--space-md); border-radius: var(--radius-sm); background: var(--color-linen); }
.review-owner-actions button, .review-report-form button { justify-self: start; }
.review-report-form { grid-template-columns: 1fr auto; align-items: end; margin-top: var(--space-md); padding: 0; background: transparent; }
.review-report-form label { grid-column: 1; margin: 0; }
.review-report-form button { grid-column: 2; grid-row: 1; }
.review-composer { margin-top: var(--space-xl); padding: var(--space-lg); border: 2px solid var(--color-fern); border-radius: var(--radius-md); background: var(--color-paper); }
.review-composer > p { margin-bottom: var(--space-lg); color: var(--color-taupe); }
.review-form { display: grid; gap: var(--space-md); }
.review-form button { justify-self: start; min-width: 7rem; }

@media (max-width: 480px) {
    .detail-main { padding-right: 4vw; padding-left: 4vw; }
    .detail-hero, .restaurant-info > .detail-section, .review-section, .review-composer { padding: var(--space-md); }
    .detail-facts { padding: var(--space-md); }
    .detail-facts p { grid-template-columns: 4.5rem 1fr; gap: var(--space-sm); }
    .review-item header { align-items: flex-start; flex-direction: column; gap: var(--space-xs); }
    .review-report-form { grid-template-columns: 1fr; }
    .review-report-form label, .review-report-form button { grid-column: 1; grid-row: auto; }
    .review-report-form button { justify-self: start; }
}

#restaurant-map, #admin-restaurant-map {
    height: 320px;
    max-width: 720px;
    margin: var(--space-sm) 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

/* ===== 로그인 ===== */
.auth-shell {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    background: var(--color-linen);
    padding: var(--space-lg) 5vw;
}
.auth-card {
    width: 100%;
    max-width: 24rem;
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-xl) var(--space-lg);
}
.auth-card h1 { text-align: center; }
.auth-card .form-grid { margin-top: var(--space-md); }
.auth-card button { width: 100%; margin-top: var(--space-xs); }