/* 플로우랩 블로그 전용. 토큰 값은 style.css :root와 같게(다르면 tools/build-blog.mjs가 알려 줌). 랜딩 연출 규칙은 가져오지 않는다 */
@font-face{font-family:"Pretendard Variable";font-weight:45 920;font-style:normal;font-display:swap;src:url("/assets/fonts/PretendardVariable.woff2") format("woff2-variations"),url("/assets/fonts/PretendardVariable.woff2") format("woff2")}
:root{
  --bg-dark:#0a0a0a;
  --grey-200:#e2e2e2;
  --grey-100:#f4f4f5;
  --grey-50:#f9f9f9;
  --ink:#141414;
  --ink-2:rgba(20,20,20,.62);
  --accent:#4553ff;
  --accent-2:#5a6bff;
  --accent-hover:#3340f0;
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --wrap:1200px;
}
/* 블로그 전용 밝은 색(피처링 느낌): 파랑→보라 그라데이션 + 파스텔 포인트 */
:root{
  --grad:linear-gradient(118deg,#3b45f5 0%,#4553ff 34%,#6d5dff 68%,#a48bff 100%);
  --grad-line:linear-gradient(180deg,#4553ff,#9b7bff);
  --tint:#f5f5ff;
  --mint:#7fe8cf; --lemon:#ffe17a; --peach:#ffb3d1; --lilac:#c9b8ff; --sky:#9fd2ff;
  --orb-glow:inset -6px -10px 18px rgba(40,20,120,.22),inset 6px 8px 14px rgba(255,255,255,.55),0 14px 30px rgba(30,20,110,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:#fff;color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:16px;line-height:1.6;letter-spacing:-.005em;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* 등장: 랜딩과 같은 값(0.7초, 24px 위로). 본문에는 쓰지 않음 */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}

/* 버튼: 랜딩 .btn 그대로 */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:12px;font-weight:600;font-size:16px;transition:background-color .35s var(--ease-soft),transform .35s var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn-sm{height:42px;padding:0 18px;font-size:14px;border-radius:10px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-white{background:#fff;color:var(--accent)}
.btn-white:hover{background:#eef0ff}
.btn-kakao{background:#fee500;color:#191919}
.btn-kakao:hover{background:#f5d800}

/* ── 헤더: 흰 바탕, 위에 붙어 따라옴 ── */
.bh{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(20,20,20,.06)}
.bh-in{max-width:1320px;margin:0 auto;height:72px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.bh-left{display:flex;align-items:center;gap:14px;min-width:0}
.bh-logo img{height:34px;width:auto;filter:invert(1)}
.bh-blog{font-size:15px;font-weight:600;color:var(--ink-2);padding:6px 0 6px 14px;border-left:1px solid var(--grey-200);line-height:1.2;white-space:nowrap}
.bh-blog:hover{color:var(--ink)}

/* ── 표지: 1200×630. 파랑→보라 바탕, 왼쪽에 흰 제목. 그림이 있으면 그림 위에 얹고, 없으면 오른쪽에 CSS 구슬 ── */
.cv{position:relative;aspect-ratio:1200/630;overflow:hidden;background:var(--grad);container-type:inline-size;isolation:isolate}
.cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 글씨 읽히게 왼쪽 그늘: 그림 있을 때 진하게, 없을 때 은은하게 */
.cv::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(24,20,110,.34) 0%,rgba(24,20,110,.16) 38%,rgba(24,20,110,0) 62%)}
.cv.has-img::after{background:none}
.cv-txt{position:absolute;z-index:2;left:6cqw;top:0;bottom:0;width:34cqw;display:flex;flex-direction:column;justify-content:center;gap:2.2cqw;color:#fff;text-shadow:0 1px 12px rgba(20,14,90,.25)}
.cv-sub{font-size:max(11px,2.3cqw);font-weight:600;letter-spacing:-.01em;opacity:.92}
.cv-title{font-size:max(15px,4.6cqw);font-weight:800;line-height:1.28;letter-spacing:-.04em}
@container (max-width:200px){.cv-txt{display:none}}
/* 구슬: 찰흙·젤리 느낌(빛 받는 면 + 아래 그림자) */
.cv-orbs{display:none} /* 대표 요청(10/7): 표지 구슬 빼기 */
.cv-orbs i,.cta-orbs i{position:absolute;display:block;border-radius:50%;box-shadow:var(--orb-glow)}
.cv-orbs .o1{width:30cqw;height:30cqw;right:8cqw;top:12cqw;background:radial-gradient(circle at 32% 28%,#fff 0,#d9ccff 22%,var(--lilac) 52%,#8f74ff 100%);opacity:.95}
.cv-orbs .o2{width:14cqw;height:14cqw;right:30cqw;top:4cqw;background:radial-gradient(circle at 34% 30%,#fff 0,#c9fff0 24%,var(--mint) 58%,#3fc7a6 100%)}
.cv-orbs .o3{width:11cqw;height:11cqw;right:5cqw;top:5cqw;background:radial-gradient(circle at 34% 30%,#fff 0,#fff3c4 24%,var(--lemon) 58%,#f2b631 100%)}
.cv-orbs .o4{width:17cqw;height:17cqw;right:27cqw;bottom:-3cqw;background:radial-gradient(circle at 34% 30%,#fff 0,#ffe0ee 24%,var(--peach) 58%,#f07aa9 100%)}
/* 젤리 알약 */
.cv-orbs .o5{width:20cqw;height:9cqw;right:-3cqw;bottom:5cqw;border-radius:99px;transform:rotate(-24deg);background:radial-gradient(70% 120% at 30% 20%,#fff 0,#d6ecff 26%,var(--sky) 60%,#5aa7f0 100%)}
.cv-set1 .o1{right:12cqw;top:6cqw;width:27cqw;height:27cqw}
.cv-set1 .o2{right:5cqw;top:30cqw;width:16cqw;height:16cqw}
.cv-set1 .o3{right:36cqw;top:8cqw}
.cv-set1 .o4{right:34cqw;bottom:-6cqw;width:15cqw;height:15cqw}
.cv-set1 .o5{right:2cqw;top:4cqw;bottom:auto;transform:rotate(28deg)}
.cv-set2 .o1{right:4cqw;top:-6cqw;width:24cqw;height:24cqw}
.cv-set2 .o2{right:16cqw;top:24cqw;width:19cqw;height:19cqw}
.cv-set2 .o3{right:36cqw;top:28cqw;width:9cqw;height:9cqw}
.cv-set2 .o4{right:-4cqw;bottom:-4cqw;width:16cqw;height:16cqw}
.cv-set2 .o5{right:30cqw;top:6cqw;bottom:auto;transform:rotate(-12deg)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}
.post-cover .cv-orbs .o1,.post-cover .cv-orbs .o3,.b-cta .cta-orbs .o1{animation:bob 6s ease-in-out infinite}
.post-cover .cv-orbs .o3{animation-delay:-2s}

/* 카테고리 알약 */
.b-pill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid rgba(69,83,255,.28);border-radius:999px;background:#fff;color:var(--accent);font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1}

/* ── 목록 ── */
.b-page{background:radial-gradient(70% 520px at 85% -120px,rgba(155,123,255,.16),rgba(155,123,255,0) 70%),radial-gradient(60% 480px at 5% -80px,rgba(69,83,255,.12),rgba(69,83,255,0) 70%),#fff;background-repeat:no-repeat}
.b-list{max-width:var(--wrap);margin:0 auto;padding:72px 24px 120px}
.b-hero{margin-bottom:56px}
.b-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;margin-bottom:16px;color:var(--accent);background:linear-gradient(90deg,#4553ff,#8a6bff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.b-hero h1{font-size:clamp(30px,3.8vw,46px);line-height:1.3;letter-spacing:-.035em;font-weight:800}
.b-feature a{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.b-feature .b-cover{border-radius:var(--r-lg);box-shadow:0 24px 60px -24px rgba(69,83,255,.45)}
.b-feature h2{margin-top:16px;font-size:clamp(24px,2.4vw,30px);line-height:1.4;letter-spacing:-.03em;font-weight:700}
.b-feature-txt>p{margin-top:14px;font-size:16px;line-height:1.7;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.b-feature time,.b-card time{display:block;margin-top:14px;font-size:14px;color:var(--ink-2)}
.b-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px;margin-top:64px}
.b-card .b-cover{border-radius:var(--r-lg);box-shadow:0 16px 40px -22px rgba(69,83,255,.5)}
.b-card-txt{padding-top:18px}
.b-card h3{margin-top:12px;font-size:19px;line-height:1.45;letter-spacing:-.025em;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.b-card-txt p{margin-top:8px;font-size:15px;line-height:1.65;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.b-cover img,.b-cover .cv-orbs{transition:transform .6s var(--ease-out)}
.b-feature a:hover .b-cover img,.b-card a:hover .b-cover img,.b-feature a:hover .cv-orbs,.b-card a:hover .cv-orbs{transform:scale(1.04)}
.b-feature a:hover h2,.b-card a:hover h3{color:var(--accent)}
.b-empty{color:var(--ink-2);padding:40px 0}
.pc{display:inline}

/* ── 문의 상자(목록·글 끝 공용): 랜딩 문의 영역처럼 검은 바탕, 가운데 정렬 ── */
.b-cta{position:relative;overflow:hidden;isolation:isolate;margin-top:96px;border-radius:var(--r-xl);padding:72px 40px;text-align:center;color:#fff;background:var(--grad)}
/* 가운데 글자 뒤 은은한 그늘(흰 글자 대비 확보) */
.b-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 50% 50%,rgba(24,20,110,.28),rgba(24,20,110,0) 75%)}
.cta-orbs{display:none} /* 대표 요청(10/7): 문의 상자 구슬도 빼기 */
.cta-orbs .o1{width:150px;height:150px;right:-40px;top:-50px;background:radial-gradient(circle at 32% 28%,#fff 0,#d9ccff 22%,var(--lilac) 52%,#8f74ff 100%)}
.cta-orbs .o2{width:64px;height:64px;right:110px;bottom:-22px;background:radial-gradient(circle at 34% 30%,#fff 0,#c9fff0 24%,var(--mint) 58%,#3fc7a6 100%)}
.cta-orbs .o3{width:46px;height:46px;left:56px;top:34px;background:radial-gradient(circle at 34% 30%,#fff 0,#fff3c4 24%,var(--lemon) 58%,#f2b631 100%)}
.cta-orbs .o4{width:110px;height:110px;left:-36px;bottom:-48px;background:radial-gradient(circle at 34% 30%,#fff 0,#ffe0ee 24%,var(--peach) 58%,#f07aa9 100%)}
.b-cta h2{font-size:clamp(28px,3.4vw,42px);line-height:1.25;letter-spacing:-.04em;font-weight:800}
.b-cta p{margin-top:16px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.92)}
.b-cta-btns{margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.b-cta-btns .btn{height:54px}

/* ── 글 ── */
.post{padding:56px 0 0}
.post-head{max-width:680px;margin:0 auto;padding:0 20px}
.post-back{display:block;width:max-content;font-size:14px;color:var(--ink-2);margin-bottom:28px}
.post-head .b-pill{margin-bottom:16px}
.post-back:hover{color:var(--ink)}
.post-head h1{font-size:clamp(28px,3.2vw,40px);line-height:1.35;letter-spacing:-.03em;font-weight:700}
.post-meta{margin-top:18px;font-size:14px;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.post-cover{max-width:640px;margin:40px auto 56px;border-radius:var(--r-lg);box-shadow:0 28px 70px -30px rgba(69,83,255,.5)}
.prose{max-width:680px;margin:0 auto;padding:0 20px;font-size:18px;line-height:1.8}
.prose p{margin:0 0 1.3em}
.prose h2{font-size:26px;line-height:1.4;letter-spacing:-.03em;font-weight:700;margin:64px 0 16px}
.prose h2::before{content:"";display:inline-block;width:10px;height:10px;margin-right:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a8b0ff,#4553ff 55%,#7b61ff);vertical-align:.2em}
.prose h3{font-size:20px;line-height:1.5;letter-spacing:-.02em;font-weight:700;margin:40px 0 12px}
.prose strong{font-weight:700}
.prose mark{background:linear-gradient(transparent 60%,rgba(69,83,255,.18) 60%);color:inherit}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{position:relative;margin:0 0 1.3em;padding:20px 24px 20px 28px;background:var(--tint);border-radius:0 12px 12px 0;font-size:17px}
.prose blockquote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px;background:var(--grad-line)}
.prose blockquote p{margin:0}
.prose ol,.prose ul{margin:0 0 1.3em;padding-left:1.4em}
.prose li{margin:.4em 0;padding-left:.2em}
.prose figure{margin:32px 0}
.prose figure img{border-radius:12px;width:100%}
.prose figcaption{margin-top:10px;font-size:13px;color:var(--ink-2);text-align:center}
.prose hr{border:0;border-top:1px solid var(--grey-200);margin:48px 0}
.post-end{max-width:908px;margin:0 auto;padding:0 24px 120px}
.post-end .b-cta{margin-top:80px}
.b-related{margin-top:96px}
.b-related>h2{font-size:22px;letter-spacing:-.03em;font-weight:700}
.b-related .b-grid{margin-top:24px;gap:28px 20px}
.b-related .b-card h3{font-size:17px}

/* ── 푸터: 랜딩 .foot와 같은 모양 ── */
.foot{background:var(--grey-50);color:var(--ink-2);padding:36px 0 56px;font-size:14px}
.foot-in{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.foot-logo{height:26px;width:auto;filter:invert(1)}
.foot-info{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.7}
.foot-info p{display:flex;flex-wrap:wrap}
.foot-info span:not(:last-child)::after{content:"";display:inline-block;width:1px;height:10px;margin:0 12px;background:currentColor;opacity:.35;vertical-align:-1px}
.foot-info a{text-decoration:underline;text-underline-offset:2px}
.foot-copy{font-size:13px}

/* 태블릿 */
@media (max-width:1024px){
  .b-feature a{grid-template-columns:1fr;gap:24px}
  .b-grid{grid-template-columns:repeat(2,1fr)}
}
/* 휴대폰 */
@media (max-width:767px){
  .wrap{padding:0 16px}
  .bh-in{height:60px;padding:0 16px;gap:10px}
  .bh-logo{display:block;padding:8px 0}
  .bh-logo img{height:28px}
  .bh-left{gap:10px}
  .bh-blog{font-size:14px;padding-left:10px}
  .btn-sm{height:44px}
  .pc{display:none}
  .b-list{padding:40px 16px 80px}
  .b-hero{margin-bottom:32px}
  .b-hero h1{font-size:26px}
  .b-feature a{gap:18px}
  .b-feature h2{font-size:21px;-webkit-line-clamp:3}
  .b-feature-txt>p{font-size:15px;-webkit-line-clamp:2}
  .b-feature time,.b-card time{font-size:13px}
  .b-grid{grid-template-columns:1fr;gap:36px;margin-top:44px}
  .b-card h3{-webkit-line-clamp:3}
  .b-cta{margin-top:64px;padding:48px 22px 44px;border-radius:24px}
  .b-cta::before{background:radial-gradient(130% 70% at 50% 45%,rgba(24,20,110,.34),rgba(24,20,110,.1) 100%)}
  .cta-orbs .o1{width:96px;height:96px;right:-30px;top:-34px}
  .cta-orbs .o3{left:18px;top:18px;width:30px;height:30px}
  .cta-orbs .o2{right:40px;bottom:-26px}
  .cta-orbs .o4{width:80px;height:80px;left:-34px;bottom:-40px}
  .b-cta p{font-size:15.5px}
  .b-cta-btns{flex-direction:column;align-items:stretch;margin-top:28px}
  .b-cta-btns .btn{width:100%;height:52px}
  .post{padding-top:32px}
  .post-back{margin-bottom:20px;font-size:13px}
  .post-head h1{font-size:26px}
  .post-meta{font-size:13px;margin-top:14px}
  .post-cover{margin:24px 20px 36px;border-radius:16px}
  .prose{font-size:17px;line-height:1.75}
  .prose p,.prose blockquote,.prose ol,.prose ul{margin-bottom:1.2em}
  .prose h2{font-size:22px;margin-top:48px}
  .prose h3{font-size:18px}
  .prose blockquote{font-size:16px;padding:16px 18px}
  .prose figure{margin:28px 0}
  .prose figure img{border-radius:12px}
  .post-end{padding:0 16px 80px}
  .post-end .b-cta{margin-top:56px}
  .b-related{margin-top:64px}
  /* 관련 글: 그림 왼쪽 작게 + 제목 오른쪽 */
  .b-related .b-grid{gap:20px}
  .b-related .b-card a{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}
  .b-related .b-card-txt{padding-top:0}
  .b-related .b-card-txt p{display:none}
  .b-related .b-card time{margin-top:6px}
  .foot{padding-bottom:40px}
  .foot-info p{flex-direction:column}
  .foot-info span::after{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
}