/* ===========================================================================
   PitchLab v2 · 실앱 공용 뼈대 (T244 · 2026-09-21 · 시안/공용/base.css 에서 옮김)
   ---------------------------------------------------------------------------
   · T240 1단계의 컴포넌트 이름(.card .btn .badge .stat .rows .steps .ph …)을
     **그대로** 쓴다. 안(A/B/C)이 바뀌어도 화면 코드는 바뀌지 않는다.
   · 이 파일에는 색 값(#…)을 직접 쓰지 않는다. 토큰(var(--…))만 쓴다.
     확인: grep -c '#[0-9a-fA-F]\{3,6\}' base.css  →  0
   · 안별 차이는 <안>/tokens.css (값) + <안>/안.css (배치·밀도)에만 있다.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-base);
  line-height: var(--leading-body); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: var(--leading-tight); font-weight: var(--weight-bold); letter-spacing: var(--tracking-head); }
p, ul, ol { margin: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- 레이아웃 ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--layout-max); margin-inline: auto; padding-inline: var(--layout-gutter); }
.wrap.narrow { max-width: var(--layout-narrow); }
.stack > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }
.section { padding-block: var(--space-12); }
.section.tight { padding-block: var(--space-8); }
.section + .section { border-top: 1px solid var(--color-line-soft); }
.grid { display: grid; gap: var(--space-4); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
@media (min-width: 720px) {
  :root { --layout-gutter: 24px; }
  .section { padding-block: var(--space-16); }
  .section.tight { padding-block: var(--space-10); }
  .grid { gap: var(--space-5); }
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .grid.side   { grid-template-columns: 1.35fr .95fr; align-items: start; }
}

/* ---- 글자 ---------------------------------------------------------------- */
.eyebrow {
  font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-accent-ink);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--color-accent); border-radius: 2px; }
.eyebrow.plain::before { display: none; }
.h-hero { font-size: var(--text-4xl); }
.h-sec  { font-size: var(--text-2xl); }
.lead   { font-size: var(--text-lg); color: var(--color-text-mute); max-width: 56ch; }
.muted  { color: var(--color-text-mute); }
.weak   { color: var(--color-text-weak); font-size: var(--text-sm); }
.num    { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---- 상단 바 ------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: var(--z-header); height: var(--layout-header);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--color-line-soft);
}
.hdr .wrap { display: flex; align-items: center; gap: var(--space-4); }
.logo { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); letter-spacing: -.03em; font-size: var(--text-lg); }
.logo-lockup { height: 30px; width: auto; display: block; } /* T291 — 글자 로고를 PitchLab 실제 로고 SVG 로 교체(28~32px) */
.logo .sub { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-weak); letter-spacing: 0; }
.hdr nav { display: none; gap: var(--space-5); margin-inline-start: auto; font-size: var(--text-sm); color: var(--color-text-mute); }
.hdr nav a:hover { color: var(--color-text); }
.hdr nav a[aria-current="page"] { color: var(--color-text); font-weight: var(--weight-medium); }
.hdr .hdr-cta { margin-inline-start: auto; }
@media (min-width: 720px) { .hdr nav { display: flex; } .hdr .hdr-cta { margin-inline-start: var(--space-5); } }

