/* 앱 화면 (M1 — 로그인·내 아이디어·검증 진행·보고서). 토큰(public/tokens.css)과 랜딩 컴포넌트(public/styles.css) 위에 얹는다.
   방향: docs/design.md "기획 작업 화면" — 랜딩과 같은 공방 책상(종이·흑연·매트 초록), 둥근 카드·알약, 촘촘한 웹 문서. 새 색 없음. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.block { display: block; }
.mt-2 { margin-top: var(--space-2); }
.app-main:focus { outline: none; }
.app-main { padding-block: var(--space-2) var(--space-10); min-height: 60vh; }
.narrow h1, .app h1 { font-size: var(--text-xl); font-weight: var(--weight-heavy); margin: 0 0 var(--space-2); }
.app h2 { font-size: var(--text-lg); font-weight: var(--weight-heavy); margin: 0 0 var(--space-2); }
.stack { display: grid; gap: var(--space-3); align-content: start; }

/* ── 머리 메뉴 ── */
.app-nav { display: flex; align-items: center; gap: var(--space-1) var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.app-nav a { display: inline-flex; align-items: center; min-height: var(--tap-min); padding-inline: var(--space-2); border-radius: var(--radius-pill); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; }
.app-nav a:hover { color: var(--color-text); background: var(--color-fill); }
.app-nav a[aria-current="page"] { color: var(--color-accent-ink); background: var(--color-accent-soft); }
.pill--quiet { background: var(--color-fill); color: var(--color-text-muted); }
@media (max-width: 30em) { .app-top .logo__name { font-size: var(--text-md); } .app-nav { gap: 0; flex-wrap: nowrap; } .app-nav a { padding-inline: 8px; } }

/* ── 버튼 더하기 ── */
.btn--sm { min-height: var(--tap-min); padding: 8px 16px; font-size: 0.9375rem; }
.btn--quiet { background: var(--color-fill); color: var(--color-text); }
.btn--quiet:hover { background: var(--color-border); color: var(--color-text); }
.btn--danger { background: var(--color-danger-bg); color: var(--color-danger); box-shadow: inset 0 0 0 1px var(--color-danger); }
.btn--danger:hover { background: var(--color-danger); color: var(--color-surface); }
button.link-quiet { border: 0; background: none; font: inherit; font-size: var(--text-sm); cursor: pointer; }

/* ── 상자 ── */
.box-warn { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-warn-bg); color: var(--color-warn); font-size: var(--text-sm); line-height: 1.55; margin-bottom: var(--space-3); }
.box-warn b { font-weight: var(--weight-bold); }
.box-ok { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-success-bg); color: var(--color-success); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.box-soft { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-fill); }
/* 넘긴 뒤 기획 변경 카드 (plan.js changeCard) */
.pc { border-color: var(--color-primary); }
.pc-diff { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block: var(--space-2); }
.pc-text { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; background: var(--color-fill); }
.pc-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.mb-3 { margin-bottom: var(--space-3); }
.box-err { margin-block: var(--space-2); }
.pii-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.pii-list li { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 4px; border-radius: var(--radius-pill); background: var(--color-surface); }
.pii-kind { padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-warn-bg); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.pii-list mark { background: none; color: var(--color-text); font-weight: var(--weight-medium); }

/* ── 2단: 본문 + 오른쪽 이용 현황 ── */
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: start; }
@media (min-width: 64em) { .app-grid { grid-template-columns: minmax(0, 1fr) 19rem; } }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.sec-head h1 { margin: 0; }

/* 프로젝트 목록 — 촘촘한 둥근 줄 */
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t s" "m s"; align-items: center; gap: 0 var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; }
a.prow:hover { background: var(--color-fill); color: var(--color-text); }
.prow__title { grid-area: t; font-weight: var(--weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow__meta { grid-area: m; font-size: var(--text-xs); color: var(--color-text-muted); }
.prow .pill { grid-area: s; justify-self: end; }
.prow--muted { grid-template-areas: "t b" "m b"; }
.prow--muted .btn { grid-area: b; }
.prow--muted .prow__title { color: var(--color-text-muted); }
.pill--validated, .pill--quick_done { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.pill--validating { background: var(--color-wood-soft); color: var(--color-text); }
.pill--draft, .pill--handed_off { background: var(--color-fill); color: var(--color-text-muted); }
.pill--ai { background: var(--color-wood-soft); color: var(--color-text); font-weight: var(--weight-bold); }
.empty { padding: var(--space-4); border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md); }
.empty p + p { margin-top: var(--space-1); }
.trash { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.trash > summary { cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-medium); }

/* 이용 현황 */
.plan h2 { margin-bottom: var(--space-2); }
.stats { margin: 0; display: grid; gap: 0; }
.stat { display: grid; gap: 2px; padding: var(--space-2) 0; border-top: 1px dashed var(--color-border); }
.stat:first-child { border-top: 0; padding-top: 0; }
.stat dt { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--weight-medium); }
.stat dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.stat__note { font-size: var(--text-xs); color: var(--color-text-muted); }
.price-mini { list-style: none; margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-fill); display: grid; gap: 4px; font-size: var(--text-sm); }
.price-mini li { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); align-items: center; gap: var(--space-2); }
/* 겹침 고침: 꼬리표 칸을 고정 폭 대신 가장 긴 꼬리표에 맞춤 (긴 꼬리표가 옆 글을 덮던 것) */
@supports (grid-template-columns: subgrid) {
  .price-mini { grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--space-2); }
  .price-mini li { grid-column: 1 / -1; grid-template-columns: subgrid; }
}

/* ── 새 아이디어 폼 ── */
.form .card__lead { margin-bottom: var(--space-4); }
.input--area { min-height: 0; resize: vertical; line-height: 1.55; }
.field__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.field__row .field__err { flex: 1; }
.field__hint { margin: 6px 0 0 auto; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.field__hint--over { color: var(--color-danger); font-weight: var(--weight-bold); }
.opt { font-weight: var(--weight-regular); color: var(--color-text-muted); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }

/* 검증 종류 고르기 — 둥근 선택 카드 */
.choices { border: 0; margin: 0 0 var(--space-2); padding: 0; min-width: 0; display: grid; gap: var(--space-2); }
.choices legend { padding: 0; margin-bottom: 6px; }
.choice { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: 14px; background: var(--color-surface); cursor: pointer; }
.choice input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-primary); }
.choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px var(--color-primary); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.choice--off { cursor: default; border-style: dashed; }
.choice--off .choice__body > b { color: var(--color-text-muted); }
.choice__body { display: grid; gap: 2px; }
.choice__desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.choice__note { display: block; margin-top: 4px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-accent-ink); }
.choice--off .choice__note { color: var(--color-warn); }

/* ── 프로젝트: 머리 + 왼쪽 단계 + 본문 ── */
.proj { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.proj__head h1 { margin: 2px 0 var(--space-1); }
.crumbs { font-size: var(--text-sm); color: var(--color-text-muted); }
.crumbs a { color: var(--color-text-muted); }
.proj__idea { font-size: var(--text-sm); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proj__tags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: var(--space-2); }
.proj__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: start; }
@media (min-width: 60em) { .proj__grid { grid-template-columns: 15rem minmax(0, 1fr); } .stepper { position: sticky; top: var(--space-3); } }
.proj__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.app-grid > *, .proj__grid > *, .proj__main > *, .stack > * { min-width: 0; }   /* 넓은 표가 칸을 밀어내지 않게 (표는 안에서 가로 스크롤) */

