/* Clinova 공개 정적 페이지(제품 소개 · 에이전트 · 사례 · 가이드 · 허브) 공통 스타일 — 2026-10-31.
   기준 = client/src/components/landing/DESIGN.md(값은 홈 landing-v6.css 와 같다). 모든 규칙은 body.s 아래에만 쓴다.
   ★nginx 가 .css 에 30일 immutable 캐시를 붙인다 → 페이지는 /site/site.css?v=<md5 10자> 로 부른다.
     이 파일을 고치면 `node client/scripts/render-site-pages.cjs` 와 `node client/scripts/render-clinova-case-study.cjs` 를 다시 돌려 v 값을 바꾼다. */
@font-face { font-family: 'Paperlogy'; font-weight: 600; font-style: normal; font-display: swap; src: url(/landing/fonts/Paperlogy-6SemiBold.woff2) format('woff2'); }
html:has(body.s) { background: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) { html:has(body.s) { scroll-behavior: smooth; } }
.s { --ink: #16191E; --ink2: #4A515C; --ink3: #6B7482; --hair: rgba(20,24,31,.12); --hair2: rgba(20,24,31,.07); --paper: #FFFFFF; --soft: #F1F0ED; --navy: #0B2432; --navy-ink: #B9C4CD; --acc: #8A3A23; --sans: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Segoe UI', system-ui, sans-serif; --display: 'Paperlogy', var(--sans); }
.s { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.7 var(--sans); word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.s *, .s *::before, .s *::after { box-sizing: border-box; }
.s :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.s [hidden] { display: none !important; }
.s img, .s video { max-width: 100%; }
.s [id] { scroll-margin-top: 80px; }
.s .s-skip { position: fixed; top: -100px; left: 20px; z-index: 100; background: var(--paper); padding: 12px 20px; color: var(--ink); border: 1px solid var(--ink); border-radius: 12px; text-decoration: none; }
.s .s-skip:focus { top: 12px; }
.s .s-wrap { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }

/* 링크 · 단추 — 홈 .l6-link · .l6-btn 과 같은 꼴 */
.s a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.s a:hover { color: #000; }
.s .s-btn, .s .button { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px; border-radius: 12px; border: 1px solid var(--hair); background: var(--paper); color: var(--ink); font: 600 16px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.s .s-btn.s-pri, .s .button { background: var(--ink); border-color: var(--ink); color: #fff; }
.s .s-btn.s-pri:hover, .s .button:hover { background: #000; border-color: #000; color: #fff; }
.s .s-btn.s-sm { height: 40px; padding: 0 16px; font-size: 14px; }

/* 머리줄 — 홈 .l6-nav 와 같은 꼴(메뉴 4 + 시연 신청 · 1080px 이하는 펼침 메뉴) */
.s .s-nav { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--hair); }
.s .s-nav-in { height: 64px; display: flex; align-items: center; gap: 36px; }
.s .s-brand { display: flex; text-decoration: none; }
.s .s-brand img { height: 28px; width: auto; display: block; }
.s .s-menu { display: flex; gap: 28px; }
.s .s-menu a { font: 500 15px/1 var(--sans); color: var(--ink2); text-decoration: none; }
.s .s-menu a:hover { color: var(--ink); }
.s .s-r { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.s .s-mnav { display: none; }
.s .s-mnav summary { list-style: none; width: 40px; height: 40px; padding: 8px; cursor: pointer; }
.s .s-mnav summary::-webkit-details-marker { display: none; }
.s .s-mnav summary span { display: block; height: 1.5px; background: var(--ink); margin: 5px 0; }
.s .s-mnav nav { position: absolute; left: 0; right: 0; top: 64px; display: flex; flex-direction: column; padding: 8px 24px 16px; background: var(--paper); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.s .s-mnav nav a { padding: 14px 0; font: 500 17px/1.4 var(--sans); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair2); }

/* 본문 칸 — 폭 760 · 제목 Paperlogy · 본문 Pretendard 17/1.7 */
.s main.wrap { width: min(760px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 96px; }
.s .crumb { font-size: 14px; line-height: 1.5; color: var(--ink3); }
.s .crumb a { color: var(--ink3); text-decoration-color: var(--hair); }
.s .crumb a:hover { color: var(--ink); text-decoration-color: var(--acc); }
.s .crumb .sep { margin: 0 6px; }
.s article { margin-top: 28px; }
.s h1 { margin: 0; font: 600 44px/1.18 var(--display); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.s .lead { margin: 20px 0 0; font-size: 20px; line-height: 1.6; color: var(--ink2); }
.s .byline { margin: 18px 0 0; padding-bottom: 24px; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.6; color: var(--ink3); }
.s h2 { margin: 56px 0 12px; font: 600 24px/1.3 var(--display); color: var(--ink); }
.s h3 { margin: 28px 0 6px; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.s p { margin: 12px 0; color: var(--ink2); }
.s strong, .s b { color: var(--ink); font-weight: 600; }
.s ul, .s ol { margin: 12px 0; padding-left: 22px; color: var(--ink2); }
.s li { margin: 6px 0; }
.s .nw { white-space: nowrap; }

/* 표 — 줄은 옅은 선 · 머리 14/600 · 바깥 상자 없음 */
.s .tableWrap { overflow-x: auto; margin: 20px 0; }
.s table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.s th { text-align: left; vertical-align: bottom; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair); font-size: 14px; font-weight: 600; color: var(--ink3); white-space: nowrap; }
.s td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hair2); color: var(--ink2); vertical-align: top; }
.s .summary tr:first-child th, .s .summary tr:first-child td { border-top: 1px solid var(--ink); }
.s .summary th { width: 7.5em; padding-top: 12px; vertical-align: top; border-bottom: 1px solid var(--hair2); color: var(--ink); white-space: normal; }

/* 그림 · 차트 재현 — 실제 화면은 hair 테두리 · 모서리 12 · 차트 글은 Pretendard(고정폭 아님) */
.s figure { margin: 24px 0; }
.s figure img, .s figure video { display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 12px; background: #fff; }
.s figure.narrow img { max-width: 360px; margin: 0 auto; }
.s figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink3); }
.s .chart { margin: 20px 0; padding: 16px 20px; overflow-x: auto; border: 1px solid var(--hair); border-radius: 12px; }
.s .chart dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; margin: 0; font-size: 15px; line-height: 1.65; }
.s .chart dt { font-weight: 600; color: var(--ink); white-space: nowrap; }
.s .chart dd { margin: 0; color: var(--ink); }
.s .chart dd.ex { color: var(--ink3); }
.s .about { margin-top: 24px; padding: 16px 20px; border: 1px solid var(--hair); border-radius: 12px; }
.s .about p { margin: 0; font-size: 15px; }

/* 자주 묻는 질문 — 홈 .l6-faq 와 같은 꼴 */
.s .faq details { border-top: 1px solid var(--hair); }
.s .faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.s .faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font: 600 17px/1.45 var(--sans); color: var(--ink); cursor: pointer; }
.s .faq summary::-webkit-details-marker { display: none; }
.s .faq summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-right: 1.5px solid var(--ink3); border-bottom: 1.5px solid var(--ink3); transform: translateY(-3px) rotate(45deg); }
.s .faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.s .faq details p { margin: 0 0 18px; font-size: 16px; }

/* 신청 — 본문 중간 한 줄 · 끝 카드(잉크 위선 + 검정 단추) */
.s .s-mid { margin: 40px 0; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-size: 16px; }
.s .s-mid a { font-weight: 600; }
.s .cta { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--ink); }
.s .cta p { margin: 8px 0; }
.s .cta h2 { margin-top: 0; }
.s .cta .s-actions, .s .cta .button { margin-top: 20px; }

/* 관련 글 · 출처 */
.s .related { margin-top: 56px; border-top: 1px solid var(--hair); }
.s .related h2 { margin-top: 24px; font-size: 20px; }
.s .related ul { padding-left: 20px; }
.s .sources { margin-top: 40px; font-size: 13.5px; line-height: 1.6; color: var(--ink3); }
.s .sources ul { padding-left: 18px; color: var(--ink3); }
.s .sources a { color: var(--ink3); text-decoration-color: var(--hair); }

/* 사례 페이지(생성기 render-clinova-case-study.cjs) 조각 */
.s .intro { margin-top: 32px; padding: 20px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.s article > header + .intro { margin-top: 0; border-top: 0; }   /* 머리글 아래 선(.byline)과 두 줄로 겹치지 않게 */
.s .intro p { margin: 0; }
.s .intro p + p { margin-top: 12px; }
.s .timeline { list-style: none; padding: 0; margin: 24px 0 0; }
.s .stage { margin: 0; padding: 28px 0; border-top: 1px solid var(--hair); }
.s .stage h3 { margin: 4px 0 16px; font-size: 20px; }
.s .day { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink3); }
.s .context { font-size: 15px; }
.s .quote { margin: 16px 0 0; }   /* 상자 없이 글로 — DESIGN.md 합격선(테두리 둥근 상자 3 이하) */
.s .quote blockquote { margin: 0; font-size: 18px; line-height: 1.7; color: var(--ink); }
.s .quote blockquote p { margin: 0; color: var(--ink); }
.s .flow { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.s .flow li { margin: 0; padding-top: 10px; border-top: 2px solid var(--ink); }
.s .flow strong { display: block; font-size: 16px; }
.s .flow span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink2); }
.s .notes li { margin: 10px 0; }

