/* ═════════════════════════════════════════════════════════════
   Linchpin AI 통합 디자인 시스템 — v0.2 (채택: 글래스)
   밝은 글래스 대시보드. 흐르는 파스텔 배경 위 반투명 유리 패널,
   KPI·위젯 카드 문법, 제품 색 2개(번역 인디고 / 통역 틸).
   에디토리얼 방향(lp-ds.css)과 비교용 시안.
   ═════════════════════════════════════════════════════════════ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  /* 바탕 · 잉크 */
  --bg:      #e8ecf4;
  --ink:     #0e1528;
  --ink-2:   #39435c;
  --ink-3:   #6a738b;
  --ink-4:   #98a0b4;
  --hair:    rgba(14,21,40,.08);

  /* 유리 */
  --glass:        rgba(255,255,255,.52);
  --glass-strong: rgba(255,255,255,.70);
  --glass-line:   rgba(255,255,255,.78);
  --glass-blur:   blur(28px) saturate(170%);
  --pane:         rgba(255,255,255,.50);   /* 유리 안쪽 위젯 (블러 없음) */
  --pane-line:    rgba(255,255,255,.88);
  --shadow:      0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(14,21,40,.04), 0 18px 48px -12px rgba(28,40,90,.18);
  --shadow-lift: 0 1px 0 rgba(255,255,255,.95) inset, 0 0 0 1px rgba(14,21,40,.05), 0 30px 64px -14px rgba(28,40,90,.26);

  /* 제품 색 */
  --c-translate: #4b63ff;
  --c-interpret: #0ea89a;
  --c-live:      #ff4d5e;

  /* 글꼴 */
  --f-body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* 모서리 · 간격 */
  --r-xl: 28px; --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  --gutter: clamp(14px, 2.4vw, 32px);
  --ease: cubic-bezier(.22,.7,.18,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.6;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
/* keep-all은 한국어 어절 보호용 — 띄어쓰기가 없는 일본어·중국어는 글자 사이에서 줄을 바꿔야 한다 */
:lang(ja),:lang(zh){word-break:normal}
h1,h2,h3,p,ul,ol{margin:0}
a{color:inherit;text-decoration:none}

/* 흐르는 배경 + 미세 노이즈 */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ambient i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.78;will-change:transform;
  animation:drift 26s ease-in-out infinite alternate}
.ambient i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-14vw;background:#9fb0ff}
.ambient i:nth-child(2){width:38vw;height:38vw;right:-8vw;top:6vh;background:#8fe6d6;animation-delay:-8s}
.ambient i:nth-child(3){width:34vw;height:34vw;left:28vw;bottom:-16vw;background:#ffd2b8;animation-delay:-14s}
.ambient i:nth-child(4){width:26vw;height:26vw;right:20vw;bottom:8vh;background:#d6c6ff;animation-delay:-4s}
.ambient::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(4vw,3vh) scale(1.08)}}

/* 유리 패널 */
.glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-xl);box-shadow:var(--shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(255,255,255,.9)}}
.pane{background:var(--pane);border:1px solid var(--pane-line);border-radius:var(--r-md)}

/* 공통 소품 */
.label{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);color:var(--ink-2);white-space:nowrap}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:0 0 7px}

:focus-visible{outline:2px solid var(--c-translate);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ═════════════════ 공용 컴포넌트 (번역 · 통역 · 게이트웨이 공통) ═════════════════ */
.container{width:min(1240px, 100% - var(--gutter) * 2);margin-inline:auto}

/* 상단 바 */
.topbar{position:sticky;top:12px;z-index:50;display:flex;align-items:center;gap:14px;padding:7px 8px 7px 16px;border-radius:999px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.mark{width:22px;height:22px;border-radius:7px;flex:0 0 22px;
  background:conic-gradient(from 210deg,var(--c-translate),var(--c-interpret),var(--c-translate));
  box-shadow:0 0 0 1px rgba(255,255,255,.9) inset}
.switch{display:flex;gap:3px;padding:3px;border-radius:999px;background:rgba(14,21,40,.05)}
.switch a{display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-3);transition:background .3s,color .3s}
.switch a:hover{color:var(--ink)}
.switch a[aria-current]{background:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 2px 8px rgba(28,40,90,.08)}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{padding:8px 12px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ink-2);transition:background .3s,color .3s}
.nav a:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.topbar-cta{display:flex;gap:6px}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;
  font:600 14.5px/1 var(--f-body);border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--c, var(--c-translate))}
