/* Deep AI blog — shared styles (ribbon theme) */
:root{
  --paper:#07070b;--paper-2:#0e0e15;--card:#111119;--card-2:#15151f;
  --ink:#efedf5;--ink-soft:#bcb8c9;--head:#f7f5fb;--muted:#8b879b;
  --line:rgba(239,237,245,.12);--accent:#ff3a52;--accent-2:#a487ff;--accent-ink:#fff;
  --grad-text:linear-gradient(100deg,#ffb3c6 0%,#e7a6e8 45%,#a487ff 100%);
  --maxw:1360px;
  --gutter:clamp(22px,4vw,72px);
  --fz-h1:clamp(30px,4.2vw,58px);
  --fz-h2:clamp(23px,2.4vw,34px);
  --fz-h3:clamp(19px,1.45vw,23px);
  --fz-body:clamp(16px,1.08vw,18px);
  --fz-lg:clamp(17px,1.4vw,21px);
  --fz-eyebrow:clamp(11px,.86vw,13px);
  --serif:"Newsreader",Georgia,serif;
  --sans:"Pretendard","Pretendard Variable",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:var(--fz-body);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 45% at 85% 0%,rgba(164,135,255,.14),transparent 70%),radial-gradient(50% 40% at 0% 10%,rgba(255,58,82,.10),transparent 70%)}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{font-size:var(--fz-eyebrow);letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:.7em;white-space:nowrap}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#ffb3c6}

