/*
 * 전국허브 — Apple Jobs Sensibility CSS
 * Draggable Sheet · Glassmorphism · Ultra-minimal
 */

/* ── Variables ── */
:root {
  --black:        #1d1d1f;
  --white:        #f5f5f7;
  --blue:         #0066cc;
  --red:          #ff3b30;
  --orange:       #ff9f0a;
  --green:        #30d158;
  --gold:         #d4af37;
  --gray:         #86868b;
  --gray-light:   #d2d2d7;
  --glass:        rgba(255,255,255,0.76);
  --glass-border: rgba(255,255,255,0.22);
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.08);
  --shadow-md:    0 8px 28px rgba(0,0,0,0.12);
  --shadow-lg:    0 20px 60px rgba(0,0,0,0.20);
  --radius-sm:    10px;
  --radius-md:    18px;
  --radius-lg:    28px;
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --header-h:     52px;
  --ticker-h:     28px;
  --rank-h:       52px;
  --top-offset:   132px;
  --sheet-h:      220px; /* JS overrides this */
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body {
  font-family: var(--font);
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}
button { cursor:pointer; font-family:inherit; }
a { text-decoration:none; }

/* ── App Shell ── */
.app-container {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ════════════ HEADER ════════════ */
#app-header {
  position: absolute;
  top:0; left:0; right:0;
  height: var(--header-h);
  z-index: 3000;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 0.5px solid rgba(0,0,0,0.10);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
}

.logo {
  display: flex; align-items: center; gap: 7px;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em;
}
.logo-bolt { color: var(--orange); font-size: 1rem; }
.logo-accent { color: var(--blue); }

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

.wisdom-level {
  display:flex; align-items:center; gap:4px;
  font-size:0.72rem; font-weight:700; color: var(--gold);
}

.icon-btn {
  width:34px; height:34px; border-radius:50%;
  background:transparent; border:none; color:var(--black);
  font-size:1rem; display:flex; align-items:center; justify-content:center;
  transition:background 0.2s;
}
.icon-btn:hover { background:rgba(0,0,0,0.06); }

.apple-btn {
  background:var(--black); color:white; border:none;
  padding:7px 18px; border-radius:30px;
  font-size:0.85rem; font-weight:600; transition:opacity 0.2s;
}
.apple-btn:hover { opacity:0.8; }

.apple-btn-outline {
  background:transparent; color:var(--black);
  border:1.5px solid var(--black);
  padding:6px 16px; border-radius:30px;
  font-size:0.85rem; font-weight:600; transition:all 0.2s;
}
.apple-btn-outline:hover { background:var(--black); color:white; }

/* ════════════ TICKER ════════════ */
#real-time-ticker {
  position:absolute; top:var(--header-h); left:0; right:0;
  height:var(--ticker-h); z-index:2900;
  background:#fffbe6; border-bottom:0.5px solid rgba(0,0,0,0.06);
  display:flex; align-items:center; gap:10px; padding:0 18px;
  font-size:0.72rem; color:#5d4037; overflow:hidden; white-space:nowrap;
}
.pulse-dot {
  width:7px; height:7px; background:var(--red); border-radius:50%;
  flex-shrink:0; animation:pulse 1.6s infinite;
}
@keyframes pulse {
  0%  { box-shadow:0 0 0 0 rgba(255,59,48,0.5); }
  70% { box-shadow:0 0 0 7px rgba(255,59,48,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,59,48,0); }
}

/* ════════════ RANKING BAR ════════════ */
.ranking-bar {
  position:absolute; top:calc(var(--header-h) + var(--ticker-h)); left:0; right:0;
  height:var(--rank-h); z-index:2800;
  display:flex; align-items:center; gap:10px; padding:0 16px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ranking-bar::-webkit-scrollbar { display:none; }
.rank-item {
  flex-shrink:0; background:var(--glass); backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border);
  border-radius:20px; padding:7px 14px; font-size:0.78rem; font-weight:600;
  display:flex; align-items:center; gap:6px; box-shadow:var(--shadow-sm);
  cursor:pointer; transition:transform 0.2s; white-space:nowrap;
}
.rank-item:hover { transform:translateY(-2px); }
.rank-num { color:var(--blue); font-weight:800; font-style:italic; }
.rank-discount { color:var(--red); font-weight:700; }

/* ════════════ MAP ════════════ */
#map-container {
  position:absolute; top:0; left:0; right:0; bottom:0; z-index:1;
}
#map { width:100%; height:100%; }