/* 단계 목록 — 랜딩 작업 카드와 같은 점선 줄·점 */
.stepper { padding: var(--space-3) var(--space-4); }
.stepper__head { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.stepper__list { list-style: none; margin: 0; padding: 0; }
.stepper__list li { display: grid; grid-template-columns: 10px auto minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-2); padding: 7px 0; border-top: 1px dashed var(--color-border); font-size: var(--text-sm); }
.stepper__list li:first-child { border-top: 0; }
.stepper__list b { font-weight: var(--weight-bold); }
.stepper__t { color: var(--color-text-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stepper__list small { color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
.stepper__list .is-next b, .stepper__list .is-now b { color: var(--color-accent-ink); }
.is-next .dot { border-color: var(--color-primary); }
.is-fail .dot { border-color: var(--color-danger); background: var(--color-danger-bg); }
.is-fail small { color: var(--color-danger); font-weight: var(--weight-bold); }
@media (max-width: 59.99em) {
  .stepper__list { display: flex; flex-wrap: wrap; gap: 6px; }
  .stepper__list li { display: inline-flex; gap: 6px; padding: 4px 10px 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
  .stepper__list li:first-child { border-top: 1px solid var(--color-border); }
  .stepper__t { display: none; }
  .stepper__list .is-done { background: var(--color-accent-soft); border-color: transparent; }
}

.ai-note { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-wood-soft); font-size: var(--text-sm); }
.ai-note b { font-weight: var(--weight-bold); }

/* 단계 카드 (접기) */
.step-card { padding: 0; overflow: hidden; }
.step-card > summary, .step-card__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-height: var(--tap-min); padding: var(--space-2) var(--space-4); cursor: pointer; list-style: none; }
.step-card__head { cursor: default; }
.step-card > summary::-webkit-details-marker { display: none; }
.step-card > summary::after { content: ''; width: 7px; height: 7px; margin: -3px 4px 0 auto; border: solid var(--color-text-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.step-card[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.step-card > summary:hover { background: var(--color-fill); }
.step-card > summary:focus-visible { outline-offset: -2px; }
.step-card__t { font-weight: var(--weight-bold); }
.step-card .md, .step-card .note-mine, .step-card .stream-status { padding-inline: var(--space-4); }
.step-card .md { padding-bottom: var(--space-4); }
.step-card--live { border-color: var(--color-primary); }
.note-mine { margin: 0 var(--space-4) var(--space-2); padding: var(--space-2) var(--space-3) !important; border-radius: var(--radius-md); background: var(--color-fill); font-size: var(--text-sm); }
.stream-status { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-accent-ink); margin-bottom: var(--space-2); }
.stream-status::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--color-primary); animation: pulse 1.2s ease-in-out infinite; vertical-align: 1px; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .stream-status::before { animation: none; } }

.ctl .card__lead { margin-bottom: var(--space-3); }
.danger { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-inline: var(--space-1); }
.report__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.report__bar h2 { margin: 0; }
.report-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.upsell { border-color: var(--color-primary); }
.handoff .box-soft { margin-block: var(--space-2) var(--space-3); }

/* ── Markdown 결과 (md.js) — 촘촘한 문서 ── */
.md { font-size: 0.9375rem; line-height: 1.65; overflow-wrap: break-word; }   /* anywhere 는 표 칸의 최소 폭을 글자 한 개로 줄여 한글이 단어 중간에서 끊겼다 — 줄바꿈은 같고 최소 폭만 단어 단위로 */
.md > * + * { margin-top: var(--space-2); }
.md .md-h { line-height: var(--leading-tight); }
.md h1.md-h { font-size: var(--text-xl); font-weight: var(--weight-heavy); margin: var(--space-2) 0 var(--space-3); }
.md h2.md-h { font-size: var(--text-lg); font-weight: var(--weight-heavy); margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.md h3.md-h { font-size: var(--text-md); font-weight: var(--weight-bold); margin-top: var(--space-4); color: var(--color-accent-ink); }
.md h4.md-h { font-size: var(--text-sm); font-weight: var(--weight-bold); margin-top: var(--space-3); }
.md p { margin: 0; }
.md p + p { margin-top: var(--space-2); }
.md ul, .md ol { margin-block: var(--space-2) 0; padding-left: 1.3em; }
.md li + li { margin-top: 2px; }
.md blockquote { margin-inline: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-text); }
.md blockquote p + p { margin-top: var(--space-1); }
.md code { padding: 1px 5px; border-radius: 6px; background: var(--color-fill); font-size: 0.875em; }
.md hr { border: 0; border-top: 1px dashed var(--color-border-strong); margin-block: var(--space-4); }
.md-table { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.md-table:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.md table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); line-height: 1.5; }
.md th, .md td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--color-border); }
.md th { background: var(--color-fill); font-weight: var(--weight-bold); white-space: nowrap; }
.md tr:last-child td { border-bottom: 0; }
.md td a { word-break: break-all; }
.report .md > h1.md-h:first-child { display: none; }   /* 보고서 제목은 카드 머리에 이미 있다 */

/* ── 개발 시작하기 — 넘기기 모달 H1~H7 (handoff.js). 둥근 카드 한 장, 촘촘한 줄, 새 색 없음 ── */
.ho { width: min(36rem, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-surface); color: var(--color-text); box-shadow: 0 12px 40px rgb(31 29 26 / .18); overflow: auto; overscroll-behavior: contain; }
.ho::backdrop { background: rgb(22 21 19 / .45); backdrop-filter: blur(2px); }
.ho__top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-5); background: var(--color-surface); }
.ho__kicker { margin: 0 auto 0 0; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); white-space: nowrap; }
.ho__x { width: var(--tap-min); height: var(--tap-min); flex: none; border: 0; border-radius: var(--radius-pill); background: var(--color-fill); color: var(--color-text); font: inherit; font-size: 1.375rem; line-height: 1; cursor: pointer; }
.ho__x:hover { background: var(--color-border); }
.ho__x:focus-visible, .ho-tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ho-fast { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 10px; border-radius: var(--radius-pill); background: var(--color-fill); font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; white-space: nowrap; }
.ho-fast input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary); }
.ho-fast__note { color: var(--color-text-muted); font-weight: var(--weight-regular); }
.ho-fast:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* 진행 막대: 7칸 알약 — 휴대폰은 막대만 */
.ho-bar { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-3); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ho-bar li { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.ho-bar__dot { width: 100%; height: 6px; border-radius: var(--radius-pill); background: var(--color-fill); }
.ho-bar .is-done .ho-bar__dot { background: var(--color-primary); }
.ho-bar .is-now .ho-bar__dot { background: var(--color-primary); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.ho-bar .is-skip .ho-bar__dot { background: repeating-linear-gradient(90deg, var(--color-fill) 0 4px, transparent 4px 7px); }
.ho-bar__t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6875rem; color: var(--color-text-muted); }
.ho-bar .is-now .ho-bar__t { color: var(--color-accent-ink); font-weight: var(--weight-bold); }
@media (max-width: 30em) { .ho-bar__t { display: none; } .ho-fast__note { display: none; } .ho__top { padding-left: var(--space-4); } .ho-bar, .ho__body { padding-inline: var(--space-4); } }

.ho__body { padding: 0 var(--space-5) var(--space-4); display: grid; gap: var(--space-3); }
.ho__body > * { margin: 0; min-width: 0; }
.ho__body h2 { font-size: var(--text-lg); font-weight: var(--weight-heavy); line-height: var(--leading-tight); margin: 0; }
.ho__body h2:focus { outline: none; }
.ho__lead { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; margin-top: calc(var(--space-2) * -1) !important; }
.ho__foot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2); padding: var(--space-3) 0 var(--space-1); background: linear-gradient(transparent, var(--color-surface) 30%); }
.ho__foot .btn--primary { min-width: 7rem; }

/* H1 질문 */
.ho-q { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); margin: 0; display: grid; gap: var(--space-2); min-width: 0; }
.ho-q__t { padding: 0 4px; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.ho-q .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ho-help { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-accent-soft); }
.ho-help p { margin: 0; }
.ho-help__row, .ho-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* H2 */
.ho-list { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; }
.ho-list--num { padding-left: 1.4em; gap: 6px; }
.ho-why { border-radius: var(--radius-md); background: var(--color-fill); padding: 0 var(--space-3); }
.ho-why > summary { min-height: var(--tap-min); display: flex; align-items: center; cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.ho-why p { margin: 0 0 var(--space-2); }

/* H3 이름 */
.ho-name { display: flex; align-items: stretch; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.ho-name:focus-within { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.ho-name__pre { display: flex; align-items: center; padding: 0 0 0 12px; font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.ho-name .input { border: 0; border-radius: 0; padding-left: 2px; min-width: 0; flex: 1; }
.ho-name .input:focus-visible { outline: none; }
.ho-name .input[aria-invalid="true"] { box-shadow: none; }
.ho-name:has(.input[aria-invalid="true"]) { border-color: var(--color-danger); box-shadow: inset 0 0 0 1px var(--color-danger); }
@media (max-width: 30em) { .ho-name { flex-direction: column; } .ho-name__pre { max-width: none; padding: 8px 12px 0; font-size: var(--text-xs); } .ho-name .input { padding-left: 12px; padding-top: 4px; } }
.ho-hint { margin-left: 0; white-space: normal; }
.ho-check { margin: 4px 0 0; min-height: 1.4em; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: baseline; }
.ho-check.is-ok { color: var(--color-success); font-weight: var(--weight-medium); }
.ho-check.is-bad { color: var(--color-danger); font-weight: var(--weight-medium); }
.ho-suggest { color: var(--color-accent-ink); text-decoration: underline; padding: 0; min-height: 0; }
.ho-pub { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-warn-bg); color: var(--color-warn); }

/* H4 그림 — 작은 GitHub 화면 3장 (실제 캡처 대신 CSS) */
.ho-shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.ho-shot { display: grid; gap: 6px; align-content: start; }
@media (max-width: 30em) { .ho-shots { grid-template-columns: minmax(0, 1fr); } .ho-shot { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: var(--space-2); } }
.ho-shot__screen { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); overflow: hidden; }
.ho-shot__bar { display: flex; align-items: center; gap: 3px; padding: 4px 6px; background: var(--color-fill); font-size: 0.5625rem; color: var(--color-text-muted); }
.ho-shot__bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-border-strong); }
.ho-shot__bar span { margin-left: 4px; }
.ho-shot__body { display: grid; gap: 5px; padding: 8px; min-height: 4.25rem; align-content: start; }
.ho-shot__h { font-size: 0.6875rem; }
.ho-shot__line { height: 5px; border-radius: 3px; background: var(--color-border); }
.ho-shot__line--short { width: 60%; }
.ho-shot__radio { display: flex; align-items: center; gap: 4px; font-size: 0.625rem; color: var(--color-text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ho-shot__radio i { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-border-strong); }
.ho-shot__radio.is-on { color: var(--color-text); font-weight: var(--weight-bold); }
.ho-shot__radio.is-on i { border-color: var(--color-primary); background: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-bg); }
.ho-shot__btn { justify-self: end; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-size: 0.625rem; font-weight: var(--weight-bold); }
.ho-shot__cap { margin: 0; font-size: var(--text-xs); line-height: 1.45; }

