@charset "utf-8";
/* CSS Document */

/* 유빌라테 라인업 페이지 공통 CSS
   사용: hymns/202609_lineup.html, easter/2026_easter_lineup.html, xmas/2026_xmas_lineup.html
   페이지별로 다른 값(--paper-deep, --masthead-glow, 시리즈 제목 색 등)은 각 HTML의 <style>에서 덮어씁니다. */

:root{
  --paper:#fff;
  --paper-deep:#ECE3CE;      /* 페이지별로 덮어쓰기 */
  --masthead-glow:none;      /* 페이지별로 덮어쓰기 (radial-gradient) */
  --ink:#232019;
  --ink-soft:#5B5546;
  --gold:#B4842B;
  --navy:#1E3350;
  --rose:#8C3B3B;
  --line:#D9CDAD;
  --card-bg:#FFFDF8;
  --serif:'Noto Serif KR', serif;
  --sans:'Noto Sans KR', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-padding-top:24px;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 clamp(18px, 4vw, 48px);
}

/* ---------- Header ---------- */
header.masthead{
  border-bottom:1px solid var(--line);
  background:
    var(--masthead-glow),
    linear-gradient(180deg, var(--paper-deep), var(--paper));
}
.brandbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px clamp(18px,4vw,48px) 10px;
  max-width:1120px;
  margin:0 auto;
  font-family:var(--serif);
  font-size:clamp(13px,1.4vw,15px);
  letter-spacing:.02em;
}
.brandbar .mark{font-weight:600;}
.brandbar .since{color:var(--ink-soft); font-family:var(--sans); font-size:.85em;}

.hero{
  padding:clamp(28px,6vw,64px) clamp(18px,4vw,48px) clamp(40px,7vw,72px);
  max-width:1120px;
  margin:0 auto;
  text-align:left;
}
.hero .kicker{
  font-size:clamp(12px,1.4vw,14px);
  color:var(--rose);
  font-weight:500;
  margin:0 0 10px;
  letter-spacing:.02em;
}
.hero h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(30px,5vw,50px);
  line-height:1.28;
  margin:0 0 14px;
  color:var(--ink);
}
.hero p{
  font-size:clamp(15px,1.8vw,18px);
  color:var(--ink-soft);
  max-width:640px;
  margin:0;
}

/* ---------- Series section ---------- */
section.series{
  padding:clamp(30px,5vw,56px) 0;
  border-top:1px solid var(--line);
}
.series-head{
  display:flex;
  align-items:baseline;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:clamp(20px,3vw,32px);
}
.series-head h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(21px,2.6vw,28px);
  margin:0;
  white-space:nowrap;
}
.series-head .desc{
  color:var(--ink-soft);
  font-size:clamp(13px,1.5vw,15px);
}
.series.new .series-head h2{color:var(--rose);}
.series.all .series-head h2,
.series.best .series-head h2{color:var(--navy);}

/* ---------- Grid / Card ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:clamp(20px,3vw,34px);
}

.card{
  display:flex;
  flex-direction:column;
}
.card .cover{
  display:block;
  width:100%;
  aspect-ratio:500/670;
  object-fit:contain;
  background:transparent;
  margin-bottom:14px;
  transition:transform .18s ease;
}
.card a.coverlink{display:block;}
.card a.coverlink:hover .cover{transform:translateY(-3px);}

.card .label{font-family:var(--sans);}
.card .eyebrow{
  font-size:12px;
  color:var(--ink-soft);
  margin:0 0 4px;
}
.card h3{
  font-family:var(--serif);
  font-size:16.5px;
  font-weight:600;
  line-height:1.35;
  margin:0 0 4px;
}
.card h3 a{text-decoration:none;}
.card h3 a:hover{text-decoration:underline;}
.card .subtitle{
  font-size:13px;
  color:var(--ink-soft);
  margin:0 0 6px;
}
.card .byline{
  font-size:12px;
  color:var(--ink-soft);
  margin:0 0 10px;
}
.card .buy{
  display:inline-block;
  align-self:flex-start;
  font-size:12.5px;
  font-weight:500;
  color:var(--navy);
  border-bottom:1px solid currentColor;
  text-decoration:none;
  padding-bottom:1px;
}
.series.new .card .buy{color:var(--rose);}

/* 신간 카드 (기존 placeholder 클래스 유지: 제목 스타일만 남기고, 표지의 16px 안쪽 여백은 제거) */
.card.placeholder .cover{border-radius:4px;}
.card.placeholder h3{color:var(--ink-soft); font-weight:500;}

/* ---------- 상단 신간 표지 확대 ---------- */
/* 부활절/성탄절: '2026 신간' 섹션은 아래 목록(180px)보다 큰 240px 기준 그리드 */
.series.new .grid{
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
/* 성가곡집: 맨 위 신간(48집) 카드에 class="featured" 추가 → 2칸 차지, 표지 240px */
.card.featured{
  grid-column:span 2;
  flex-direction:row;
  align-items:flex-end;
  gap:clamp(16px,2.5vw,26px);
}
.card.featured .coverlink{flex:0 0 min(240px, 52%);}
.card.featured .label{flex:1; min-width:0;}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:clamp(28px,5vw,40px) 0 clamp(40px,6vw,56px);
  margin-top:clamp(20px,4vw,40px);
}
footer .foot-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  font-size:13px;
  color:var(--ink-soft);
}
footer a.home{
  font-family:var(--serif);
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  font-size:15px;
}
footer a.home:hover{color:var(--navy);}

/* ---------- Responsive ---------- */
@media (max-width:480px){
  .grid{grid-template-columns:repeat(2, 1fr);}
  .series-head{flex-direction:column; gap:4px;}
  /* 모바일: 신간은 1열로 두어 아래 목록(2열)보다 크게 */
  .series.new .grid{grid-template-columns:1fr;}
  .series.new .card{max-width:240px;}
  .card.featured{grid-column:1 / -1;}
}

@media (prefers-reduced-motion: reduce){
  .card a.coverlink:hover .cover{transform:none;}
}