/* 채피챗 면접 리포트 대시보드 4판 — 실제 앱(h/pwa)용. 랜딩 h/dash.css와 같은 몸통에 앱 전용(재생 단추·물어볼 말·지원자 링크)을 맨 아래 더했다.
   4판 원칙(대표 2026-11-14 15:51, dash4/plan_v4.md): 차트 0개. 축·범례·눈금·막대 없음.
   남는 그림은 셋: 셀 수 있는 조건 칸(맞음 한 칸, 다시 확인 반 칸), 상태 아이콘(✓ ? – × ★), ▶ 재생 표시.
   선은 판 바깥 1px뿐. 구역은 여백으로, 위계는 크기·굵기로.
   색: 맞음·좋았던 점 = 에버그린 #16774F(검사기 PASS), 다시 확인 = 라벤더(#8E76F0 도형, #EEE9FF 면), 말 안 함·안 맞음 = 회색·글자색. 빨강 없음.
   색만으로 뜻을 전하지 않는다(아이콘과 글이 늘 같이). 글자 14px 이상. 바깥 값이 없어도 돌도록 글꼴 변수에 기본값. */
.dbx{container-type:inline-size;--db-ok:#16774F;--db-ok-soft:#D9EADF;--db-ask:#8E76F0;--db-ask-soft:#EEE9FF;--db-ask-half:#CBBBFF;--db-ask-ink:#5B41C8;--db-ink:#17201C;--db-ink2:#464B44;--db-ink3:#5C615A;--db-line:rgba(23,32,28,.14);--db-cell:#FDFBF6;--db-ground:#F6F1E7;--db-ever:#0F3D2E;--db-pad:16px;--db-gap:28px}
.db{text-align:left;color:var(--db-ink);font-variant-numeric:normal;line-height:1.5}
.db *{box-sizing:border-box}
.db p,.db ul,.db ol{margin:0;padding:0;list-style:none}
.db .tnum{font-variant-numeric:tabular-nums}
.db .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 판: 칸 색 한 장, 바깥 1px 선. 안은 여백으로만 나눈다 */
.db-panel{display:grid;row-gap:var(--db-gap);padding:var(--db-pad);border-radius:12px;background:var(--db-cell);box-shadow:inset 0 0 0 1px var(--db-line)}
.db-col{display:contents}
.db-sec{min-width:0}
.db-sum{order:1}.db-ask{order:2}.db-good{order:3}.db-next{order:4}.db-peer{order:5}
.db-l{font-size:16px;font-weight:700;color:var(--db-ink)}
.db-l b{font-weight:700;font-variant-numeric:tabular-nums}

/* 1. 한 문장 결론 */
.db-meta{font-size:14px;color:var(--db-ink2)}
.db-t{margin-top:6px;font-family:var(--f-head,serif);font-size:clamp(21px,6.4cqi,26px);line-height:1.35;font-weight:700;letter-spacing:-.03em;text-wrap:balance}

/* 2. 조건 칸 → 그 칸을 센 숫자(5판, 검토 2·3): 결론 → 셀 수 있는 그림 → "4칸 중 2.5칸 → 조건 맞은 정도 63%".
   63%는 영웅 숫자가 아니라 문장 안의 숫자다(본문 글꼴). 반 칸은 진행 막대가 아니라 "반만 인정한 칸": 옅은 라벤더 반 + 라벤더 테두리 */
.db-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px}
.db-cells>.db-c{display:grid;justify-items:center;gap:6px;min-width:0;text-align:center}
.db-cells>.db-c>b{width:100%;font-size:14px;font-weight:600;line-height:1.3;color:var(--db-ink2);word-break:keep-all;overflow-wrap:break-word}
.db-cell{display:grid;place-items:center;width:100%;height:44px;border-radius:8px;background:var(--db-ground)}
.is-ok>.db-cell{background:var(--db-ok);color:var(--db-cell)}
.is-ask>.db-cell{background:linear-gradient(90deg,var(--db-ask-half) 0 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--db-ask);color:var(--db-ink)}
.is-ask>.db-cell svg{justify-self:start;margin-left:calc(25% - 8px)}
.is-no>.db-cell{box-shadow:inset 0 0 0 1.5px var(--db-line);color:var(--db-ink2)}
.db-calc{margin-top:14px;font-size:18px;font-weight:700;line-height:1.4;color:var(--db-ink)}
.db-hero{font-size:24px;font-weight:700;font-variant-numeric:normal;white-space:nowrap}
.db-out{display:flex;align-items:baseline;gap:6px;margin-top:8px;font-size:15px;color:var(--db-ink2)}
.db-out svg{flex:none;align-self:center;color:var(--db-ink3)}
.db-out b{font-weight:700;color:var(--db-ink)}