.leaflet-control-zoom {
  border:none !important; box-shadow:var(--shadow-md) !important;
  border-radius:var(--radius-sm) !important; overflow:hidden;
  margin-right:16px !important;
}
.leaflet-control-zoom a {
  background:var(--glass) !important; backdrop-filter:blur(12px);
  color:var(--black) !important; border:none !important; font-size:1.1rem;
}

.online-dim-overlay {
  position:absolute; inset:0;
  background:rgba(29,29,31,0.55); backdrop-filter:grayscale(1);
  z-index:10; pointer-events:none; opacity:0; transition:opacity 0.5s;
}
.online-dim-overlay.active { opacity:1; }

/* ════════════ FLOATING OVERLAY ════════════ */
.floating-overlay {
  position:absolute; top:calc(var(--top-offset) + 10px);
  left:50%; transform:translateX(-50%);
  z-index:900; width:92%; max-width:560px;
}
.search-bar {
  background:var(--glass); backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  border:1px solid var(--glass-border); border-radius:var(--radius-md);
  padding:11px 16px; display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-md);
}
.search-icon { color:var(--gray); font-size:0.9rem; flex-shrink:0; }
.search-bar input {
  flex:1; border:none; background:transparent; outline:none;
  font-size:0.95rem; color:var(--black); font-family:var(--font);
}
.search-bar input::placeholder { color:var(--gray); }
.search-clear {
  background:transparent; border:none; color:var(--gray);
  font-size:0.9rem; padding:2px; display:none;
}
.category-pills {
  display:flex; gap:8px; margin-top:10px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px;
}
.category-pills::-webkit-scrollbar { display:none; }
.pill {
  flex-shrink:0; background:var(--glass); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px); border:1px solid var(--glass-border);
  border-radius:30px; padding:6px 15px; font-size:0.78rem; font-weight:600;
  color:var(--black); cursor:pointer; box-shadow:var(--shadow-sm);
  transition:all 0.25s cubic-bezier(0.4,0,0.2,1); white-space:nowrap;
}
.pill.active { background:var(--black); color:white; border-color:var(--black); }

/* ════════════ MAP BUTTONS ════════════ */
#btn-locate {
  position:absolute; right:18px; z-index:900;
  bottom:calc(var(--sheet-h) + 16px);
  width:48px; height:48px; border-radius:50%;
  background:var(--glass); backdrop-filter:blur(16px);
  border:1px solid var(--glass-border); box-shadow:var(--shadow-md);
  color:var(--blue); font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
  transition:bottom 0.1s;
}
#btn-locate:active { transform:scale(0.88); }

#btn-wisdom {
  position:absolute; left:18px; z-index:900;
  bottom:calc(var(--sheet-h) + 16px);
  padding:13px 22px; border-radius:30px;
  background:linear-gradient(135deg, var(--orange), var(--red));
  color:white; border:none; font-size:0.92rem; font-weight:700;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 6px 24px rgba(255,59,48,0.35);
  transition:bottom 0.1s, transform 0.25s;
}
#btn-wisdom:hover { transform:translateY(-3px); }
#btn-wisdom:active { transform:scale(0.94); }

/* ════════════ MARKERS ════════════ */
.price-marker {
  background:white; border:1.5px solid var(--black); border-radius:30px;
  padding:3px 10px; display:flex; align-items:center; gap:5px;
  font-size:0.73rem; font-weight:800; color:var(--black); white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,0.18); cursor:pointer; transition:transform 0.2s;
}
.price-marker:hover { transform:scale(1.12) translateY(-4px); }
.price-marker.hot {
  background:var(--black); color:white; border-color:var(--red);
  box-shadow:0 3px 14px rgba(255,59,48,0.4);
}
.golden-aura {
  background:rgba(255,215,0,0.3); box-shadow:0 0 20px rgba(255,215,0,0.5);
  border-radius:50%; animation:aura-pulse 2.8s infinite ease-in-out;
}
@keyframes aura-pulse {
  0%,100% { transform:scale(1);   opacity:0.3; }
  50%      { transform:scale(1.2); opacity:0.6; }
}

/* ════════════ BOTTOM SHEET (DRAGGABLE) ════════════ */
.detail-sheet {
  position:fixed; bottom:0; left:0; right:0;
  height:var(--sheet-h);
  z-index:2000;
  background:var(--glass);
  backdrop-filter:saturate(180%) blur(32px);
  -webkit-backdrop-filter:saturate(180%) blur(32px);
  border-top-left-radius:var(--radius-lg);
  border-top-right-radius:var(--radius-lg);
  box-shadow:0 -4px 32px rgba(0,0,0,0.12);
  display:flex; flex-direction:column;
  overflow:hidden;
  /* Transition only when NOT dragging — JS toggles this class */
  transition:height 0s;
}
.detail-sheet.snapping { transition:height 0.35s cubic-bezier(0.32,0.72,0,1); }

