/* 꾸밈 레이어: style.css 의 배치는 그대로 두고 그림자·그라데이션·움직임만 얹는다.
   PC 화면을 기준으로 다듬었다. 이 파일을 빼면 예전의 평평한 모양으로 돌아간다. */

:root {
  /* 버튼용 그라데이션: 위가 살짝 밝고 아래가 살짝 어두운 정도로만 (대각선으로 크게 변하면 얼룩져 보인다) */
  --grad-primary: linear-gradient(180deg, #875433 0%, #744627 100%);
  --grad-gold: linear-gradient(180deg, #f0c25a 0%, #e2a730 100%);
  --grad-blue: linear-gradient(180deg, #2a78ea 0%, #1565d8 100%);
  --grad-good: linear-gradient(135deg, #e9f7ee, #d6efdf);
  --grad-warm: linear-gradient(180deg, #fffdf9 0%, #faf3ea 100%);
  --shadow-xs: 0 1px 2px rgba(74, 46, 22, 0.06), 0 1px 1px rgba(74, 46, 22, 0.04);
  --shadow-sm: 0 2px 6px rgba(74, 46, 22, 0.07), 0 1px 2px rgba(74, 46, 22, 0.05);
  --shadow-md: 0 8px 20px rgba(74, 46, 22, 0.1), 0 2px 6px rgba(74, 46, 22, 0.06);
  --shadow-lg: 0 18px 44px rgba(58, 34, 14, 0.18), 0 4px 12px rgba(58, 34, 14, 0.08);
  --shadow-xl: 0 32px 80px rgba(40, 22, 8, 0.32), 0 8px 24px rgba(40, 22, 8, 0.14);
  --glow-primary: 0 6px 16px rgba(122, 74, 42, 0.32);
  --ring: 0 0 0 4px rgba(122, 74, 42, 0.16);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* 바탕과 반대색으로 띄우는 것(말풍선·지도 안내·토스트·핀 이름표): 화이트 모드는 짙은 갈색, 나이트 모드는 크림색 */
  --ink-grad: linear-gradient(160deg, #3d2c1f, #241912);
  --ink-tail: #3a2a1e; /* 말풍선 꼬리. 그라데이션 위쪽 색과 맞춘다 */
  --ink-text: #fff7ec;
  --edge-hi: rgba(255, 255, 255, 0.6); /* 위쪽 가장자리 밝은 선 */
}
:root[data-theme="dark"] {
  --grad-primary: linear-gradient(180deg, #e0ad78 0%, #d29a62 100%);
  --grad-good: linear-gradient(135deg, #22382b, #1b2e23);
  --grad-warm: linear-gradient(180deg, #2a241e 0%, #231e19 100%);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.7);
  --glow-primary: 0 6px 16px rgba(217, 162, 107, 0.25);
  --ring: 0 0 0 4px rgba(217, 162, 107, 0.22);
  --ink-grad: linear-gradient(160deg, #f6efe5, #e4d7c6);
  --ink-tail: #f5ede2;
  --ink-text: #2a1e15;
  --edge-hi: rgba(255, 255, 255, 0.05);
}

/* ---------- 바탕 ---------- */
body {
  background:
    radial-gradient(1200px 600px at 0% -10%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--owner) 10%, transparent), transparent 55%),
    var(--bg);
}
/* 얇고 둥근 스크롤 막대 */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 65%, transparent); background-clip: padding-box; border: 3px solid transparent; }
::selection { background: color-mix(in srgb, var(--primary) 28%, transparent); }

/* ---------- 상단 바: 반투명 유리 ---------- */
.topbar {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 1px 0 var(--edge-hi) inset, 0 6px 20px rgba(74, 46, 22, 0.07);
}
.topbar::after { /* 아래 가장자리의 금빛 선 */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--owner) 70%, transparent) 20%, color-mix(in srgb, var(--primary) 70%, transparent) 80%, transparent);
  opacity: 0.55;
}
/* 아이콘에 마우스를 올리면 크게 키우면서 한 바퀴 돌린다 (상단 바 밖으로 조금 나와도 위에 보이게) */
.brand-mark { border-radius: 9px; box-shadow: 0 3px 8px rgba(74, 46, 22, 0.25); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); position: relative; z-index: 1; }
.brand:hover .brand-mark { transform: scale(1.5) rotate(360deg); box-shadow: 0 10px 22px rgba(74, 46, 22, 0.35); }
.brand-name { background: linear-gradient(90deg, #8a5632, #5e371d); -webkit-background-clip: text; background-clip: text; color: transparent; }

.search input {
  background: var(--surface); box-shadow: inset 0 1px 3px rgba(74, 46, 22, 0.08), var(--shadow-xs);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.search input:focus { box-shadow: var(--ring), var(--shadow-sm); }
.search-btn { background: var(--grad-primary); box-shadow: var(--glow-primary); transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.search-btn:hover { transform: scale(1.08); }
/* 떠 있는 상자의 테두리는 불투명하게 둔다. 반투명 테두리는 뒤(지도·자기 배경의 그라데이션·색 있는 줄)가 바뀌는 곳마다
   보였다 안 보였다 해서 일부만 그려진 것처럼 보였다 (상세 패널은 테두리 없이 그림자만, 모달도 같은 방식) */
.search-results {
  border-color: var(--border); border-radius: 16px; box-shadow: var(--shadow-lg);
  /* 상단 바가 이미 배경 흐림을 쓰고 있어 그 안의 요소는 뒤를 흐리게 할 수 없다. 뒤가 비치지 않게 불투명하게 둔다 */
  animation: pop-in 0.16s var(--ease);
}
.sr-item { transition: background 0.12s; }
.sr-item:hover, .sr-item:focus-visible { background: linear-gradient(90deg, var(--primary-soft), transparent 85%); }
.sr-badge { box-shadow: var(--shadow-xs); }
.badge-owner { background: var(--grad-gold); color: #4a2f05; box-shadow: 0 2px 6px rgba(201, 138, 18, 0.35); }

/* ---------- 버튼·칩 ---------- */
.btn { box-shadow: var(--shadow-xs); transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s, border-color 0.15s, color 0.15s; }
.btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:not(:disabled):active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn-primary { background: var(--grad-primary); border-color: transparent; box-shadow: var(--glow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn-primary:not(:disabled):hover { background: var(--grad-primary); filter: brightness(1.07) saturate(1.05); box-shadow: 0 10px 22px rgba(122, 74, 42, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn-ghost { box-shadow: none; }
.btn-naver-find { box-shadow: var(--shadow-xs); }
.btn-naver-map { box-shadow: var(--shadow-xs); }

.view-scope { box-shadow: inset 0 1px 3px rgba(74, 46, 22, 0.08); background: var(--surface-2); border-color: transparent; }
.view-scope button { transition: color 0.15s, background 0.15s, box-shadow 0.15s; }
.view-scope button:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.view-scope button[aria-checked="true"] { background: var(--grad-primary); box-shadow: var(--glow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.22); }

.chip { box-shadow: var(--shadow-xs); transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s, background 0.15s; }
.chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.star-filter { box-shadow: var(--shadow-xs); }
.chip[aria-pressed="true"] { background: var(--grad-primary); border-color: transparent; box-shadow: var(--glow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.chip.chip-owner[aria-pressed="true"] { background: var(--grad-gold); border-color: transparent; color: #4a2f05; box-shadow: 0 6px 14px rgba(201, 138, 18, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.4); }

/* ---------- 목록 패널 ---------- */
.panel { background: var(--grad-warm); border-right-color: transparent; box-shadow: 6px 0 24px rgba(74, 46, 22, 0.08); }
.tabs { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.tab { position: relative; transition: color 0.15s; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { border-bottom-color: transparent; }
.tab::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--grad-primary); transform: scaleX(0); transition: transform 0.22s var(--ease);
}
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.filters { box-shadow: var(--shadow-sm); }
.list-status { background: color-mix(in srgb, var(--surface) 40%, transparent); }
.list-status.warn { background: linear-gradient(90deg, var(--owner-soft), color-mix(in srgb, var(--owner-soft) 40%, transparent)); }

/* 카페 카드: 떠 있는 카드, 올리면 살짝 들린다 */
.cafe-item {
  border-color: var(--border); border-radius: 14px;
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 92%, var(--primary-soft)) 100%);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s, background 0.18s;
}
.cafe-item:hover { background: var(--surface); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cafe-item.is-active {
  background: linear-gradient(180deg, var(--surface) 0%, var(--primary-soft) 100%); border-color: transparent;
  box-shadow: 0 0 0 2px var(--primary), 0 10px 24px rgba(122, 74, 42, 0.22);
}
.cafe-item:hover .tags .tag { background: var(--surface-2); }
.cafe-item.is-active .tags .tag { background: var(--surface); }
.cafe-thumbs img { box-shadow: var(--shadow-xs); transition: transform 0.25s var(--ease), filter 0.25s; }
.cafe-item:hover .cafe-thumbs img { filter: saturate(1.08) contrast(1.02); }
.cafe-thumbs img:hover { transform: scale(1.04); }
.tag { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); }
.study-pick { background: var(--grad-good); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 25%, transparent), var(--shadow-xs); }
/* 목록의 '👑 운영자 추천': 금색 바탕에서는 금색 왕관이 묻혀서, 짙은 갈색 바탕에 흰 글자로 둔다 (밝은·어두운 화면 모두 같은 색) */
.owner-info .study-pick { background: linear-gradient(180deg, #875433 0%, #6b3f22 100%); color: #fff; box-shadow: 0 2px 6px rgba(74, 46, 22, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }

.gate-ghost span { background: linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 50%, var(--surface)), var(--surface-2)); }
.gate-body { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--shadow-md); border: 1px solid var(--border); }

/* 운영자 리뷰 탭 */
.reviewed-intro { background: linear-gradient(90deg, var(--owner-soft), transparent); }

/* ---------- 카페 상세 ---------- */
.detail-head { background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 75%, var(--surface)) 0%, var(--surface) 100%); border-bottom-color: color-mix(in srgb, var(--border) 60%, transparent); }
.section { border-bottom-color: color-mix(in srgb, var(--border) 60%, transparent); }
.section h3::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--grad-primary); flex: none; }
/* 카공 정보 칸: 테두리 없이 둥근 알약 모양. 좋은 값은 연한 초록, 아쉬운 값은 연한 빨강 바탕으로 한눈에 구분한다 */
.stats { gap: 6px; }
.stats .stat { padding: 4px 11px; border-radius: 999px; background: var(--surface-2); box-shadow: none; transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s; }
.stats .stat:has(.stat-value.good) { background: var(--good-soft); }
.stats .stat:has(.stat-value.bad) { background: var(--bad-soft); }
.stats .stat:has(.stat-value.good) .stat-label { color: color-mix(in srgb, var(--good) 65%, var(--muted)); }
.stats .stat:has(.stat-value.bad) .stat-label { color: color-mix(in srgb, var(--bad) 65%, var(--muted)); }
.stat.has-more:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); filter: brightness(0.98); }
.stat-pop { box-shadow: var(--shadow-lg); background: var(--ink-grad); color: var(--ink-text); animation: pop-in 0.14s var(--ease); }
.stat-pop::before { /* 말풍선 꼬리 */
  content: ""; position: absolute; top: -5px; left: 18px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--ink-tail); border-radius: 2px;
}
.stat.pop-right .stat-pop::before { left: auto; right: 18px; }
.stat.pop-up .stat-pop::before { top: auto; bottom: -5px; } /* 위로 띄운 말풍선은 꼬리를 아래에 */
.photo { box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.photo img { transition: transform 0.35s var(--ease); }
.photo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.photo:hover img { transform: scale(1.07); }
.loc-fix-btn { background: color-mix(in srgb, var(--surface) 75%, transparent); }

@media (min-width: 1100px) {
  .panel > #view-detail {
    /* 바깥 테두리는 두지 않는다. 반투명 테두리는 흰 영역 옆에서만 보이고 색 있는 영역 옆에서는 묻혀서 끊겨 보였다.
       가장자리는 그림자로만 구분한다 */
    border: 0; border-radius: 20px;
    box-shadow: var(--shadow-xl);
    animation: detail-in 0.26s var(--ease);
  }
  .detail-close { transition: background 0.15s, transform 0.2s var(--ease); }
  .detail-close:hover { transform: rotate(90deg); }
}

/* ---------- 지도 위 요소 ---------- */
.map-banner { box-shadow: var(--shadow-lg); background: var(--ink-grad); color: var(--ink-text); }
.map-banner.info { background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--border); }
.map-search-btn { background: var(--grad-blue); box-shadow: 0 10px 24px rgba(21, 101, 216, 0.45), 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: filter 0.15s, box-shadow 0.15s; }
.map-search-btn:not(:disabled):hover { background: var(--grad-blue); filter: brightness(1.08); box-shadow: 0 14px 30px rgba(21, 101, 216, 0.55), 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.map-fab {
  border-color: var(--border); border-radius: 14px; box-shadow: var(--shadow-md);
  background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), color 0.15s, border-color 0.15s;
}
.map-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.map-wrap.is-picking .map-fab-add { background: var(--grad-primary); border-color: transparent; }
.map-notice { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--shadow-xs); }
.pick-bar { border-radius: 16px; box-shadow: var(--shadow-lg); border-color: var(--border); }

/* 지도 핀: 입체감 있는 물방울 */
.pin {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pin) 72%, #fff) 0%, var(--pin) 55%, color-mix(in srgb, var(--pin) 82%, #000) 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.45);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.pin:hover { transform: rotate(-45deg) scale(1.15); }
.pin.reviewed { --pin: #7a4a2a; }
.pin.owner { --pin: #d9980f; }
.pin.selected { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.45); }
.pin-label { background: var(--ink-grad); color: var(--ink-text); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); border-radius: 8px; }

/* ---------- 모달·토스트 ---------- */
.modal-backdrop { background: rgba(28, 18, 10, 0.46); -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); animation: fade-in 0.18s ease-out; }
/* 모달은 상세 패널처럼 테두리 없이 그림자로만 구분한다. 안쪽 흰 테두리는 색 있는 머리말 옆에서만 보여
   위쪽에만 테두리가 있는 것처럼 보였다 */
