:root {
    --primary: #1877ff;
    --accent: #6366F1;
    --surface: #F8FAFC;
    --dark: #0f172a;
    --text-dark: #111827;
    --radius: 14px;
    --shadow: 0 2px 8px rgba(16,24,40,0.06);
    --card-padding: 14px;
    --header-h5: 18px;
    --header-h6: 16px;
    --body-s: 14px;
    --caption: 12px;
  }
  
  /* 다크모드 */
  @media (prefers-color-scheme: dark) {
    :root {
      --primary: #2258A5;
      --surface: #1e293b;
      --text-dark: #E4EAF0;
    }
  }
  
  body {
    margin: 0; font-family: 'Pretendard','sans-serif'; background: var(--surface); color: var(--text-dark);
  }
  .app-container {
    max-width: 430px; min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column;
  }
  .view { display: none; flex: 1; padding-bottom: 80px;}
  .view.active { display: block; }
  
  h2 {font-size: var(--header-h5); font-weight: 700; margin-top: 24px; margin-bottom: 14px;}
  /* 카드 디자인 */
  .card {
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--card-padding);
    margin: 12px 0; transition: transform 0.15s; cursor: pointer;
  }
  .card:active { transform: scale(0.98);}
  .card .title { font-size: var(--header-h6); font-weight: 600; color: var(--primary);}
  .card .desc { font-size: var(--body-s);}
  .badge { display: inline-block; font-size: var(--caption); border-radius: 8px; background: var(--primary); color: #fff; padding: 2px 8px; margin-right: 6px; }
  
  input, button, select {
    font-family: inherit; font-size: var(--body-s); border-radius: 10px;
  }
  /* 검색/필터 라인 */
  .search-bar {
    display: flex; align-items: center; background: #fff; box-shadow: var(--shadow);
    padding: 9px 12px; border-radius: 20px; margin: 20px 12px;
  }
  .chip-bar { display: flex; gap: 7px; margin: 10px 0 14px 8px;}
  .chip { padding: 7px 16px; border: 1px solid #EBEBEB; border-radius: 24px; background: #fff; font-size: 15px; }
  .chip.selected, .chip-bar .chip:hover { background: var(--primary); color:#fff; border-color:var(--primary); }
  
  /* 하단탭 */
  .bottom-nav {
    display: flex; justify-content: space-around;
    position: fixed; bottom: 0; left: 0; right: 0;
    max-width: 430px; margin: 0 auto;
    background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -2px 16px rgba(0,0,0,.08); z-index: 100;
    height: 64px;
  }
  .tab-btn { flex: 1; background: none; border: none; padding: 8px 0; color: #888; font-size: var(--body-s);}
  .tab-btn.active { color: var(--primary); font-weight: 600; }
  .tab-btn img { display: block; margin: 0 auto 2px; width: 24px; height: 24px;}
  .tab-btn span { display:block; font-size:12px; }
  
  .primary-btn {
    width: 90%; height:48px; border:none; border-radius:28px;
    background: var(--primary); color:#fff; font-size:17px; font-weight:600; display:block; margin:16px auto;
    cursor:pointer; box-shadow: var(--shadow);
    transition:background .15s;
  }
  .primary-btn:active { background:#226be4; }
  
  @media (max-width:430px) { .app-container { max-width: 100vw; }}
  
  /* 상세 탭 */
.detail-tabs { display: flex; border-bottom: 1px solid #eee; margin:24px 0 14px 0;}
.detail-tab-item { flex:1; text-align:center; padding:10px 4px; font-size:15px; color:#888; background:transparent; border:0; cursor:pointer; }
.detail-tab-item.selected { color: var(--primary); border-bottom:3px solid var(--primary); font-weight:600; background:#f5f9ff; }
.detail-info-row { display:flex; align-items:center; margin:9px 0 8px 0; gap:8px; }
.section-title { font-size:17px; font-weight:600; margin:22px 0 8px;}
.menu-list {padding:0 3px;}
.menu-row {display:flex;justify-content:space-between; margin:7px 0;}
.menu-row .price { color:#1877ff;}

.review-list {margin-top:12px;}
.star {color:#ffb300;}
.review-form { margin-top:12px; padding:10px 0; border-radius:10px; background:#eef6ff;}
.review-form input, .review-form textarea {border:1px solid #d9e6fc; border-radius:8px; padding:6px; width:95%; margin-bottom:7px;}
.review-form button { background:var(--primary); color:#fff; border:none; border-radius:8px; padding:9px 0; width:97%; font-weight:600; }

.convenience {display:flex; flex-wrap:wrap; gap:12px; margin:12px 0 20px 0;}
.facility-badge { background:#eaf3ff; color:#205195; border-radius:14px; padding:6px 14px; font-size:15px; display:flex; align-items:center; gap:3px; }

/* 상세 상단 캐러셀 */
.slider { position:relative; overflow:hidden; border-radius:22px; margin:0 0 7px 0;}
.slider-images { display:flex; transition: transform 0.3s; }
.slider img { width:100vw; max-width:430px; height:180px; object-fit:cover; user-select:none; }
.slider-dots { position:absolute;left:0;right:0;bottom:10px; display:flex;justify-content:center;gap:7px; }
.slider-dot { width:8px;height:8px;border-radius:50%; background:rgba(240,240,240,0.9); border:1.6px solid #1877ff; }
.slider-dot.active { background:#1877ff; }

.sticky-tabbar { position:sticky;top:0;z-index:9;background:#fff;border-bottom:1.5px solid #dde9f9; display:flex; justify-content: space-around;}
.sticky-tabbar button { flex:1; padding:14px 0; font-size:17px; color:#888;background:transparent; border:none; font-weight:600;}
.sticky-tabbar button.active { color:#1877ff; border-bottom:3px solid #1877ff;}
.section {padding:0 4%; margin-top:26px;}
.section:first-of-type{margin-top:0;}
.section-title {font-size:17px; font-weight:600; margin:18px 0 9px;}

.home-main { font-size:20px; font-weight:700; margin-bottom:3px;}
.badge {margin-left:8px;}

.detail-info-row {margin:6px 0; color:#666;}
.info-icon {margin-right:6px;}
.menu-list, .menu-row{font-size:16px;}
.menu-row {margin:6px 0;}
.menu-row .price{color: #1877ff; font-weight:600;}

.review-list {margin-top:8px;}
.review-img-thumb {width:74px;height:74px;border-radius:11px;object-fit:cover;margin-top:2px; margin-right:9px;}
.review-info { display:flex; align-items: center;margin-bottom:3px; }
.star {font-size:17px;color:#ffb300;margin-left:5px;}
.review-img-list {display:flex;gap:7px;}
.review-form {margin-top:18px; background:#e7f1fd; border-radius:12px;padding:13px 7px;}
.review-form label {font-size:14px;margin-bottom:3px;display:block;}
.review-form input, .review-form textarea, .review-form select {border:1px solid #c9e3fe; border-radius:8px; padding:6px;width:100%;margin-bottom:6px;}
.review-form .img-preview {width:66px; height:66px; object-fit:cover;border-radius:8px;border:1px solid #dae4ed;margin-bottom:5px;}
.review-form .img-remove { display:block; color:#ff2e2e; font-size:12px; margin-top:-4px; margin-bottom:7px; cursor:pointer;}
.review-form button {background:var(--primary);color:#fff;border:none;width:100%;padding:10px 0; border-radius:10px;font-weight:700;}
.edit-btn, .primary-btn { border-radius:18px;}
.edit-btn {margin-top:24px; border:1px solid #c9e3ff;background:#f9fcff;color:#1877ff;}

.convenience {display: flex; flex-wrap:wrap; gap:11px;}
.facility-badge{background:#f0f6fe;color:#1877ff;border-radius:14px;padding:7px 18px;font-size:15px;display:flex;align-items:center;gap:4px;}

.share-btn { position:absolute;top:12px;right:14px;border:none;background:#fff;padding:8px 14px; border-radius:22px;box-shadow: 0 2px 12px #0002;font-size:15px;color:#1877ff;font-weight:700; cursor:pointer;}

@media (max-width:430px){.slider img{width:100vw;}}

/* === 리뷰 고도화 CSS : style.css 제일 하단에 추가 === */
.review-summary-card {
    display: flex; align-items: center; height: 56px; min-height: 56px; border-radius: 12px; background: #f7fcfb;
    padding: 0 12px; box-shadow: 0 2px 9px #33D1B11a; margin: 12px 0 8px 0; user-select: none; position: sticky; top: 0; z-index: 12;
  }
  .summary-stars { font-size: 18px; color: #33D1B1; margin-right: 7px; }
  .summary-h4 { font-size: 16px; line-height: 22px; font-weight: 600; margin-right: 7px; }
  .summary-meta { font-size: 12px; color: #666; margin-right: 11px;}
  .summary-tier { font-size: 11.5px; padding:2px 8px; border-radius:8px; background: #e6fff9; color:#19a996; margin-right:7px;}
  .summary-info { margin-left:5px; color: #BBBC; cursor: pointer; position:relative;}
  .summary-info:hover .summary-tip {display:block;}
  .summary-tip { display:none; position:absolute;left:0;top:28px;background:#fff;color:#444;font-size:12px;line-height:18px;border-radius:8px;box-shadow:0 2px 10px #0002;padding:10px;min-width:180px;z-index:30;}
  /* 사진 포토스트립 */
  .review-photostrip {display:flex;align-items:center;gap:8px;margin:0 0 7px 0;overflow-x:auto;padding:0 7px;}
  .photo-main {width:62vw;max-width:240px;height:135px;border-radius:8px;object-fit:cover;box-shadow:0 2px 13px #0001;margin-right:10px;transition: transform .15s, opacity .14s;opacity:0;}
  .photo-main.loaded {opacity:1;}
  .photo-thumb {width:68px;height:51px;border-radius:8px;object-fit:cover;box-shadow:0 1.3px 8px #0001;transition:transform .16s,opacity .12s;cursor:pointer;}
  .photo-thumb:active {transform:scale(1.05);}
  .photo-thumb.loaded {opacity:1;}
  .photo-thumb:not(.loaded) {opacity:.65;}
  /* Lightbox */
  .photo-modal{position:fixed;inset:0;z-index:9999;background:rgba(15,20,30,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fadein .21s;}
  .photo-lg{max-width:96vw;max-height:70vh;border-radius:14px;box-shadow:0 3px 24px #212b;transition:all .17s;animation:fadein .2s;}
  .photo-meta{color:#fff;margin-top:19px;display:flex;align-items:center;font-size:15px;gap:15px;letter-spacing:-0.1px;}
  .photo-nav{position:absolute;top:50%;width:100vw;display:flex;justify-content:space-between;}
  .photo-nav-btn{background:none;border:none;font-size:36px;color:#fff;opacity:0.8;cursor:pointer;}
  .photo-modal-close{position:absolute;top:26px;right:15px;font-size:24px;color:#fff;opacity:.88;cursor:pointer;}
  .photo-action {position:absolute;right:24vw;bottom:12vh;z-index:10;}
  @keyframes fadein {from{opacity:0;} to{opacity:1;}}
  
  .review-list-skeleton{display:flex;flex-direction:column;gap:17px;padding:6px 0;}
  .skeleton-card{height:56px;background:linear-gradient(90deg,#eee 25%,#e7e7e7 37%,#eee 63%);border-radius:12px;animation:skeleton 800ms linear infinite;}
  @keyframes skeleton{0%{background-position:-180px 0;}100%{background-position:180px 0;}}
  
  .review-card {
    background: #fff; border-radius: 12px; box-shadow: 0 1.5px 10px #93eccc18;
    padding: 14px 14px 10px 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 7px; min-width: 0; position: relative; transition: box-shadow .2s;
  }
  .review-card.review-dim {filter: grayscale(.18) brightness(.95);}
  .review-header {display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:1px;}
  .avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#f3f3f3;}
  .nick{font-size:14px;font-weight:600;color:#111;margin-right:6px;}
  .tier-badge{font-size:11px;padding:1.5px 6px; border-radius:6px; margin-right:3px; background:gold; color:#fff;box-shadow:0 0.5px 5px #e3c00021;}
  .tier-badge.silver{background:silver;color:#444;}
  .tier-badge.bronze{background:#cea06a;color:#fff;}
  .star{font-size:16px;color:#33D1B1;margin:0 3px;}
  .review-meta{font-size:12px;color:#9AA0A6;}
  .review-body {font-size:14px;line-height:1.42;max-height:42px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;transition:max-height .15s;}
  .review-body.expanded {display:block;max-height:1200px;white-space:pre-wrap;animation:fadein .13s;}
  .review-more-btn{color:#33D1B1;font-weight:500;font-size:13px;cursor:pointer;margin-left:7px;transition:color .15s;}
  .review-footer{display:flex;align-items:center;gap:8px;margin-top:4px;color:#666;}
  .action-chip{display:inline-flex;align-items:center;gap:4px;padding:3.1px 12.5px 3.1px 9px;border:1px solid #b9eae1;border-radius:9px;cursor:pointer;font-size:14px;background:#f9fffd;transition:background .13s, border .11s, color .14s;}
  .action-chip.active{background:#33D1B120;color:#33D1B1;box-shadow:0 2px 6px #33D1B115;}
  .action-chip:active{transform:scale(1.14);}
  .action-chip .icon{font-size:17px;}
  
  .useful-btn{background:none;border:none;color:#33D1B1;font-weight:500;font-size:14px;display:flex;align-items:center;gap:4px;cursor:pointer;transition:color .13s,transform .13s;}
  .useful-btn:active{color:#15b091;transform:scale(1.14);}
  .useful-btn .count{font-weight:600;}
  .comment-btn, .report-btn {background:none;border:none;font-size:14px;color:#aaa;margin-left:7px;cursor:pointer;}
  .comment-btn:active, .report-btn:active {color:#FF6B6B;}
  
  .fixed-cta-bar{ position:fixed;bottom:13px;left:0;width:100vw;max-width:430px;display:flex;justify-content:space-between;align-items:center;z-index:94;padding:0 26px;}
  .cta-fab{width:56px;height:56px;border-radius:50%;background:#33D1B1;color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 20px #33D1B18a;margin-right:9px;cursor:pointer;transition:box-shadow .13s;}
  .cta-fab:active{background:#18b093;box-shadow:0 0.5px 18px #33D1B188;}
  .cta-write{flex:1 1 auto;min-width:44px;height:44px;border-radius:23px;background:#fff;color:#33D1B1;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1.5px 14px #33D1B109;margin-left:2px;transition:background .12s,color .11s;}
  .cta-write:active{background:#e3f7f2;color:#159889;}
  @media (max-width:430px){.fixed-cta-bar{max-width:100vw;}}
  
  .h4{font-size:16px;line-height:22px;font-weight:600;}
  .body{font-size:14px;line-height:20px;}
  .caption{font-size:12px;line-height:16px;}
  .touch-target{min-width:44px;min-height:44px;}
  /* 접근성 대비/다크모드 */
  @media (prefers-color-scheme: dark){
   .review-summary-card,.review-card{background:#0b2f2b; color:#d8feff;}
   .summary-meta,.review-meta{color:#9deadc;}
   .cta-fab{background:#19977a;color:#fff;}
   .cta-write{background:#05241b; color:#bbe9db;}
  }

  .tab-content {
    display: none;
    overflow-y: auto;
    max-height: calc(100vh - 110px); /* 상단/하단 탭 크기 여백 조정 */
    padding-bottom: 32px;
  }
  .tab-content.active {
    display: block;
  }

/* Accessible focus styles */
.navtab:focus-visible, .bnv:focus-visible, .icon-badge:focus-visible, .action-btn:focus-visible, .mini-btn:focus-visible, .cta-fab:focus-visible, .cta-write:focus-visible, .web-btn:focus-visible, .copy-btn:focus-visible, .carousel-share-btn:focus-visible, .alarm-btn:focus-visible, .back-btn:focus-visible {
  outline: 3px solid #2b7be4; outline-offset: 2px; border-radius: 12px;
}
/* Hover/active micro-interactions */
.icon-badge:hover, .bnv:hover { background:#f1f7ff; }
.icon-badge:active, .bnv:active, .cta-fab:active, .cta-write:active { transform: scale(0.97); }
.navtab.active { color:#111; border-bottom:3px solid #111; font-weight:700; background:#f8f7fd; }
/* Toast */
.toast { pointer-events:auto; background: rgba(17,17,17,.92); color:#fff; padding:10px 14px; border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,.18); font-size:14px; animation: toastIn .18s ease-out; }
@keyframes toastIn { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }

/* Form Validation Styles */
input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="file"]:focus {
  outline: none;
  border-color: #33D1B1 !important;
  box-shadow: 0 0 0 3px rgba(51, 209, 177, 0.1);
}

input[type="text"]:invalid, input[type="tel"]:invalid, input[type="url"]:invalid {
  border-color: #ff6b6b;
}

.validation-error {
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 4px;
  display: block;
  animation: errorIn 0.2s ease-out;
}

@keyframes errorIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.image-preview-container {
  margin-top: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.image-preview-container img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ddd;
}

/* Location button loading state */
button[disabled] {
  opacity: 0.6;
  cursor: not-allowed !important;
}