/* live-core.css — 02 / 우리 제품 · 로고스 (파티클 코어 + 질문창)
 * 담당: live-core 모듈(4모듈 병렬 작업 중 하나). public/style.css 는 건드리지 않는다 —
 * 이 섹션 안(.logos-*)에서만 유효한 셀렉터로 전부 가둔다. 색 토큰은 :root(style.css)의
 * --gold·--light-gold·--muted·--line·--bg 를 그대로 쓴다.
 */

.logos-section{
  position:relative;
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  isolation:isolate;
}

.logos-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:32px;
  padding:56px 20px 60px;
  max-width:1800px;
  margin-inline:auto;
}

/* 모바일 기본값: 코어가 위, 카피+질문창이 아래(스펙 지정 순서). 데스크톱에서 order 를 되돌린다. */
.logos-core{order:-1}

/* ── 좌측 카피 + 질문창 ───────────────────────────────── */
.logos-copy{position:relative;z-index:2;min-width:0;order:0}
.logos-eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--gold);display:flex;align-items:center;gap:11px;margin:0}
.logos-eyebrow i{height:1px;width:25px;background:var(--gold);display:block;flex:none}
.logos-copy h2{
  font-size:clamp(30px,4.4vw,58px);
  line-height:1.22;
  letter-spacing:-.03em;
  font-weight:500;
  margin:20px 0;
  word-break:keep-all;
}
.logos-lead{
  font-size:14px;
  line-height:1.85;
  color:var(--muted);
  margin:0 0 28px;
  word-break:keep-all;
  max-width:480px;
}

.logos-ask{position:relative;width:min(560px,100%)}
.logos-ask form{
  display:flex;align-items:center;gap:8px;
  background:#11100dcc;border:1px solid #d9b46a55;border-radius:99px;
  padding:8px 8px 8px 22px;backdrop-filter:blur(10px);
  transition:border-color .3s,box-shadow .3s;
}
.logos-ask form:focus-within{border-color:var(--gold);box-shadow:0 0 0 6px #d9b46a1a,0 0 60px #d9b46a22}
.logos-ask input{
  flex:1;min-width:0;background:none;border:0;outline:0;
  color:#f0ede5;font:500 16px Arial,"Malgun Gothic",sans-serif;
}
.logos-ask input::placeholder{color:#a39e91aa}
.logos-go{
  flex:none;height:46px;padding:0 22px;border:0;border-radius:99px;
  background:var(--gold);color:#090909;font-weight:800;min-height:44px;
}
.logos-mic{
  flex:none;width:46px;height:46px;min-height:44px;border-radius:50%;
  border:1px solid #d9b46a66;background:transparent;display:grid;place-items:center;position:relative;
}
.logos-mic svg{width:18px;height:18px;display:block}
.logos-mic.is-on{background:#d9b46a26;border-color:var(--gold)}
.logos-mic.is-on::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px solid var(--gold);transform:scale(var(--lv,1));opacity:.7;
}

.logos-examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding:0;list-style:none}
.logos-examples button{
  border:1px solid #a39e9144;background:transparent;border-radius:99px;
  padding:10px 14px;font-size:13px;color:#c9c3b5;min-height:40px;
  transition:border-color .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1);
}
.logos-examples button:hover,.logos-examples button:focus-visible{border-color:var(--gold);color:var(--light-gold);transform:translateY(-2px)}

.logos-note{
  margin-top:16px;color:#a39e91aa;font-size:12px;line-height:1.6;
  display:flex;align-items:flex-start;gap:6px;max-width:480px;
}
.logos-note svg{flex:none;width:13px;height:13px;margin-top:1px}

.logos-reply{
  margin-top:20px;border-left:2px solid var(--gold);padding:2px 0 2px 18px;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
}
.logos-reply.is-shown{opacity:1;transform:none}
.logos-reply-who{color:var(--gold);font:600 11px ui-monospace,monospace;letter-spacing:.06em}
.logos-reply p{margin:8px 0 12px;font-size:15px;line-height:1.65;color:#f0ede5;word-break:keep-all}
.logos-reply p b{color:var(--light-gold);font-weight:700}
.logos-reply a{color:var(--light-gold);font-weight:700;border-bottom:1px solid;display:inline-block}

/* ── 우측 파티클 코어 ─────────────────────────────────── */
.logos-core{
  position:relative;width:100%;max-width:520px;aspect-ratio:1/1;
  margin:0 auto;min-height:260px;
}
.logos-core[aria-hidden]{}
.logos-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.logos-core-fallback{
  position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,#f0d698 0%,#d9b46a4d 38%,transparent 72%);
  opacity:.6;display:none;
}
.logos-core.no-webgl .logos-canvas{display:none}
.logos-core.no-webgl .logos-core-fallback{display:block}

.logos-section{position:relative}
.logos-end-sentinel{position:absolute;left:0;bottom:15%;width:1px;height:1px;pointer-events:none}

@media(min-width:721px){
  .logos-section{min-height:170vh}
  .logos-stage{
    position:sticky;top:0;min-height:100svh;
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:40px;padding:0 clamp(24px,6vw,96px);
  }
  .logos-copy{flex:0 1 520px}
  .logos-lead{max-width:460px}
  .logos-core{
    order:0;
    flex:1 1 480px;max-width:640px;width:100%;
    aspect-ratio:auto;height:min(620px,72vh);min-height:0;
  }
}

@media(max-width:720px){
  .logos-stage{padding:48px 16px 56px}
  .logos-core{max-width:420px;width:70vw}
}

@media(max-width:360px){
  .logos-stage{padding:40px 12px 48px}
  .logos-copy h2{font-size:28px}
}

@media(prefers-reduced-motion:reduce){
  /* style.css 전역 규칙이 transition/animation 을 이미 죽인다 — 여기선 스크롤 고정만 뺀다.
     코어가 화면에 붙박여 스크롤이 안 풀리는 느낌을 주지 않게, 반응형 스크롤 트릭을 끈다. */
  .logos-section{min-height:0}
  .logos-stage{position:static;min-height:0}
}