/* 검색 유입용 정적 페이지 공통 스타일 (scripts/seo/build.mjs가 생성하는 페이지들이 쓴다).
   앱 번들(Tailwind)을 싣지 않고 가볍게 뜨도록 따로 둔다. 색은 앱과 같다. */
:root {
  --primary: #5b52ff;
  --primary-ink: #3b33d1;
  --green: #22c55e;
  --amber: #f59e0b;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #ffffff;
  --soft: #f9fafb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f3f4f6;
    --muted: #9ca3af;
    --line: #2d3240;
    --bg: #12141a;
    --soft: #1a1d25;
    --primary-ink: #a8a2ff;
  }
}
/* 본문 글꼴: 바꿔 끼우지 않는다(scripts/seo/build.mjs의 FONT_URL 설명 참고, 주소를 같게 둘 것) */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: optional;
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', sans-serif;
  line-height: 1.7;
  word-break: keep-all;
}
a { color: var(--primary-ink); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
header.top { border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.lang { font-size: 13px; color: var(--muted); }
.top-nav { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.top-nav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.top-nav a:hover { color: var(--ink); }
.top-nav a.top-cta { background: var(--primary); color: #fff; font-weight: 700; padding: 7px 12px; border-radius: 10px; }
.top-nav a.top-cta:hover { filter: brightness(1.05); color: #fff; }
@media (max-width: 380px) { .top-nav { gap: 10px; font-size: 13px; } }
main { padding: 40px 0 56px; }
.eyebrow { font-size: 13px; font-weight: 700; color: var(--primary); letter-spacing: .02em; margin: 0 0 8px; }
h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.25; margin: 0 0 16px; letter-spacing: -0.02em; }
h2 { font-size: 22px; margin: 44px 0 12px; letter-spacing: -0.01em; }
h3 { font-size: 17px; margin: 24px 0 6px; }
p.lead { font-size: 18px; color: var(--muted); margin: 0 0 24px; }
.cta { display: inline-block; background: var(--primary); color: #fff; text-decoration: none; font-weight: 700; padding: 14px 22px; border-radius: 12px; }
.cta:hover { filter: brightness(1.05); }
.cta-note { font-size: 13px; color: var(--muted); margin-top: 8px; }
.heat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; max-width: 320px; margin: 28px 0 8px; }
.heat span { height: 22px; border-radius: 4px; background: var(--soft); }
.heat .h1 { background: #c8f0d6; } .heat .h2 { background: #8fe0ad; } .heat .h3 { background: #4ccf7c; } .heat .h4 { background: var(--green); }
.heat .a2 { background: #f8d48f; }
.heat-cap { font-size: 12px; color: var(--muted); margin: 0; }
ul.points { padding-left: 1.2em; }
ul.points li { margin: 6px 0; }
.table-wrap { overflow-x: auto; margin: 12px 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 420px; }
th, td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; vertical-align: top; }
th { font-size: 13px; color: var(--muted); font-weight: 600; }
td.y { color: #16a34a; font-weight: 700; }
td.n { color: var(--muted); }
td.p { color: #b45309; }
.asof { font-size: 12px; color: var(--muted); }
details { border-bottom: 1px solid var(--line); padding: 12px 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 8px 0 0; color: var(--muted); }
.box { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin: 28px 0; }
footer.bottom { border-top: 1px solid var(--line); padding: 24px 0 40px; font-size: 14px; color: var(--muted); }
footer.bottom ul { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
/* 블로그 */
.post-meta { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
article.post h2 { margin-top: 36px; }
article.post p { margin: 12px 0; }
ol.points { padding-left: 1.4em; }
ol.points li { margin: 6px 0; }
.tip { background: var(--soft); border-left: 3px solid var(--primary); border-radius: 8px; padding: 12px 14px; margin: 16px 0; color: var(--ink); }
.eyebrow a { color: inherit; text-decoration: none; }
ul.post-list { list-style: none; padding: 0; margin: 28px 0 0; }
ul.post-list li { border-top: 1px solid var(--line); }
ul.post-list a { display: block; padding: 18px 0; color: var(--ink); text-decoration: none; }
ul.post-list strong { display: block; font-size: 18px; margin: 2px 0 4px; }
ul.post-list span { display: block; color: var(--muted); font-size: 15px; }
ul.post-list .post-meta { margin: 0; font-size: 13px; }
/* 블로그: 흐름도·대화·화면 캡처 */
ol.flow { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 22px; }
ol.flow li { position: relative; background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 14px 60px; }
ol.flow li:not(:last-child)::after { content: ''; position: absolute; left: 31px; bottom: -22px; width: 2px; height: 22px; background: var(--primary); opacity: .5; }
.flow-no { position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.flow-t { display: block; font-weight: 700; }
.flow-d { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
figure.chat { margin: 24px 0; padding: 16px; border-radius: 16px; background: #e9edf2; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 78%; align-self: flex-start; }
.bubble .who { display: block; font-size: 12px; color: #6b7280; margin: 0 0 3px 4px; }
.bubble .said { display: inline-block; background: #fff; color: #111827; border-radius: 4px 16px 16px 16px; padding: 9px 13px; font-size: 15px; line-height: 1.5; }
.bubble.me { align-self: flex-end; }
.bubble.me .said { background: #5b52ff; color: #fff; border-radius: 16px 4px 16px 16px; }
figure.chat figcaption, figure.shot figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 4px; }
@media (prefers-color-scheme: dark) { figure.chat { background: #1f232c; } .bubble .said { background: #2a2f3a; color: #f3f4f6; } }
figure.shot { margin: 24px 0; }
figure.shot img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
figure.shot:not([class*="device-"]) img { border-radius: 14px; border: 1px solid var(--line); }
/* 기기 프레임 캡처: 그림 자체에 그림자 여백이 있어 테두리를 두지 않는다. 휴대폰은 실제 폰보다 조금 작게 */
figure.device-phone img { width: 100%; max-width: 360px; }
figure.device-tablet img { width: 100%; max-width: 600px; }
figure.device-tablet-landscape img, figure.device-laptop img { width: 100%; }
figure.shot a { display: block; }
figure.shot figcaption { margin-top: 0; }
figure[class*="device-"] figcaption { position: relative; margin-top: -20px; } /* 그림자용 투명 여백만큼 당긴다 */
/* 큰 화면은 넓은 창에서 글 폭보다 조금 넓게 내보낸다(글자가 덜 작아진다) */
@media (min-width: 1000px) { figure.device-laptop, figure.device-tablet-landscape { margin-left: -100px; margin-right: -100px; } }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px; align-items: start; margin: 24px 0; }
.shots figure.shot { margin: 0; }