/* H5 요약·진행 */
.ho-sum { margin: 0; display: grid; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ho-sum > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-2); padding: 8px var(--space-3); border-top: 1px dashed var(--color-border); font-size: var(--text-sm); }
.ho-sum > div:first-child { border-top: 0; }
.ho-sum dt { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); padding-top: 2px; }
.ho-sum dd { margin: 0; overflow-wrap: anywhere; }
.ho-meter { height: 8px; border-radius: var(--radius-pill); background: var(--color-fill); overflow: hidden; }
.ho-meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--color-primary); transition: width .25s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .ho-meter span { transition: none; } }
.ho-stage { margin: 0; color: var(--color-accent-ink); font-weight: var(--weight-medium); min-height: 1.2em; }
.ho-stage:empty { display: none; }

/* H6 열기 */
.ho-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--color-fill); justify-self: start; }
.ho-tab { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; }
.ho-tab[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); font-weight: var(--weight-bold); }
.ho-open { display: grid; gap: var(--space-2); }
.ho-open p { margin: 0; }
.ho-open__go { justify-self: start; }
.ho-prompt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-accent-soft); }
.ho-prompt p { margin: 0; font-weight: var(--weight-medium); color: var(--color-accent-ink); }
.link-ext { font-size: var(--text-sm); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.ho-restart { color: var(--color-text-muted); }
.ho .link-quiet { color: var(--color-text-muted); text-decoration: underline; min-height: 0; padding: 0; }

/* H7 가짜 문 */
.ho-door { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md); }
.ho-door h3 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); }
.ho-door p { margin: 0; }
.ho-door .btn { justify-self: start; }

/* 가짜 GitHub 허락 화면 (개발용, /api/github/fake-authorize) */
.fake-gh { max-width: 32rem; margin: var(--space-8) auto; display: grid; gap: var(--space-2); }
.fake-gh h1 { font-size: var(--text-lg); margin: 0; }

/* ══ 앱 v3: 사이드바 구성 (design/mockups/app-v3-sidebar.html) — 둥근 카드·촘촘한 목록 ══ */
.shell { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; }
.shell__main { min-width: 0; display: flex; flex-direction: column; }
.shell__main .app-main { width: 100%; max-width: 64rem; padding: var(--space-5) var(--space-6) var(--space-10); flex: 1; }
.shell__main .foot__row { max-width: 64rem; padding-inline: var(--space-6); }
.sb { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--color-surface); border-right: 1px solid var(--color-border); padding: var(--space-3) var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.sb__logo { padding: 4px var(--space-2) var(--space-1); }
.sb__new { margin: 0 var(--space-1); justify-content: center; }
.sb__h { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--color-text-muted); padding: var(--space-2) var(--space-2) 2px; text-decoration: none; }
.sb__h[aria-current="page"] { color: var(--color-accent-ink); }
.sb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.sb__p { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px var(--space-2); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); font-size: var(--text-sm); min-height: 36px; }
.sb__p:hover { background: var(--color-fill); }
.sb__p > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb__p[aria-current="page"] { background: var(--color-fill); font-weight: var(--weight-bold); }
.sb__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); }
.sb__dot--validate { background: var(--color-wood); }
.sb__dot--plan { background: var(--color-primary); }
.sb__dot--dev { background: #3a6ea8; }
.sb__dot--ops { background: var(--color-success); }
.sb__empty { padding: 6px var(--space-2); }
.sb__sub { list-style: none; margin: 2px 0 6px 18px; padding: 0 0 0 8px; border-left: 1.5px solid var(--color-border); display: grid; gap: 1px; }
.sb__sub a, .sb__sub span.is-locked { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-sm); font-size: 13px; color: var(--color-text-muted); text-decoration: none; min-height: 32px; }
.sb__sub a:hover { background: var(--color-fill); color: var(--color-text); }
.sb__sub a[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent-ink); font-weight: var(--weight-bold); }
.sb__sub .is-locked { cursor: not-allowed; }
.is-locked .st-n { background: transparent; border: 1px dashed var(--color-border-strong); }
.st-n { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-weight: 800; background: var(--color-fill); color: var(--color-text-muted); flex: none; }
.is-done .st-n, .is-now .st-n { background: var(--color-primary); color: var(--color-on-primary); }
.sb__foot { margin-top: auto; border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.sb__foot a { display: flex; justify-content: space-between; align-items: center; padding: 7px var(--space-2); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text); text-decoration: none; min-height: 36px; }
.sb__foot a:hover, .sb__foot a[aria-current="page"] { background: var(--color-fill); }
.mbar { display: none; }
.sb-scrim { display: none; }
@media (max-width: 47.99em) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sb { position: fixed; inset: 0 auto 0 0; width: 82%; max-width: 20rem; height: 100%; z-index: 40; transform: translateX(-102%); transition: transform var(--duration-fast) var(--ease-out); box-shadow: 8px 0 32px rgba(0, 0, 0, .18); visibility: hidden; }
  .drawer-open .sb { transform: none; visibility: visible; }
  .drawer-open .sb-scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .28); z-index: 39; }
  .mbar { display: flex; align-items: center; gap: var(--space-2); padding: 8px var(--space-3); background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 10; }
  .mbar__menu { width: 40px; height: 40px; flex: none; border-radius: var(--radius-md); background: var(--color-fill); border: 0; font-size: 18px; color: var(--color-text); cursor: pointer; }
  .mbar__t { font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell__main .app-main { padding: var(--space-3) var(--space-4) var(--space-8); }
  .shell__main .foot__row { padding-inline: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .sb { transition: none; } }

/* 단계 칩·진행 점 (홈 목록) */
.stage { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-bold); white-space: nowrap; background: var(--color-fill); color: var(--color-text-muted); }
.stage i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stage--validate { background: var(--color-wood-soft); color: var(--color-text); }
.stage--validate i { background: var(--color-wood); }
.stage--plan { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.stage--dev { background: #e7eef8; color: #24466f; }
.stage--ops { background: var(--color-success-bg); color: var(--color-success); }
:root[data-theme="dark"] .stage--dev { background: #1f2c3d; color: #a9c4e6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stage--dev { background: #1f2c3d; color: #a9c4e6; } }
.dots { display: inline-flex; gap: 3px; }
.dots span { width: 14px; height: 4px; border-radius: 2px; background: var(--color-border); }
.dots span.on { background: var(--color-primary); }
.hlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.hrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center; padding: 10px var(--space-3); border-radius: var(--radius-md); text-decoration: none; color: inherit; }
.hrow:hover { background: var(--color-fill); }
.hrow__t { font-weight: var(--weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow__m { grid-column: 1; font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow__s { grid-column: 2; grid-row: 1 / 3; display: grid; justify-items: end; gap: 6px; }
.home-sum { display: flex; gap: var(--space-1); flex-wrap: wrap; margin: 0 0 var(--space-2); }

/* 프로젝트 머리·휴대폰 단계 탭 */
.phead { display: grid; gap: 2px; margin-bottom: var(--space-3); }
.phead h1 { margin: 0; }
.phead .proj__idea { margin: 2px 0 0; }
.phead .proj__tags { margin-top: var(--space-1); }
.mtabs { display: none; }
@media (max-width: 47.99em) {
  .mtabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0 0 var(--space-3); padding: 0; list-style: none; }
  .mtabs > li > a, .mtabs > li > span { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); font-size: 13px; font-weight: var(--weight-bold); color: var(--color-text-muted); text-decoration: none; }
  .mtabs > li > a[aria-current="page"] { border-color: var(--color-primary); color: var(--color-accent-ink); background: var(--color-accent-soft); }
  .mtabs .is-locked { background: transparent; border-style: dashed; }
}

/* 탭 본문 공통: 본문 + 오른쪽 "다음 할 일" */
.tabgrid { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-3); align-items: start; }
.tabgrid > * { min-width: 0; }
@media (max-width: 71.99em) { .tabgrid { grid-template-columns: minmax(0, 1fr); } }
.side { display: grid; gap: var(--space-3); }
.side .card { padding: var(--space-3) var(--space-4); }
.side h2 { font-size: var(--text-md); margin: 0 0 var(--space-1); }
.next { display: grid; gap: var(--space-2); }
.next p { margin: 0; }
.next .btn { justify-content: center; }
.flow { list-style: none; counter-reset: f; margin: 0; padding: 0; display: grid; gap: 6px; }
.flow li { counter-increment: f; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 10px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--color-fill); }
.flow li::before { content: counter(f); grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary); color: var(--color-on-primary); font-size: 12px; font-weight: 800; }
.flow b { font-size: var(--text-sm); }
.flow span { font-size: var(--text-xs); color: var(--color-text-muted); }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mini-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; padding: 7px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.mini-list li:nth-child(odd) { background: var(--color-fill); }
.mini-list .tag { font-size: 11px; font-weight: var(--weight-bold); padding: 1px 7px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); white-space: nowrap; }
.mini-list .tag--ok { background: var(--color-success-bg); color: var(--color-success); border-color: transparent; }
.kv { margin: 0; display: grid; gap: 6px; }
.kv > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-2); font-size: var(--text-sm); }
.kv dt { color: var(--color-text-muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ops-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
@media (max-width: 47.99em) { .ops-grid { grid-template-columns: 1fr 1fr; } }
.ops-tile { padding: var(--space-3); border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-border); display: grid; gap: 2px; }
.ops-tile p { margin: 0; }
.ops-tile .l { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--weight-bold); }
.ops-tile .v { font-size: var(--text-lg); font-weight: 800; }
.ops-tile .s { font-size: var(--text-xs); color: var(--color-text-muted); }
.ops-preview { position: relative; }
.ops-preview > .ops-grid, .ops-preview > .card { filter: grayscale(1); opacity: .45; }
.ops-cta { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-3); }
.ops-cta .card { max-width: 26rem; text-align: center; box-shadow: 0 8px 28px rgba(0, 0, 0, .12); }

