/* ── Network Nodes — 원본 style.css 이식 + WP 적응 ───────────────── */
:root {
  --page-bg: #fff;
}
body.thaum-network-page {
  margin: 0;
  padding: 0;
}
body.thaum-network-page,
html {
  width: 100%;
  height: 100%;
  background-color: var(--page-bg);
}
body.thaum-network-page {
  overflow: hidden;
}
body.thaum-network-page * {
  box-sizing: border-box;
}

#bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--page-bg);
}
/* 진입/이탈 페이드 오버레이 (인트로↔메인 크로스페이드) */
#thaum-fade {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--page-bg);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.6s ease,
    background-color 0.6s ease;
}
#thaum-fade.show {
  opacity: 1;
}
/* 인트로 → 메인 이탈: 흰색에서 메인 배경색(회색)으로 morph 하며 덮는다. */
#thaum-fade.to-main {
  opacity: 1;
}
.thaum-intro-seq #thaum-fade.to-main {
  background: var(--page-bg);
}
#bg-dots {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}
#c {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  background: transparent;
}
#edge-vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 72% 68% at 50% 50%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.4) 72%,
    rgba(255, 255, 255, 0.92) 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 72% 68% at 50% 50%,
    transparent 46%,
    rgba(0, 0, 0, 0.35) 68%,
    #000 100%
  );
  mask-image: radial-gradient(
    ellipse 72% 68% at 50% 50%,
    transparent 46%,
    rgba(0, 0, 0, 0.35) 68%,
    #000 100%
  );
}

/* ── 사이트 메뉴 (상단 고정. 최소 기능 스타일 — 상세는 추후) ───────── */
#thaum-nav {
  position: fixed;
  top: 18px;
  left: 20px;
  z-index: 22;
  pointer-events: auto;
}
.admin-bar #thaum-nav {
  top: 50px;
}
#thaum-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  align-items: center;
}
#thaum-nav a {
  color: #333;
  text-decoration: none;
  font: 14px "Helvetica Neue", sans-serif;
}
#thaum-nav a:hover {
  color: #000;
}

/* ── hover 질문 레이어 (원본 커서 툴팁 → 화면 중앙 하단) ───────────── */
#thaum-question {
  position: fixed;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%) translateY(8px);
  width: min(760px, 88vw);
  text-align: center;
  color: #2a2b2f;
  font:
    500 clamp(17px, 2.1vw, 26px) / 1.55 "Helvetica Neue",
    -apple-system, "Apple SD Gothic Neo", sans-serif;
  letter-spacing: -0.01em;
  text-wrap: balance;
  opacity: 0;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
  pointer-events: none;
  z-index: 12;
}
#thaum-question.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── back / separate 버튼 (원본 이식) ────────────────────────────── */
#back-btn {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 8px 22px;
  border-radius: 20px;
  font: 13px "Helvetica Neue", sans-serif;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 14;
}
#back-btn.on {
  opacity: 1;
  pointer-events: all;
}
#back-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}
/* ── 카테고리(분야) 필터 바 (랜덤 '집합 분리' 버튼 대체) ────────────── */
#thaum-scopes {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 14;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: min(880px, 92vw);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
#thaum-scopes.on {
  opacity: 1;
  pointer-events: auto;
}
#thaum-scopes button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #444;
  border-radius: 18px;
  padding: 6px 14px;
  font: 13px "Helvetica Neue", sans-serif;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
#thaum-scopes button:hover {
  background: #fff;
}
#thaum-scopes button.active {
  background: #222;
  color: #fff;
  border-color: transparent;
}
#thaum-scopes .thaum-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot, #888);
  flex: 0 0 auto;
}

body.separated #back-btn {
  bottom: 92px;
}

/* ── 인트로 시퀀스 (immersive 중앙 배치) ──────────────────────────── */
/* ══ 인트로 3단계 시퀀스 (백색 배경 / 흑색 텍스트) ══════════════════ */
body.thaum-intro-seq {
  margin: 0;
  min-height: 100vh;
  background: #fff;
  color: #000;
  overflow-x: hidden;
  font-family: "Helvetica Neue", -apple-system, "Apple SD Gothic Neo",
    sans-serif;
}
.thaum-intro-seq #thaum-fade {
  background: #fff;
}