/* 3·4. 목록 한 줄: [아이콘] [이름 · 꼬리표] [▶ 재생] / 아래에 지원자가 한 말 */
.db-list{display:grid;gap:14px;margin-top:12px}
.db-it{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-areas:"ic in" ". q" ". f" ". pl";gap:2px 10px;align-items:center}
.db-ic{grid-area:ic;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--db-ground);color:var(--db-ink2)}
.db-it.is-ask .db-ic{background:var(--db-ask-soft);color:var(--db-ask-ink)}
.db-it.is-ok .db-ic{background:var(--db-ok);color:var(--db-cell)}
.db-it.is-good .db-ic{background:var(--db-ok-soft);color:var(--db-ok)}
.db-it.is-no .db-ic{box-shadow:inset 0 0 0 1.5px var(--db-line)}
.db-in{grid-area:in;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;line-height:1.35}
.db-in b{font-size:16px;font-weight:700}
.db-tag{font-size:14px;font-weight:600;color:var(--db-ink2)}
.db-it.is-ask .db-tag{color:var(--db-ink2)}   /* "조건 밖": 라벤더는 ? 아이콘·반 칸·물어볼 말·누르는 단추에만 */
.db-it.is-ok .db-tag,.db-it.is-good .db-tag{color:var(--db-ok)}
.db-it q{grid-area:q;display:block;font-size:15px;color:var(--db-ink2);quotes:"“" "”"}
.db-play{grid-area:pl;justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-top:6px;padding:0 12px 0 10px;border-radius:16px;background:var(--db-ground);font-size:14px;font-weight:700;color:var(--db-ink);white-space:nowrap}
.db-pi{flex:none;color:var(--db-ever)}

/* 5. 남은 일 */
.db-steps{display:grid;gap:8px;margin-top:10px}
.db-steps>li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.db-sn{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--db-ground);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}

/* 6. 같은 공고 지원자: 면접 날짜순 같은 꼴의 문장. 막대·순위 없음 */
.db-peers{display:grid;gap:6px;margin-top:10px}
.db-peers>li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;font-size:15px;color:var(--db-ink2)}
.db-peers b{font-weight:600;color:var(--db-ink)}
.db-peers b.tnum{font-weight:400}
.db-peers .is-me>b{font-weight:700}
.db-pd{font-size:14px;color:var(--db-ink2)}

/* 넓을 때(랜딩 데스크톱 1440): 세 칸 [결론·칸] [다시 물어볼 것] [잘 답한 것] / 아래 [남은 일] [같은 공고 지원자].
   S8이 1440×900에서 한 화면(792px) 안에 들도록 낮게 짠다 */
@container (min-width:820px){
  .db{--db-pad:24px;--db-gap:22px}
  .db-panel{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;row-gap:16px}
  .db-sum{grid-area:1/1}.db-ask{grid-area:1/2}.db-good{grid-area:1/3}
  .db-next{grid-area:2/1}.db-peer{grid-area:2/2/3/4}
  /* 랜딩은 "내 화면도 이렇게 크게 보이겠네"를 느끼는 곳: 글자를 키운다(검토 6) */
  .db-t{font-size:30px}
  .db-l{font-size:18px}
  .db-meta,.db-tag,.db-play{font-size:15px}
  .db-list{gap:10px}
  .db-it{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"ic in pl" ". q q" ". f f";row-gap:2px}
  .db-it q{font-size:16px}
  .db-play{justify-self:end;margin-top:0}
}
@container (max-width:340px){
  .db-cells{gap:8px}
  .db-it{column-gap:8px}
}
@media (forced-colors:active){.db-cell,.db-ic,.db-play{forced-color-adjust:none;border:1px solid CanvasText}.db-panel{border:1px solid CanvasText}}

/* ── 앱 전용 ── */
/* pwa.css의 3판 규칙(.dbx .db-c 3칸 격자 등)이 칸 그림을 흐트리지 않게 */
.db .db-cells>.db-c{grid-template-columns:minmax(0,1fr)}
/* ▶ 재생 단추: 누르면 그 조금 앞부터 재생(app.js wireSeek). 누름 영역 44px */
.db button.db-play{min-height:44px;margin:4px 0 0;border:0;font:inherit;font-size:14px;font-weight:700;color:var(--db-ink);cursor:pointer;touch-action:manipulation}
.db button.db-play:hover{background:var(--db-ok-soft)}
.db button.db-play:focus-visible{outline:2px solid var(--db-ever);outline-offset:2px}
.db .db-play.is-static{background:none;padding:0;font-weight:600;color:var(--db-ink2)}
.db-sv{grid-area:q;font-size:15px;color:var(--db-ink2)}
.db-fq{grid-area:f;margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--db-ask-soft);font-size:15px;color:var(--db-ink)}
.db-fq b{margin-right:6px;font-size:14px;font-weight:700;color:var(--db-ask-ink)}
.db-hero.is-empty{font-size:28px;letter-spacing:-.02em;color:var(--db-ink2)}
.db-f{margin-top:8px}
.db-f .cc-tbtn{display:inline-flex;align-items:center;min-height:44px;padding:0}
.db-peers a{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;min-height:44px;color:inherit;text-decoration:none}
.db-peers a:hover b{text-decoration:underline}
.db-peers>li.is-me{min-height:44px;align-items:center}
/* pwa.css의 3판 순서 규칙(.dbx .db-next{order:2})을 4판 순서로 덮는다: 결론 → 다시 물어볼 것 → 잘 답한 것 → 남은 일 → 다른 지원자 */
.dbx .db .db-sum{order:1}.dbx .db .db-ask{order:2}.dbx .db .db-good{order:3}.dbx .db .db-next{order:4}.dbx .db .db-peer{order:5}
/* 재생기·작은 재생 띠의 시각도 "0초 / 7초" 말로 쓰므로 고정폭 숫자 글꼴 대신 본문 글꼴(5판, 검토 5). pwa.css보다 뒤에 이기도록 body를 붙였다 */
body .cc-app .cc-ptime,body .cc-app .cc-pdock p{font-family:var(--f-body);font-weight:600}