/* ════════════════════════════════════════════════════════════
   희가옥 창업이야기 — 메인 페이지와 같은 디자인 토큰
   ════════════════════════════════════════════════════════════ */
:root{
  --ink:#15110D; --ink-2:#1E1813; --ink-3:#2A221B;
  --paper:#F8F4EC; --paper-2:#EFE7DA; --paper-3:#E0D4C0;
  --gold:#A8803F; --gold-2:#C9A165; --gold-lt:#E2C58F; --gold-tx:#7A5A26;
  --red:#A3281D; --red-hi:#BD3326;
  --text-2:#544B41; --mute:#6E655A;
  --line:rgba(21,17,13,.12);
  --serif:'Noto Serif KR','Nanum Myeongjo',serif;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Malgun Gothic',sans-serif;
  --hd:64px; --mbar:64px;
  --e:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.75;
  letter-spacing:-.02em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--mbar) + env(safe-area-inset-bottom));overflow-x:hidden}
@media(min-width:1024px){body{padding-bottom:0}}
img{max-width:100%;display:block}
a{color:inherit}
picture{display:contents}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:20px}
@media(min-width:768px){.wrap{padding-inline:32px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 헤더 ── */
.hd{position:sticky;top:0;z-index:90;background:rgba(21,17,13,.97);border-bottom:1px solid rgba(201,161,101,.22);backdrop-filter:blur(12px)}
.hd .wrap{display:flex;align-items:center;gap:24px;height:var(--hd)}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--paper);flex:none}
.logo b{font-family:var(--serif);font-weight:900;font-size:1.42rem;letter-spacing:.02em;line-height:1}
.logo span{font-family:var(--serif);font-weight:700;font-size:.7rem;letter-spacing:.2em;color:var(--gold-2)}
.gnb{display:none;gap:24px;margin-left:auto}
.gnb a{font-size:.9rem;font-weight:600;color:rgba(248,244,236,.76);text-decoration:none;transition:color .2s}
.gnb a:hover,.gnb a[aria-current]{color:var(--gold-lt)}
.hd-act{display:flex;align-items:center;gap:14px;margin-left:auto}
.hd-tel{display:none;align-items:center;gap:7px;color:var(--gold-lt);font-weight:800;font-size:1.02rem;text-decoration:none}
.hd-btn{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:3px;background:var(--red);color:#fff;font-weight:700;font-size:.86rem;text-decoration:none}
@media(min-width:768px){.hd-tel{display:inline-flex}}
@media(min-width:1024px){.gnb{display:flex}.hd-act{margin-left:8px}}

/* ── 경로 ── */
.crumb{padding-top:22px;font-size:.8rem;color:var(--mute)}
.crumb ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.crumb li+li::before{content:'›';margin-right:6px;color:var(--gold-2)}
.crumb a{color:var(--text-2);text-decoration:none}
.crumb a:hover{color:var(--gold-tx)}

/* ── 글 ── */
.post{max-width:760px;margin:0 auto;padding:26px 0 24px}
.post-k{display:inline-block;padding:6px 10px;border-radius:2px;background:var(--red);color:#fff;
  font:800 .72rem/1 var(--sans);letter-spacing:.1em;text-decoration:none}
.post h1{margin:16px 0 0;font-family:var(--serif);font-weight:900;font-size:clamp(1.75rem,5.6vw,2.55rem);line-height:1.36;letter-spacing:-.05em}
.post-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:16px;font-size:.82rem;color:var(--mute)}
.post-lead{margin:22px 0 0;font-size:1.08rem;line-height:1.85;color:var(--text-2)}
.post-hero{margin:30px 0 0;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:var(--paper-3)}
.post-hero img{width:100%;height:100%;object-fit:cover}
.toc{margin:32px 0 0;padding:22px 24px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold-2);border-radius:3px}
.toc b{font-size:.8rem;letter-spacing:.08em;color:var(--gold-tx)}
.toc ol{margin:10px 0 0;padding-left:20px;font-size:.95rem;line-height:1.95}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--red)}

