/* 케이프 와인 셀러 / 팝앤포 — 모바일 우선 */

:root {
  --bg: #0b0b0d;
  --bg-2: #131317;
  --line: #26262c;
  --fg: #f2efea;
  --fg-dim: #a8a29a;
  --fg-faint: #6f6a63;
  --gold: #c9a227;
  --card: #f7f5f2;          /* 병 사진이 놓이는 밝은 면 */
  --maxw: 720px;
  --pad: 20px;
  --r: 14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Malgun Gothic', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ── 상단바 ───────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,11,13,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 12px; height: 54px; }
/* 뒤로가기(상위 한 단계) + 현재 위치. 좁은 화면에서 잘리지 않도록 각각 폭을 제한한다 */
.top .back {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0;
  font-size: 13px; color: var(--fg-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 45%;
}
.top .back .chev { color: var(--fg-faint); font-size: 16px; line-height: 1; }
.top .cur {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top .back + .cur { text-align: right; }

/* ── 히어로 ───────────────────────────────── */
.hero {
  position: relative; min-height: 78vh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero img.bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,13,.5) 0%, rgba(11,11,13,.15) 35%, rgba(11,11,13,.97) 100%);
}
.hero .inner { position: relative; z-index: 2; width: 100%; padding: 0 var(--pad) 56px; }
.hero .inner > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.hero h1 {
  font-size: clamp(30px, 8.5vw, 46px);
  line-height: 1.25; margin: 0 0 14px; letter-spacing: -.02em; font-weight: 700;
}
.hero p { color: var(--fg-dim); font-size: 15px; margin: 0; max-width: 30em; }
.eyebrow {
  display: inline-block; font-size: 11px; letter-spacing: .22em;
  color: var(--gold); margin-bottom: 14px; text-transform: uppercase;
}

/* ── 섹션 ─────────────────────────────────── */
section { padding: 44px 0; }
h2.sec { font-size: 12px; letter-spacing: .18em; color: var(--fg-faint); margin: 0 0 18px; text-transform: uppercase; }

/* ── 브랜드 선택 카드 ─────────────────────── */
.brands { display: grid; gap: 14px; }
.brand {
  display: block; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2); padding: 24px 22px; transition: border-color .2s, transform .2s;
}
.brand:active { transform: scale(.99); }
.brand h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.01em; }
.brand .en { font-size: 11px; letter-spacing: .16em; color: var(--gold); display: block; margin-bottom: 12px; }
.brand p { margin: 0; color: var(--fg-dim); font-size: 14px; line-height: 1.65; }
.brand .go { margin-top: 16px; font-size: 13px; color: var(--fg); display: inline-flex; align-items: center; gap: 6px; }

/* ── 와이너리 목록 ────────────────────────── */
.wineries { display: grid; gap: 10px; }
.winery {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2); padding: 16px 18px;
}
.winery .t { flex: 1; min-width: 0; }
.winery .ko { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.winery .en { font-size: 11px; letter-spacing: .1em; color: var(--fg-faint); }
.winery .n { font-size: 12px; color: var(--gold); white-space: nowrap; }

/* ── 와인 그리드 ──────────────────────────── */
.wines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .wines { grid-template-columns: repeat(3, 1fr); } }

.wine { display: block; }
.wine .shot {
  background: var(--card); border-radius: 12px;
  aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 9px;
}
/* 원본 해상도가 제각각이므로 높이를 고정해 병 크기를 통일한다 */
.wine .shot img { height: 88%; width: auto; max-width: 82%; object-fit: contain; }
.wine .shot.empty { color: #b9b3aa; font-size: 11px; letter-spacing: .1em; }
.wine .ko { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.wine .meta { font-size: 11.5px; color: var(--fg-faint); margin-top: 3px; }

/* 시리즈 구분 */
.series { margin: 30px 0 14px; }
.series h3 { margin: 0 0 6px; font-size: 15px; color: var(--gold); }
.series p { margin: 0; font-size: 13.5px; color: var(--fg-dim); }

/* ── 와인 상세 ────────────────────────────── */
.detail-shot {
  background: var(--card); border-radius: var(--r);
  padding: 26px; display: flex; justify-content: center; margin-bottom: 24px;
}
/* 높이 고정 → 어떤 원본이 와도 병이 같은 크기로 보인다 */
.detail-shot img { height: 46vh; max-height: 420px; width: auto; max-width: 100%; object-fit: contain; }
.detail-shot.empty { color: #b9b3aa; font-size: 12px; padding: 60px 26px; }

.title { margin-bottom: 26px; }
.title h1 { font-size: 25px; line-height: 1.3; margin: 0 0 6px; letter-spacing: -.01em; }
.title .en { font-size: 12px; letter-spacing: .12em; color: var(--gold); }
.title .where { font-size: 13px; color: var(--fg-dim); margin-top: 8px; }

article h3 {
  font-size: 12px; letter-spacing: .16em; color: var(--fg-faint);
  margin: 30px 0 10px; text-transform: uppercase;
}
article p { margin: 0 0 13px; font-size: 15px; color: #ddd8d0; }
article p:last-child { margin-bottom: 0; }
article .lead p { color: var(--fg); font-size: 16px; }

/* 제원 표 */
.specs { border-top: 1px solid var(--line); margin-top: 30px; }
.specs .row {
  display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.specs .k { color: var(--fg-faint); flex: 0 0 88px; }
.specs .v { flex: 1; color: #ddd8d0; }

.ratings { margin-top: 22px; padding: 16px 18px; background: var(--bg-2); border-radius: 12px; }
.ratings .k { font-size: 11px; letter-spacing: .16em; color: var(--fg-faint); display: block; margin-bottom: 7px; }
.ratings .v { font-size: 13.5px; color: var(--gold); line-height: 1.7; }

/* 문의 유도 */
.cta { margin: 34px 0 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.cta p { margin: 0 0 14px; font-size: 14px; color: var(--fg-dim); }
.cta .btns { display: grid; gap: 9px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
  border: 1px solid var(--line); color: var(--fg);
}
.btn.primary { background: var(--gold); color: #1a1500; border-color: var(--gold); }

/* 이전/다음 */
.pager { display: flex; gap: 10px; margin-top: 34px; }
.pager a {
  flex: 1; padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-2); font-size: 13px; min-width: 0;
}
.pager .lab { display: block; font-size: 10.5px; letter-spacing: .14em; color: var(--fg-faint); margin-bottom: 4px; }
.pager .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pager .next { text-align: right; }

/* ── 푸터 ─────────────────────────────────── */
footer {
  margin-top: 56px; border-top: 1px solid var(--line);
  padding: 34px 0 46px; font-size: 13px; color: var(--fg-dim);
}
footer .brandline { color: var(--fg); font-weight: 600; margin-bottom: 4px; }
footer .row { margin-bottom: 16px; }
footer a { color: var(--fg-dim); }
footer .links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
footer .fine { margin-top: 22px; font-size: 11.5px; color: var(--fg-faint); line-height: 1.7; }

/* 접근성 */
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto; } }