/* ② 기획 탭 — 한 장 기획서 (public/app/plan.js) */
.pe-sec { margin-top: var(--space-4); }
.pe-sec h3, .plan-h { font-size: var(--text-md); font-weight: var(--weight-bold); margin: 0 0 var(--space-2); }
.plan-h { margin-top: var(--space-4); }
.pe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pe-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 2.25rem; gap: 6px; align-items: center; }
.pe-row--2 { grid-template-columns: minmax(0, 1fr) 2.25rem; }
.pe-row--cost { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.25rem; }
.pe-row--feat .pe-del { grid-row: 1; grid-column: 3; }
.pe-row .pe-acc { grid-row: 2; grid-column: 2; min-height: 34px; padding-block: 4px; font-size: var(--text-xs); color: var(--color-text-muted); }
.pe-row .pe-acc[hidden] { display: none; }
.plan-acc { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-muted); }
.pe-row .input { min-height: 40px; padding-block: 6px; font-size: var(--text-sm); }
.pe-sel { padding-inline: 8px; }
.pe-del { width: 2.25rem; height: 2.25rem; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 14px; }
.pe-del:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.pe-add { margin-top: 6px; }
.plan-must { margin: 6px 0 0; }
.plan-sum { margin: var(--space-2) 0 0; }
.plan-ed .ai-note { margin: 0 0 var(--space-3); }
.mini-list .tag--must { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.screens { display: flex; flex-wrap: wrap; gap: 6px; }
.screens span { padding: 5px 10px; border-radius: var(--radius-md); background: var(--color-fill); font-size: var(--text-sm); }
.next .link-quiet { justify-self: start; }
@media (max-width: 30em) {
  .pe-row:not(.pe-row--2):not(.pe-row--cost) { grid-template-columns: 7rem minmax(0, 1fr) 2.25rem; row-gap: 4px; padding-bottom: 6px; border-bottom: 1px dashed var(--color-border); }
  .pe-row:not(.pe-row--2):not(.pe-row--cost) .pe-sel { grid-column: 1; grid-row: 1; }
  .pe-row:not(.pe-row--2):not(.pe-row--cost) .pe-in { grid-column: 1 / 4; grid-row: 2; }
  .pe-row:not(.pe-row--2):not(.pe-row--cost) .pe-del { grid-column: 3; grid-row: 1; }
  .pe-row.pe-row--feat:not(.pe-row--2) .pe-in.pe-acc { grid-column: 1 / 4; grid-row: 3; }
  .pe-row--cost { grid-template-columns: minmax(0, 1fr) 2.25rem; }
  .pe-row--cost .pe-in + .pe-in { grid-column: 1; }
  .pe-row--cost .pe-del { grid-row: 1; grid-column: 2; }
}

/* ④ 운영 탭 — 운영 대시보드 v1 (public/app/ops.js) */
.ops-tile--ok .v { color: var(--color-success); }
.ops-tile--down { border-color: var(--color-danger); background: var(--color-danger-bg); }
.ops-tile--down .v { color: var(--color-danger); }
.ops-bars { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; align-items: end; height: 36px; margin: var(--space-2) 0 var(--space-1); }
.ops-bars span { height: 100%; border-radius: 4px; background: var(--color-success); opacity: .85; }
.ops-bars span.down { background: var(--color-danger); opacity: 1; }
.ops-form { display: grid; gap: 6px; margin-top: var(--space-3); }
.ops-form__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.ops-tasks li { grid-template-columns: minmax(0, 1fr) auto; }
.ops-task { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; }
.ops-task input { width: 18px; height: 18px; flex: none; accent-color: var(--color-primary); }
.ops-tasks li.is-done .ops-task span { color: var(--color-text-muted); text-decoration: line-through; }
.ops-url { overflow-wrap: anywhere; }
.sb__dot--down { background: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-bg); }
.stage--down { background: var(--color-danger-bg); color: var(--color-danger); }
@media (max-width: 30em) { .ops-form__row { grid-template-columns: minmax(0, 1fr); } .ops-bars { gap: 2px; } }

/* 로그인 — 복구 코드 */
.recovery-code { margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-fill); font: 700 1.25rem/1.4 ui-monospace, "Cascadia Mono", Consolas, "D2Coding", monospace; letter-spacing: .04em; text-align: center; word-break: break-all; user-select: all; }
.auth-tabs { display: inline-flex; }

/* 넘기기 H6 사용량 안내 (handoff.js) */
.ho-usage { display: grid; gap: 6px; margin-block: var(--space-2); }
.ho-usage h3 { margin: 0; font-size: var(--text-md); }
.ho-usage p { margin: 0; }
.ho-usage__ok { display: flex; align-items: center; gap: 8px; font-weight: var(--weight-bold); min-height: var(--tap-min); cursor: pointer; }
.ho-usage-mini { margin-block: var(--space-2); }

/* ── 앱 안 의견 보내기 (public/app/feedback.js) ── */
.fb-open { position: fixed; right: 16px; bottom: 16px; z-index: 30; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold); box-shadow: 0 4px 14px rgb(0 0 0 / .12); cursor: pointer; }
.fb-open:hover { background: var(--color-fill); }
.fb { width: min(28rem, calc(100vw - 32px)); border: 0; border-radius: var(--radius-card); padding: var(--space-4); background: var(--color-surface); color: var(--color-text); }
.fb::backdrop { background: rgb(0 0 0 / .35); }
.fb h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.fb .input { width: 100%; margin-top: var(--space-2); }
@media print { .fb-open { display: none; } }

/* ── 운영 탭 v2 "이번 주 운영" (2026-10-06, design/mockups/ops-v2.html) ── */
.wk { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.wk h2 { margin: 0; }
.wk-sub { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.areas { display: flex; flex-wrap: wrap; gap: 6px; }
.area { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-fill); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); white-space: nowrap; }
.area i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; }
.area--ok { color: var(--color-success); } .area--ok i { background: currentColor; }
.area--now { background: var(--color-accent-soft); color: var(--color-accent-ink); } .area--now i { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.area--down { background: var(--color-danger-bg); color: var(--color-danger); } .area--down i { background: currentColor; }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.todo > li { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3); background: var(--color-surface); }
.todo > li.is-open { border-color: var(--color-primary); }
.todo > li.is-done { background: var(--color-fill); }
.todo > li.is-done .td-t { color: var(--color-text-muted); text-decoration: line-through; }
.td-h { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.td-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent-ink); font-weight: 800; font-size: 13px; }
.td-t { margin: 0; font-size: var(--text-md); font-weight: 800; }
.td-w { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.td-area { font-size: 11px; font-weight: var(--weight-bold); color: var(--color-text-muted); white-space: nowrap; padding-top: 4px; }
.td-b { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-2) 0 0 36px; }
.td-in { margin: var(--space-1) 0 0 36px; }
.td-in .ops-form { margin-top: 0; }
.ch { margin: var(--space-3) 0 0 36px; display: grid; gap: var(--space-2); }
.ch-i { border-radius: var(--radius-md); background: var(--color-fill); padding: 10px 12px; }
.ch-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ch-n { font-weight: 800; }
.ch-why { font-size: var(--text-xs); color: var(--color-text-muted); }
.rules { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.rule { font-size: 11px; font-weight: var(--weight-bold); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); }
.rule--warn { border-color: #e2b25c; background: #fdf3df; color: #6b4a0e; }
.ch-b { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ch-i .btn--quiet { background: var(--color-surface); border: 1px solid var(--color-border); }
.btn--xs { min-height: 36px; padding: 4px 12px; font-size: 0.8125rem; }
.pv { margin: 6px 0 0 36px; font-size: var(--text-sm); }
.ch-i .pv { margin-left: 0; }
.pv > summary { cursor: pointer; color: var(--color-text-muted); width: fit-content; min-height: 32px; display: flex; align-items: center; }
.pv textarea { margin-top: 4px; }
.later { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.later > summary { cursor: pointer; font-weight: var(--weight-bold); color: var(--color-text); min-height: 32px; display: flex; align-items: center; }
.later ul { margin: 6px 0 0; padding-left: 18px; }
.more-tasks > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 32px; }
.more-tasks .mt-t { font-weight: 800; font-size: var(--text-md); }
.st { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 6px; }
.st > div { display: grid; }
.st .l { font-size: 11px; color: var(--color-text-muted); font-weight: var(--weight-bold); }
.st .v { font-weight: 800; }
.st .v.ok { color: var(--color-success); }
.st .v.bad { color: var(--color-danger); }
.st--down { border-color: var(--color-danger); }
.st-foot { margin-top: 6px; }
.st-foot .link-quiet { min-height: 0; padding: 0; font-size: inherit; text-decoration: underline; }
.use dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 8px 0 0; font-size: var(--text-sm); }
.use dt { font-weight: var(--weight-bold); white-space: nowrap; }
.use dd { margin: 0; color: var(--color-text-muted); }
@media (prefers-color-scheme: dark) { .rule--warn { background: #3a2e14; color: #f0d08d; border-color: #6b5420; } }
@media (max-width: 640px) { .td-b, .td-in, .ch, .pv { margin-left: 0; } .use dl { grid-template-columns: 1fr; } }

/* 복구 코드 띠 (2026-10-07): 가입 직후 막지 않고 앱 위쪽에서 저장 권하기 */
.rcb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 12px 16px 0; padding: 10px 14px; border-radius: 14px; background: var(--color-warn-bg); color: var(--color-warn); font-size: var(--text-sm); }
.rcb__t { margin: 0; flex: 1 1 18rem; }
.rcb__t b { color: var(--color-text); }
.rcb__out { flex-basis: 100%; }
.rcb__out:empty { display: none; }
.rcb__out .recovery-code { margin: 4px 0 8px; }
.rcb__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-text); }