#thaum-seq-skip {
  position: fixed;
  top: 22px;
  right: 26px;
  z-index: 30;
  background: none;
  border: none;
  color: #000;
  opacity: 0.5;
  font: 15px "Helvetica Neue", sans-serif;
  cursor: pointer;
  transition: opacity 0.2s;
}
.admin-bar #thaum-seq-skip {
  top: 54px;
}
#thaum-seq-skip:hover {
  opacity: 1;
}

/* 시퀀스 무대 — 프롬프트와 입력부를 한 흐름에 세로로 쌓는다.
   예전엔 둘 다 fixed 중앙 배치라 서로의 높이를 몰라서, 뷰포트가 낮으면 겹쳤다.
   지금은 같은 flex 흐름이라 겹칠 수 없고, 그래도 넘치면 무대가 스크롤된다. */
/* 시퀀스 무대 — 프롬프트와 입력부를 한 흐름에 세로로 쌓는다.
   예전엔 둘 다 fixed 중앙 배치라 서로의 높이를 몰라서, 뷰포트가 낮으면 겹쳤다.
   지금은 같은 flex 흐름이라 겹칠 수 없고, 그래도 넘치면 무대가 스크롤된다. */
#seq {
  position: fixed;
  inset: 0;
  height: 100dvh; /* 모바일 주소창 접힘까지 따라간다 */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center; /* 넘칠 때 위쪽이 잘려 못 보는 일 방지 */
  gap: 0;
  padding: clamp(14px, 5vh, 64px) 5vw;
  padding-bottom: calc(
    clamp(14px, 5vh, 64px) + env(safe-area-inset-bottom, 0px)
  );
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: gap 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
body[data-step="2"] #seq {
  gap: clamp(12px, 3vh, 40px);
}
/* 오프닝 배경은 이제 캔버스가 아니라 mesh 그라디언트다(#seq-mesh).
   규칙은 styles/_network-nodes.scss 쪽에 있다 — 여기 있던 #seq-fx 는
   그 캔버스와 함께 걷어냈다. */

/* 프롬프트: 1단계엔 무대 중앙 → 2단계엔 입력부가 펼쳐지며 위로 밀려 올라간다.
   (좌표를 옮기지 않는다. 아래 #seq-body 가 자라면서 자연스레 밀어낸다) */
#seq-prompt {
  flex: 0 0 auto;
  margin: 0;
  width: min(1000px, 100%);
  text-align: center;
  font-weight: 500;
  font-size: clamp(22px, min(4vw, 4.4vh), 48px);
  line-height: 1.3;
  color: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.seq-ready #seq-prompt {
  opacity: 1;
}
#seq-prompt-text {
  display: inline-block;
  transition: opacity 0.32s ease;
}
#seq-prompt-text.swap {
  opacity: 0;
}

/* 입력부: 1단계엔 높이 0(0fr)으로 접혀 있다가 2단계에 펼쳐진다.
   높이가 자라는 만큼 위의 프롬프트가 밀려 올라가므로, 예전의 "위로 이동" 연출은
   그대로면서 둘이 겹칠 수는 없다. */
#seq-body {
  flex: 0 0 auto;
  width: min(1000px, 100%);
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition:
    grid-template-rows 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    /* 다 펼쳐진 뒤에야 clip 을 푼다 — 펼치는 동안 내용이 삐져나와 스크롤바가
       깜빡이지 않고, 열린 뒤엔 후보 버튼 hover 확대가 잘리지 않는다. */
      overflow 0s 0.8s allow-discrete;
}
body[data-step="2"] #seq-body {
  grid-template-rows: 1fr;
  overflow: visible;
}
#seq-body-inner {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seq-step {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3.5vh, 44px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
body[data-step="2"] #seq-step2 {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* 질문 입력 (배경 없음, border-bottom만) */
#seq-question {
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: #000;
  border-bottom: 2px solid #000;
  /* 뷰포트 높이도 함께 본다 — 낮은 화면에서 입력칸이 화면을 다 먹지 않도록 */
  font-size: clamp(26px, min(6vw, 7vh), 64px) !important;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  padding: 6px 4px 14px;
  overflow: hidden;
  margin-top: clamp(2px, 1.5vh, 16px);
}
#seq-question::placeholder {
  color: rgba(0, 0, 0, 0.22);
}