/* NAV */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s ease,border-color .4s ease,backdrop-filter .4s;border-bottom:1px solid transparent}
header.nav.scrolled{background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:18px var(--gutter);display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.01em;font-size:18px}
.brand .mark{width:26px;height:26px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink);font-family:var(--serif);font-style:italic;font-size:15px;line-height:1;padding-bottom:1px}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,42px)}
.nav-links a{font-size:14px;color:var(--ink-soft);font-weight:500;position:relative;transition:color .25s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--accent);transition:width .3s}
.nav-links a:hover{color:var(--accent)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{width:100%}
.nav-links a[aria-current]{color:var(--ink)}
.nav-cta{padding:9px 20px;border:1px solid var(--ink);border-radius:100px;font-size:14px;font-weight:600;transition:background .3s,color .3s,border-color .3s}
.nav-links a.nav-cta:hover{background:var(--accent);color:#fff;-webkit-text-fill-color:#fff;border-color:var(--accent)}
.nav-links a.nav-cta::after{display:none}
@media(max-width:760px){
  header.nav,header.nav.scrolled{background:color-mix(in srgb,var(--paper) 92%,transparent);border-bottom:1px solid var(--line)}
  .nav-inner{flex-wrap:wrap;row-gap:8px;padding-top:12px;padding-bottom:10px}
  .nav-links{display:contents}
  .brand{order:1;margin-right:auto}
  .nav-links .nav-cta{order:2;padding:7px 16px;font-size:13px}
  .nav-inner::after{content:"";order:4;flex-basis:100%;height:0}
  .nav-links a:not(.nav-cta){order:5;font-size:13px;padding:6px 0}
  .nav-links a:not(.nav-cta)::after{bottom:0}
}
@media(max-width:360px){
  .brand{font-size:16px;gap:8px}
  .nav-links .nav-cta{padding:6px 12px;font-size:12.5px}
  .nav-links a:not(.nav-cta){font-size:12px}
}

/* FOOTER */
.foot{background:#030305;color:var(--paper);border-top:1px solid var(--line)}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:34px;flex-wrap:wrap}
.foot-inner .small{font-size:13px;color:var(--muted)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap;row-gap:10px}
.foot-links a{font-size:13px;color:var(--muted);transition:color .25s}
.foot-links a:hover{color:var(--accent)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* BLOG INDEX */
.b-head{padding-top:clamp(140px,18vh,200px);padding-bottom:clamp(30px,5vh,56px)}
.b-head h1{font-size:var(--fz-h1);font-weight:600;letter-spacing:-.035em;line-height:1.08;color:var(--head);margin-top:16px}
.b-head p{margin-top:20px;max-width:58ch;color:var(--ink-soft);font-size:var(--fz-lg);line-height:1.7;word-break:keep-all;text-wrap:pretty}
.b-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,26px);padding-bottom:clamp(60px,10vh,120px)}
@media(max-width:820px){.b-list{grid-template-columns:minmax(0,1fr)}}
.b-card{display:flex;flex-direction:column;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,2.4vw,36px);transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .45s}
.b-card:hover{color:inherit;transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent-2) 45%,transparent);box-shadow:0 26px 60px -32px rgba(164,135,255,.45)}
.b-card .meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13px;color:var(--muted)}
.chip{font-size:12px;font-weight:600;letter-spacing:.04em;padding:5px 11px;border-radius:100px;border:1px solid var(--line);color:var(--ink-soft)}
.b-card h2{font-size:clamp(21px,1.8vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.3;color:var(--head);word-break:keep-all;text-wrap:balance}
.b-card p{color:var(--ink-soft);font-size:15.5px;line-height:1.75;word-break:keep-all}
.b-card .more{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600}
.b-card.soon{background:transparent;border-style:dashed;justify-content:center;min-height:200px}
.b-card.soon:hover{transform:none;box-shadow:none;border-color:var(--line)}

/* POST */
.post{max-width:760px;margin:0 auto;padding-inline:var(--gutter)}
.p-head{padding-top:clamp(140px,18vh,190px);padding-bottom:clamp(26px,4vh,40px);border-bottom:1px solid var(--line)}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted)}
.crumb a:hover{color:var(--accent)}
.p-head h1{font-size:clamp(28px,3.6vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.22;color:var(--head);margin-top:22px;word-break:keep-all;text-wrap:balance}
.p-head .dek{margin-top:18px;font-size:var(--fz-lg);color:var(--ink-soft);line-height:1.7;word-break:keep-all;text-wrap:pretty}
.p-meta{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:13.5px;color:var(--muted)}
.p-meta strong{color:var(--ink-soft);font-weight:600}

.prose{padding-block:clamp(30px,5vh,52px) clamp(40px,7vh,80px);word-break:keep-all;overflow-wrap:anywhere}
.prose > * + *{margin-top:1.15em}
.prose p,.prose li{color:#d4d0df;line-height:1.9}
.prose h2{font-size:var(--fz-h2);font-weight:600;letter-spacing:-.03em;line-height:1.3;color:var(--head);margin-top:2.4em;scroll-margin-top:120px}
.prose h3{font-size:var(--fz-h3);font-weight:600;letter-spacing:-.02em;line-height:1.4;color:var(--head);margin-top:1.8em}
.prose h2 + *,.prose h3 + *{margin-top:.8em}
.prose strong{color:var(--ink);font-weight:650}
.prose a{color:#ffb3c6;border-bottom:1px solid rgba(255,179,198,.4)}
.prose a:hover{color:#fff;border-color:#fff}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--accent-2)}
.prose code{font-family:var(--mono);font-size:.88em;background:rgba(164,135,255,.12);border:1px solid rgba(164,135,255,.2);padding:.1em .4em;border-radius:6px;color:#e2dbff}

.summary{background:linear-gradient(135deg,rgba(255,58,82,.08),rgba(164,135,255,.10));border:1px solid var(--line);border-radius:18px;padding:clamp(20px,2.4vw,30px)}
.summary .eyebrow{color:var(--ink-soft)}
.summary ul{margin-top:12px;padding-left:1.2em}

.toc{border-left:2px solid var(--line);padding:4px 0 4px 18px}
.toc p{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.toc ol{margin-top:10px;padding-left:1.2em}
.toc li{line-height:1.7}
.toc a{border:0;color:var(--ink-soft)}
.toc a:hover{color:#ffb3c6}

.defs{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.def{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.def .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:26px;color:#fff}
.def.t .ic{background:linear-gradient(135deg,#3b3555,#5b4a8f)}
.def.n .ic{background:linear-gradient(135deg,#5a2440,#a33a62)}
.def.a .ic{background:linear-gradient(135deg,#ff3a52,#a487ff)}
.def h3{margin:0;font-size:19px}
.def h3 span{font-size:13px;font-weight:500;color:var(--muted);margin-left:6px;letter-spacing:.02em}
.def p{margin-top:6px;font-size:15.5px;line-height:1.8}

figure.fig{margin-block:2em}
figure.fig svg{width:100%;height:auto;display:block}
.fig-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:700px){.fig-row{grid-template-columns:minmax(0,1fr)}}
.fig-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
figure.fig figcaption{margin-top:12px;font-size:13.5px;color:var(--muted);text-align:center;line-height:1.6}

.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:16px;-webkit-overflow-scrolling:touch}
.tbl table{width:100%;min-width:600px;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.65;word-break:keep-all}
.tbl thead th{background:var(--card-2);color:var(--head);font-weight:600;font-size:14px}
.tbl tbody th{color:var(--ink);font-weight:600;white-space:nowrap;background:var(--card)}
.tbl td{color:var(--ink-soft)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}

pre.code{background:#0b0b12;border:1px solid var(--line);border-radius:14px;padding:18px 20px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.75;color:#d9d5e6;word-break:normal;overflow-wrap:normal;white-space:pre;tab-size:4}
pre.code .c{color:#8b879b}
pre.code .k{color:#ff9fb4}
pre.code .s{color:#bfe3a3}
pre.code .f{color:#c6b2ff}
.code-label{font-size:12.5px;color:var(--muted);letter-spacing:.06em;margin-bottom:-.4em}

.callout{border:1px solid color-mix(in srgb,var(--accent-2) 40%,transparent);background:rgba(164,135,255,.07);border-radius:14px;padding:18px 20px}
.callout p{color:var(--ink-soft)}
.callout strong{color:#e2dbff}

.p-faq details{border-bottom:1px solid var(--line);padding:16px 0}
.p-faq summary{cursor:pointer;font-weight:600;font-size:17px;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
.p-faq summary::-webkit-details-marker{display:none}
.p-faq summary::after{content:"+";font-weight:400;font-size:22px;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.p-faq details[open] summary::after{content:"−"}
.p-faq details p{margin-top:10px}

.p-cta{margin-top:3em;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,36px);text-align:center}
.p-cta h2{margin-top:0;font-size:clamp(21px,2vw,27px)}
.p-cta p{margin-top:10px}
.p-cta .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:12px;font-weight:700;font-size:15px;border:1px solid var(--line);color:var(--ink)}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:linear-gradient(100deg,var(--accent) 0%,#ff7a8a 45%,var(--accent-2) 100%);color:#fff}
.prose .p-cta a.btn{border-bottom:1px solid var(--line)}
.prose .p-cta a.btn.primary{border-color:var(--accent)}

.p-nav{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-block:26px 70px;font-size:14px;color:var(--muted)}
.p-nav a:hover{color:#ffb3c6}
body{min-height:100vh;display:flex;flex-direction:column}main{flex:1 0 auto}

/* chat comparison */
.chat-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:700px){.chat-cmp{grid-template-columns:minmax(0,1fr)}}
.chat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.chat .who{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.chat.good{border-color:color-mix(in srgb,var(--accent-2) 45%,transparent)}
.chat.good .who{color:#c6b2ff}
.bubble{border-radius:14px;padding:12px 14px;font-size:14.5px;line-height:1.75;color:var(--ink-soft)}
.bubble.q{background:rgba(239,237,245,.06);align-self:flex-end;max-width:92%}
.bubble.a{background:rgba(164,135,255,.08);border:1px solid rgba(164,135,255,.16)}
.chat.bad .bubble.a{background:rgba(255,58,82,.06);border-color:rgba(255,58,82,.18)}
.bubble .src{display:block;margin-top:8px;font-size:12.5px;color:#c6b2ff}
.chat .note{font-size:13px;color:var(--muted);line-height:1.6}
.checklist{list-style:none;padding-left:0!important}
.checklist li{position:relative;padding-left:1.8em}
.checklist li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--accent-2)}