/* ---- 버튼 ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-min); padding-inline: var(--space-6);
  border-radius: var(--radius-btn); border: 1px solid transparent;
  font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: -.01em;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-accent); color: var(--color-text-on-accent); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-ghost { background: var(--color-surface); border-color: var(--color-line); color: var(--color-text); }
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn-quiet { background: transparent; color: var(--color-text-mute); padding-inline: var(--space-3); }
.btn-quiet:hover { color: var(--color-text); }
.btn-sm { min-height: 38px; padding-inline: var(--space-4); font-size: var(--text-xs); }
.btn-lg { min-height: 52px; padding-inline: var(--space-8); font-size: var(--text-base); }
.btn-block { width: 100%; }

/* ---- 카드 ---------------------------------------------------------------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.card.pad-lg { padding: var(--space-6); }
.card.flat { box-shadow: none; }
.card > h3 { font-size: var(--text-lg); }
.card-hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }

/* ---- 배지 (잡 상태 · 신뢰도) --------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap;
  background: var(--color-surface-2); color: var(--color-text-mute);
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge.ok     { background: var(--color-ok-soft);     color: var(--color-ok); }
.badge.info   { background: var(--color-info-soft);   color: var(--color-info); }
.badge.warn   { background: var(--color-warn-soft);   color: var(--color-warn); }
.badge.danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge.plain::before { display: none; }

/* ---- 수치 타일 ------------------------------------------------------------ */
.stat { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4); }
.stat .label { font-size: var(--text-xs); color: var(--color-text-weak); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.stat .value { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: -.03em; margin-top: var(--space-2); line-height: 1.05; }
.stat .value small { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-mute); margin-inline-start: 2px; letter-spacing: 0; }
.stat .sub { font-size: var(--text-xs); color: var(--color-text-mute); margin-top: var(--space-2); }
.stat.excluded .value { color: var(--color-text-weak); font-size: var(--text-lg); font-family: var(--font-body); }

/* ---- 목록 / 경기 행 -------------------------------------------------------- */
.rows { border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.row { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-line-soft); }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--color-surface-2); }
.row .top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.row b { font-size: var(--text-base); font-weight: var(--weight-bold); }
.row .when { font-size: var(--text-xs); color: var(--color-text-weak); }
.row .act { display: flex; gap: var(--space-2); }
@media (min-width: 720px) {
  .row { grid-template-columns: 1.7fr auto 1fr auto; align-items: center; gap: var(--space-4); }
  .row .top { display: contents; }
  .row .badge { justify-self: start; }
  .row .act { justify-self: end; }
}

/* ---- 진행 단계 ------------------------------------------------------------- */
.steps { display: grid; gap: var(--space-3); counter-reset: s; padding: 0; margin: 0; }
/* [T930 · 2026-10-07] li 를 display:flex 로 두면 안의 텍스트가 <b>·<a> 로 끊길 때마다
   각 조각이 따로 flex item 이 돼 좁은 세로 칸으로 찌그러진다(약관 2·3장 폰 폭에서 글자 섞임).
   대신 ::before 뱃지를 absolute 로 왼쪽에 고정하고 li 는 들여쓰기한 보통 문단으로 둔다 —
   안의 텍스트·<b>·<a> 가 몇 조각이든 하나의 문단으로 자연스럽게 줄바꿈된다. */
.steps li {
  position: relative; min-height: 26px;
  padding-inline-start: calc(26px + var(--space-3));
  list-style: none; font-size: var(--text-sm); color: var(--color-text-mute);
}
.steps li::before {
  position: absolute; inset-inline-start: 0; top: 0;
  counter-increment: s; content: counter(s);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-surface-2); color: var(--color-text-weak);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.steps li[data-done]::before { content: "✓"; background: var(--color-ok-soft); color: var(--color-ok); }
.steps li[data-now]::before  { background: var(--color-accent); color: var(--color-text-on-accent); }
.steps li[data-now]  { color: var(--color-text); font-weight: var(--weight-medium); }
.steps li[data-todo] { opacity: .65; }

/* ---- 가로 진행 막대 (접수 → 전달) ------------------------------------------ */
.track { display: flex; align-items: center; gap: 0; }
.track span { flex: 1; height: 4px; background: var(--color-surface-2); border-radius: 2px; margin-inline: 1px; }
.track span[data-on] { background: var(--color-accent); }
.track span[data-now] { background: var(--color-info); }

/* ---- 그림 자리표시 (실제 사진·그림으로 교체) --------------------------------- */
.ph {
  position: relative; overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line-soft); border-radius: var(--radius-md);
  display: grid; place-items: center; color: var(--color-text-weak);
  font-size: var(--text-xs); text-align: center; padding: var(--space-4); min-height: 140px;
}
.ph .ph-tag { position: absolute; inset-block-end: var(--space-2); inset-inline-end: var(--space-3); font-size: var(--text-xs); color: var(--color-text-weak); }
.ph.wide { aspect-ratio: 16/9; min-height: 0; padding: 0; }
.ph.tall { min-height: 260px; }
.ph svg { width: 100%; height: 100%; }

