/* MGM스튜디오 (46차)
   디자인 토큰은 styles.css 의 :root 를 그대로 씁니다. 새 색을 만들지 않습니다.
   스튜디오 = "가상 스튜디오"라는 성격에 맞춰 상단만 --ink 로 어둡게 두고,
   실제 정보는 종이색(--paper) 위에 기존 카드 문법으로 얹습니다. */

/* ── 상단 카드 (hero) ─────────────────────────────────────── */
/* 50차: 참고 이미지 반영. 화면 끝까지 채우던 먹색 띠를 '여백이 있는 둥근 카드'로 바꿨습니다.
   카드 위쪽 = 먹색 hero(우상단 금빛 글로우), 아래쪽 = 크림색 탭·검색 영역.
   MY 페이지 상단(.my-head)과 같은 문법을 씁니다.

   99차: 탭·검색·유형칩을 화면에 고정하려고 카드를 둘로 나눴습니다(.st-bar 참고).
     · 이 규칙        = 먹색 hero 조각 → 위 모서리만 둥글게
     · .st-barcard    = 크림색 탭·검색 조각 → 아래 모서리만 둥글게
   경계의 가로 테두리를 겹치지 않게 나눠 두었으므로(위: border-bottom 0 /
   아래: border-top 0) 스크롤하기 전에는 지금과 똑같이 '한 장의 카드'로 보입니다. */
.st-topcard {
  margin: calc(10px + env(safe-area-inset-top)) 14px 0;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid rgba(214, 196, 160, .42);
  border-bottom: 0;
  box-shadow: 0 8px 24px rgba(16, 13, 10, .13), 0 1px 2px rgba(16, 13, 10, .06);
}