/* Drag zone — generous touch target */
.sheet-drag-zone {
  padding:10px 0 6px;
  cursor:ns-resize;
  flex-shrink:0;
  touch-action:none;
  user-select:none;
}
.sheet-handle {
  width:36px; height:4px;
  background:var(--gray-light); border-radius:2px; margin:0 auto;
}

/* Tabs */
.sheet-tabs-wrap {
  padding:0 16px 8px; flex-shrink:0;
}
.sheet-tabs {
  display:flex; background:rgba(0,0,0,0.06); border-radius:var(--radius-sm);
  padding:3px; gap:2px; overflow-x:auto; scrollbar-width:none;
}
.sheet-tabs::-webkit-scrollbar { display:none; }
.sheet-tab {
  flex-shrink:0; text-align:center; padding:8px 12px;
  font-size:0.78rem; font-weight:600; color:var(--gray);
  border-radius:8px; cursor:pointer; white-space:nowrap;
  transition:all 0.2s;
}
.sheet-tab.active {
  background:white; color:var(--black);
  box-shadow:0 1px 6px rgba(0,0,0,0.10);
}

/* Commission Banner */
.commission-banner {
  background:linear-gradient(135deg, #fff8e7, #fff3d4);
  border:1px solid #ffd166; border-radius:var(--radius-sm);
  margin:0 0 12px; padding:12px 14px;
}
.commission-inner {
  display:flex; gap:10px; align-items:flex-start;
}
.comm-icon { font-size:1.4rem; flex-shrink:0; }
.commission-inner b { font-size:0.85rem; display:block; margin-bottom:4px; }
.commission-inner p { font-size:0.75rem; color:#6b4f10; line-height:1.5; }

/* Sheet Content */
.sheet-content {
  flex:1; overflow-y:auto; padding:4px 16px 80px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.sheet-content::-webkit-scrollbar { display:none; }
.sheet-meta {
  font-size:0.72rem; color:var(--gray); text-align:center; margin-bottom:14px;
}

/* ════════════ ITEM CARDS ════════════ */
.item-card {
  background:white; border-radius:var(--radius-md); padding:14px;
  margin-bottom:10px; display:flex; gap:14px; box-shadow:var(--shadow-sm);
  cursor:pointer; transition:transform 0.2s, box-shadow 0.2s;
  border:1px solid rgba(0,0,0,0.04);
}
.item-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.item-card:active { transform:scale(0.98); }

.item-img {
  width:76px; height:76px; border-radius:12px;
  object-fit:cover; background:#f0f0f2; flex-shrink:0;
}

.item-info { flex:1; min-width:0; }
.item-info h3 {
  font-size:0.93rem; font-weight:700; margin-bottom:5px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.item-price-row {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:4px;
}
.item-price { font-size:1.05rem; font-weight:800; color:var(--blue); }
.discount-badge {
  background:var(--red); color:white; padding:2px 7px;
  border-radius:6px; font-size:0.68rem; font-weight:700;
}
.wisdom-badge {
  background:linear-gradient(135deg,var(--orange),var(--gold)); color:white;
  padding:2px 7px; border-radius:6px; font-size:0.68rem; font-weight:700;
}
.golden-badge {
  background:linear-gradient(135deg,var(--gold),#b8860b); color:white;
  padding:2px 7px; border-radius:6px; font-size:0.68rem; font-weight:700;
}
.comm-badge {
  background:linear-gradient(135deg,#6c63ff,#5a52d5); color:white;
  padding:2px 7px; border-radius:6px; font-size:0.68rem; font-weight:700;
}
.item-meta {
  font-size:0.72rem; color:var(--gray);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}

/* Service/Tutor Card Extras */
.service-card-footer {
  margin-top:8px; padding-top:8px; border-top:1px solid #f0f0f2;
  display:flex; align-items:center; justify-content:space-between;
}
.service-rating { font-size:0.75rem; color:#ff9f0a; font-weight:600; }
.service-commission {
  font-size:0.72rem; background:#f0edff; color:#6c63ff;
  padding:3px 8px; border-radius:20px; font-weight:700;
}

/* ════════════ LOADING / EMPTY ════════════ */
.loading-state {
  text-align:center; padding:48px 20px; color:var(--gray);
  display:flex; flex-direction:column; align-items:center; gap:12px; font-size:0.9rem;
}
.empty-state { text-align:center; padding:48px 20px; color:var(--gray); font-size:0.9rem; }

/* ════════════ MODAL ════════════ */
#immersive-modal {
  position:fixed; inset:0; z-index:5000;
  display:flex; align-items:flex-end; justify-content:center;
}
#immersive-modal.hidden { pointer-events:none; }
#immersive-modal.hidden .modal-backdrop { opacity:0; }
#immersive-modal.hidden .modal-card { transform:translateY(100%); }

.modal-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
  transition:opacity 0.4s;
}

.modal-card {
  position:relative; width:100%; max-width:560px; max-height:92vh;
  background:white; border-top-left-radius:var(--radius-lg);
  border-top-right-radius:var(--radius-lg); overflow-y:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  transform:translateY(0); transition:transform 0.5s cubic-bezier(0.32,0.72,0,1);
  box-shadow:var(--shadow-lg);
}
.modal-card::-webkit-scrollbar { display:none; }

.modal-close {
  position:sticky; top:14px; float:right; margin:14px 16px 0 0;
  width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,0.07); border:none; color:var(--black);
  font-size:0.95rem; display:flex; align-items:center; justify-content:center;
  z-index:10; transition:background 0.2s;
}
.modal-close:hover { background:rgba(0,0,0,0.13); }

#modal-img {
  width:100%; height:220px; object-fit:cover; display:block; margin-top:-46px;
}
.modal-body { padding:20px 22px 36px; }

#modal-top-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }

#modal-title {
  font-size:1.45rem; font-weight:800; letter-spacing:-0.04em; line-height:1.25; margin-bottom:14px;
}

.modal-price-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:24px;
}
.modal-price { font-size:1.6rem; font-weight:800; color:var(--blue); letter-spacing:-0.02em; }
.modal-original { font-size:0.95rem; color:var(--gray); text-decoration:line-through; }
.modal-save-badge {
  background:var(--red); color:white; padding:4px 12px;
  border-radius:8px; font-size:0.88rem; font-weight:800;
}

/* Savings Chart */
.savings-chart {
  background:#f2f2f7; border-radius:var(--radius-md);
  padding:18px 22px 14px; margin-bottom:22px; position:relative;
}
.chart-bars { display:flex; gap:32px; align-items:flex-end; height:90px; }
.chart-col { display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; }
.bar-wrap { width:100%; height:72px; display:flex; align-items:flex-end; }
.bar { width:100%; border-radius:8px 8px 4px 4px; transition:height 1s cubic-bezier(0.4,0,0.2,1); min-height:4px; }
.bar.market   { background:var(--gray-light); }
.bar.discounted { background:linear-gradient(to top, var(--red), var(--orange)); }
.chart-col span { font-size:0.7rem; font-weight:600; color:var(--gray); }
.chart-label { text-align:right; font-size:1.1rem; font-weight:800; color:var(--red); margin-top:8px; }

/* Modal Commission Block */
.modal-commission {
  background:#f5f3ff; border:1px solid #d4d0ff; border-radius:var(--radius-sm);
  padding:14px 16px; margin-bottom:20px;
}
.comm-row {
  display:flex; align-items:center; gap:10px;
  font-size:0.82rem; padding:4px 0; color:var(--black);
}
.comm-row i { color:#6c63ff; width:16px; text-align:center; }

.modal-desc {
  font-size:0.93rem; line-height:1.65; color:var(--black); opacity:0.75; margin-bottom:22px;
}

/* Action Buttons */
.action-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:15px; border-radius:var(--radius-md);
  font-size:0.95rem; font-weight:700; transition:all 0.2s; margin-bottom:10px;
}
.action-phone { background:var(--green); color:white; box-shadow:0 4px 16px rgba(48,209,88,0.35); }
.action-phone:hover { opacity:0.88; }

.navi-group { display:flex; gap:10px; margin-bottom:20px; }
.navi-btn {
  flex:1; padding:13px; border-radius:var(--radius-sm); font-size:0.82rem;
  font-weight:700; border:none; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:all 0.2s;
}
.navi-btn:active { transform:scale(0.96); }
.n-naver { background:#03cf5d; color:white; }
.n-kakao { background:#fee500; color:#3c1e1e; }

.disclaimer-text {
  font-size:0.75rem; color:#c0392b; background:rgba(255,59,48,0.07);
  border-radius:var(--radius-sm); padding:12px 14px; line-height:1.55; margin-bottom:18px;
}
.cta-btn {
  width:100%; padding:16px; border-radius:var(--radius-md);
  font-size:1.05rem; letter-spacing:-0.01em; box-shadow:0 6px 20px rgba(0,0,0,0.2);
}