/**
 * NTurn — Hero Workspace Mockup CSS
 * ============================================================
 * 이 파일은 Dashboard의 히어로 섹션 우측에 표시되는
 * 통합 워크스페이스 미니 목업 컴포넌트의 CSS입니다.
 *
 * 의존성:
 *   - Plus Jakarta Sans + Noto Sans KR (Google Fonts)
 *   - Bootstrap Icons @1.11.3
 *   - 아래 CSS 변수가 상위 :root 에 선언되어 있어야 합니다:
 *       --accent:      #00d4aa
 *       --accent-dim:  rgba(0,212,170,0.10)
 *       --accent-glow: rgba(0,212,170,0.22)
 *       --r-lg:        14px
 *       --r-sm:        6px
 *
 * HTML 구조:
 *   <div class="ws-shell">
 *     <div class="ws-titlebar"> … </div>   ← grid-column: 1/-1
 *     <div class="ws-sidebar"> … </div>
 *     <div class="ws-main"> … </div>
 *     <div class="ws-ctx"> … </div>
 *   </div>
 * ============================================================
 */

/* ── Shell (3-column dark grid) ─────────────────────────── */
.ws-shell {
  background: #0b0b16;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;               /* --r-lg */
  box-shadow:
    0 0 0 1px rgba(0, 212, 170, .10),
    0 32px 80px rgba(0, 0, 0, .70),
    0 0 80px rgba(0, 212, 170, .04);
  overflow: hidden;
  display: grid;
  /* sidebar 148(v1 뱃지), main(1fr — TM% chip 1줄), ctx 104→128 ("모든 보스를 처치하세요" 1줄 표시) */
  grid-template-columns: 148px 1fr 128px;
  grid-template-rows: 32px 1fr;
  font-family: 'Plus Jakarta Sans', 'Noto Sans KR', sans-serif;

  /* ──────────────────────────────────────────────────────
     컨테이너 + 폰트 통합 확대 — 사용자 요청 (2026-05-04):
     - 작은 폰트(.5rem~.6rem)가 번짐 → 픽셀 단위 비례 확대로 해결
     - zoom은 transform과 달리 폰트 raster X — sharp 유지
     - 컨테이너도 동시 확대 → hero section 하단 여백 자연 흡수
     ────────────────────────────────────────────────────── */
  zoom: 1.15;

  /* ──────────────────────────────────────────────────────
     Font rendering — light text on dark bg:
     - subpixel-antialiased는 RGB fringing(색번짐) 유발 → antialiased(grayscale) 정답
     - text-rendering 명시 X (browser default — 한글은 geometricPrecision이 stroke 깨뜨림)
     - 자식 요소도 inherit
     ────────────────────────────────────────────────────── */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ws-shell * {
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
}

/* ── Titlebar ─────────────────────────────────────────────── */
.ws-titlebar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .875rem;
  background: rgba(255, 255, 255, .015);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ws-dot { width: 8px; height: 8px; border-radius: 50%; }
.ws-dot-r { background: #ff5f57; }
.ws-dot-y { background: #febc2e; }
.ws-dot-g { background: #28c840; }

.ws-title {
  flex: 1;
  text-align: center;
  font-size: .6rem;
  color: rgba(255, 255, 255, .20);
  letter-spacing: .03em;
  font-weight: 500;
}

.ws-badge {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: rgba(0, 212, 170, .15);
  color: #00d4aa;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.ws-sidebar {
  border-right: 1px solid rgba(255, 255, 255, .05);
  padding: .5rem 0;
  overflow: hidden;
}

.ws-sb-section {
  padding: .25rem .625rem;
  margin-bottom: .125rem;
}

.ws-sb-head {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .575rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .30);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .2rem .25rem;
  margin-bottom: .2rem;
}
.ws-sb-head i { font-size: .65rem; }

.ws-sb-item {
  font-size: .6rem;
  color: rgba(255, 255, 255, .20);
  padding: .2rem .5rem;
  border-radius: 4px;
  cursor: default;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.ws-sb-item.active {
  background: rgba(0, 212, 170, .08);
  color: rgba(255, 255, 255, .55);
}
.ws-sb-item i { font-size: .65rem; opacity: .6; }

.ws-sb-badge {
  margin-left: auto;
  font-size: .5rem;
  font-weight: 700;
  background: rgba(0, 212, 170, .15);
  color: #00d4aa;
  padding: .05rem .3rem;
  border-radius: 3px;
}

/* Progress bar inside sidebar */
.ws-sb-progress { margin: 0 .25rem .5rem; }

.ws-sb-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: .5rem;
  color: rgba(255, 255, 255, .20);
  margin-bottom: .2rem;
}
.ws-sb-progress-label span:last-child {
  color: #00d4aa;
  font-weight: 700;
}

.ws-sb-progress-bar {
  height: 2px;
  background: rgba(255, 255, 255, .05);
  border-radius: 1px;
  overflow: hidden;
}
.ws-sb-progress-fill {
  height: 100%;
  background: #00d4aa;
  border-radius: 1px;
}

/* ── Main editor area ─────────────────────────────────────── */
.ws-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ws-toolbar {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .35rem .625rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  background: rgba(255, 255, 255, .01);
  flex-shrink: 0;
}

.ws-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .18rem .5rem;
  font-size: .575rem;
  font-weight: 600;
  border-radius: 3px;
  border: none;
  white-space: nowrap;     /* button text 줄바꿈 방지 — 1줄 표시 강제 */
  flex-shrink: 0;          /* toolbar 폭 부족 시 button이 압축되지 않도록 */
  cursor: default;
  letter-spacing: .01em;
  font-family: inherit;
}
.ws-tb-btn.primary  { background: #00d4aa; color: #000; }
.ws-tb-btn.outline  { background: rgba(255,255,255,.05); color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.10); }
.ws-tb-btn.style    { background: rgba(139,92,246,.15); color: #a78bfa; border: 1px solid rgba(139,92,246,.20); }

.ws-tb-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .08);
  margin: 0 .125rem;
}

.ws-tb-lang {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .575rem;
  color: rgba(255, 255, 255, .25);
  border: 1px solid rgba(255, 255, 255, .07);
  padding: .15rem .4rem;
  border-radius: 3px;
}

/* ── Grid ─────────────────────────────────────────────────── */
.ws-grid { flex: 1; overflow: hidden; }

.ws-grid-head {
  display: grid;
  /* Source 1fr→.85fr (target 시작점 왼쪽 이동) + Match .28fr→.4fr (TM% chip 잘림 해결) */
  grid-template-columns: .18fr .85fr 1fr .4fr;
  padding: .2rem .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.ws-gh-cell {
  font-size: .525rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255, 255, 255, .15);
  padding: .1rem .25rem;
}

.ws-row {
  display: grid;
  /* Source 1fr→.85fr (target 시작점 왼쪽 이동) + Match .28fr→.4fr (TM% chip 잘림 해결) */
  grid-template-columns: .18fr .85fr 1fr .4fr;
  padding: 0 .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .025);
  transition: background .2s;
}
.ws-row.active-row { background: rgba(0, 212, 170, .05); }