.body{margin-top:8px;font-size:1.04rem;line-height:1.95;color:#2B241D}
.body h2{margin:56px 0 18px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--serif);font-weight:900;
  font-size:clamp(1.35rem,4.4vw,1.7rem);line-height:1.45;letter-spacing:-.045em;scroll-margin-top:calc(var(--hd) + 16px)}
.body h3{margin:30px 0 10px;font-weight:800;font-size:1.12rem;letter-spacing:-.03em}
.body p{margin:0 0 18px}
.body strong{color:var(--ink);background:linear-gradient(transparent 62%,rgba(226,197,143,.5) 62%)}
.body ul,.body ol{margin:0 0 22px;padding-left:22px}
.body li{margin-bottom:9px}
.body li b{color:var(--ink)}
.body figure{margin:32px 0}
.fig-img{aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--paper-3)}
.fig-img img{width:100%;height:100%;object-fit:cover}
.body figcaption{margin-top:10px;font-size:.84rem;line-height:1.6;color:var(--mute);text-align:center}
.tbl{margin:24px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid var(--line);border-radius:3px}
.tbl table{width:100%;min-width:520px;border-collapse:collapse;font-size:.92rem;line-height:1.7}
.tbl th{padding:12px 14px;background:var(--ink);color:var(--gold-lt);font-size:.84rem;font-weight:700;text-align:left;white-space:nowrap}
.tbl td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
.tbl td:first-child{font-weight:700;white-space:nowrap}
.note{margin:26px 0;padding:20px 22px;border-radius:3px;background:var(--paper-2);font-size:.97rem;line-height:1.85}
.note>b:first-child{display:block;margin-bottom:6px;font-size:.8rem;letter-spacing:.06em;color:var(--gold-tx)}
.check{padding-left:0!important;list-style:none}
.check li{position:relative;padding-left:32px}
.check li::before{content:'✓';position:absolute;left:0;top:4px;display:grid;place-items:center;width:21px;height:21px;
  border-radius:50%;background:var(--ink);color:var(--gold-lt);font-size:.7rem;font-weight:800}
.fine{margin:-6px 0 18px;font-size:.8rem!important;line-height:1.75!important;color:var(--mute)}

/* FAQ */
.faq{margin-top:10px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;padding:20px 36px 20px 0;cursor:pointer;list-style:none;font-family:var(--serif);font-weight:700;font-size:1.03rem;line-height:1.5;letter-spacing:-.04em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:15px;font:400 1.5rem var(--sans);color:var(--gold-tx)}
.faq details[open] summary::after{content:'−'}
.faq .a{padding:0 0 22px;font-size:.98rem;line-height:1.9;color:var(--text-2)}

/* 상담 유도 */
.cta{position:relative;overflow:hidden;margin:52px 0 0;padding:34px 26px;border-radius:6px;background:var(--ink);color:var(--paper)}
@media(min-width:768px){.cta{padding:40px 38px}}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 120% at 100% 0,rgba(226,197,143,.2),transparent 62%)}
.cta>*{position:relative}
.cta small{display:block;font:800 .7rem var(--sans);letter-spacing:.16em;color:var(--gold-lt)}
.cta-t{margin:10px 0 10px;font-family:var(--serif);font-weight:900;font-size:clamp(1.3rem,4.4vw,1.7rem);line-height:1.42;letter-spacing:-.045em}
.cta-t em{font-style:normal;color:var(--gold-lt)}
.cta p{margin:0;font-size:.95rem;line-height:1.8;color:rgba(248,244,236,.74)}
.cta-btns{display:grid;gap:10px;margin-top:22px}
@media(min-width:600px){.cta-btns{display:flex;flex-wrap:wrap}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:4px;
  font-weight:700;font-size:.98rem;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hi)}