/* 허브(목록) 페이지 */
.s .s-list { list-style: none; padding: 0; margin: 32px 0 0; border-top: 1px solid var(--ink); }
.s .s-list li { margin: 0; padding: 24px 0; border-bottom: 1px solid var(--hair2); }
.s .s-list h2 { margin: 0; font-size: 22px; line-height: 1.35; }
.s .s-list h2 a { color: var(--ink); text-decoration: none; }
.s .s-list h2 a:hover { text-decoration: underline; text-decoration-color: var(--acc); }
.s .s-list p { margin: 8px 0 0; font-size: 16px; }
.s .s-list .s-tag { margin-left: 8px; font: 600 13px/1 var(--sans); color: var(--ink3); white-space: nowrap; }

/* 바닥글 — 홈 .l6-ft 와 같은 꼴(남색 한 곳) */
.s .s-ft { background: var(--navy); color: #fff; padding: 56px 0; }
.s .s-ft .s-wrap { display: grid; grid-template-columns: 6fr 3fr 3fr; gap: 48px; }
.s .s-ft img { height: 26px; width: auto; display: block; }
.s .s-ft p { margin: 16px 0 0; font-size: 14px; line-height: 1.8; color: var(--navy-ink); }
.s .s-ft h3 { margin: 0 0 8px; font: 600 14px/1.5 var(--sans); color: #fff; }
.s .s-ft nav { display: flex; flex-direction: column; gap: 6px; }
.s .s-ft nav a { font-size: 14px; color: var(--navy-ink); text-decoration: none; }
.s .s-ft nav a:hover { color: #fff; }
.s .s-ft .s-copy { grid-column: 1 / -1; margin-top: 8px; font-size: 13.5px; color: var(--navy-ink); }

/* 휴대폰 하단 막대 — 홈 .l6-mcta 와 같은 꼴(site.js 가 제목이 지나간 뒤 보이게 한다) */
.s .s-mcta { display: none; }

@media (max-width: 1080px) {
  .s .s-menu { display: none; }
  .s .s-mnav { display: block; }
  .s .s-ft .s-wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .s { font-size: 16px; }
  .s .s-wrap, .s main.wrap { width: calc(100% - 32px); }
  .s main.wrap { padding: 20px 0 72px; }
  .s .s-mnav nav { padding: 8px 16px 16px; }
  .s h1 { font-size: 30px; }
  .s .lead { font-size: 17px; }
  .s h2 { margin-top: 44px; font-size: 22px; }
  .s .s-list h2 { font-size: 20px; }
  .s .flow { grid-template-columns: minmax(0, 1fr); }
  .s .quote blockquote { font-size: 17px; }
  .s .s-ft .s-wrap { grid-template-columns: 1fr; gap: 24px; }
  .s .s-ft { padding-bottom: 120px; }
  .s .s-mcta:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--hair); }
  .s .s-mcta .s-btn { flex: 1; height: 46px; }
}