/* 2026-10-07 design-taste-frontend: 강조(오렌지)는 "지금 위치·진행·고른 것" 한 가지 뜻으로만. 보고서 소제목·인용·도움 상자는 중립 */
.md h3.md-h { color: var(--color-text); }
.md blockquote { background: var(--color-fill); }
.ho-help, .ho-prompt { background: var(--color-fill); }
.ho-prompt p { color: var(--color-text); }

/* 사이드바 아래 로그아웃 (2026-10-07) */
.sb__out { display: flex; width: 100%; align-items: center; padding: 7px var(--space-2); min-height: 36px; border: 0; border-radius: var(--radius-md); background: none; font: inherit; font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; text-align: left; }
.sb__out:hover { background: var(--color-fill); color: var(--color-text); }

/* 보고서 접기 (프롬프트 v2, md.js 의 <details> 줄) — 본문은 짧게, 자세한 표·근거 문장은 눌러서 */
.md .md-fold { margin-block: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.md .md-fold > summary { cursor: pointer; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-muted); list-style-position: inside; }
.md .md-fold > summary:hover { color: var(--color-text); }
.md .md-fold[open] > summary { border-bottom: 1px solid var(--color-border); }
.md .md-fold > :not(summary) { margin-inline: var(--space-3); }
.md .md-fold > :last-child { margin-bottom: var(--space-3); }

/* ── 5번 지속 관리 서비스 (public/app/ops-service.js) — 같은 토큰, 둥근 카드·알약, 촘촘한 목록 ── */
.svc-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-1); }
.svc-h h2 { margin: 0; }
.svc-facts { margin: var(--space-2) 0; padding-left: 1.1em; font-size: var(--text-sm); line-height: 1.6; }
.sig { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--space-2); padding: 4px 12px; border-radius: var(--radius-pill); background: var(--color-fill); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.sig i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-muted); }
.sig--ok { background: var(--color-success-bg); color: var(--color-success); }
.sig--ok i { background: var(--color-success); animation: sig-pulse 2s ease-in-out infinite; }
.sig--now { background: var(--color-wood-soft); }
.sig--now i { background: var(--color-accent-ink); }
.sig--down { background: var(--color-danger-bg); color: var(--color-danger); }
.sig--down i { background: var(--color-danger); }
@keyframes sig-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sig--ok i { animation: none; } }
.svc-credit { margin: var(--space-1) 0; }
.svc-notify { border: 0; padding: 0; margin: var(--space-2) 0; display: grid; gap: 2px; }
.svc-notify legend { padding: 0; margin-bottom: 4px; font-weight: var(--weight-bold); }
.funnel { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 6px; }
.funnel li { display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--color-fill); }
.funnel .l { font-size: 11px; color: var(--color-text-muted); font-weight: var(--weight-bold); }
.funnel b { font-size: var(--text-lg); font-weight: 800; line-height: 1.2; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--color-fill); flex-wrap: wrap; }
.seg__b { border: 0; background: none; font: inherit; font-size: 0.8125rem; padding: 4px 10px; min-height: 32px; border-radius: var(--radius-pill); color: var(--color-text-muted); cursor: pointer; }
.seg__b[aria-selected="true"] { background: var(--color-surface); color: var(--color-text); font-weight: var(--weight-bold); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.rep-head { font-weight: var(--weight-heavy); margin: var(--space-2) 0 var(--space-1); }
.rep-sug { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rep-sug li { padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-fill); }
.rep-sug p { margin: 0; }
.pm-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 2px var(--space-2); margin: var(--space-2) 0; }
.pre { white-space: pre-wrap; margin: 6px 0; padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-fill); }
.ops-bars--14 { grid-template-columns: repeat(14, minmax(0, 1fr)); }
.ops-bars--14 span { align-self: end; }
.ops-bars span.none { background: var(--color-border); opacity: .6; height: 15%; }
.todo .td-h input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; justify-self: end; }

/* 기획 탭 — 만들 형태 고르기 (앱 개편 1차, docs/overhaul/app/app-1.md) */
.plan-form { border: 0; padding: 0; margin-inline: 0; display: grid; gap: 6px; }
.plan-form legend { padding: 0; }
.plan-form__opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; cursor: pointer; font-size: var(--text-sm); line-height: 1.5; }
.plan-form__opt:has(input:checked) { border-color: var(--color-primary); background: var(--color-accent-soft); }
.plan-form__opt input { margin-top: 3px; accent-color: var(--color-primary); }
.plan-form[hidden] { display: none; }
.plan-form--sub { padding-left: 12px; border-left: 3px solid var(--color-accent-soft); }
.plan-form__body { display: grid; gap: 4px; }
.plan-form__pros, .plan-form__cons { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.plan-form__pros li::before { content: "✓ "; color: var(--color-primary); font-weight: var(--weight-bold); }
.plan-form__cons li::before { content: "! "; color: var(--color-warn, var(--color-text-muted)); font-weight: var(--weight-bold); }

/* 개발 탭 — 확인 지점 진행 (docs/overhaul/dev-checkpoints.md) */
.progress__bar { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.progress__step { display: grid; justify-items: center; gap: 4px; text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); position: relative; }
.progress__step::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--color-border); z-index: 0; }
.progress__step:first-child::before { display: none; }
.progress__dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: var(--weight-bold); background: var(--color-surface); border: 2px solid var(--color-border-strong); }
.progress__step.is-approved { color: var(--color-text); }
.progress__step.is-approved .progress__dot { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.progress__step.is-approved::before, .progress__step.is-waiting::before { background: var(--color-primary); }
.progress__step.is-waiting { color: var(--color-accent-ink); font-weight: var(--weight-bold); }
.progress__step.is-waiting .progress__dot { border-color: var(--color-primary); background: var(--color-accent-soft); color: var(--color-accent-ink); }
.progress__label { overflow-wrap: anywhere; }
.progress__wait { margin-top: 12px; display: grid; gap: 6px; }
.progress__wait p { margin: 0; }
.progress__links a { white-space: nowrap; }
.progress__past { margin-top: 8px; font-size: var(--text-sm); }
.progress__past summary { cursor: pointer; }
.apk__got { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); }
.apk__got svg { border: 1px solid var(--color-border, #ddd); border-radius: var(--radius-md, 12px); flex: none; }

/* ── 운영 탭 스토어용 앱 2차 (public/app/ops-app.js) ── */
.app-form { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.app-form .field { margin: 0; }
.app-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }   /* 이름이 페이지 틀 .app-grid 와 겹쳐 휴대폰에서 두 칸으로 눌리던 것 */
.app-fields--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .app-fields--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
select.input { appearance: auto; }
.app-note { margin: 6px 0; padding: 6px 10px; border-radius: var(--radius-md); }
.app-note--warn { background: var(--color-warn-bg); color: var(--color-warn); }
.app-note--good { background: var(--color-fill); }
.ch-why.app-note--warn { padding: 0 6px; }
.tbl { border-collapse: collapse; width: 100%; }
.tbl th, .tbl td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--color-border); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th { background: var(--color-fill); font-weight: var(--weight-bold); }
.aso-row + .aso-row { margin-top: var(--space-2); }
.app-vers li { grid-template-columns: 4.5rem 1fr auto; }
.aso-h { display: flex; align-items: center; gap: var(--space-2); }
.aso-h > :last-child { margin-left: auto; }
.pol-list { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; gap: var(--space-2); }
.pol-list p { margin: 4px 0 0; }

/* ── 글 줄이기·할 일 고르기 (design/mockups/less-text.html) — 공용 조각 public/app/bits.js ── */
.row-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.row-l > h2, .row-l > h3, .row-l > p { margin: 0; }
.inf-b { flex: none; width: 22px; height: 22px; min-height: 22px; padding: 0; border-radius: 50%; border: 1.5px solid var(--color-border-strong); background: none; color: var(--color-text-muted); font: 800 11px/1 var(--font-sans); cursor: pointer; display: inline-grid; place-items: center; }
.inf-b[aria-expanded="true"] { background: var(--color-fill); color: var(--color-text); }
.inf { margin: 6px 0 var(--space-2); padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-fill); font-size: var(--text-sm); color: var(--color-text-muted); }
.inf p { margin: 0; } .inf p + p { margin-top: 4px; }
.btn--ic { min-width: 36px; justify-content: center; padding-inline: 8px; }
.pill--warn { background: var(--color-warn-bg); color: var(--color-warn); }