/* 분야 후보 (질문 입력 위)

   높이를 제한하지 않는다 — 분야가 늘면서(지금 열여섯) 예전의
   max-height(40vh / 340px) + 안쪽 스크롤에서는 아래쪽이 잘려 안 보였다.
   넘치는 몫은 무대(#seq)의 overflow-y: auto 가 받는다.

   styles/_network-nodes.scss 에도 같은 규칙이 있고 그쪽이 나중에 로드된다.
   값을 바꿀 때는 두 곳을 같이 고쳐야 한다 — 이 파일에만 남은 선언은 뒤에서
   지울 수 없다(속성을 빼는 것으로는 앞의 값이 사라지지 않는다). */
#seq-scopes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1.6vh, 16px);
  max-width: 100%;
  padding: 6px;
}
.seq-scope {
  font-size: clamp(20px, min(5vw, 5.5vh), 64px);
  font-weight: 500;
  line-height: 1;
  color: #000;
  border: none;
  cursor: pointer;
  background: color-mix(in srgb, var(--c, #eee) 75%, transparent);
  border-radius: 0.47em;
  padding: 0.16em 0.47em;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease,
    scale 0.2s ease;
}
.seq-scope:hover {
  background: var(--c, #eee);
  color: #000;
  scale: 1.05;
}
.seq-scope.in {
  opacity: 1;
  transform: scale(1);
}
.seq-scope.selected {
  background: color-mix(in srgb, var(--c, #eee) 75%, transparent);
    color: #000;
    scale: 1.05;
    box-shadow: 0 0 0 4px var(--c, #eee);
}

/* 확인 버튼 (확인 + 체크 아이콘) */
.seq-actions {
  display: flex;
  justify-content: center;
}
.seq-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #000;
  border: none;
  border-radius: 0;
  font-size: clamp(20px, min(4vw, 4.5vh), 48px);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.seq-confirm:hover {
  opacity: 0.85;
  background: transparent;
  color: #000;
  border: none;
  border-radius: 0;
}
.seq-confirm:disabled {
  opacity: 0.5;
  cursor: default;
}
.seq-confirm svg {
  width: 0.88em;
  height: 0.88em;
}

#seq-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}
#seq-msg {
  margin-top: clamp(8px, 2vh, 20px);
  min-height: 18px;
  text-align: center;
  font: 14px "Helvetica Neue", sans-serif;
  color: #c0392b;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#seq-msg.show {
  opacity: 1;
}

/* 화면이 아주 낮으면(가로 모드 폰 등) 스크롤 대신 먼저 여백부터 줄인다.
   글자 크기는 위 clamp 들이 vh 를 함께 보고 있어서 따로 줄이지 않는다. */
@media (max-height: 520px) {
  #seq {
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
}



/* ── 질문 작성 폼 (인트로 #thaum-intro 안에 중앙 배치) ─────────────── */
#thaum-compose {
  width: 100%;
}
.thaum-compose-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.09);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#thaum-text {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: #222;
  font: 14px/1.5 "Helvetica Neue", -apple-system, "Apple SD Gothic Neo",
    sans-serif;
  padding: 8px 10px;
  max-height: 120px;
  overflow-y: auto;
}
#thaum-scope {
  flex: 0 0 auto;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: #333;
  border-radius: 10px;
  padding: 0 10px;
  height: 38px;
  font: 13px "Helvetica Neue", sans-serif;
  cursor: pointer;
  outline: none;
}
#thaum-submit {
  flex: 0 0 auto;
  border: none;
  background: #222;
  color: #fff;
  border-radius: 10px;
  padding: 0 16px;
  height: 38px;
  font: 13px "Helvetica Neue", sans-serif;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
#thaum-submit:hover {
  background: #000;
}
#thaum-submit:disabled {
  opacity: 0.5;
  cursor: default;
}
/* honeypot */
#thaum-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
#thaum-compose-msg {
  text-align: center;
  min-height: 16px;
  margin-top: 7px;
  font: 12px "Helvetica Neue", sans-serif;
  color: #666;
  opacity: 0;
  transition: opacity 0.2s;
}
#thaum-compose-msg.show {
  opacity: 1;
}
#thaum-compose-msg.error {
  color: #c0392b;
}
#thaum-compose-msg.ok {
  color: #178a4c;
}

@media (max-width: 480px) {
  #thaum-question {
    bottom: 150px;
  }
  .thaum-compose-row {
    flex-wrap: wrap;
  }
  #thaum-text {
    flex-basis: 100%;
  }
}