.btn-glass{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.9) inset}
.btn-glass:hover{background:rgba(255,255,255,.9)}
.btn-sm{height:36px;padding:0 15px;font-size:13.5px}

/* 섹션 머리 */
.section{padding-block:clamp(72px, 11vh, 128px);scroll-margin-top:84px}
section[id]{scroll-margin-top:84px}
.section-head{display:grid;gap:14px;max-width:46em;margin-bottom:clamp(28px, 4.5vh, 48px)}
.section-head h2{font-size:clamp(30px, 3.4vw, 46px);font-weight:700;letter-spacing:-.04em;line-height:1.14}
.section-head p{font-size:16.5px;color:var(--ink-2)}

/* 체크 목록 */
.check{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.check li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.check li::before{content:"";flex:0 0 16px;height:16px;margin-top:2px;border-radius:50%;
  background:var(--c, var(--c-translate)) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}

/* 커서 반사광 — 유리 카드 공통 (JS가 --mx/--my 갱신) */
.shine{position:relative;overflow:hidden}
.shine::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.7),transparent 60%)}
.shine > *{position:relative}
@media (hover:hover){
  a.shine{transition:transform .5s var(--ease),box-shadow .5s var(--ease),background-color .5s}
  a.shine:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);background:var(--glass-strong)}
  .shine:hover::before{opacity:1}
}

/* FAQ */
.faq details{border-top:1px solid var(--hair)}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 4px;font-size:16px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 22px;height:22px;border-radius:50%;background:rgba(255,255,255,.75) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 3.5v9M3.5 8h9' stroke='%230e1528' stroke-width='1.6' stroke-linecap='round'/></svg>") center/12px no-repeat;
  border:1px solid rgba(255,255,255,.95);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 4px 22px;max-width:52em;font-size:15px;color:var(--ink-2)}

/* 모바일 메뉴 — 상단바 메뉴가 접히는 폭(≤980px)에서 버튼으로 연다. 패널 내용은 lp-ds.js가 상단바에서 복제한다 */
.menu-btn{display:none;position:relative;flex:0 0 38px;width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.95);box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
  -webkit-tap-highlight-color:transparent;transition:background-color .3s}
.menu-btn::before{content:"";position:absolute;inset:-4px}
.menu-btn i{position:absolute;left:11px;width:14px;height:1.6px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease)}
.menu-btn i:first-child{top:14.5px}
.menu-btn i:last-child{top:20.5px}
.menu-btn[aria-expanded="true"] i:first-child{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu-scrim{position:fixed;inset:0;z-index:40;background:rgba(14,21,40,.16);opacity:0;transition:opacity .25s var(--ease)}
.menu-panel{position:fixed;left:var(--gutter);right:var(--gutter);z-index:45;max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain;
  padding:10px;border-radius:var(--r-lg);background:var(--glass-strong);box-shadow:var(--shadow-lift);
  opacity:0;transform:translateY(-8px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.menu-scrim.open,.menu-panel.open{opacity:1}
.menu-panel.open{transform:none}
.menu-links{display:grid;gap:2px}
.menu-links a{display:flex;justify-content:space-between;align-items:center;min-height:50px;padding:0 16px;border-radius:14px;font-size:16px;font-weight:600;transition:background-color .25s}
.menu-links a::after{content:"";width:7px;height:7px;margin-right:3px;border-top:1.6px solid var(--ink-4);border-right:1.6px solid var(--ink-4);transform:rotate(45deg)}
.menu-links a[aria-current="page"]{background:rgba(255,255,255,.8)}
.menu-extra{display:none;gap:12px;margin-top:8px;padding:14px 6px 6px;border-top:1px solid var(--hair)}
.menu-panel .switch{display:flex;justify-self:start}
.menu-cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
@media (hover:hover){
  .menu-btn:hover{background:rgba(255,255,255,.9)}
  .menu-links a:hover{background:rgba(255,255,255,.8)}
}

@media (max-width:980px){ .nav{display:none} .topbar-cta{margin-left:auto} .menu-btn{display:block} }
@media (max-width:560px){ .switch,.topbar-cta .btn-glass{display:none} .menu-extra{display:grid} }