/* 맨 위 한 줄 (상태 · 7일 숫자 · 관리 · ⚙) */
.ob { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; margin-bottom: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); font-size: var(--text-sm); }
.ob--down { border-color: var(--color-danger); background: var(--color-danger-bg); }
.ob .v.ok { color: var(--color-success); } .ob .v.bad { color: var(--color-danger); }
.ob-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-success); flex: none; }
.ob-dot--none { background: var(--color-border-strong); } .ob-dot--down { background: var(--color-danger); }
.ob-sep { width: 1px; height: 18px; background: var(--color-border); }
.ob-nums { display: inline-flex; gap: 10px; flex-wrap: wrap; border: 0; background: none; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; font: inherit; color: inherit; cursor: pointer; }
.ob-nums:hover, .ob-nums[aria-expanded="true"] { background: var(--color-fill); }
.ob-grow { flex: 1 1 0; }
.ob-panel { margin-bottom: var(--space-2); }
.ob-panel > .plan-h:first-child { margin-top: 0; }

/* 할 일 한 목록 */
.tk-card .areas { margin: var(--space-2) 0; }
.tk { list-style: none; margin: 0; padding: 0; display: grid; }
.tk > li { padding: 10px 0; border-top: 1px solid var(--color-border); }
.tk > li:first-child { border-top: 0; }
.tk > li.is-done .tk-t { color: var(--color-text-muted); text-decoration: line-through; }
.tk > li.is-leaving { opacity: .4; pointer-events: none; transition: opacity .15s; }   /* 뺐어요·미뤘어요 — 저장되는 동안 */
.tk-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.tk-tt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.tk-t { border: 0; background: none; padding: 4px 0; font: inherit; font-weight: 800; color: var(--color-text); text-align: left; cursor: pointer; }
.tk-t:hover { text-decoration: underline; }
.tk-chip { font-size: 11px; }
.tk-act { display: flex; align-items: center; gap: 6px; }
.tk-more[aria-expanded="true"] { background: var(--color-fill); }
.tk-menu, .tk-why-pick, .tk-detail, .tk-in, .tk > li > .ch, .tk-meter { margin: 8px 0 0 36px; }
.tk-menu { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: 14px; border: 1px solid var(--color-border-strong); background: var(--color-surface); box-shadow: 0 6px 20px rgb(0 0 0 / .08); }
.tk-menu[hidden], .tk-why-pick[hidden], .tk-detail[hidden] { display: none; }
.tk-mi { border: 0; background: var(--color-fill); color: var(--color-text); border-radius: var(--radius-pill); padding: 6px 12px; min-height: 36px; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.tk-mi:hover { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.tk-mi--skip { color: var(--color-danger); }
.tk-why-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--color-warn-bg); color: var(--color-warn); }
.chip-b { border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-pill); padding: 4px 12px; min-height: 32px; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.chip-b:hover { border-color: var(--color-primary); }
.tk-detail .pv { margin-left: 0; }
.tk-count { display: inline-flex; align-items: center; gap: 6px; }
.tk-count b { font-size: var(--text-lg); min-width: 1.2em; text-align: center; }
.gmeter { height: 6px; border-radius: 3px; background: var(--color-fill); overflow: hidden; }
.gmeter > i { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; min-width: 3px; }
.tk > li > .ch { display: grid; gap: 6px; }
.tk .ch-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 8px 10px; }
.tk .ch-h { align-items: center; }
.tk .ch-b { margin-top: 0; }
.tk .ch-i .pv { grid-column: 1 / -1; }
.tk-foot { margin-top: var(--space-2); }
.tk-hidden li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.tk-toast { position: sticky; bottom: 76px; z-index: 20; display: flex; align-items: center; gap: 12px; margin-top: var(--space-2); padding: 10px 14px; border-radius: 12px; background: var(--color-text); color: var(--color-bg); font-size: var(--text-sm); overflow: hidden; }
.tk-toast[hidden] { display: none; }
.tk-toast > span { flex: 1; }
.tk-undo { border: 0; background: none; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; min-height: 32px; }
.tk-toast > i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--color-accent); transform-origin: left; animation: tk-shrink 5s linear forwards; }
@keyframes tk-shrink { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .tk-toast > i { animation: none; } }

/* 보고·목표 두 칸, 홍보 한 줄 */
.ops-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-3); align-items: start; }
.ops-two > .card { margin: 0; }
.rep .rep-head { margin-top: var(--space-1); }
.rep-chips { display: inline-flex; gap: 4px; }
.rep-fb { display: flex; align-items: center; gap: 6px; margin-top: var(--space-2); }
.rep-fb .small { flex: 1; }
.rep-fb__b[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-primary); }
.goal-row { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 6px; }
.goal-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.input--n { width: 5.5rem; min-height: 36px; }
.app-more > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; min-height: 32px; }
.app-more > summary .mt-t { font-weight: 800; }
.app-more[open] > summary { margin-bottom: var(--space-2); }
@media (max-width: 640px) {
  .tk-menu, .tk-why-pick, .tk-detail, .tk-in, .tk > li > .ch, .tk-meter { margin-left: 0; }
  .tk-row { gap: 8px; }
  .tk-act { gap: 4px; }
  .tk .ch-i { grid-template-columns: minmax(0, 1fr); }
}

/* 검증 탭 — 보고서 접기 (public/app/report-fold.js) */
.proj__grid--one { grid-template-columns: minmax(0, 1fr) !important; }
.report__bar .row-l h2 { margin: 0; }
.md .rf-verdict { margin: var(--space-2) 0; }
.rf-verdict__b { display: inline-block; padding: 8px 16px; border-radius: 14px; background: var(--color-warn-bg); color: var(--color-warn); font-size: var(--text-lg); font-weight: 800; }
.md .rf-risk { padding: 10px 12px; border-radius: 12px; background: var(--color-warn-bg); color: var(--color-warn); }
.md .rf-risk strong { color: inherit; }
.rf-ev { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-2) 0; }
.rf-ev .pill { font-weight: var(--weight-bold); }
.md .rf-sec { border-top: 1px solid var(--color-border); }
.md .rf-sec > summary { cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 8px 0; list-style: none; }
.md .rf-sec > summary::-webkit-details-marker { display: none; }
.md .rf-sec > summary::after { content: "›"; margin-left: auto; color: var(--color-text-muted); font-size: 18px; transition: transform .15s; }
.md .rf-sec[open] > summary::after { transform: rotate(90deg); }
.rf-sec__t { font-size: var(--text-md); font-weight: 800; }
.md .rf-sec[open] { padding-bottom: var(--space-2); }

/* 기획 탭 확정 화면 (글 줄이기) */
.plan-quote { margin: var(--space-2) 0 var(--space-1); padding: 2px 0 2px 14px; border-left: 4px solid var(--color-primary); font-size: var(--text-lg); font-weight: 800; line-height: 1.45; }
.plan-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-feats li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 12px; }
.plan-wont { margin-top: var(--space-2); }
.scr { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }   /* 가로 스크롤 영역은 키보드로 못 움직여서 줄바꿈 */
.scr li { flex: none; width: 88px; display: grid; gap: 6px; text-align: center; font-size: var(--text-xs); }
.scr__ph { height: 112px; border: 1.5px solid var(--color-border-strong); border-radius: 12px; padding: 10px 8px; display: grid; gap: 5px; align-content: start; background: var(--color-surface); }
.scr__ph i { height: 6px; border-radius: 3px; background: var(--color-fill); }
.scr__ph i.s { width: 55%; } .scr__ph i.b { height: 18px; background: var(--color-accent-soft); }
.cost-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 8px; margin: 0; }
.cost-tiles > div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--color-fill); }
.cost-tiles dd { margin: 0; font-weight: 800; font-size: var(--text-md); }
.cost-tiles dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.plan-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-tasks li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--color-border); }
.plan-tasks li:first-child { border-top: 0; }

