/* 꿀픽 디자인 시스템 — 에디토리얼 프리미엄.
   세리프 헤드라인(Noto Serif KR) + 산세리프 본문(Pretendard), 따뜻한 중성톤 + 절제된 앰버. */
:root{
  --serif:"Noto Serif KR", "Pretendard Variable", Pretendard, serif;
  --sans:"Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;

  --bg:#faf8f4;          /* 따뜻한 페이퍼 */
  --surface:#ffffff;
  --surface-2:#f5f0e8;   /* 은은한 면 */
  --ink:#1d1813;         /* 따뜻한 먹 */
  --ink-2:#6c6157;
  --ink-3:#9c9183;
  --line:#eae1d4;        /* 헤어라인 */
  --line-2:#e0d5c4;
  --accent:#bf7d18;      /* 절제된 앰버(캔디톤 X) */
  --accent-ink:#9a6310;
  --accent-soft:#f4ead8;
  --dark:#211a13;        /* 다크 섹션/푸터 */

  --r:16px; --r-lg:22px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(50,38,18,.05), 0 2px 8px rgba(50,38,18,.04);
  --sh-md:0 14px 40px -16px rgba(60,45,20,.22);
  --maxw:1000px; --read:780px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{ -webkit-text-size-adjust:100% }
body{
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--accent-soft) }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 28px }
.readcol{ max-width:var(--read); margin:0 auto }

/* ── 헤더/네비 ── */
.nav{ position:sticky; top:0; z-index:30; background:rgba(250,248,244,.82); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); }
.nav-in{ max-width:var(--maxw); margin:0 auto; padding:15px 28px; display:flex; align-items:center; gap:26px; }
.brandmark{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; letter-spacing:-.4px; color:var(--ink); }
.brandmark .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); display:inline-block; }
.nav .links{ margin-left:auto; display:flex; gap:26px; align-items:center; font-size:14.5px; font-weight:600; color:var(--ink-2); }
.nav .links a{ position:relative; padding:4px 0; transition:color .15s; }
.nav .links a:hover{ color:var(--ink) }
.nav .links a.cta{ background:var(--ink); color:#fff; padding:9px 16px; border-radius:var(--r-pill); font-weight:700; }
.nav .links a.cta:hover{ background:var(--accent-ink); color:#fff }
@media(max-width:560px){ .nav .links{ gap:16px } .nav .links a.cta{ padding:8px 13px } }

/* ── 타이포 ── */
.eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
h1,h2,h3,.serif{ font-family:var(--serif); font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.display{ font-family:var(--serif); font-weight:700; font-size:clamp(36px,6.2vw,60px); line-height:1.12; letter-spacing:-.025em; }
.lede{ font-size:clamp(16px,2.1vw,19px); color:var(--ink-2); line-height:1.7; }

/* ── 버튼 ── */
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:700; font-size:15px; padding:13px 24px; border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer; transition:transform .12s, background .15s, box-shadow .15s; }
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:var(--ink); color:#fff; box-shadow:var(--sh-sm); }
.btn-primary:hover{ background:var(--accent-ink) }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--surface) }

/* ── 섹션 ── */
.section{ padding:64px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:30px; }
.section-head h2{ font-size:clamp(24px,3.4vw,30px); line-height:1.2; }
.section-head .more{ font-size:14px; font-weight:600; color:var(--accent-ink); white-space:nowrap; }
.section-head .more:hover{ color:var(--ink) }
.rule{ height:1px; background:var(--line); border:0; }

