/* ============================================================
   bacon-ai 웹 콘솔(app.html) 전용 스타일.
   styles.css의 :root 토큰·.btn·.chip·.container·.eyebrow·.section-head를 재사용한다.
   ============================================================ */

body.appx { background: var(--bg-alt); min-height: 100vh; }

.appx .nav__email {
  font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appx a.nav__email:hover { color: var(--blue); text-decoration: underline; }
.appx .nav__cta { display: flex; align-items: center; gap: 12px; }

.appx-main { padding: 40px 24px 96px; }

/* 전역 메시지 */
.appx-msg {
  max-width: var(--container); margin: 16px auto 0; padding: 12px 16px;
  border-radius: 12px; font-size: 14px; font-weight: 600;
  background: var(--accent-blue); color: var(--blue); border: 1px solid #cdd9ff;
}
.appx-msg--ok { background: var(--accent-green); color: #067a5e; border-color: #b8ead9; }
.appx-msg--err { background: #fdecec; color: #c0392b; border-color: #f5c6c6; }

.view { animation: appxFade .25s ease; }
@keyframes appxFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.section-head--left { text-align: left; align-items: flex-start; max-width: 720px; margin: 0 0 28px; }
.section-head--left h1 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 850; letter-spacing: -0.03em; }
.section-head--left p { margin-top: 12px; color: var(--muted); }

/* ---------- 폼 공통 ---------- */
/* ⚠️ display를 지정하는 author 규칙은 UA의 [hidden]{display:none}을 이긴다. 이 코드베이스의
   #view-auth:not([hidden])·.ws-panel:not([hidden]) 관례와 동일하게, hidden 시 확실히 접히도록
   높은 특이도 가드를 둔다(생성 폼·액션 영역이 hidden으로 접히는 요구가 이 규칙에 의존). */
.appx-form[hidden], .wsc[hidden], .wsc-actions[hidden], .wsc-card[hidden], .wsc-analyze[hidden],
.ws-created[hidden], .wsp[hidden], .wsp-steps[hidden], .wsp__bg[hidden] { display: none; }
.appx-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; font-weight: 700; color: var(--ink); }
.field input, .field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px;
  font: inherit; font-size: 15px; color: var(--ink); background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 92, 255, 0.14);
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field--full { grid-column: 1 / -1; }
.appx-form__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ws-analyze-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 4px; }
.ws-analyze-msg { font-size: 13px; color: var(--muted-2); line-height: 1.5; }

/* ==========================================================================
   원클릭 온보딩 v2 — 최소 입력 + AI 분석 1클릭 (수려한 스텝형 카드)
   ========================================================================== */
.wsc { display: grid; gap: 20px; }

/* 생성은 별도 화면 — 폼 자체 헤더(목록으로 돌아가기) */
.wsc-formhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 2px; }
.wsc-formhead .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.wsc-formhead h2 { margin: 6px 0 0; font-size: 24px; font-weight: 850; letter-spacing: -.03em; }
.wsc-back { flex: none; background: #fff; border: 1.5px solid var(--border); color: var(--muted); font: inherit;
  font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 10px; cursor: pointer; transition: border-color .15s, color .15s; }
