/* =========================================================
   Snowmarket Dark UI (Daangn-like)
   - Background: #000
   - Cards: #2C2C2E
   - Text: #FFF / muted gray
   - Accent: Electric Blue #007AFF
   - Rounded boxes + pills + centered layout
   ========================================================= */

:root{
  --bg:#000000;
  --panel:#2C2C2E;
  --panel-2:#1C1C1E;
  --border:rgba(255,255,255,.08);
  --text:#FFFFFF;
  --muted:rgba(255,255,255,.65);
  --muted2:rgba(255,255,255,.45);
  --accent:#007AFF;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --radius:12px;
  --radius-lg:18px;
  --pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --max:980px;
}

/* =========================
   Dark theme hard override
   (many pages still have inline <style> from early versions)
   ========================= */
body{ background: var(--bg) !important; color: var(--text) !important; }
.wrap, .page, .container, .card{ background: transparent !important; color: var(--text) !important; }
.card{ background: var(--panel) !important; border: 1px solid rgba(255,255,255,.08) !important; }

/* Header auth status (name + logout / login) */
.authName{ font-weight: 900; color: #fff; }
.authBtn{
  margin-left: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(44,44,46,.75);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.authBtn:hover{ transform: translateY(-1px); background: rgba(44,44,46,.95); border-color: rgba(0,122,255,.45); }
.authLink{ color:#fff; text-decoration:none; font-weight:900; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(44,44,46,.6); }
.authLink:hover{ border-color: rgba(0,122,255,.45); }

/* MyPage tabs (내 매물/내 게시글/내 댓글/홈) - force dark */
#tabs{ display:flex; gap:10px; flex-wrap:wrap; }
#tabs .tab{
  background: rgba(44,44,46,.9) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
#tabs .tab:hover{ transform: translateY(-1px); border-color: rgba(0,122,255,.45) !important; }
#tabs .tab.active{ background: var(--accent) !important; border-color: rgba(0,122,255,.6) !important; }


*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  line-height:1.45;
}

/* Layout helpers */
.wrap, .container, main, .page, .content{
  max-width:var(--max);
  margin:0 auto;
  padding:28px 18px;
}
@media (min-width: 900px){
  .wrap, .container, main, .page, .content{ padding:42px 18px; }
}

/* Minimal top bar */
header{
  position:sticky; top:0; z-index:50;
  height:64px;
  background: linear-gradient(180deg, #0B0F14 0%, #070A0E 100%);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px;
}
header .left, header .right{display:flex; align-items:center; gap:10px;}
header .center{position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px;}
header .title, header h1, header .brand, header .brand-text{
  font-size:20px; font-weight:800; letter-spacing:-.02em;
}
header .logo{display:none !important;} /* hide header logo as requested earlier */

/* Nav row (if present) */
nav{ border-bottom:1px solid var(--border); background: #070A0E; }
nav .navwrap{ max-width:var(--max); margin:0 auto; padding:10px 18px; display:flex; gap:14px; justify-content:center; }
nav a{
  color:var(--muted);
  text-decoration:none;
  padding:8px 12px;
  border-radius:10px;
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
nav a:hover{ background:rgba(255,255,255,.06); color:var(--text); transform:translateY(-1px); }
/* Mobile nav fix */
@media (max-width: 520px){
  header{ height:56px; padding:0 12px; }
  header .title, header h1, header .brand, header .brand-text{ font-size:18px; }
  header .left, header .right{ gap:8px; }
  nav .navwrap{
    padding:8px 10px;
    gap:8px;
    flex-wrap:wrap;
    justify-content:center;
  }
  nav a{
    padding:6px 10px;
    font-size:14px;
    line-height:1.1;
    white-space:nowrap; /* prevent '스키 장터' splitting */
  }
}


/* Typography hierarchy */
h1{font-size:34px; margin:0 0 10px; letter-spacing:-.03em;}
h2{font-size:22px; margin:26px 0 12px;}
h3{font-size:18px; margin:0 0 8px;}
p{color:var(--muted); margin:0 0 12px;}
.small, .muted{color:var(--muted2); font-size:13px;}
hr{border:0;border-top:1px solid var(--border); margin:22px 0;}

/* Buttons */
button, .btn, .btn2, a.btn, a.btn2{
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  border:1px solid transparent;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  color:#fff;
  background:var(--accent);
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition: transform .18s var(--ease), filter .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
button:hover, .btn:hover, .btn2:hover, a.btn:hover, a.btn2:hover{
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 12px 28px rgba(0,122,255,.25);
  filter: brightness(1.02);
}
button:active, .btn:active, .btn2:active{ transform: translateY(0) scale(.99); }
.btn2{ background: rgba(255,255,255,.08); color:var(--text); border-color: var(--border); }
.btn2:hover{ box-shadow: 0 12px 28px rgba(0,0,0,.35); }

/* Inputs */
input, select, textarea{
  width:100%;
  background: var(--panel-2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 12px;
  outline:none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
select{ padding:10px 12px; }
input:focus, select:focus, textarea:focus{
  border-color: rgba(0,122,255,.55);
  box-shadow: 0 0 0 4px rgba(0,122,255,.18);
}
::placeholder{ color: rgba(255,255,255,.35); }

/* Card UI */
.card, .panel, .box, .itemCard, .postCard{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card{ padding:18px; }
.card p{ color:var(--muted); }
.card:hover{
  transform: translateY(-2px);
  transition: transform .18s var(--ease);
}

/* Centered hero */
.hero{
  text-align:center;
  padding:18px 0 10px;
}
.hero .btn{ margin-top:10px; }

/* Category icon grid (rounded boxes like Daangn) */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:16px;
  margin-top:18px;
}
.category-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:14px;
}
.category-card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: 18px;
  padding:18px 14px;
  text-align:center;
  box-shadow: var(--shadow);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.category-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  border-color: rgba(0,122,255,.35);
}
.category-icon{
  width:46px; height:46px;
  border-radius: 16px;
  background: rgba(0,122,255,.18);
  border: 1px solid rgba(0,122,255,.35);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 10px;
  color: var(--accent);
  font-weight:900;
}
.category-title{ font-weight:800; }
.category-sub{ color: var(--muted2); font-size:12.5px; margin-top:4px; }

/* Tag pills row */
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:16px;
}
.tag-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius: var(--pill);
  background: rgba(255,255,255,.08);
  border:1px solid var(--border);
  color: var(--text);
  text-decoration:none;
  font-weight:700;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.tag-pill:hover{
  transform: translateY(-2px);
  background: rgba(0,122,255,.16);
  border-color: rgba(0,122,255,.35);
  box-shadow: 0 14px 32px rgba(0,0,0,.5);
}

/* Lists */
.list, .items, .posts{ display:grid; gap:14px; }
.item{ background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding:14px; }

/* Item cards: image radius 16px, price bold */
.itemCard img, .item img, .thumb img{
  border-radius:16px;
}
.price, .itemPrice{
  font-weight:900;
  letter-spacing:-.02em;
}
.badge, .status, .pill, .statusBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:6px;
  font-weight:800;
  font-size:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.08);
  color: var(--accent);
}
.badge.selling, .status.selling{ background: rgba(0,122,255,.18); border-color:var(--accent); 
}
.badge.reserved, .status.reserved{ background: rgba(215,255,0,.16); border-color:#ffb020; color:#ffb020; 
}
.badge.sold, .status.sold{ background: rgba(255,255,255,.06); border-color:#c9ced8; color:#c9ced8; 
}

/* Tables / misc */
table{ width:100%; border-collapse:collapse; }
td,th{ border-bottom:1px solid var(--border); padding:10px 8px; color:var(--muted); }

/* Utility */
.hidden{display:none !important;}
.center{ text-align:center; }


/* ---- Fix: badge/status text colors & square shape ---- */
.badge.selling, .status.selling{ color: var(--accent) !important; border-color: var(--accent); }
.badge.reserved, .status.reserved{ color: #ffb020 !important; border-color:#ffb020; }
.badge.sold, .status.sold{ color: #c9ced8 !important; border-color:#c9ced8; }

/* login page top home button */
.topbar{max-width:1100px;margin:18px auto 0;padding:0 24px;display:flex;justify-content:flex-start;}

/* 로그인 화면: 홈 버튼을 카드 축에 맞춰 배치 */
.login-topbar{
  max-width:560px;
  margin:28px auto 12px;
}
@media (max-width:600px){.topbar{padding:0 16px;}}


/* Kakao Login Button */
.btn.kakao{
  background:#FEE500;
  color:#191600;
  border-color:rgba(0,0,0,.08);
}
.btn.kakao:hover{ filter:brightness(.98); }


/* === Mobile header overlap fix === */
@media (max-width: 520px){
  header{
    height:auto;
    padding:10px 12px;
    flex-wrap:wrap;
    gap:8px;
  }
  header .center{
    position:static;
    left:auto;
    transform:none;
    width:100%;
    justify-content:center;
    order:0;
  }
  header .left{
    order:1;
    flex:1 1 auto;
    min-width:0;
  }
  header .right{
    order:2;
    flex:0 0 auto;
  }
  /* Brand title injected by auth.js */
  #brandTitle{
    font-size:18px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:100% !important;
  }
  /* prevent long user names from pushing layout */
  #authStatus{
    max-width:55vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}