/* ── 히어로 ── */
.hero{ padding:84px 0 60px; text-align:center; }
.hero .eyebrow{ display:inline-block; margin-bottom:20px; }
.hero .display{ max-width:14ch; margin:0 auto; }
.hero .lede{ max-width:50ch; margin:22px auto 0; }
.hero .actions{ margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── 책 카드 그리드 ── */
.book-grid{ display:grid; grid-template-columns:repeat(auto-fill,200px); justify-content:center; gap:24px 22px; }
.book{ display:block; }
.book .cover{ aspect-ratio:3/4; border-radius:var(--r); overflow:hidden; background:linear-gradient(155deg,#fbf2e0,#f1e2c6); box-shadow:var(--sh-sm); border:1px solid var(--line); transition:transform .18s, box-shadow .18s; }
.book:hover .cover{ transform:translateY(-5px); box-shadow:var(--sh-md) }
.book .cover img{ width:100%; height:100%; object-fit:cover }
.book .cover .noimg{ width:100%; height:100%; display:grid; place-items:center; font-family:var(--serif); font-size:30px; color:var(--accent) }
.book .bt{ font-family:var(--serif); font-weight:700; font-size:17px; line-height:1.34; margin-top:15px; color:var(--ink); }
.book .bs{ font-size:13px; color:var(--ink-2); margin-top:7px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── 블로그 글 목록 ── */
.post-list{ display:flex; flex-direction:column; }
.post{ display:flex; gap:20px; align-items:flex-start; padding:26px 0; border-top:1px solid var(--line); transition:padding-left .18s; }
.post:first-child{ border-top:0 }
.post:hover{ padding-left:8px }
.post .pth{ flex:0 0 168px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); }
.post .pth img{ width:100%; aspect-ratio:1216/640; object-fit:cover; }
.post .pbody{ flex:1; min-width:0 }
@media(max-width:560px){ .post{ gap:14px } .post .pth{ flex-basis:112px; border-radius:10px } }
.post .pt{ font-family:var(--serif); font-weight:700; font-size:clamp(19px,2.6vw,23px); line-height:1.32; color:var(--ink); }
.post .pd{ font-size:14.5px; color:var(--ink-2); margin-top:9px; line-height:1.6; max-width:62ch; }
.post .pm{ font-size:12.5px; color:var(--ink-3); margin-top:11px; letter-spacing:.02em; }

/* ── 구독 블록 ── */
.subscribe{ background:var(--dark); color:#f4ede2; border-radius:var(--r-lg); padding:54px 30px; text-align:center; }
.subscribe h2{ color:#fff; font-size:clamp(24px,3.6vw,32px); }
.subscribe p{ color:#cdbfa9; max-width:46ch; margin:14px auto 0; font-size:15px; line-height:1.65; }
.subscribe form{ max-width:430px; margin:26px auto 0; display:flex; flex-direction:column; gap:11px; }
.subscribe input[type=email]{ width:100%; border:1px solid #4a3f30; border-radius:12px; padding:15px 16px; font-family:inherit; font-size:15px; background:#2c241a; color:#fff; }
.subscribe input[type=email]::placeholder{ color:#8c7f6c }
.subscribe input[type=email]:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(191,125,24,.25) }
.subscribe .btn-primary{ background:var(--accent); color:#231a10 }
.subscribe .btn-primary:hover{ background:#d8902a }
.subscribe .optin{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:#b6a890; line-height:1.55; text-align:left; cursor:pointer; }
.subscribe .optin input{ margin-top:2px; width:16px; height:16px; flex:none; accent-color:var(--accent) }
.subscribe .msg{ font-size:13px; font-weight:600; min-height:16px; }
.subscribe .msg.err{ color:#f0a58e } .subscribe .msg.ok{ color:#bfe6b0 }
.subscribe .fine{ font-size:11.5px; color:#897c69; margin-top:2px; }

/* ── 가치 3분할 ── */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.values .v{ background:var(--surface); padding:30px 26px; }
.values .v .vi{ width:34px; height:34px; color:var(--accent-ink); }
.values .v h3{ font-size:17px; margin-top:14px; }
.values .v p{ font-size:13.5px; color:var(--ink-2); margin-top:8px; line-height:1.6; }
@media(max-width:680px){ .values{ grid-template-columns:1fr } }

/* ── 페이지 머리(서재·블로그 목록) ── */
.pagehead{ padding:60px 0 14px; }
.pagehead h1{ font-size:clamp(32px,5vw,46px); line-height:1.12; }
.pagehead p{ margin-top:16px; color:var(--ink-2); font-size:16px; max-width:54ch; }

/* ── 푸터 ── */
.footer{ background:var(--dark); color:#cdbfa9; margin-top:80px; }
.footer-in{ max-width:var(--maxw); margin:0 auto; padding:46px 28px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.footer .brandmark{ color:#fff }
.footer .brandmark .dot{ box-shadow:0 0 0 4px rgba(191,125,24,.25) }
.footer .fl{ margin-left:auto; display:flex; gap:22px; font-size:14px; }
.footer .fl a{ color:#cdbfa9 } .footer .fl a:hover{ color:#fff }
.footer .copy{ width:100%; font-size:12px; color:#897c69; border-top:1px solid #3a3024; padding-top:18px; margin-top:6px; }

/* ── 아티클(블로그 글) ── */
.article{ max-width:720px; margin:0 auto; padding:40px 28px 30px; }
.article .crumb{ font-size:13px; font-weight:600; color:var(--accent-ink); }
.article h1{ font-size:clamp(30px,5vw,42px); line-height:1.2; margin:16px 0 0; letter-spacing:-.02em; }
.article .art-hero{ margin:22px 0 4px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-sm); }
.article .art-hero img{ width:100%; height:auto; aspect-ratio:1216/640; object-fit:cover; }
.article .lede{ margin:18px 0 6px; font-size:18px; }
.article .lede p{ margin:12px 0 }
.article section{ margin-top:34px }
.article h2{ font-size:clamp(22px,3.2vw,27px); line-height:1.25; margin-bottom:12px; }
.article h3{ font-size:19px; color:var(--accent-ink); margin:22px 0 8px; font-family:var(--sans); font-weight:800; }
.article p{ margin:15px 0; font-size:17px; line-height:1.85; color:#2c251d; }
.article ul{ margin:15px 0; padding-left:2px; list-style:none; display:flex; flex-direction:column; gap:9px }
.article li{ position:relative; padding-left:22px; font-size:16.5px; line-height:1.7 }
.article li::before{ content:""; position:absolute; left:3px; top:11px; width:7px; height:7px; background:var(--accent); border-radius:2px; transform:rotate(45deg) }
.article strong{ font-weight:800; box-shadow:inset 0 -.5em 0 var(--accent-soft) }
.article .cta-box{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:24px; margin:34px 0; box-shadow:var(--sh-sm); }
.article .cta-box .t{ font-family:var(--serif); font-weight:700; font-size:18px; }
.article .cta-box .d{ font-size:14.5px; color:var(--ink-2); margin:8px 0 16px; line-height:1.55 }
.article .cta-box .row{ display:flex; gap:10px; flex-wrap:wrap }
.article .faq{ margin-top:40px }
.article .faq .qa{ border-top:1px solid var(--line); padding:18px 0 }
.article .faq .q{ font-family:var(--serif); font-weight:700; font-size:17px }
.article .faq .a{ color:var(--ink-2); margin-top:7px }
.article .art-foot{ margin-top:44px; padding-top:20px; border-top:1px solid var(--line); display:flex; gap:18px; font-size:14px; font-weight:600 }
.article .art-foot a{ color:var(--accent-ink) }

@media(max-width:560px){ .section{ padding:48px 0 } .hero{ padding:54px 0 40px } .container{ padding:0 20px } .book-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px } }