.ws-cell {
  font-size: .6rem;
  color: rgba(255, 255, 255, .35);
  padding: .3rem .25rem;
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ws-cell.tgt             { color: rgba(255, 255, 255, .72); font-weight: 500; }
.ws-cell.tgt.typing-cell { color: #00d4aa; }
.ws-cell.num             { color: rgba(255, 255, 255, .20); font-size: .55rem; }

/* Match chips */
.ws-match-chip {
  display: inline-flex;
  align-items: center;
  font-size: .5rem;
  font-weight: 700;
  padding: .1rem .3rem;
  border-radius: 3px;
  align-self: center;
  justify-self: start;
  margin-top: .25rem;
  white-space: nowrap;
}
.ws-match-chip.full  { background: rgba(0,212,170,.15);  color: #00d4aa; }
.ws-match-chip.high  { background: rgba(99,102,241,.15); color: #a5b4fc; }
.ws-match-chip.ai    { background: rgba(249,115,22,.12); color: #fb923c; }
.ws-match-chip.empty { background: rgba(255,255,255,.04); color: rgba(255,255,255,.20); }

/* ── Context panel ────────────────────────────────────────── */
.ws-ctx {
  border-left: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ws-ctx-head {
  padding: .3rem .625rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: .575rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .25);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.ws-ctx-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.ws-ctx-tab {
  flex: 1;
  text-align: center;
  padding: .25rem;
  font-size: .5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .18);
  border-bottom: 1.5px solid transparent;
  letter-spacing: .04em;
}
.ws-ctx-tab.on { color: #00d4aa; border-bottom-color: #00d4aa; }

/* TM match items in context panel */
.ws-tm-item {
  padding: .4rem .625rem;
  border-bottom: 1px solid rgba(255, 255, 255, .03);
}

.ws-tm-pct {
  font-size: .5rem;
  font-weight: 800;
  margin-bottom: .15rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.ws-tm-bar {
  height: 2px;
  border-radius: 1px;
  margin-bottom: .2rem;
  background: rgba(255, 255, 255, .05);
}
.ws-tm-bar-fill { height: 100%; border-radius: 1px; }

.ws-tm-src {
  font-size: .55rem;
  color: rgba(255, 255, 255, .20);
  margin-bottom: .1rem;
  line-height: 1.3;
}
.ws-tm-tgt {
  font-size: .575rem;
  color: rgba(255, 255, 255, .55);
  font-weight: 500;
  line-height: 1.3;
}

/* ── Cursor animation ─────────────────────────────────────── */
.ws-cursor {
  display: inline-block;
  width: 1.5px;
  height: .68rem;
  background: #00d4aa;
  margin-left: 1px;
  vertical-align: middle;
  animation: ws-cur .65s step-end infinite;
}
@keyframes ws-cur {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Progress bar (bottom of editor) ─────────────────────── */
.ws-editor-progress {
  height: 2px;
  background: rgba(255, 255, 255, .04);
  position: relative;
  overflow: hidden;
}
.ws-editor-progress-bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #00d4aa, #6efed8);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}