/* ---- 입력 --------------------------------------------------------------- */
.field { display: grid; gap: var(--space-2); }
.field > label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-mute); }
.field .hint { font-size: var(--text-xs); color: var(--color-text-weak); }
.inp {
  min-height: var(--tap-min); width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-input); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); color: var(--color-text);
  font-size: var(--text-base); transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
}
.inp::placeholder { color: var(--color-text-weak); }
.inp:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); outline: none; }
select.inp {
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-mute) 50%),
                    linear-gradient(135deg, var(--color-text-mute) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-inline-end: var(--space-10);
}
textarea.inp { min-height: 96px; resize: vertical; line-height: var(--leading-body); }
.drop {
  border: 1.5px dashed var(--color-line); border-radius: var(--radius-md);
  background: var(--color-surface-2); padding: var(--space-6) var(--space-5);
  display: grid; gap: var(--space-2); justify-items: center; text-align: center;
  color: var(--color-text-mute); font-size: var(--text-sm); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.drop:hover { border-color: var(--color-accent); }
.drop .big { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-mute); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-accent); flex: none; }
.fields { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .fields.cols-2 { grid-template-columns: 1fr 1fr; gap: var(--space-5); } .fields .span-2 { grid-column: 1 / -1; } }

/* ---- 아주 작은 차트 (막대 · 점유 띠) ---------------------------------------
   규칙: 축 하나 · 한 색 농담(크기) · 값은 글자 토큰으로 직접 표기 · 색만으로 뜻을 만들지 않는다 */
.barlist { display: grid; gap: var(--space-3); }
.barlist .r { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); align-items: center; font-size: var(--text-sm); }
.barlist .r .nm { color: var(--color-text); }
.barlist .r .vl { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: var(--weight-bold); }
.barlist .r .bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--color-surface-2); overflow: hidden; }
.barlist .r .bar i { display: block; height: 100%; border-radius: 4px; background: var(--color-accent); }
.barlist .r .bar i.alt { background: var(--color-chart-2); }
.split { display: flex; height: 12px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-surface-2); gap: 2px; }
.split i { display: block; height: 100%; }
.split i.a { background: var(--color-accent); }
.split i.b { background: var(--color-chart-2); }
.legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-text-mute); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend i.a { background: var(--color-accent); }
.legend i.b { background: var(--color-chart-2); }

/* ---- 알림 띠 ------------------------------------------------------------- */
.notice {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface-2); border: 1px solid var(--color-line);
  font-size: var(--text-sm); color: var(--color-text-mute);
}
.notice.do { background: var(--color-warn-soft); border-color: color-mix(in srgb, var(--color-warn) 35%, transparent); color: var(--color-text); }
.notice strong { color: var(--color-text); }
/* [T401] .notice 는 display:flex 를 걸어 둬서 hidden 속성(브라우저 기본 display:none)을
   이겨 버린다 — login.html #문제띠·upload.html #끝(「접수됐습니다」) 처럼 hidden 을 붙여도
   빈 상자·확정 배너가 항상 보이던 실제 버그(playwright 로 재현: hidden 속성 true인데
   computed display 는 flex). .토스트[hidden]·.설치띠[hidden] 과 같은 패턴으로 되돌린다. */
.notice[hidden] { display: none; }

/* ---- 바닥 --------------------------------------------------------------- */
.footer { border-top: 1px solid var(--color-line-soft); padding-block: var(--space-10); color: var(--color-text-mute); font-size: var(--text-sm); }
.footer .wrap { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .footer .wrap { grid-template-columns: 1fr auto; align-items: center; } }

