/* public/assets/front/css/marketpro-tune.css
 * MarketPro-like typography + separators for front pages.
 * Safe, additive CSS: does NOT overwrite template core styles aggressively.
 */

.marketpro-page .marketpro-article{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:28px;
}

.marketpro-article__header{ margin-bottom:18px; }
.marketpro-article__title{ font-size:28px; line-height:1.25; margin:0 0 8px; font-weight:700; color:#111; }
.marketpro-article__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#6b7280; font-size:14px; }
.marketpro-article__meta .meta-item{ display:inline-flex; align-items:center; gap:6px; }
.marketpro-article__meta .meta-sep{ opacity:.6; }

.marketpro-divider{ border:0; border-top:1px solid rgba(0,0,0,.08); margin:20px 0; }

.prose{ color:#111827; font-size:16px; line-height:1.8; }
.prose p{ margin:0 0 12px; }
.prose h2,.prose h3{ margin:20px 0 10px; font-weight:700; color:#111; }
.prose ul{ padding-left:18px; }
.prose li{ margin:6px 0; }
.prose img{ max-width:100%; height:auto; border-radius:12px; }

.marketpro-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:18px;
}

.marketpro-list .item{
  padding:14px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.marketpro-list .item:last-child{ border-bottom:0; }

.marketpro-meta-row{
  display:flex; flex-wrap:wrap; gap:10px;
  color:#6b7280; font-size:13px;
}
.marketpro-meta-row .badge{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  color:#111;
}

/* Sidebar widget (Recent Posts-like) */
.marketpro-widget{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:18px;
}
.marketpro-widget__title{
  font-weight:700;
  font-size:16px;
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.marketpro-widget__list{ list-style:none; padding:0; margin:0; }
.marketpro-widget__list li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 8px;
  border-radius:10px;
  color:#111;
  transition:all .15s ease;
}
.marketpro-widget__list li a:hover{
  background:rgba(0,0,0,.03);
}
.marketpro-widget__list li a.active{
  background:rgba(13,110,253,.10);
  color:#0d6efd;
  font-weight:700;
}

/* Checkout / summary cards */
.checkout-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:24px;
}
@media (max-width: 991.98px){
  .checkout-grid{ grid-template-columns:1fr; }
}
.marketpro-summary{
  position:sticky; top:16px;
}
.marketpro-summary .rowline{
  display:flex; justify-content:space-between; padding:8px 0;
  border-bottom:1px dashed rgba(0,0,0,.12);
  font-size:14px; color:#111;
}
.marketpro-summary .rowline:last-child{ border-bottom:0; }
.marketpro-summary .total{
  font-size:18px; font-weight:800;
}

/* Tabs area on product detail */
.marketpro-tabs{
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex; gap:18px;
}
.marketpro-tabs a{
  padding:12px 4px;
  font-weight:700;
  color:#6b7280;
  border-bottom:2px solid transparent;
}
.marketpro-tabs a.active{
  color:#111;
  border-bottom-color:#0d6efd;
}

/* Safe button helpers used across step-by-step register + guest order lookup */
.btn-main-600{
  background:#0d6efd;
  color:#fff !important;
  border:1px solid rgba(13,110,253,.35);
}
.btn-main-600:hover{ filter:brightness(.95); }

.btn-outline-neutral-200{
  background:#fff;
  color:#111 !important;
  border:1px solid rgba(0,0,0,.18);
}
.btn-outline-neutral-200:hover{ background:rgba(0,0,0,.03); }

/* ==============================
 * Header quick actions (compact)
 * - Prevent ugly wrapping when actions grow
 * - Show icons always, labels only on wide screens
 * ============================== */
.header-quick{ flex-wrap:nowrap; }
.header-quick .hq-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
  white-space:nowrap;
}
.header-quick .hq-item i{ font-size:18px; line-height:1; }
.header-quick .hq-item:hover{ background:rgba(0,0,0,.03); }

/* when space is tight: hide labels, keep icons */
@media (max-width: 1200px){
  .header-quick .hq-label{ display:none !important; }
  .header-quick .hq-item{ padding:0 8px; }
}

/* when even tighter: allow wrapping but keep it neat */
@media (max-width: 992px){
  .header-quick{ flex-wrap:wrap; row-gap:8px; }
}




/* ===== header actions: no ugly wrap ===== */
.njeju-actions{
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 10px;
  align-items: center;
}

/* 공통 액션 */
.njeju-act{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;              /* pill */
  color:#222;
  text-decoration:none;
  line-height:1;
}
.njeju-act:hover{ background: rgba(0,0,0,.04); }

.njeju-ico{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  color:#4a4a4a;
}
.njeju-txt{
  font-size:13px;
  color:#222;
  white-space:nowrap;
}

/* badge */
.njeju-ico--badge .njeju-badge{
  position:absolute;
  top:-6px;
  right:-8px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#2f6bff;
  color:#fff;
  font-size:10px;
  line-height:1;
}

/* ===== account dropdown (details) ===== */
.njeju-account{ position:relative; }

/* summary를 “버튼”처럼 */
.njeju-account > summary{
  list-style:none;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.njeju-account > summary::-webkit-details-marker{ display:none; }

/* caret 회전 */
.njeju-account[open] .njeju-caret{
  transform: rotate(180deg);
}
.njeju-caret{
  display:inline-flex;
  align-items:center;
  opacity:.7;
  transition: transform .15s ease;
}

/* 🔥 핵심: 드롭다운은 기본 숨김 → open일 때만 표시 */
.njeju-drop{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:220px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.14);
  padding:8px;
  z-index:99999;
}
.njeju-account[open] .njeju-drop{ display:block; }

.njeju-drop__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:#222;
  font-size:14px;
}
.njeju-drop__item:hover{ background: rgba(0,0,0,.05); }

/* 줄어들면 텍스트 숨김 */
@media (max-width: 1200px){
  .njeju-actions .njeju-txt{ display:none !important; }
  .njeju-act{ padding:7px 8px; gap:6px; }
}


/* ===== Header Layer Fix ===== */
.header,
.header-middle,
.header-bottom {
    position: relative;
    z-index: 1000;   /* 사이트 최상단 레벨 */
}

/* Account dropdown */
.njeju-account {
    position: relative;
}

.njeju-drop {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1100;   /* header보다 위 */
    min-width: 180px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.hero-area *,
.banner-area *,
.slider-area * {
    z-index: auto !important;
}