/* ── 먹색 hero ───────────────────────────────────────────── */
.st-hero {
  position: relative; overflow: hidden;
  padding: 18px 18px 20px;
  color: var(--paper);
  background: linear-gradient(166deg, #2B2521 0%, #18140F 54%, #100D0A 100%);
}
/* 금빛 앰비언트 — 스튜디오 조명 느낌. 정보를 가리지 않도록 우상단 모서리에만 둡니다. */
.st-hero::after {
  content: ''; position: absolute; top: -110px; right: -70px; width: 260px; height: 260px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle,
    rgba(228, 192, 126, .42) 0%, rgba(200, 158, 92, .18) 38%, rgba(184, 137, 63, 0) 70%);
}
.st-hero > * { position: relative; z-index: 1; }
.st-hero .st-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  color: rgba(233, 222, 203, .64); font-weight: 700; }
.st-hero h1 { font-family: var(--serif); font-size: 26px; font-weight: 800; letter-spacing: -.025em;
  margin: 8px 0 8px; color: #FBF5E7; }
.st-hero p { margin: 0; font-size: 12.5px; line-height: 1.68; color: rgba(245, 242, 235, .68); max-width: 320px; }

/* 파이프 칩 — 참고 이미지처럼 얇은 금테 알약 + '›' 구분자 */
.st-pipe { display: flex; align-items: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.st-pipe span { font-size: 10.5px; font-weight: 700; padding: 4.5px 10px; border-radius: 999px;
  border: 1px solid rgba(206, 174, 116, .50);
  background: rgba(255, 255, 255, .045);
  color: rgba(250, 244, 232, .90); white-space: nowrap; }
.st-pipe i { font-style: normal; font-size: 11.5px; line-height: 1; color: rgba(214, 186, 136, .58); }

/* ── 상단 고정 바 (탭 · 검색 · 유형칩) — 99차 ──────────────── */
/* 스크롤을 내려도 탭과 검색창이 화면 위에 남아, 목록 아래쪽에서도
   '할인분양 / 아파트' 같은 필터를 바로 바꿀 수 있게 합니다.
   [왜 .st-topcard 안이 아닌가]
     · position:sticky 는 '부모 박스 안'에서만 붙습니다. 카드 안에 두면 카드가
       끝나는 지점에서 딸려 올라가 고정되지 않습니다.
     · .st-topcard 는 hero 의 금빛 글로우를 자르려고 overflow:hidden 을 씁니다.
       overflow 가 hidden/auto 인 조상이 있으면 그 조상이 sticky 의 기준 상자가
       되어 버려 고정이 풀립니다. (과거에 이 이유로 sticky 를 걷어냈습니다.)
   → .scroll 의 '직계 자식'으로 올렸습니다. 스크롤 컨테이너는 .scroll 이므로
     여기서 sticky 를 걸면 화면 위에 그대로 붙습니다.
   [배경] 칩 사이로 지나가는 카드가 비쳐 보이지 않도록 바탕과 같은 종이색을 깝니다.
     (바깥 .scroll 의 배경과 같은 --paper 라 스크롤 전에는 티가 나지 않습니다.) */
.st-bar {
  position: sticky;
  /* 노치·펀치홀 기기에서 바가 상태바 아래로 숨지 않도록 위 카드와 같은 인셋을 씁니다.
     (viewport-fit=cover 라 .scroll 이 화면 맨 위에서 시작합니다.)
     인셋이 0 인 기기에서는 top:0 과 완전히 같습니다. */
  top: env(safe-area-inset-top, 0px);
  z-index: 7;
  background: var(--paper);
}
/* top 이 인셋만큼 내려가면 그 위로 목록 카드가 비쳐 보입니다.
   바 위쪽으로 같은 높이의 종이색 띠를 덧대 막습니다(인셋 0 이면 높이 0). */
.st-bar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: env(safe-area-inset-top, 0px);
  background: var(--paper);
  pointer-events: none;
}

/* 탭 + 검색 영역. 위 카드(hero)의 아래 모서리를 이어받습니다.
   경계에 테두리가 겹치지 않게 hero 는 border-bottom:0, 이쪽은 border-top:0 입니다.
   → 붙기 전에는 두 조각이 한 장의 카드로 보입니다. */
.st-barcard {
  margin: 0 14px;
  background: var(--card);
  border: 1px solid rgba(214, 196, 160, .42);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(16, 13, 10, .13), 0 1px 2px rgba(16, 13, 10, .06);
}

/* ── 모드 전환 (스튜디오 / 내 상담) ───────────────────────── */
/* 카드 안쪽 크림 영역의 첫 줄. 활성 탭만 금장 밑줄을 긋습니다. */
.st-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: linear-gradient(180deg, #FBF8F1 0%, #F6F1E7 100%);
  border-bottom: 1px solid var(--line-2); }
.st-modes button { position: relative; height: 46px; font-size: 13.5px; font-weight: 700;
  color: var(--mute); letter-spacing: -.02em; }
.st-modes button.on { color: var(--ink); }
.st-modes button.on::after { content: ''; position: absolute; left: 16%; right: 16%; bottom: 0;
  height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, #C2A05F 0%, #EBD3A0 45%, #8E6B31 100%); }
.st-modes button .st-n { font-family: var(--mono); font-size: 11px; margin-left: 4px; color: var(--brass); }

/* ── 카드 안 검색창 ──────────────────────────────────────── */
.st-searchwrap { padding: 12px 14px 14px; background: linear-gradient(180deg, #FBF8F1 0%, #F6F1E7 100%); }
.st-search { display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  border: 1px solid #DCD3C5; border-radius: 999px;
  background: #FDFBF7;
  box-shadow: inset 0 1px 2px rgba(120, 92, 42, .05); }
.st-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none;
  background: transparent; font-size: 13.5px; color: var(--ink); }
.st-search input::placeholder { color: #8C8275; }

/* ── 물건 카드 ────────────────────────────────────────────── */
.st-list { padding: 16px 20px 8px; display: grid; gap: 14px; }
/* 106차: 관심물건(♡) 버튼을 카드 안이 아니라 '형제'로 두기 위한 위치 기준.
   .st-card 는 전체가 <button> 이라 그 안에 버튼을 또 넣으면 HTML 중첩 규칙 위반입니다
   (브라우저가 안쪽 버튼을 밖으로 끄집어내 레이아웃이 깨짐). m-studio.js 주석 참고. */
.st-cardwrap { position: relative; }
/* 하트는 썸네일(.ph) 우측 상단에 얹습니다 — 요청: "화면 오른쪽 상단".
   .ph 가 aspect-ratio 16/9 로 고정이라 top 만 잡으면 카드 높이와 무관하게 항상 같은 자리입니다.
   기존 .fav-heart(styles.css:410)의 모양(반투명 원판 + 흰 하트)을 그대로 쓰고 위치만 맞춥니다. */
.st-cardwrap > .fav-heart { top: 10px; right: 10px; }
.st-card { display: block; width: 100%; text-align: left; background: var(--card);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden; transition: transform .18s; }
.st-card:active { transform: scale(.99); }
.st-card .ph { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.st-card .ph img { width: 100%; height: 100%; object-fit: cover; opacity: .95; }
/* 재생 표시 — 검은 원판 대신 '테두리 원 + 화살표'.
   검은 배경(.60) 위에 흰 삼각형을 얹으면 판만 보이고 화살표가 묻혀 보였습니다.
   원은 거의 투명(10%)으로 두고 테두리를 흰색으로 세웁니다.
   썸네일이 밝은 사진(주황 노을 등)일 때 흰 테두리가 사라지지 않도록
   바깥에 얇은 어두운 링 + 부드러운 그림자를 겹쳐 둡니다. */
.st-card .ph .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(18,32,28,.10);
  border: 1.5px solid rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.26);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  /* 화살표 색. core.js 의 play 아이콘은 path 에 fill="currentColor" 가 박혀 있어
     SVG 의 stroke 로는 색이 바뀌지 않고 CSS color 를 상속합니다.
     이 한 줄이 없으면 화살표가 카드 본문 색(어두운 잉크)을 물려받아 검게 보입니다. */
  color: #fff; }
/* 삼각형은 광학 중심이 기하 중심보다 오른쪽이라 2px 밀어줍니다.
   그림자: 썸네일이 밝은 주황 광고 이미지일 때 흰 화살표가 배경에 묻혀
   잘 안 보이던 문제를 보완합니다. box-shadow 대신 filter: drop-shadow 를 쓰는 이유는
   삼각형의 실제 외곽선을 따라 그림자가 생기기 때문입니다
   (box-shadow 는 SVG 사각 박스에 붙어 모양이 드러나지 않습니다). */
.st-card .ph .play svg {
  margin-left: 2px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
.st-card .ph .st-tag { position: absolute; left: 10px; top: 10px; }
.st-card .ph .st-ai { position: absolute; right: 10px; bottom: 10px; font-size: 10px; font-weight: 700;
  padding: 3px 7px; border-radius: 2px; background: rgba(18,32,28,.78); color: rgba(245,242,235,.92); letter-spacing: .02em; }
.st-card .body { padding: 13px 14px 15px; }
.st-card h3 { margin: 0 0 5px; font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.st-card .goal { font-size: 13px; color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }
/* 114차: 리얼봇 매칭 카드의 '예상 실입주금' — 일반 highlights(.goal)와 구분되는 금액 강조 */
.st-card .goal.cash { color: #98703A; font-weight: 800; font-size: 12.5px; }
.st-card .meta { font-size: 12px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.st-card .meta b { color: var(--brass); font-weight: 700; }

/* ── 114차: A2A 리얼봇 가격 협상 버튼 ─────────────────────────
   카드 아래 '형제'로 붙습니다(.st-card 는 <button> 이라 중첩 불가 — 위 주석 참고).
   .st-cardwrap 안에서 카드 바로 아래에 오도록 음수 마진 없이 이어 붙이고,
   카드의 아래 모서리 라운드에 맞춰 살짝 겹쳐 보이게 합니다. */
.st-nego { display: block; width: 100%; margin-top: 6px; padding: 9px 12px;
  border: 1px solid #CBA05D; border-radius: 4px;
  background: linear-gradient(135deg, #12201C 0%, #1E352E 100%);
  color: #FCF1D8; font-size: 12.5px; font-weight: 800; letter-spacing: -.02em;
  text-align: center; cursor: pointer; transition: filter .18s; }
.st-nego:active { filter: brightness(1.18); }
.st-nego:disabled { opacity: .6; cursor: default; }

/* ── 114차: 9:16 세로(쇼츠) 재생 프레임 ────────────────────────
   기본 .st-frame 은 16/9 입니다. 쇼츠는 세로 영상이라 그 비율로 재생하면
   위아래가 잘리거나 검은 띠가 크게 남습니다. 폭을 380px 로 묶고 9:16 을 줍니다. */
.st-frame.vertical { aspect-ratio: 9 / 16; max-width: min(380px, 100%); margin: 0 auto;
  border-radius: 14px; overflow: hidden; }

/* ── 114차: 리얼봇 A2A 협상 모달 ───────────────────────────────
   .sheet / .sheet-wrap / .st-field / .note-mini 같은 공통 규칙은 그대로 쓰고,
   협상 화면에만 필요한 조각만 여기에 둡니다. */
.nego-head { background: var(--ink); color: var(--paper); padding: 12px 14px;
  border-radius: 4px; border: 1px solid #CBA05D; margin-bottom: 14px; }
.nego-head .sm { font-size: 11.5px; color: #EBD096; font-weight: 700; }
.nego-head b { display: block; font-size: 15px; margin-top: 2px; }
.nego-head .sm + .sm { margin-top: 4px; color: #B5C4BE; font-weight: 500; }

/* 빠른 선택 칩 — 줄바꿈되며 4개가 한 화면에 들어갑니다. */
.nego-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.nego-chip { padding: 6px 10px; border-radius: 4px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; transition: background .16s, color .16s; }
.nego-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.nego-err { font-size: 12.5px; color: var(--accent); margin-bottom: 12px; }

/* A2A 협상 로그 타임라인 — 좌측 금색 괘선으로 '대화'임을 표시합니다. */
.nego-log { padding: 12px; border-radius: 4px; background: #F6F4EE; border: 1px solid #E2D9C8; }
.nego-log-h { font-size: 11.5px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.nego-log-row { background: #fff; padding: 9px 11px; border-radius: 3px;
  margin-bottom: 6px; border-left: 3px solid #CBA05D; }
.nego-log-row:last-child { margin-bottom: 0; }
.nego-log-row .t { font-size: 11px; font-weight: 800; color: #7A5526; }
.nego-log-row .b { font-size: 12.5px; line-height: 1.55; color: var(--ink); margin-top: 3px; }

.nego-actions { display: flex; gap: 8px; margin-top: 14px; }
.nego-actions .btn { flex: 1; }
.nego-actions .btn.ghost { flex: none; padding: 0 14px; font-weight: 700; }

/* ── 114차: hero 안의 리얼봇 AI 탐색 콘솔 ───────────────────────
   hero 는 먹색 배경(.st-hero)이라 입력창은 흰색, 버튼은 금색 그라데이션으로
   대비를 줍니다. 예시 문장 칩은 가로 스크롤입니다(4개가 한 줄에 안 들어감). */
.st-aiform { display: flex; gap: 8px; margin-top: 16px; }
.st-aiinput { flex: 1; min-width: 0; height: 46px; border-radius: 4px;
  border: 1.5px solid #EBD096; background: #fff; color: var(--ink);
  padding: 0 14px; font-size: 13.5px; font-weight: 600; outline: none; }
.st-aiinput::placeholder { color: #8C8275; font-weight: 500; }
.st-aibtn { flex: none; height: 46px; padding: 0 16px; border-radius: 4px; border: 0;
  background: linear-gradient(135deg, #FCF1D8, #CBA05D); color: var(--ink);
  font-size: 13.5px; font-weight: 900; cursor: pointer; }
.st-aibtn:disabled { opacity: .65; cursor: default; }
.st-aisamples { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px;
  padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.st-aisamples::-webkit-scrollbar { display: none; }
.st-aisample { flex: none; padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(235, 208, 150, .35); background: rgba(255, 255, 255, .08);
  color: #FCF1D8; font-size: 11.5px; cursor: pointer; white-space: nowrap; }

/* ── 114차: 나의 A2A 협상 내역 목록 ─────────────────────────── */
.nego-list { padding: 16px 20px 28px; display: grid; gap: 12px; }
.nego-item { padding: 14px; border: 1px solid #CBA05D; border-radius: 4px; background: var(--card); }
.nego-item .top { display: flex; justify-content: space-between; align-items: center; }
.nego-item .top small { font-size: 11px; color: var(--mute); }
.nego-status { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: var(--ink); color: #EBD096; white-space: nowrap; }
.nego-status.협상타결, .nego-status.통화연결완료 { background: var(--accent); color: #fff; }
.nego-status.협상결렬 { background: #EEF0EC; color: var(--mute); }
.nego-item .name { display: block; font-size: 15px; margin-top: 6px; }
.nego-item .sm { font-size: 12px; color: var(--mute); margin-top: 2px; }
.nego-item .msg { margin-top: 8px; padding: 10px; border-radius: 3px;
  background: #F7F4EC; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.nego-item .acts { display: flex; gap: 8px; margin-top: 10px; }
.nego-item .acts .btn.primary { flex: 1; height: 42px; font-size: 13px;
  display: flex; align-items: center; justify-content: center; text-decoration: none; }
.nego-item .acts .btn.ghost { height: 42px; padding: 0 12px; font-size: 12.5px; }

/* 3개 탭이 된 만큼 글자를 조금 줄여 한 줄에 들어가게 합니다. */
.st-modes { grid-template-columns: repeat(3, 1fr); }

/* 상태 배지 — 스펙 §2.3 코드값 */
.st-st { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 2px;
  font-size: 11px; font-weight: 700; white-space: nowrap; flex: none; }
.st-st.ACTIVE { background: var(--accent); color: #fff; }
.st-st.PAUSED { background: var(--ink); color: #fff; }
.st-st.SOLD { background: #EEF0EC; color: var(--mute); }
.st-st.REVIEW { background: var(--brass-soft); color: #7A5A22; }

/* ── 상세 ─────────────────────────────────────────────────── */
.st-detail-top { background: var(--ink); padding-bottom: 4px; }
.st-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.st-frame iframe, .st-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st-titlebox { padding: 15px 20px 18px; }
.st-titlebox .st-st { margin-bottom: 8px; }
.st-titlebox h2 { font-family: var(--serif); font-size: 22px; font-weight: 800; margin: 0 0 4px;
  color: var(--paper); letter-spacing: -.02em; line-height: 1.3; }
.st-titlebox .sub { font-size: 12.5px; color: rgba(245,242,235,.66); }

.st-spec { display: grid; grid-template-columns: 84px 1fr; gap: 0; padding: 4px 0 0; }
.st-spec dt { font-size: 12px; font-weight: 700; color: var(--mute); padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.st-spec dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 11px 0;
  border-bottom: 1px solid var(--line-2); line-height: 1.5; }
.st-spec dd.pri { color: var(--ink); font-weight: 800; font-size: 14.5px; letter-spacing: -.02em; }
.st-spec dt:last-of-type, .st-spec dd:last-of-type { border-bottom: 0; }

.st-sec { padding: 20px 20px 0; }
.st-sec h4 { margin: 0 0 10px; font-size: 13.5px; font-weight: 800; letter-spacing: -.02em; }
.st-points { display: grid; gap: 8px; }
.st-points li { list-style: none; display: flex; gap: 9px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.st-points li i { font-style: normal; flex: none; width: 17px; height: 17px; margin-top: 2px; border-radius: 2px;
  background: var(--brass-soft); color: #7A5A22; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }

/* AI 고지 · 법적 고지 — 스펙 §3.5, 유튜브 'AI 사용' 공개 요건 */
.st-ai { margin: 20px 20px 0; padding: 13px 15px; border-radius: 4px;
  background: #E7F0F4; border-left: 3px solid #23405A; }
.st-ai b { display: block; font-size: 12.5px; color: #23405A; margin-bottom: 4px; }
.st-ai span { font-size: 12px; line-height: 1.6; color: #2F5670; }

.st-legal { margin: 14px 20px 0; padding: 14px 15px; border-radius: 4px;
  background: var(--brass-soft); border-left: 3px solid var(--brass); }
.st-legal b { display: block; font-size: 12px; color: #5A4419; margin-bottom: 6px; letter-spacing: .02em; }
.st-legal p { margin: 0; }
.st-legal li { font-size: 11.5px; line-height: 1.72; color: #7A5A22; }

/* 하단 CTA — 탭바(64px) 위에 고정 */
.st-cta { position: sticky; bottom: 0; z-index: 6; display: flex; gap: 8px;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: 11px 20px calc(11px + env(safe-area-inset-bottom)); }
.st-cta .btn { height: 48px; font-size: 14.5px; }
.st-cta .btn.call { background: var(--ink); color: #fff; flex: 1; }
.st-cta .btn.form { background: var(--accent); color: #fff; flex: 1; }
.st-cta .btn.ico { width: 48px; flex: none; border: 1px solid var(--line); background: var(--card); }

/* ── 상담 신청 시트 ───────────────────────────────────────── */
.st-field { margin-bottom: 15px; }
.st-field > label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; }
.st-field > label i { font-style: normal; color: var(--accent); }
.st-field .input { height: 48px; }
.st-agree { display: flex; gap: 10px; align-items: flex-start; padding: 13px 14px; border-radius: 4px;
  background: var(--card); border: 1px solid var(--line); margin-bottom: 14px; cursor: pointer; }
.st-agree input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
.st-agree span { font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.st-agree span b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.st-note { font-size: 11px; line-height: 1.65; color: var(--mute-2); margin-top: 12px; }

/* 자동 등록 결과 */
.st-done { text-align: center; padding: 10px 4px 4px; }
.st-done .mark { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--forest); color: #fff; display: grid; place-items: center; }
.st-done h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.st-done p { margin: 0 0 4px; font-size: 13px; line-height: 1.65; color: var(--mute); }
.st-flowbox { margin: 18px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line-2); border-radius: 4px; overflow: hidden; text-align: left; }
.st-flowbox li { list-style: none; background: var(--card); padding: 11px 14px; display: flex; gap: 9px; align-items: flex-start; }
.st-flowbox li i { font-style: normal; flex: none; width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 800; display: grid; place-items: center; margin-top: 1px;
  background: var(--line); color: var(--mute); }
.st-flowbox li.on i { background: var(--forest); color: #fff; }
.st-flowbox li b { display: block; font-size: 12.5px; font-weight: 700; }
.st-flowbox li small { font-size: 11px; color: var(--mute); line-height: 1.55; }

/* ── 내 상담 (로그인 회원) ────────────────────────────────── */
.st-lead { display: flex; gap: 11px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.st-lead:last-child { border-bottom: 0; }
.st-lead .av { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--paper);
  display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--forest); }
.st-lead .info { flex: 1; min-width: 0; }
.st-lead .info b { font-size: 14px; font-weight: 700; }
.st-lead .info .sm { font-size: 12px; color: var(--mute); line-height: 1.55; margin-top: 2px; }
.st-lead .lk { flex: none; font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 2px; align-self: flex-start; white-space: nowrap; }
.st-lead .lk.연결완료 { background: #E4F2EA; color: var(--ok); }
.st-lead .lk.연결대기 { background: var(--brass-soft); color: #7A5A22; }
.st-lead .lk.중복 { background: #EEF0EC; color: var(--mute); }
.st-lead .lk.보류 { background: #F7E6E1; color: var(--accent); }

/* 연결 현황 요약 */
.st-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin: 0 20px; }
.st-sum div { background: var(--card); padding: 14px 8px; text-align: center; }
.st-sum b { display: block; font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--ink); }
.st-sum span { display: block; font-size: 11px; color: var(--mute); margin-top: 3px; }

/* ── 연동 안내 (외부 서비스) ──────────────────────────────── */
/* 무한 스크롤 하단(더보기 버튼 + 누적 건수) — 목록과 하단 연동 상태 박스 사이에 둡니다. */
.st-more { padding: 4px 20px 18px; }
.st-more .btn { margin-bottom: 2px; }
.st-more .st-note { margin-top: 8px; }

.st-conn { margin: 18px 20px 0; padding: 14px 15px; border: 1px dashed var(--line); border-radius: 4px; }
.st-conn b { display: block; font-size: 12px; font-weight: 800; color: var(--ink-2); margin-bottom: 8px; }
.st-conn .r { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--mute); padding: 5px 0; }
.st-conn .r i { font-style: normal; width: 6px; height: 6px; border-radius: 50%; background: var(--mute-2); flex: none; }
.st-conn .r.on i { background: var(--ok); }
.st-conn .r span { flex: 1; }
.st-conn .r em { font-style: normal; font-weight: 700; color: var(--ink-2); }

/* 좁은 화면 보정 */
/* 50차: 파이프 칩 4개가 한 줄에 들어가도록 폭을 줄입니다.
   실측 — 칩 4개 + '›' 3개 + gap 6px = 297px, 가용폭은 (화면폭 - 66px)이라
   375px 미만(가용 ≤309 → 361~374px는 295~308)에서는 2줄로 접혔습니다.
   gap 4px · 좌우 패딩 8px 로 줄이면 269px 이 되어 360px(가용 294)까지 한 줄에 들어갑니다. */
@media (max-width: 374px) {
  .st-pipe { gap: 4px; }
  .st-pipe span { padding: 4px 8px; }
}
/* 320px대에서는 한 번 더 조입니다(실측 231px / 가용 254px). */
@media (max-width: 340px) {
  .st-pipe { gap: 3px; }
  .st-pipe span { padding: 4px 6px; font-size: 10px; }
  .st-pipe i { font-size: 10.5px; }
}
@media (max-width: 360px) {
  .st-hero h1 { font-size: 22px; }
  .st-spec { grid-template-columns: 72px 1fr; }
  .st-cta { padding-left: 14px; padding-right: 14px; }
  .st-cta .btn { font-size: 13.5px; }
}