.wsc-back:hover { border-color: #b9c6e6; color: var(--ink); }

/* 유형 선택 카드 */
.wsc-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wsc-kind {
  position: relative; display: grid; gap: 4px; padding: 18px 18px 16px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.wsc-kind:hover { border-color: #b9c6e6; }
.wsc-kind input { position: absolute; opacity: 0; pointer-events: none; }
.wsc-kind__ic { font-size: 22px; line-height: 1; }
.wsc-kind b { font-size: 15px; font-weight: 800; color: var(--ink); }
.wsc-kind small { font-size: 12.5px; color: var(--muted-2); line-height: 1.4; }
.wsc-kind:has(input:checked) {
  border-color: var(--blue); background: linear-gradient(180deg, #f7faff, #fff);
  box-shadow: 0 0 0 3px rgba(23, 92, 255, 0.12), var(--shadow-sm);
}
.wsc-kind:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(23, 92, 255, 0.28); }

/* 스텝 카드 */
.wsc-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff;
  padding: 22px 22px 20px; box-shadow: var(--shadow-sm);
}
.wsc-card__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.wsc-card__head h3 { margin: 1px 0 3px; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.wsc-card__sub { margin: 0; font-size: 13px; color: var(--muted-2); line-height: 1.5; }
.wsc-step-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--grad-135); color: #fff;
  font-size: 13px; font-weight: 800;
}

/* 필드 */
.wsc-field { display: grid; gap: 6px; }
.wsc-field + .wsc-field { margin-top: 14px; }
.wsc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wsc-grid2 .wsc-field + .wsc-field { margin-top: 0; }
.wsc-field--full { grid-column: 1 / -1; }
.wsc-card label, .wsc-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.wsc-opt { font-weight: 500; color: var(--muted-2); font-size: 12px; }
.wsc-req { color: var(--blue); }
.wsc-card input, .wsc-card select, .wsc-card textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 11px;
  font: inherit; font-size: 14px; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s, background .3s;
}
.wsc-card input:focus, .wsc-card select:focus, .wsc-card textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 92, 255, 0.14);
}
.wsc-channels { display: grid; gap: 10px; margin-top: 8px; }
.wsc-channel { position: relative; }
.wsc-channel input { padding-right: 132px; }
.wsc-chip {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  max-width: 120px; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s ease;
}
.wsc-chip:not(:empty) { opacity: 1; }

/* AI 분석 버튼(그라데이션 히어로) */
.wsc-analyze-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 18px; padding: 15px 18px;
  border: none; border-radius: 13px; cursor: pointer; text-align: left;
  background: var(--grad-135); color: #fff; box-shadow: 0 10px 24px rgba(23, 92, 255, 0.24);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.wsc-analyze-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(23, 92, 255, 0.3); }
.wsc-analyze-btn:active { transform: translateY(0); }
.wsc-analyze-btn:disabled { filter: grayscale(.35) brightness(.98); cursor: default; transform: none; box-shadow: var(--shadow-sm); }
.wsc-analyze-btn__spark { font-size: 20px; line-height: 1; }
.wsc-analyze-btn__label { display: grid; gap: 1px; font-size: 15px; font-weight: 800; }
.wsc-analyze-btn__label small { font-size: 12px; font-weight: 500; opacity: .92; }
.wsc-note { margin: 12px 0 0; font-size: 12px; color: var(--muted-2); line-height: 1.5; }