.btn-line{border:1px solid rgba(248,244,236,.36);color:var(--paper)}
.btn-line:hover{border-color:var(--gold-lt);color:var(--gold-lt)}
.cta .fine{margin:14px 0 0;color:rgba(248,244,236,.6)}

/* 글 목록 카드 */
.rel{padding:60px 0 88px}
.rel-h{margin:0 0 22px;font-family:var(--serif);font-weight:900;font-size:1.45rem;letter-spacing:-.045em}
.cards{display:grid;gap:16px}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(3,1fr);gap:22px}}
.card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:4px;
  color:var(--ink);text-decoration:none;transition:transform .3s var(--e),box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(21,17,13,.45)}
.card-img{aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e)}
.card:hover .card-img img{transform:scale(1.04)}
.card-b{display:flex;flex:1;flex-direction:column;padding:20px 20px 22px}
.card-k{font:800 .7rem var(--sans);letter-spacing:.1em;color:var(--red)}
.card h3{margin:8px 0;font-family:var(--serif);font-weight:700;font-size:1.13rem;line-height:1.45;letter-spacing:-.04em}
.card p{flex:1;margin:0;font-size:.88rem;line-height:1.75;color:var(--text-2)}
.card-m{margin-top:14px;font-size:.76rem;color:var(--mute)}

/* 카테고리 머리 */
.cat-hero{position:relative;overflow:hidden;padding:72px 0 64px;background:var(--ink);color:var(--paper)}
.cat-hero .bg{position:absolute;inset:0}
.cat-hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.cat-hero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(95deg,rgba(21,17,13,.94),rgba(21,17,13,.6))}
.cat-hero .wrap{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font:700 .74rem/1 var(--sans);letter-spacing:.22em;color:var(--gold-2);text-transform:uppercase}
.eyebrow::before{content:'';width:18px;height:1px;background:currentColor}
.cat-hero h1{margin:0;font-family:var(--serif);font-weight:900;font-size:clamp(2.1rem,7vw,3.3rem);line-height:1.25;letter-spacing:-.05em}
.cat-hero p{max-width:36em;margin:18px 0 0;font-size:1.04rem;line-height:1.8;color:rgba(248,244,236,.74)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tags a{padding:6px 13px;border:1px solid rgba(226,197,143,.35);border-radius:100px;font-size:.8rem;font-weight:600;color:var(--gold-lt);text-decoration:none}
.tags a:hover{background:rgba(226,197,143,.12)}
.cat-list{padding:56px 0 24px}
.cat-cta{max-width:1180px;margin:0 auto;padding:0 0 88px}

/* ── 푸터 · 고정바 ── */
.ft{padding:52px 0 46px;background:#0E0B08;color:rgba(248,244,236,.64);font-size:.8rem;line-height:1.9}
.ft .logo{margin-bottom:18px}
.ft-row{display:flex;flex-wrap:wrap;gap:2px 20px}
.ft-row b{font-weight:600;color:rgba(248,244,236,.82)}
.ft-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 12px}
.ft-links a{color:rgba(248,244,236,.8);text-decoration:none;border-bottom:1px solid rgba(248,244,236,.25)}
.ft-legal{margin:8px 0 0;font-size:.72rem;color:rgba(248,244,236,.52)}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:grid;grid-template-columns:1fr 1.4fr;
  height:calc(var(--mbar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:var(--ink);border-top:1px solid rgba(201,161,101,.3)}
.mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:800;font-size:.92rem;text-decoration:none}
.mbar .t{color:var(--paper)}
.mbar .t small{font-size:.68rem;font-weight:600;color:var(--gold-lt)}
.mbar .c{background:var(--red);color:#fff}
.mbar .c small{font-size:.67rem;font-weight:600;color:rgba(255,255,255,.8)}
@media(min-width:1024px){.mbar{display:none}}