/* ============================================================
   lineup.css — 협력사 상품 라인업 페이지 전용 스타일
   style.css 전역 스타일에 추가/override됩니다.
   ============================================================ */

/* ── HERO ──────────────────────────────────────────────────── */
.lineup-hero {
  padding: 52px 0 40px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(150deg, var(--bg2) 0%, var(--bg) 100%);
}
.lineup-hero .breadcrumb   { margin-bottom: 20px; }
.lineup-hero-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
}
.lineup-hero h1 {
  font-family: var(--serif); font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 600; margin: 0 0 14px; line-height: 1.2;
}
.lineup-hero p {
  font-size: 15px; color: var(--muted); margin: 0;
  line-height: 1.85; max-width: 540px; word-break: keep-all;
}

/* ── SECTION ───────────────────────────────────────────────── */
.lineup-section { padding: 44px 0 96px; }

/* ── FILTER TABS ───────────────────────────────────────────── */
.lineup-tabs   { display: flex; gap: 8px; margin-bottom: 40px; flex-wrap: wrap; align-items: center; }
.tab-btn {
  padding: 8px 22px; border-radius: 99px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--muted); font-family: var(--sans);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .15s ease; letter-spacing: .2px;
}
.tab-btn:hover  { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.lineup-count   { font-size: 12px; color: var(--muted); margin-left: auto; }

/* ── GROUP LABEL ───────────────────────────────────────────── */
.lineup-group       { margin-bottom: 52px; }
.lineup-group-label { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.lineup-group-label h2   { font-family: var(--serif); font-size: 17px; font-weight: 600; margin: 0; white-space: nowrap; }
.lineup-group-label-line { flex: 1; height: 1px; background: var(--line); }
.lineup-group-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--muted); background: var(--bg2); border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 99px;
}

/* ── PRODUCT GRID ──────────────────────────────────────────── */
.lineup-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px 14px; }

/* ── PRODUCT CARD ──────────────────────────────────────────── */
.lineup-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; cursor: pointer;
}
.lineup-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.lc-img {
  position: relative; aspect-ratio: 1 / 1.05; overflow: hidden;
  background: var(--bg2); flex-shrink: 0;
}
.lc-img img              { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .32s ease; }
.lineup-card:hover .lc-img img { transform: scale(1.05); }
.lc-img.is-pending::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(247,243,238,.28); pointer-events: none;
}

/* 배지 */
.lc-badge {
  position: absolute; top: 9px; right: 9px;
  font-size: 9px; font-weight: 800; letter-spacing: .8px;
  padding: 3px 8px; border-radius: 99px; z-index: 2; backdrop-filter: blur(4px);
}
.lc-badge.pending { background: rgba(43,29,20,.72);  color: #fff; }
.lc-badge.ready   { background: rgba(45,120,60,.82);  color: #fff; }
.lc-badge.soldout { background: rgba(120,80,60,.80); color: #fff; }

/* 카드 바디 */
.lc-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.lc-company {
  font-size: 9.5px; font-weight: 800; letter-spacing: .9px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 2px;
}
.lc-company.bb { color: #5B7A44; }
.lc-company.bs { color: #2E6B8A; }
.lc-company.kl { color: #1A4D8F; }
.lc-name  { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.45; word-break: keep-all; }
.lc-price { margin-top: 7px; font-size: 13px; font-weight: 800; }
.lc-price.ready   { color: var(--text); }
.lc-price.pending { color: var(--muted); font-weight: 600; opacity: .7; font-style: italic; font-size: 12px; }
.lc-price.soldout { color: #aaa; font-style: italic; font-weight: 500; font-size: 12px; }
.lc-price.custom  { color: var(--accent); font-size: 11px; font-weight: 700; }
.lc-price-orig    { text-decoration: line-through; color: var(--muted); font-weight: 400; font-size: 10.5px; margin-left: 4px; }

/* ── POPUP MODAL ───────────────────────────────────────────── */
.lc-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.52); z-index: 9999;
  align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(6px);
}
.lc-modal-overlay.open { display: flex; }

.lc-modal {
  background: var(--bg); border-radius: 22px; max-width: 420px; width: 100%;
  box-shadow: 0 28px 70px rgba(0,0,0,.35); overflow: hidden;
  animation: modal-in .22s cubic-bezier(.34,1.3,.64,1); position: relative;
}
@keyframes modal-in {
  from { transform: translateY(24px) scale(.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

.lc-modal-img-wrap     { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg2); }
.lc-modal-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lc-modal-body    { padding: 22px 24px 24px; }
.lc-modal-company {
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.lc-modal-company.bb { color: #5B7A44; }
.lc-modal-company.bs { color: #2E6B8A; }
.lc-modal-company.kl { color: #1A4D8F; }
.lc-modal-name {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  line-height: 1.4; margin: 0 0 6px; word-break: keep-all;
}
.lc-modal-sub  { font-size: 12px; color: var(--muted); margin: 0 0 20px; line-height: 1.6; }
.lc-modal-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.lc-modal-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 10px; border-radius: 12px; border: none; font-family: var(--sans);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease; text-decoration: none;
}
.lc-modal-btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.lc-modal-btn:active { transform: translateY(0); }
.lc-modal-btn-store            { background: var(--accent); color: #fff; }
.lc-modal-btn-store:disabled   { background: var(--muted); cursor: not-allowed; opacity: .6; }
.lc-modal-btn-contact          { background: var(--bg2); color: var(--text); border: 1.5px solid var(--line); }

.lc-modal-close {
  position: absolute; top: 12px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.3); color: #fff; font-size: 16px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s; z-index: 2;
}
.lc-modal-close:hover { background: rgba(0,0,0,.5); }

/* ── COLLAPSE / EXPAND ─────────────────────────────────────── */
.lineup-grid-wrap           { position: relative; transition: max-height .42s ease; }
.lineup-grid-wrap.collapsed { overflow: hidden; }
.lineup-grid-wrap.collapsed::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 110px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none; z-index: 1;
}
.lineup-toggle-btn {
  display: block; margin: 14px auto 0; padding: 9px 36px; border-radius: 99px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--muted);
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s ease; letter-spacing: .2px;
}
.lineup-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1060px) { .lineup-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width:  840px) { .lineup-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  560px) {
  .lineup-grid  { grid-template-columns: repeat(2, 1fr); gap: 12px 10px; }
  .lineup-hero  { padding: 36px 0 28px; }
  .lc-body      { padding: 10px 10px 12px; }
  .lc-name      { font-size: 11.5px; }
  .lc-modal-btns { grid-template-columns: 1fr; }
}