/* ---- 하단 탭(설치형 앱에서만) ----------------------------------------------- */
.tabbar { display: none; }
@media (display-mode: standalone) {
  body { padding-bottom: calc(var(--layout-tabbar) + env(safe-area-inset-bottom)); }
  .tabbar {
    display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-header);
    height: calc(var(--layout-tabbar) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-surface); border-top: 1px solid var(--color-line);
  }
  .tabbar a { flex: 1; display: grid; place-items: center; font-size: var(--text-xs); color: var(--color-text-mute); }
  .tabbar a[aria-current="page"] { color: var(--color-accent-ink); font-weight: var(--weight-bold); }
}

/* ---------------------------------------------------------------------------
   T244 에서 더한 것 — 실앱에만 필요한 조각 (색 값 직접 사용 0건)
   --------------------------------------------------------------------------- */
.빈칸 { padding: var(--space-10) var(--space-5); text-align: center; color: var(--color-text-weak); font-size: var(--text-sm); }
.토스트 {
  position: fixed; inset-inline: var(--space-4); bottom: var(--space-5); z-index: var(--z-toast);
  margin-inline: auto; max-width: 520px;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--color-surface-2); border: 1px solid var(--color-line);
  box-shadow: var(--shadow-md); font-size: var(--text-sm); color: var(--color-text);
}
.토스트[hidden] { display: none; }
.토스트.나쁨 { background: var(--color-danger-soft); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); }
.토스트.좋음 { background: var(--color-ok-soft); border-color: color-mix(in srgb, var(--color-ok) 40%, transparent); }
.진행줄 { height: 8px; border-radius: 4px; background: var(--color-surface-2); overflow: hidden; }
.진행줄 i { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width .2s linear; }
.듀오 { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.듀오 video { width: 100%; border-radius: var(--radius-md); background: var(--color-bg); border: 1px solid var(--color-line); }
.듀오 .라벨 { font-size: var(--text-xs); color: var(--color-text-weak); margin-bottom: var(--space-2); }
@media (min-width: 900px) { .듀오 { grid-template-columns: 1fr 1fr; } }
.듀오:fullscreen { background: var(--color-bg); align-items: center; height: 100vh; padding: var(--space-3); }
table.표 { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.표 th, table.표 td { text-align: start; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-line-soft); vertical-align: top; }
table.표 th { font-size: var(--text-xs); color: var(--color-text-weak); font-weight: var(--weight-medium); white-space: nowrap; }
table.표 tr:last-child td { border-bottom: 0; }
.표감싸기 { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
.넓은화면만 { display: none; }
@media (min-width: 720px) { .넓은화면만 { display: inline; } }
.hdr .hdr-cta { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.코드 { font-family: var(--font-num); font-size: var(--text-xs); word-break: break-all; color: var(--color-text-mute); }

/* ---------------------------------------------------------------------------
   T279 — PWA 「홈 화면에 추가」: 개인 화면 상단 설치 띠 · iOS 안내 말풍선
   --------------------------------------------------------------------------- */
.설치띠 {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--color-warn-soft); border-bottom: 1px solid color-mix(in srgb, var(--color-warn) 35%, transparent);
  font-size: var(--text-sm); color: var(--color-text);
}
.설치띠[hidden] { display: none; }
.설치띠 .btn { flex: none; }
.설치띠 button[data-설치바닫기] {
  margin-inline-start: auto; flex: none; background: none; border: 0; color: var(--color-text-mute);
  font-size: var(--text-base); line-height: 1; cursor: pointer; padding: var(--space-1);
}

.ios설치안내 {
  position: fixed; inset-inline: var(--space-4); bottom: var(--space-5); z-index: var(--z-toast);
  margin-inline: auto; max-width: 480px;
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--color-surface-2); border: 1px solid var(--color-line);
  box-shadow: var(--shadow-md); font-size: var(--text-sm); color: var(--color-text);
}
.ios설치안내[hidden] { display: none; }
.ios설치안내 button[data-ios설치안내닫기] {
  margin-inline-start: auto; flex: none; background: none; border: 0; color: var(--color-text-mute);
  font-size: var(--text-base); line-height: 1; cursor: pointer; padding: var(--space-1);
}
@media (display-mode: standalone) { .ios설치안내, .설치띠 { display: none !important; } }