/* 개발 탭 넘긴 뒤 (public/app/dev-tab.js) */
.dev-repo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dev-repo__ic { font-size: 22px; }
.dev-repo__n { flex: 1 1 12rem; min-width: 0; font-weight: 800; overflow-wrap: anywhere; }
.dev-repo__n a { color: inherit; }
.grow { flex: 1 1 10rem; }
.ck { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ck > li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 12px; }
.ck__l { flex: 1; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-width: 0; }
.ck__l input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--color-primary); }
.ck__l > span { display: grid; gap: 2px; min-width: 0; }
.ck__l small { color: var(--color-text-muted); font-size: var(--text-xs); }
.ck > li.is-done b { color: var(--color-text-muted); text-decoration: line-through; }
.qp { display: flex; flex-wrap: wrap; gap: 8px; }
.qp__b { border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-pill); padding: 8px 14px; min-height: 40px; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.qp__b:hover { border-color: var(--color-primary); }
.qp__b.is-copied { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); }
.dev-deploy.is-dim { border-style: dashed; background: var(--color-bg); box-shadow: none; }   /* 출시 전 점검을 마치면 보통 카드로 (흐리게 하면 글자 대비가 떨어져서 테두리로) */
.md .rf-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: var(--space-3) 0; padding: 12px 14px; border-radius: 14px; background: var(--color-accent-soft); color: var(--color-accent-ink); }
.md .rf-next p { margin: 0; flex: 1 1 16rem; }
.md .rf-next b { color: inherit; }
/* 보고서 결과 세 줄 — 근거 칩·한계·다음 버튼을 한 상자에 (.ev3 는 styles.css) */
.md .ev3 { margin: var(--space-3) 0; }
.md .ev3 .rf-ev { margin: 0; }
.md .ev3 .rf-next { margin: 0; padding: 0; background: none; color: var(--color-text); }
.md .ev3 .rf-next p { flex-basis: 12rem; }
.ho-back { margin: 0; padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent-ink); font-weight: 600; }   /* H5 설치 화면에서 돌아왔을 때 */
/* 보고서 이번 주 할 일 체크·달력 */
.md ol.wk { list-style: none; padding-left: 0; display: grid; gap: 6px; }
.md ol.wk > li { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 12px; }
.md ol.wk > li.is-done span { color: var(--color-text-muted); text-decoration: line-through; }
.wk-l { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.wk-l input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--color-primary); }
.wk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 12px; }
.wk-mail { display: inline-flex; align-items: center; gap: 6px; flex-basis: 100%; font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.wk-mail input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent); }
.wk-mail .muted { font-weight: var(--weight-regular, 400); }
/* 보고서 절 다시 쓰기 */
.rw { margin: 8px 0 12px; }
.rw-form { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border-radius: 12px; background: var(--color-fill); }
.rw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rw-live { max-height: 12rem; overflow: auto; white-space: pre-wrap; padding: 8px 10px; border-radius: 10px; background: var(--color-surface); color: var(--color-text-muted); }

