/* 모미토 블로그 — 목록(blog.html) + SSR 상세(functions/blog/[slug].js) 공용 스타일 */
:root{
  --primary:#FF5A5A; --primary-deep:#E54848; --primary-soft:rgba(255,90,90,0.10); --on-primary:#FFFBF7;
  --sunshine-700:#FF8B5A; --sunshine-500:#FFA95A; --sunshine-300:#FFD45A;
  --cream:#FAF7F2; --cream-soft:#FFFEFC; --cream-deeper:#F5EFE6; --ink:#280905; --on-dark:#FFFBF7;
  --slate:rgba(40,9,5,0.82); --steel:#6B5550; --stone:rgba(40,9,5,0.40); --muted:rgba(40,9,5,0.30);
  --hairline:#EFE9E1; --hairline-soft:rgba(40,9,5,0.06); --hairline-strong:rgba(40,9,5,0.20);
  --font-kr:'Pretendard Variable','Manrope',ui-sans-serif,system-ui,sans-serif;
  --font-num:'Manrope','Pretendard Variable',ui-sans-serif,sans-serif;
  --el-card:rgba(40,9,5,0.06) 0px 4px 12px 0px;
  --el-inset-brand:rgba(255,255,255,0.25) 0px 0.5px 0px 0px inset, rgba(40,9,5,0.30) 0px 0px 0px 0.5px inset, rgba(255,90,90,0.20) 0px 6px 16px 0px;
  --flavor-stripe:linear-gradient(90deg,var(--primary) 0%,var(--sunshine-700) 33%,var(--sunshine-500) 66%,var(--sunshine-300) 100%);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-kr);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit}
.num{font-family:var(--font-num)}
.stripe{height:4px;width:100%;background:var(--flavor-stripe)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,32px)}

/* nav (matches home) */
.nav{position:sticky;top:0;z-index:30;background:rgba(250,247,242,0.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px clamp(20px,5vw,32px);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo img{height:26px;width:auto;display:block}
.nav-right{display:flex;align-items:center;gap:24px}
.navlink{font-size:15px;font-weight:500;color:var(--steel);text-decoration:none;transition:color .15s ease}
.navlink:hover{color:var(--ink)}
.navlink.active{color:var(--ink);font-weight:600}
.cta-primary{text-decoration:none;color:var(--on-primary);background:var(--primary);
  border-radius:12px;font-weight:600;box-shadow:var(--el-inset-brand);padding:11px 20px;font-size:15px;
  transition:transform .12s ease,background .15s ease;display:inline-block}
.cta-primary:hover{transform:translateY(-1px);background:var(--primary-deep)}

/* blog layout */
.blog{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,72px) clamp(20px,5vw,32px) clamp(56px,9vw,88px)}
.blog-head{margin-bottom:clamp(28px,5vw,44px)}
.eyebrow{font-size:14px;font-weight:700;color:var(--primary);letter-spacing:0.2px;margin:0 0 12px}
.blog-head h1{margin:0;font-size:clamp(28px,5.4vw,40px);line-height:1.16;letter-spacing:-1px;font-weight:700;color:var(--ink)}
.blog-head p{margin:14px 0 0;font-size:clamp(15px,1.8vw,17px);line-height:1.6;color:var(--steel)}

/* list */
.post-list{display:flex;flex-direction:column;gap:14px}
.post-card{display:block;text-decoration:none;background:var(--cream-soft);border:1px solid var(--hairline);
  border-radius:16px;padding:22px 24px;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--el-card);border-color:var(--hairline-strong)}
.post-card .date{font-family:var(--font-num);font-size:13px;font-weight:600;color:var(--stone);letter-spacing:0.2px}
.post-card h2{margin:6px 0 0;font-size:20px;line-height:1.3;letter-spacing:-0.4px;font-weight:600;color:var(--ink)}
.post-card .excerpt{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--slate);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* states */
.state{text-align:center;padding:clamp(48px,9vw,80px) 16px;border:1px dashed var(--hairline-strong);
  border-radius:20px;background:var(--cream-soft)}
.state .em{font-size:clamp(17px,2.4vw,19px);font-weight:600;color:var(--ink);margin:0}
.state .sub{font-size:14.5px;color:var(--steel);margin:8px 0 0;line-height:1.55}
.state .seg{display:inline-block;width:40px;height:6px;border-radius:9999px;background:var(--flavor-stripe);margin-bottom:18px}

/* detail */
.back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--steel);
  text-decoration:none;margin-bottom:22px}
.back:hover{color:var(--primary)}
.article .date{font-family:var(--font-num);font-size:13.5px;font-weight:600;color:var(--stone);letter-spacing:0.2px}
.article h1{margin:8px 0 0;font-size:clamp(26px,4.6vw,34px);line-height:1.2;letter-spacing:-0.8px;font-weight:700}
.article .body{margin-top:26px;font-size:16px;line-height:1.75;color:var(--slate)}
.article .body h2{font-size:22px;line-height:1.3;letter-spacing:-0.4px;color:var(--ink);margin:34px 0 12px;font-weight:600}
.article .body h3{font-size:18px;line-height:1.35;color:var(--ink);margin:28px 0 10px;font-weight:600}
.article .body h4{font-size:16px;color:var(--ink);margin:22px 0 8px;font-weight:600}
.article .body p{margin:0 0 16px}
.article .body ul,.article .body ol{margin:0 0 16px;padding-left:22px}
.article .body li{margin:0 0 6px}
.article .body a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.article .body code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.9em;
  background:var(--cream-deeper);border:1px solid var(--hairline);border-radius:6px;padding:1px 6px}
.article .body blockquote{margin:0 0 16px;padding:8px 16px;border-left:3px solid var(--primary);
  background:var(--cream-soft);border-radius:0 10px 10px 0;color:var(--ink)}
.article .body strong{font-weight:700;color:var(--ink)}

/* footer (matches home) */
.foot{border-top:1px solid var(--hairline);background:var(--cream)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:44px clamp(20px,5vw,32px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand img{height:24px;width:auto;display:block}
.foot-brand span{font-size:14px;color:var(--steel)}
.foot-links{display:flex;gap:18px;font-size:13px;color:var(--steel);flex-wrap:wrap}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--primary)}
.foot-copy{font-size:13px;color:var(--muted)}