/* 분석 진행 패널 */
.wsc-analyze {
  border: 1px solid #d7e2fb; border-radius: var(--radius-sm); background: linear-gradient(180deg, #f7faff, #fff);
  padding: 18px 20px 16px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.wsc-analyze__bar { height: 4px; border-radius: 4px; background: #e3ebfb; overflow: hidden; margin: -2px -2px 14px; }
.wsc-analyze__scan { display: block; height: 100%; width: 34%; border-radius: 4px; background: var(--grad); animation: wscScan 1.15s ease-in-out infinite; }
.wsc-analyze.is-done .wsc-analyze__scan { width: 100%; animation: none; }
.wsc-analyze.is-fail .wsc-analyze__scan { width: 100%; animation: none; background: #f04438; }
@keyframes wscScan { 0% { margin-left: -34%; } 100% { margin-left: 100%; } }
.wsc-analyze__title { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.wsc-analyze__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.wsc-analyze__step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #98a2b3; transition: color .25s ease; }
.wsc-analyze__mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: #eaeef5; color: #98a2b3; font-size: 11px; font-weight: 800; transition: all .25s ease;
}
.wsc-analyze__step.is-active { color: var(--blue); font-weight: 700; }
.wsc-analyze__step.is-active .wsc-analyze__mark {
  background: rgba(23,92,255,.12); color: var(--blue);
  box-shadow: 0 0 0 0 rgba(23,92,255,.35); animation: wscPulse 1s ease-out infinite;
}
@keyframes wscPulse { 0% { box-shadow: 0 0 0 0 rgba(23,92,255,.32); } 100% { box-shadow: 0 0 0 7px rgba(23,92,255,0); } }
.wsc-analyze__step.is-done { color: var(--ink); }
.wsc-analyze__step.is-done .wsc-analyze__mark { background: #067a5e; color: #fff; }
.wsc-analyze__step.is-fail { color: #b42318; }
.wsc-analyze__step.is-fail .wsc-analyze__mark { background: #f04438; color: #fff; }
.wsc-analyze__found { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--teal); opacity: 0; transition: opacity .3s ease; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsc-analyze__step.is-done .wsc-analyze__found { opacity: 1; }
.wsc-analyze__msg { margin-top: 12px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.wsc-analyze__msg:empty { display: none; }

/* AI가 채운 필드 강조 */
.wsc-ai-badge {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px;
  background: rgba(23,92,255,.1); color: var(--blue); font-size: 11px; font-weight: 800; vertical-align: middle;
}
.wsc-field.is-ai-filled > label::after {
  content: "✨ AI"; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  background: rgba(23,92,255,.1); color: var(--blue); font-size: 10.5px; font-weight: 800;
}
.wsc-field.is-ai-filled input, .wsc-field.is-ai-filled textarea, .wsc-field.is-ai-filled select { animation: wscFill 1.1s ease; }
@keyframes wscFill {
  0% { background: rgba(23,92,255,.14); border-color: var(--blue); }
  100% { background: #fff; border-color: var(--border); }
}

.wsc-advanced { margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 12px; }
.wsc-advanced summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); }
.wsc-advanced[open] summary { margin-bottom: 12px; }
.wsc-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* 만들기 버튼은 확인·수정 카드가 열린 뒤에만 노출한다(id+attr 특이도로 .btn display 규칙을 이긴다). */
#btn-ws-create[hidden] { display: none; }
/* '직접 입력할게요' 텍스트 링크(웹사이트·채널이 없는 경우 탈출구) */
.wsc-manual-link { display: inline; margin-left: 4px; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--blue); font: inherit; font-size: 12px; font-weight: 700; }
.wsc-manual-link:hover { text-decoration: underline; }
/* 확인·수정 카드가 나타날 때 부드러운 등장 */
#wsc-review-card:not([hidden]) { animation: wscReveal .35s ease; }
@keyframes wscReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   자동 설정 진행 카드(.wsp-*) — 심플·세련·임팩트: 현재 단계 1개가 주인공.
   렌더러 renderWsSetupSteps 공용(생성 폼 #ws-setup-progress · 콘솔 #console-setup-progress).
   ⚠️ display를 주는 규칙은 UA [hidden]을 이긴다 — 상단 가드 목록(.wsp[hidden] 등)에 등록 필수.
   ========================================================================== */
.wsp {
  margin-top: 4px; padding: 18px 20px 14px; border: 1px solid #d7e2fb; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #f7faff, #fff); box-shadow: var(--shadow-sm); display: grid; gap: 12px;
}
.wsp--embed { margin-top: 14px; box-shadow: none; }
.wsp__bar { height: 3px; border-radius: 3px; background: #e3ebfb; overflow: hidden; margin: -2px 0 0; }
.wsp__bar i { display: block; height: 100%; width: 30%; border-radius: 3px; background: var(--grad); animation: wscScan 1.4s ease-in-out infinite; }
.wsp__title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.wsp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wsp-step { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 0; min-height: 27px; font-size: 13px; color: #a5aebd; transition: color .2s ease, font-size .2s ease; }
.wsp-step__mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
  border-radius: 50%; font-size: 10.5px; font-weight: 800; color: #c2cad7; transition: all .2s ease;
}
.wsp-step__label { min-width: 0; }
.wsp-step__meta { margin-left: auto; padding-left: 12px; font-size: 12px; font-weight: 700; color: var(--teal); text-align: right; }
/* 대기·건너뜀: 흐린 라벨 + 점 마크 */
.wsp-step.is-pending .wsp-step__mark::before, .wsp-step.is-skip .wsp-step__mark::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: #d3dae5;
}
/* 완료: 컴팩트 한 줄(작은 ✓ + 라벨 + 핵심 수치) */
.wsp-step.is-done { color: var(--ink); }
.wsp-step.is-done .wsp-step__mark { background: var(--accent-green); color: #067a5e; }
/* 실패: ✗ + 짧은 사유 */
.wsp-step.is-fail { color: #b42318; }
.wsp-step.is-fail .wsp-step__mark { background: #fee4e2; color: #b42318; }
.wsp-step.is-fail .wsp-step__meta { color: #b42318; font-weight: 600; }
/* 현재 단계 = 주인공: 큰 라벨 + 라벨 옆 3점 펄스 */
.wsp-step.is-active { color: var(--ink); font-size: 15px; font-weight: 800; min-height: 34px; }
.wsp-step.is-active .wsp-step__mark { background: rgba(23, 92, 255, 0.12); }
.wsp-step.is-active .wsp-step__mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.wsp-step__dots { display: inline-flex; gap: 4px; margin-left: 2px; color: var(--blue); }
.wsp-step__dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .25; animation: wspDots 1.2s ease-in-out infinite; }
.wsp-step__dots i:nth-child(2) { animation-delay: .18s; }
.wsp-step__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes wspDots { 0%, 55%, 100% { opacity: .25; transform: none; } 25% { opacity: 1; transform: translateY(-2px); } }
.wsp__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; border-top: 1px dashed var(--border); padding-top: 11px; }
.wsp__hint { font-size: 12px; color: var(--muted-2); }
/* 과제 A 보조 버튼: 설정은 백그라운드로 계속 — 대시보드 먼저 보기 */
.wsp__bg { border: none; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--blue); }
.wsp__bg:hover { text-decoration: underline; }
/* 결과 화면의 단계 요약(innerHTML 복사본)은 흰 카드 안 — 은은한 컨테이너로 감싼다 */
.ws-created .wsp-steps { padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fbfcfe; }
/* 대시보드 라이브 배지(백그라운드 체인 진행 중) — 펄스 점 */
.wsp-live {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
  background: var(--accent-blue); color: var(--blue); font-size: 12px; font-weight: 800; white-space: nowrap; vertical-align: middle;
}
.wsp-live i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: wspLive 1.3s ease-in-out infinite; }
@keyframes wspLive { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.72); } }

/* 콘솔 이어하기/완료 카드 */
#console-setup-card:not(:empty) { margin-bottom: 18px; }
.console-card--setup { border-left: 4px solid var(--blue); }

/* 생성 이후 결과·다음 단계 화면 */
.ws-created { max-width: 640px; margin: 0 auto; display: grid; gap: 20px; padding: 26px 24px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-sm); animation: wscReveal .35s ease; }
.ws-created__head { display: flex; gap: 14px; align-items: flex-start; }
.ws-created__ic { font-size: 30px; line-height: 1; flex: none; }
.ws-created__head .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.ws-created__head h1 { margin: 6px 0 6px; font-size: 24px; font-weight: 850; letter-spacing: -.03em; }
.ws-created__sub { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
.ws-created__notice { padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.55; }
.ws-created__notice.is-warn { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.ws-created__notice.is-ok { background: var(--accent-green); border: 1px solid #cfeadd; color: #067a5e; }
.ws-created__next h2 { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.ws-created__nextlist { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.ws-created__nextlist b { color: var(--ink); }
.ws-created__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

@media (max-width: 640px) {
  .wsc-kinds, .wsc-grid2 { grid-template-columns: 1fr; }
  .wsc-channel input { padding-right: 13px; }
  .wsc-chip { position: static; transform: none; display: block; max-width: none; margin-top: 4px; }
}

/* ---------- AUTH ---------- */
/* ID 선택자는 [hidden]을 이기므로 :not([hidden])으로 한정 — 숨김이 정상 동작하도록 */
#view-auth:not([hidden]) { display: grid; place-items: center; min-height: 60vh; }
.auth-card {
  position: relative;
  width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow-sm); text-align: left;
}
/* 카드(모달) 우상단 닫기 — 헤더 nav와 달리 @720 규칙의 영향을 받지 않아 모든 화면에서 항상 보인다.
   index.html로 나간다(랜딩에서 ?signup=1로 들어온 흐름의 자연스러운 '닫기'). */
.auth-card__close {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; color: var(--muted-2); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.auth-card__close:hover { background: var(--bg-alt); color: var(--ink); }
.auth-card__close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.auth-card__title { margin: 10px 0 8px; font-size: 26px; font-weight: 850; letter-spacing: -0.03em; }
/* 가입 혜택(무료 체험·카드 불필요) 리스트 */
.auth-perks { margin: 4px 0 14px; display: flex; flex-direction: column; gap: 6px; }
.auth-perks li { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.auth-perks li::before { content: "✓"; color: var(--teal); font-weight: 800; }
.auth-perks strong { color: var(--blue); }
.auth-card .appx-form__actions .btn { flex: 1 1 auto; }

/* 초대 수락 뷰 — 이메일은 고정값이라 입력이 아니라 '확인용'으로 읽히도록 눌러 둔다. */
.auth-invite-note { margin: 2px 0 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.auth-invite-alt { margin: 16px 0 0; font-size: 13px; color: var(--muted-2); }
.auth-invite-alt a { color: var(--blue); }
#invite-email[readonly] { background: var(--bg-alt); color: var(--muted); cursor: default; }

/* ---------- WORKSPACE GATE ---------- */
.ws-list { display: flex; flex-direction: column; gap: 24px; max-width: 720px; }
.ws-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 20px; box-shadow: var(--shadow-sm);
}
.ws-card__body b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.ws-card__body small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted-2); }
.ws-empty { color: var(--muted); font-size: 15px; padding: 8px 0; }
.ws-empty--err { color: #c0392b; }

.ws-create { max-width: 720px; margin-top: 20px; }
.ws-create__toggle {
  width: 100%; padding: 14px; border: 1.5px dashed #c7d2e8; border-radius: var(--radius-sm);
  background: #fff; color: var(--blue); font-weight: 800; font-size: 15px; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.ws-create__toggle:hover { background: var(--accent-blue); border-color: var(--blue); }
.ws-create__form {
  margin-top: 4px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
}
.ws-foot { margin-top: 24px; }
.linklike { background: none; border: none; color: var(--muted-2); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.linklike:hover { color: var(--ink); }

/* ---------- CONSOLE ---------- */
.console-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  max-width: var(--container); margin: 0 auto 28px;
}
.console-head h1 { font-size: clamp(22px, 3vw, 30px); font-weight: 850; letter-spacing: -0.03em; margin-top: 6px; }
.console-head__id { margin-top: 6px; font-size: 13px; color: var(--muted-2); }
.console-head__id code { background: #eef1f6; padding: 2px 7px; border-radius: 6px; font-size: 12.5px; }
.console-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.console-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start;
}
.console-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 26px 28px; box-shadow: var(--shadow-sm);
}
.console-card__title { font-size: 18px; font-weight: 850; letter-spacing: -0.02em; }
.console-card__desc { margin: 8px 0 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.console-card--locked { grid-column: 1 / -1; background: linear-gradient(180deg, #fff, #fbfcfe); }
.console-card--wide { grid-column: 1 / -1; }
.account-wrap { max-width: 760px; margin: 0 auto; }

.locked-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 20px; }
.locked-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-alt); }
.locked-list__ic { font-size: 16px; line-height: 1.4; flex: 0 0 auto; }
.locked-list b { display: block; font-size: 14.5px; color: var(--ink); }
.locked-list small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted-2); line-height: 1.5; }

/* 상태 카드 */
.status-box { font-size: 14px; }
.status-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.status-row span { color: var(--muted); }
.status-row b { color: var(--ink); font-weight: 800; }
.status-grants { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.status-none { color: var(--muted-2); font-size: 13px; }
.status-hint { font-size: 13px; color: var(--muted-2); line-height: 1.6; }
.status-hint a { color: var(--blue); font-weight: 700; }
/* 무료 체험 상태 배지(플랜 탭 상단) */
.status-trial {
  margin-bottom: 12px; padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--accent-green, #e8f8f1); color: #067a5e; border: 1px solid #c5eede;
  font-size: 14px; font-weight: 600; line-height: 1.6;
}
.status-trial--over { background: #fdf3e7; color: #9a5b13; border-color: #f3ddba; }
/* 워크스페이스 생성 고급 설정(<details>) */
.ws-advanced { margin-top: 12px; }
.ws-advanced summary { cursor: pointer; font-size: 13.5px; color: var(--muted-2); font-weight: 600; }
.ws-advanced[open] summary { margin-bottom: 8px; }

/* 계정 드롭다운 메뉴 (헤더) */
.usermenu { position: relative; }
.usermenu__btn {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px;
  font: inherit; color: var(--ink); transition: border-color .15s ease, background .15s ease;
}
.usermenu__btn:hover { border-color: #cdd9ff; background: var(--accent-blue); }
.usermenu__email { font-size: 13.5px; font-weight: 600; color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu__ic { display: inline-flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.usermenu__ic i { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--ink); }
.usermenu__dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; z-index: 70;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 6px;
}
.usermenu__dropdown a, .usermenu__dropdown button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: none; border: none; cursor: pointer; text-decoration: none;
}
.usermenu__dropdown a:hover, .usermenu__dropdown button:hover { background: var(--bg-alt); }
.usermenu__dropdown #btn-logout-menu { color: #c0392b; margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0; }

/* 워크스페이스 탭 (기본정보 · 사업자정보 · 플랜정보 · 결제정보) */
.ws-tabs {
  display: flex; flex-wrap: wrap; gap: 2px; max-width: var(--container); margin: 0 auto 22px;
  border-bottom: 1px solid var(--border);
}
.ws-tab {
  padding: 11px 20px; border: none; background: none; cursor: pointer; font: inherit;
  font-size: 15px; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s ease;
}
.ws-tab:hover { color: var(--ink); }
.ws-tab.is-active { color: var(--blue); border-bottom-color: var(--blue); }
.ws-panels { max-width: var(--container); margin: 0 auto; }
/* [hidden]이 확실히 이기도록 :not으로 한정 (탭 전환이 실제로 동작) */
.ws-panel:not([hidden]) { display: grid; gap: 22px; }

/* 이 공간 용도 안내 */
.ws-intro {
  display: flex; gap: 12px; align-items: flex-start; max-width: var(--container);
  margin: 0 auto 26px; padding: 16px 20px; background: var(--accent-blue);
  border: 1px solid #d6e2ff; border-radius: 14px;
}
.ws-intro__ic { font-size: 20px; line-height: 1.3; flex: 0 0 auto; }
.ws-intro p { font-size: 14px; line-height: 1.65; color: var(--ink); }
.ws-intro b { font-weight: 800; }

/* 섹션 구분(정보설정 / 발송설정) */
.ws-section-head { display: flex; align-items: center; gap: 10px; max-width: var(--container); margin: 0 auto 16px; }
.ws-section-head--app { margin-top: 40px; }
.ws-section-head h2 { font-size: 18px; font-weight: 850; letter-spacing: -0.02em; }
.ws-badge { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.ws-badge--web { background: var(--accent-green); color: #067a5e; }
.ws-badge--app { background: #eef1f6; color: var(--muted); }
.ws-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* 게이트: 소유/운영 그룹 */
.ws-group { display: flex; flex-direction: column; gap: 10px; }
.ws-group__title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--muted); margin: 0 0 2px; }
.ws-group__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-blue); color: var(--blue); font-size: 11px; font-weight: 800; }

/* ---------- 콘솔 대시보드 탭 (.wsd-*) — 앱 대시보드 패리티 ---------- */
#ws-dash { display: grid; gap: 22px; }
.wsd-loading { color: var(--muted); font-size: 14px; }
.wsd-hero { border-left: 4px solid var(--blue); }
.wsd-hero .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.wsd-hero .console-card__title { margin-top: 6px; }
.wsd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wsd-head .console-card__title { margin-right: auto; }
.wsd-head + .console-card__desc, .wsd-head + .wsd-note, .wsd-head + .wsd-chips { margin-top: 10px; }
.wsd-metric { font-size: 12.5px; font-weight: 800; color: var(--blue); background: var(--accent-blue); padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.wsd-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #eef1f6; color: var(--muted); white-space: nowrap; }
.wsd-badge--run { background: var(--accent-blue); color: var(--blue); }
.wsd-badge--ok { background: var(--accent-green); color: #067a5e; }
.wsd-note { margin: 10px 0 14px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
/* 진행 현황 8행(체인 5 + 앱 훅 3) */
.wsd-progress { list-style: none; margin: 6px 0 0; padding: 0; }
.wsd-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.wsd-row:last-child { border-bottom: none; }
.wsd-row__label { color: var(--ink); font-weight: 600; }
.wsd-row__note { font-size: 11.5px; color: var(--muted-2); }
.wsd-row__status { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted-2); white-space: nowrap; }
.wsd-row.is-done .wsd-row__status { color: #067a5e; }
.wsd-row.is-running .wsd-row__status { color: var(--blue); }
.wsd-row.is-error .wsd-row__status { color: #b42318; }
/* 글감 미리보기 */
.wsd-seeds { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.wsd-seeds li { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-alt); font-size: 13.5px; }
.wsd-seeds b { color: var(--ink); font-weight: 700; }
.wsd-seeds small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-2); line-height: 1.45; }
/* 출처·상태 배지(글감 출처, 글 상태) — 제목 옆 인라인. 공용 .wsd-badge에 간격만 얹는다. */
.wsd-seed-src { margin-left: 6px; }
/* 5건 초과분 접기 — 목록을 다 보여주되 첫 화면 밀도는 유지한다. */
.wsd-more { margin-top: 8px; }
.wsd-more > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.wsd-more > summary:hover { color: var(--ink); }
.wsd-more .wsd-seeds { margin-top: 8px; }
/* 이미지 후보 썸네일(라이선스·작가 표기 유지) */
.wsd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 0; max-height: 190px; overflow: hidden; }
.wsd-thumbs figure { margin: 0; min-width: 0; }
.wsd-thumbs img { display: block; width: 100%; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-alt); }
.wsd-thumbs figcaption { margin-top: 4px; font-size: 11px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 전략 주제 칩 */
.wsd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
/* 계정 연결 */
.wsd-connect { display: grid; gap: 16px; margin: 4px 0 2px; }
.wsd-connect__row { display: grid; gap: 6px; }
.wsd-connect__row label { font-size: 13px; font-weight: 700; color: var(--ink); }
.wsd-connect__ctl { display: flex; gap: 8px; }
.wsd-connect__ctl input { flex: 1 1 auto; min-width: 0; padding: 10px 13px; border: 1px solid var(--border); border-radius: 11px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; }
.wsd-connect__ctl input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 92, 255, 0.14); }
.wsd-connect__state { font-size: 12.5px; color: var(--muted-2); }
.wsd-connect__state.is-ok { color: #067a5e; font-weight: 700; }
.wsd-card .ws-cta-row { margin-top: 14px; }

@media (max-width: 860px) {
  .field-grid { grid-template-columns: 1fr; }
  .console-grid { grid-template-columns: 1fr; }
  .ws-tab { padding: 10px 14px; font-size: 14px; }
}
@media (max-width: 640px) {
  .wsd-thumbs { grid-template-columns: repeat(2, 1fr); max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
  .wsp__bar i, .wsp-step__dots i, .wsp-live i { animation: none; }
  .wsp-step__dots i { opacity: .7; }
}