.modal { border-radius: 20px; box-shadow: var(--shadow-xl); animation: modal-in 0.24s var(--ease); overflow: hidden; }
.modal:not(.modal-photo) .modal-head { background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 80%, var(--surface)), var(--surface)); }
.modal:not(.modal-photo) .modal-foot { background: linear-gradient(0deg, var(--surface-2), var(--surface)); }
.modal-close { border-radius: 50%; width: 32px; height: 32px; transition: background 0.15s, transform 0.2s var(--ease); }
.modal-close:hover { background: color-mix(in srgb, var(--muted) 18%, transparent); transform: rotate(90deg); }
.modal-photo { background: radial-gradient(120% 120% at 50% 0%, #1d1d1f 0%, #000 70%); }
.photo-nav { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.15s, transform 0.15s var(--ease); }
.photo-nav:hover { transform: translateY(-50%) scale(1.08); }

.field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="number"],
.field textarea, .field select, .tier-row input, .tier-row select, .music-note {
  box-shadow: inset 0 1px 2px rgba(74, 46, 22, 0.06); transition: box-shadow 0.18s var(--ease), border-color 0.18s;
}
.field input:focus, .field textarea:focus, .field select:focus, .tier-row input:focus, .tier-row select:focus, .music-note:focus { box-shadow: var(--ring); }
.review-form .rating-field { background: linear-gradient(135deg, color-mix(in srgb, var(--owner) 18%, var(--surface)), var(--owner-soft)); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-hi); }
.review-form .rating-field .chip[aria-pressed="true"] { background: var(--grad-gold); border-color: transparent; box-shadow: 0 6px 14px rgba(201, 138, 18, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.owner-fields { background: linear-gradient(135deg, var(--owner-soft), color-mix(in srgb, var(--owner-soft) 50%, var(--surface))); }
.rf-photo { box-shadow: var(--shadow-sm); }
.btn-naver { box-shadow: 0 8px 18px rgba(3, 199, 90, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform 0.15s var(--ease), filter 0.15s; }
.btn-naver:hover { transform: translateY(-1px); }

.toast { background: var(--ink-grad); color: var(--ink-text); border-radius: 14px; box-shadow: var(--shadow-lg); animation: toast-in 0.22s var(--ease); }

/* ---------- 움직임 ---------- */
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
/* 휴대폰: 아래 시트는 모서리와 그림자만 다듬는다 */
@media (max-width: 767px) {
  .panel { box-shadow: 0 -10px 30px rgba(74, 46, 22, 0.16); }
  .modal { border-radius: 20px 20px 0 0; }
}
:root[data-theme="dark"] .brand-name { background: linear-gradient(90deg, #e9b987, #d29a62); -webkit-background-clip: text; background-clip: text; }