/* ── "AI 가 만든 느낌" 줄이기 (docs/overhaul/ai-feel-.md) ── */
/* 공통 틀: 사이드바 = 이름 + 4칸 단계 막대, 아래 이용 현황 한 줄·복구 코드 알림 */
.sb__p { grid-template-columns: minmax(0, 1fr) auto; }
.trk { display: inline-flex; gap: 3px; }
.trk i { width: 12px; height: 5px; border-radius: 3px; background: var(--color-border); }
.trk i.on { background: var(--color-text); }
.trk i.now { background: var(--color-accent); }
.trk i.down { background: var(--color-danger); }
.sb__use { margin: 0; padding: 4px var(--space-2); font-size: 12px; color: var(--color-text-muted); }
.sb__use:empty { display: none; }
.sb__warn { display: block; width: calc(100% - 8px); margin: 0 4px 6px; padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: var(--color-warn-bg); color: var(--color-warn); font: inherit; font-size: 12px; font-weight: var(--weight-bold); text-align: left; cursor: pointer; }
.sb__warn::before { content: '! '; font-weight: 900; }
.sb__warn[hidden] { display: none; }
@media (min-width: 48em) { .rcb:not(.is-open) { display: none; } }   /* 넓은 화면은 사이드바 알림을 눌렀을 때만 띠 */
/* 프로젝트 머리: 제목 + 흐린 한 줄 + 단계 줄 */
.phead .proj__idea { -webkit-line-clamp: 1; font-size: var(--text-xs); }
@media (min-width: 48em) {
  .mtabs { display: flex; flex-wrap: wrap; align-items: center; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
  .mtabs > li { display: flex; align-items: center; }
  .mtabs > li + li::before { content: ''; width: 24px; height: 2px; margin: 0 6px; border-radius: 2px; background: var(--color-border); }
  .mtabs > li > a, .mtabs > li > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 99px; font-size: 13px; font-weight: var(--weight-bold); color: var(--color-text-muted); text-decoration: none; }
  .mtabs .st-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-fill); font-size: 11px; }
  .mtabs a:hover { background: var(--color-fill); color: var(--color-text); }
  .mtabs a.is-done { color: var(--color-text); }
  .mtabs a.is-done .st-n { background: var(--color-text); color: var(--color-surface); }
  .mtabs a[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent-ink); }
  .mtabs a[aria-current="page"] .st-n { background: var(--color-accent); color: #fff; }
  .mtabs .is-locked { cursor: not-allowed; }
  .mtabs .is-locked .st-n { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-border-strong); }   /* 흐리게(opacity) 하면 글자 대비 미달 */
}
/* 한 칸 화면 (오른쪽 이용 현황 카드 없이) */
.app-one { max-width: 48rem; display: grid; gap: var(--space-3); }
.app-one > * { min-width: 0; }
/* 내 프로젝트: 이어서 할 일 하나 */
.home__k { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-muted); }
.home__h { margin: -6px 0 var(--space-2); font-size: clamp(1.5rem, 2.6vw, 1.85rem); font-weight: 900; letter-spacing: -0.03em; }
.cont { display: grid; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.cont__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.cont__top h2 { margin: 0; font-size: var(--text-xl); }
.cont__top h2 a { color: inherit; text-decoration: none; }
.cont__top h2 a:hover { text-decoration: underline; }
.road { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.road > div { display: grid; gap: 6px; align-content: start; font-size: 13px; color: var(--color-text-muted); }
.road i { height: 8px; border-radius: 4px; background: var(--color-fill); }
.road b { font-weight: var(--weight-bold); }
.road small { font-size: 12px; }
.road .done { color: var(--color-text); }
.road .done i { background: var(--color-text); }
.road .now { color: var(--color-accent-ink); }
.road .now i { background: linear-gradient(90deg, var(--color-accent) 40%, var(--color-fill) 40%); }
.cont__go { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--color-accent-soft); }
.cont__k { margin: 0; font-size: 12px; font-weight: var(--weight-bold); color: var(--color-accent-ink); }
.cont__go b { font-size: var(--text-lg); }
.btn__ar { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 13px; }
.home__sub { display: flex; justify-content: space-between; align-items: baseline; margin: var(--space-3) 0 var(--space-2); }
.home__sub h2 { margin: 0; font-size: var(--text-md); }
.hlist2 { list-style: none; margin: 0; padding: 4px var(--space-2); }
.hlist2 li + li { border-top: 1px solid var(--color-border); }
.hrow2 { display: grid; grid-template-columns: minmax(0, 1fr) auto 8.5rem; gap: var(--space-3); align-items: center; padding: 12px var(--space-2); color: var(--color-text); text-decoration: none; }
.hrow2 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow2 .trk i { width: 18px; height: 6px; }
.hrow2__nx { justify-self: end; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.hrow2:hover .hrow2__nx { color: var(--color-accent-ink); }
.home-new { display: grid; gap: 8px; margin-top: var(--space-3); padding: var(--space-4); border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-card); }
.home-new--big { margin-top: 0; padding: var(--space-6); border: 0; gap: var(--space-3); }
.home-new h2 { margin: 0; font-size: var(--text-xl); }
.home-new__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.home-new--big .home-new__row { grid-template-columns: minmax(0, 1fr); }
.home-new__t { min-height: 46px; resize: vertical; }
.home-new--big .home-new__t { min-height: 96px; font-size: var(--text-md); }
.home-new p { margin: 0; }
.home-new__ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-ex { padding: 6px 12px; border: 0; border-radius: 99px; background: var(--color-fill); color: var(--color-text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.chip-ex:hover { color: var(--color-text); }
@media (max-width: 47.99em) {
  .cont { padding: var(--space-4); }
  .cont__go { grid-template-columns: minmax(0, 1fr); }
  .hrow2 { grid-template-columns: minmax(0, 1fr) auto; }
  .hrow2 .trk { display: none; }
  .home-new__row { grid-template-columns: minmax(0, 1fr); }
}
/* 검증 보고서 맨 위 (report-top.js): 판정 카드 → 왜(그림) → 아직 모르는 것 → 다음 버튼 하나 → 이번 주 할 일 → 전체(접힌 절) */
.report--v4 { display: grid; gap: var(--space-4); max-width: 48rem; }
.rv-top { display: grid; gap: var(--space-4); }
.rv { padding: var(--space-6); display: grid; gap: 6px; }
.rv__k { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-muted); }
.rv .rv__v { margin: 0; font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.15; color: var(--color-accent-ink); }
.rv__v--0 { color: var(--color-danger); }
.rv__why { margin: 4px 0 0; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.5; }
.rv__more { margin: 0; padding-left: 1.1em; color: var(--color-text-muted); font-size: var(--text-sm); }
.rv__weak { margin: 0; font-size: var(--text-sm); color: var(--color-warn); }
.rv-ask { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.rv-ask__q { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.rv-ask__row { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-ask__done { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.rv__scale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: var(--space-4); }
.rv__scale span { padding-top: 10px; border-top: 6px solid var(--color-fill); border-radius: 3px; font-size: 12px; font-weight: var(--weight-bold); color: var(--color-text-muted); }
.rv__scale span:nth-child(2) { text-align: center; }
.rv__scale span:nth-child(3) { text-align: right; }
.rv__scale span.on { border-top-color: var(--color-accent); color: var(--color-accent-ink); }
.rv-why { display: grid; gap: var(--space-2); }
.rv-top h2 { margin: 0; }
.rv-why > h2, .rv-wk > h2 { font-size: var(--text-md); }
.rv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.rv-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-cards--1 { grid-template-columns: minmax(0, 1fr); }
.rv-c { padding: var(--space-4); display: grid; gap: 8px; align-content: start; }
.rv-c__t { margin: 0; font-size: 12px; font-weight: var(--weight-bold); color: var(--color-text-muted); }
.rv-c__big { margin: 0; font-size: 1.4rem; font-weight: 900; letter-spacing: -0.03em; }
.rv-c__big small { margin-left: 6px; font-size: 12px; font-weight: var(--weight-bold); color: var(--color-text-muted); letter-spacing: 0; }
.rv-m { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; color: var(--color-text-muted); }
.rv-m i { height: 6px; border-radius: 3px; background: var(--color-fill); overflow: hidden; }
.rv-m i b { display: block; height: 100%; border-radius: inherit; background: var(--color-text); }
.rv-m em { font-style: normal; font-weight: var(--weight-bold); color: var(--color-text); }
.rv-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.rv-seg i { height: 10px; border-radius: 4px; background: var(--color-text); }
.rv-seg i.weak { background: var(--color-warn-bg); box-shadow: inset 0 0 0 1.5px var(--color-warn); }
.rv-biz { margin: 0; display: grid; gap: 4px; font-size: 13px; }
.rv-biz div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; }
.rv-biz dt { color: var(--color-text-muted); }
.rv-biz dd { margin: 0; font-weight: var(--weight-bold); }
.rv-src { margin: 0; font-size: 12px; color: var(--color-text-muted); }
.rv-src:empty { display: none; }
.rv-ev summary { font-size: 12px; color: var(--color-text-muted); cursor: pointer; }
.rv-ev .rf-ev { margin: 8px 0 0; }
.rv-unk { display: flex; gap: 12px; align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-warn-bg); }
.rv-unk__q { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-warn); color: var(--color-warn-bg); font-weight: 900; }
.rv-unk p { margin: 0; }
.rv-unk__k { font-size: 12px; font-weight: var(--weight-bold); color: var(--color-warn); }
.rv-unk__v { font-size: var(--text-md); font-weight: var(--weight-bold); }
.rv-unk__s { font-size: 13px; color: var(--color-text-muted); }
.rv-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-5) var(--space-6); border-radius: 20px; background: var(--color-text); color: var(--color-surface); }
.rv-next p, .rv-next h2 { margin: 0; }
.rv-next__k { font-size: 12px; font-weight: var(--weight-bold); opacity: .7; }
.rv-next h2 { font-size: var(--text-lg); }
.rv-next__s { font-size: 13px; opacity: .75; }
.rv-next .btn--primary { background: var(--color-surface); color: var(--color-text); }
.rv-next .btn--primary:hover { background: var(--color-fill); }
.rv-wk { display: grid; gap: var(--space-2); }
.rv-wk ol.wk { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
.rv-wk ol.wk > li { padding: 12px 14px; border-radius: 14px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); font-size: var(--text-sm); }
.rv-wk ol.wk > li.is-done span { color: var(--color-text-muted); text-decoration: line-through; }
.rv-wk .wk-foot { margin: 0; }
@media (max-width: 47.99em) { .rv-wk ol.wk { grid-template-columns: minmax(0, 1fr); } }
.rv-full .md > .rf-sec:first-child { margin-top: 0; }
@media (max-width: 47.99em) {
  .rv { padding: var(--space-5) var(--space-4); }
  .rv-cards, .rv-cards--2 { grid-template-columns: minmax(0, 1fr); }
  .rv-next { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
}
/* 새 아이디어: 칸 하나 (선택 항목·검증 종류는 접기) */
.form--new { max-width: 44rem; display: grid; gap: var(--space-3); padding: var(--space-6); }
.form--new h1 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.7rem); font-weight: 900; letter-spacing: -0.03em; }
.form--new .field { margin: 0; }
.form--new #idea { min-height: 7.5rem; font-size: var(--text-md); background: var(--color-fill); border-color: transparent; }
.form--new #idea:focus { background: var(--color-surface); border-color: var(--color-border-strong); }
.new-more { border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-border); padding: 0 var(--space-3); }
.new-more > summary { padding: 12px 0; font-weight: var(--weight-bold); font-size: var(--text-sm); cursor: pointer; }
.new-more[open] { padding-bottom: var(--space-3); }
.new-more--mode { box-shadow: none; padding: 0; }
.new-more--mode > summary { padding: 0; font-weight: 600; color: var(--color-text-muted); font-size: 13px; }
.new-more--mode[open] > summary { margin-bottom: var(--space-2); }
.new-mode { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--text-sm); }
.new-mode__tag { padding: 2px 10px; border-radius: 99px; background: var(--color-accent-soft); color: var(--color-accent-ink); font-size: 12px; font-weight: var(--weight-bold); }
.form--new .form__foot .btn--primary { min-width: 10rem; }
/* 검증 진행: 진행 카드 하나 (막대 + 단계) → 지금 쓰는 단계(마지막 몇 줄만) → 끝난 단계는 접기 */
.proj__grid--one .stepper--v4 { position: static; }
.stepper--v4 { padding: var(--space-5) var(--space-6); display: grid; gap: var(--space-3); max-width: 48rem; }
.stepper--v4 .stepper__head { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.stepper--v4 .stepper__head b { font-size: var(--text-lg); color: var(--color-text); }
.stepper__bar { height: 8px; border-radius: 4px; background: var(--color-fill); overflow: hidden; }
.stepper__bar i { display: block; height: 100%; border-radius: inherit; background: var(--color-text); transition: width .4s; }
.stepper--v4 .stepper__list li { padding: 9px 0; font-size: var(--text-sm); }
.stepper--v4 .stepper__t { font-size: var(--text-sm); }
.stepper--v4 .is-now, .stepper--v4 .is-next { font-weight: var(--weight-bold); }
.proj__grid--one .proj__main > .step-card--live, .proj__grid--one .proj__main > .ctl, .proj__grid--one .proj__main > .done-steps { max-width: 48rem; }
.step-card--live #stream-md { display: flex; flex-direction: column; justify-content: flex-end; max-height: 13rem; overflow: hidden; -webkit-mask-image: linear-gradient(transparent 0, #000 3rem); mask-image: linear-gradient(transparent 0, #000 3rem); }
.done-steps > summary { padding: 10px 2px; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-muted); cursor: pointer; }
.done-steps[open] > summary { margin-bottom: var(--space-2); }
.done-steps > .step-card + .step-card { margin-top: var(--space-2); }
/* 기획 탭 시작: 기획서 모양 미리 보기 (글 목록 대신 그림) */
.plan-start { max-width: 44rem; display: grid; gap: var(--space-3); padding: var(--space-6); }
.plan-start h2 { margin: 0; }
.plan-start > p { margin: 0; }
.plan-peek { display: grid; gap: 12px; padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-fill); }
.plan-peek__sum { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--color-surface); font-weight: var(--weight-bold); font-size: var(--text-sm); }
.plan-peek__mvp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 12px; border-radius: 12px; background: var(--color-surface); }
.plan-peek i { display: block; height: 7px; border-radius: 4px; background: var(--color-border); }
.plan-peek i.short { width: 55%; }
.pp { justify-self: start; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; }
.pp--must { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.pp--should { box-shadow: inset 0 0 0 1px var(--color-border-strong); color: var(--color-text-muted); }
.pp--wont { color: var(--color-text-muted); box-shadow: inset 0 0 0 1px var(--color-border); }
.plan-peek__two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan-peek__two > div { display: grid; gap: 7px; padding: 12px; border-radius: 12px; background: var(--color-surface); }
.plan-peek__two b { font-size: 12px; }
.plan-skip { margin: 0; }
/* 개발 탭 (넘기기 전): 한 칸 — 준비물 표시 → 단계 4개 → 기획서 한 줄 → 버튼 */
.dev-one { max-width: 44rem; }
.dev-one .handoff { display: grid; gap: var(--space-3); padding: var(--space-6); }
.dev-one .handoff h2, .dev-one .handoff > p { margin: 0; }
.dev-need { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--text-sm); }
.dev-need .tag + * { margin-right: 6px; }
.dev-flow { margin: 0; }
.dev-plan { margin: 0; }
.dev-one .handoff .form__foot .btn--primary { min-width: 10rem; }
.dev-need .tag { padding: 2px 8px; border-radius: 99px; background: var(--color-fill); color: var(--color-text-muted); font-size: 11px; font-weight: 800; }
/* 운영 탭: 상태 한 줄 → 탭 (할 일이 기본 · 아침 보고 · 목표 · 홍보 · 기획서 할 일) */
.ops-tabs { margin-top: var(--space-2); flex-wrap: wrap; width: max-content; max-width: 100%; }
.ops-pane[hidden] { display: none; }
.ops-pane > .card, .ops-pane > details.card { margin: 0; }
@media (max-width: 47.99em) { .ops-tabs { width: 100%; } }
/* 문구 점검: 빈 홈은 질문 하나가 제목, 진행 단계는 긴 이름만 */
.home-new__h { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.7rem); font-weight: 900; letter-spacing: -0.03em; }
.stepper--v4 .stepper__list li { grid-template-columns: 10px minmax(0, 1fr) auto; }