/* 시작하기 — 포맷 → 고용 → 작품 (docs/archive/18-PRODUCT-UX.md ②)
 *
 * 작업대가 아니라 시작하는 곳이다. 폭이 좁고 스크롤한다. 색은 tokens.css.
 */
*{ box-sizing: border-box; }
body.start{ margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
body.start a{ color: inherit; text-decoration: none; }
/* 버튼 초기화는 **명시도 0** 으로 둔다(`:where`). `body.start button`(0,1,2)으로 두었더니
   공통 부품 `.act`·`.ghost`(0,1,0)의 테두리와 배경을 지워, 「이전」·「키 등록」 단추가 글자로만
   떠 있었다. 초기화는 모양을 정하지 않은 버튼에만 닿아야 한다. */
:where(body.start) :where(button){ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
body.start b{ font-weight: 600; }
/* 폭은 화면 단계가 정한다(`--wrap`). 920px 로 박아 두었더니 1280px 화면에서
   오른쪽 3분의 1이 비었다. */
body.start .wrap{ max-width: var(--wrap); margin: 0 auto; padding: 36px 24px 96px; }
/* 첫 화면의 큰 제목만 더 크게. 나머지는 `components.css` 를 따른다. */
body.start h1{ font-size: 30px; margin: 0 0 8px; }
/* 구역 제목의 위 여백만 더 준다.
   **대문자화·넓은 자간·모노 서체를 걷어냈다.** 라틴 문자에서 오는 장식이라
   한글에서는 「승인  대기」처럼 글자가 흩어져 읽혔다. 영문 표시는 `.eyebrow` 가
   맡는다 — 거기는 원래 영문 자리다. */
body.start h2{ margin: 34px 0 12px; }
/* 카드(.panel) 맨 위에는 여백을 두지 않는다 — 위 규칙이 `components.css` 의 `.panel > :first-child` 보다 세서, 이 이름을 함께 쓰는
   관리 · 설정 · 결정함 화면의 카드마다 제목 위가 34px 비었다(#203). */
body.start .panel > :first-child{ margin-top: 0; }
body.start h2 span{ font-weight: 400; color: var(--dim); }
body.start .eyebrow{ font: 500 12.5px/1 var(--sans); letter-spacing: .02em; color: var(--human); margin: 0 0 12px; }
/* `body.start` 는 시작 화면만이 아니라 **앱 화면 거의 전부**에 붙어 있다. 여기서
   설명 글을 15.5px 로 키웠더니 관리 화면의 설명까지 커졌다. 크기는 공통을 따르고
   폭과 아래 여백만 정한다. */
body.start .lead{ margin: 0 0 22px; }     /* 폭은 공통 부품이 정한다(components.css) */

body.start .bar{ position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 28px;
  padding: 12px 24px; background: rgba(13,15,18,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft); }
body.start .wordmark{ font-family: var(--serif); font-size: 17px; font-weight: 700; }
body.start .wordmark em{ font-style: normal; color: var(--human); }
body.start .stepper{ list-style: none; display: flex; gap: 6px; margin: 0 auto; padding: 0; }
body.start .stepper li{ display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 4px;
  font-size: 14px; color: var(--dim); }
body.start .stepper li b{ width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font: 600 12.5px var(--mono); border: 1px solid var(--line); }
body.start .stepper li.on{ color: var(--ink); }
body.start .stepper li.on b{ background: var(--human); color: #1a1207; border-color: var(--human); }
body.start .stepper li.done{ color: var(--ink-2); cursor: pointer; }
body.start .stepper li.done b{ color: var(--auto); border-color: var(--auto-dim); }

/* 시작하기 화면의 단추는 **한 화면에 몇 개 없고 크게 누른다.** 공통보다 키운다.
   모양(색·테두리·비활성)은 `components.css` 를 그대로 쓴다. */
body.start .cta,
body.start .ghost{ padding: 9px 16px; font-size: 14.5px; font-weight: 600; }
body.start .big{ padding: 12px 24px; font-size: 16px; }
body.start :focus-visible{ outline: 2px solid var(--human); outline-offset: 2px; }
body.start .nav-row{ display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 20px;
  border-top: 1px solid var(--line-soft); }
body.start .nav-row .cta{ margin-left: auto; }
body.start .nav-row .sum{ color: var(--dim); font-size: 14px; margin-left: auto; }
body.start .nav-row .sum + .cta{ margin-left: 0; }
/* 시작하지 못한 까닭 — 진행 안내(흐린 글씨)와 구분되게 */
body.start .nav-row .sum.refused{ color: var(--ink); padding: 8px 12px; border-left: 3px solid var(--human); background: var(--human-glow); border-radius: 4px; }

body.start .fmts{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 820px) { body.start .fmts{ grid-template-columns: repeat(2, 1fr); } }
body.start .fmt{ text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: border-color .12s, transform .12s; }
body.start .fmt:hover{ border-color: #3d4756; transform: translateY(-1px); }
body.start .fmt.on{ border-color: var(--human); box-shadow: 0 0 0 1px var(--human); }
body.start .fmt .pic{ aspect-ratio: 16/10; background: var(--raise); overflow: hidden; }
body.start .fmt .pic img{ width: 100%; height: 100%; object-fit: cover; display: block; }
body.start .fmt .pic.vertical img{ object-position: center 25%; }
body.start .fmt .bd{ padding: 12px 13px 13px; display: grid; gap: 3px; }
body.start .fmt .nm{ font-family: var(--serif); font-weight: 600; font-size: 16px; }
body.start .fmt .tg{ color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
body.start .fmt .sp{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* 상태 표시는 제품 전체가 같은 모양이어야 같은 뜻으로 읽힌다(`components.css`).
   여기서는 이 화면에서만 필요한 여백만 더한다. */
body.start .fmt .tag{ margin-right: 4px; }
body.start .watch{ margin-top: 14px; padding: 11px 13px; border-radius: 5px; font-size: 14px; line-height: 1.65;
  background: var(--raise); border: 1px solid var(--line); border-left: 2px solid var(--human); }
body.start .watch b{ color: var(--human); }

body.start .always{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--auto-dim); border-radius: 6px; align-items: center; }
body.start .always .lbl{ font-size: 13.5px; color: var(--auto); margin-right: 6px; }
body.start .always .p{ display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
body.start .av{ width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 15px; background: var(--raise);
  color: var(--human); border: 1px solid var(--human-dim); flex: none; }
body.start .always .av{ color: var(--auto); border-color: var(--auto-dim); width: 26px; height: 26px; font-size: 13.5px; }

body.start .hire{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 639px) { body.start .hire{ grid-template-columns: 1fr; } }
body.start .dept{ display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; padding: 13px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; align-items: start;
  transition: border-color .12s, opacity .12s; }
body.start .dept.on{ border-color: var(--human-dim); }
body.start .dept.off{ opacity: .55; }
body.start .dept.off .av{ color: var(--dim); border-color: var(--line); }
body.start .dept .who{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
body.start .dept .who input{ font: 600 15px var(--sans); color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px dashed var(--line); width: 7ch; padding: 0 2px; }
body.start .dept .who input:focus{ outline: none; border-bottom-color: var(--human); }
body.start .dept .who small{ color: var(--dim); font-size: 13.5px; }
body.start .dept .stage{ font: 500 12px var(--sans); color: var(--dim); }
body.start .dept .df{ color: var(--ink-2); font-size: 14px; line-height: 1.55; margin-top: 4px; }
body.start .dept .tg{ justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px;
  padding: 5px 10px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
body.start .dept .tg.on{ border-color: var(--human-dim); color: var(--human); }
body.start .dept .tg.lock{ border-style: dashed; color: var(--dim); cursor: default; }
body.start .notices{ display: grid; gap: 8px; margin-top: 14px; }
body.start .notice{ display: flex; align-items: center; gap: 12px; padding: 10px 13px; font-size: 14px;
  background: var(--raise); border: 1px solid var(--human-dim); border-left: 2px solid var(--human); border-radius: 4px; }
body.start .notice button{ margin-left: auto; font-size: 13.5px; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 3px; color: var(--ink); }
body.start .notice button:hover{ border-color: var(--human); }

body.start .field{ margin-top: 12px; }
body.start .field label{ display: block; font-size: 13.5px; color: var(--dim); margin-bottom: 6px; }
body.start .field input,
body.start .field textarea{ width: 100%; background: var(--panel); border: 1px solid var(--line);
  border-radius: 5px; color: var(--ink); padding: 10px 12px; font: inherit; resize: vertical; }
body.start .field input:focus,
body.start .field textarea:focus{ outline: none; border-color: var(--human-dim); }
body.start .row2{ display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; }
@media (max-width: 640px) { body.start .row2{ grid-template-columns: 1fr; } }
body.start .seg{ display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
body.start .seg button{ padding: 9px 13px; font-size: 14px; color: var(--ink-2); }
body.start .seg button.on{ background: var(--human-glow); color: var(--human); }
body.start .seg button + button{ border-left: 1px solid var(--line); }
body.start .hint{ font-size: 13px; color: var(--dim); margin: 8px 0 0; }

body.start .stys{ display: flex; flex-wrap: wrap; gap: 8px; }
body.start .sty{ background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 8px 12px;
  text-align: left; font-size: 13.5px; }
body.start .sty.on{ border-color: var(--human); background: #1b1710; }
body.start .sty .k{ font-size: 12px; color: var(--dim); }
body.start .sty .l{ font-weight: 600; margin: 2px 0; }
body.start .sty .m{ font: 12px var(--sans); color: var(--dim); }
body.start .sty-empty{ color: var(--dim); font-size: 14px; line-height: 1.7; }

body.start .plan{ margin-top: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 14px 15px; font-size: 14px; }
body.start .plan .chain{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
body.start .plan .chain span{ font: 500 12px var(--sans); padding: 3px 8px; border-radius: 3px;
  background: var(--raise); border: 1px solid var(--line-soft); color: var(--ink-2); }
body.start .plan .chain span.off{ text-decoration: line-through; opacity: .45; }

body.start .fmt .pic.own{ display: grid; place-items: center; background: linear-gradient(160deg, var(--raise), var(--panel)); }
body.start .fmt .pic.own .ph{ font-size: 34px; opacity: .5; }
body.start .fmt .mine{ margin: 2px 0 6px; font: 500 11.5px var(--sans); color: var(--auto); letter-spacing: .04em; }

/* 제작진의 연차·직급 — 모델 이름 대신 고용의 말로 읽는다.
   위로 갈수록 진하게. 색만으로 등급을 말하지 않고 글자로도 말한다. */
/* 실제로 도는 모델이 정의의 모델과 다를 때만 붙는다 — 글을 OpenAI 로 돌리는 경우. */
body.start .dept .runsas{ font-size: 11.5px; padding: 1px 7px; border-radius: 99px;
  border: 1px dashed var(--line); color: var(--dim); white-space: nowrap; }
body.start .dept .rank{ font-size: 12px; padding: 1px 7px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
body.start .dept .rank.r3{ border-color: var(--human-dim); color: var(--human); }
body.start .dept .rank.r4{ border-color: var(--human); color: var(--human);
  background: var(--human-glow); }
body.start .dept .more{ margin-top: 7px; padding: 0; border: 0; background: none;
  color: var(--dim); font: 500 12.5px var(--sans); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
body.start .dept .more:hover{ color: var(--human); }

/* 이력 창 — 읽는 글이라 줄 간격을 넉넉히 둔다 */
.modal .rankline{ margin: 0 0 4px; font-size: 15px; }
.modal .bul{ margin: 6px 0 0; padding-left: 18px; }
.modal .bul li{ margin-bottom: 4px; line-height: 1.6; }
.modal .pair{ display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.modal .pair span{ min-width: 104px; color: var(--dim); font-size: 13px; }
.modal .pair b{ font-weight: 500; font-size: 13.5px; }

/* 머리말 — 왼쪽은 이름, 가운데는 지금 어느 화면인가, 오른쪽은 할 수 있는 일.

   제목에 `margin: 0 auto`, 계정 표시에 `margin-left: auto` 를 따로 걸었더니 남는
   공간을 셋이 나눠 가졌다. 「내 작품」이 가운데도 오른쪽도 아닌 자리에 떠 있었다.
   미는 자리는 **한 곳**이어야 한다. */
body.start .bar .right{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* 덩어리 안에서는 스스로 밀지 않는다 — 밀면 옆 단추와 떨어진다 */
body.start .bar .right .whoami{ margin-left: 0; }


/* ── 휴대전화 ─────────────────────────────────────────────────────────────
   390px 에서 머리말이 551px 까지 늘어나 페이지가 가로로 스크롤됐다. 한 줄에 넣을 것을 줄이고
   본문 여백을 좁힌다. 「내 작품」은 계정 메뉴에도 있으므로 머리말에서 뺀다. */
@media (max-width: 639px) {
  body.start .bar { gap: 10px; padding: 10px 14px; }
  body.start .bar .right { gap: 6px; }
  body.start .bar .right > .ghost { display: none; }
  body.start .wordmark { font-size: 15px; }
  body.start .wrap { padding: 20px 14px 72px; }
  body.start h1 { font-size: 24px; }
  /* 배지 설명 줄(작품 목록)도 좁으면 줄을 바꾼다 */
  body.start .legend { flex-wrap: wrap; gap: 8px 12px; }
  /* 설명이 한 줄로 고정돼(`white-space: nowrap`) 좁은 화면에서 옆 줄의 배지와 겹쳐 보였다. */
  body.start .legend span:not(.made) { white-space: normal; align-items: flex-start; min-width: 0; }
  /* 표는 화면보다 넓다 — 감싼 칸 안에서 옆으로 민다(페이지가 넓어지지 않게). */
  body.start .panel { overflow-x: auto; }
  /* 아래 단추 줄 — 한 줄에 두면 「기획 회의 열기」가 화면 밖으로 잘렸다. 안내는 위에, 단추는 한 줄에 하나씩. */
  body.start .nav-row { flex-wrap: wrap; gap: 10px; }
  body.start .nav-row .sum { order: -1; flex: 1 1 100%; margin-left: 0; }
  body.start .nav-row .sum:empty { display: none; }
  body.start .nav-row .cta, body.start .nav-row .ghost { flex: 1 1 100%; margin-left: 0; }
}


/* 넓은 화면에서는 묶은 칸이 없는 것처럼 — 진행 단계와 단추가 머리말 한 줄에 그대로 놓인다. */
body.new-work .start-steps { display: contents; }

/* 머리말은 **태블릿 폭부터 두 줄**이다 — 첫 줄은 메뉴·이름·계정, 둘째 줄은 진행 단계와 「예시로 시작하기」.
   한 줄에 밀어 넣었더니 768px 에서 오른쪽 덩어리가 972px 까지 나가 계정이 잘렸다.

   **두 줄이면 머리말 높이도 두 줄이어야 한다.** 틀의 첫 줄은 `--top`(56px) 고정인데 여기서 줄만 바꿨더니,
   둘째 줄이 머리말 밖으로 흘러 본문의 제목을 덮었다(휴대전화·태블릿 모두). 높이를 이 화면에서 다시 정한다 —
   **새 작품 화면에서만**(`body.new-work`). `body.start` 는 결정함·설정도 함께 쓰는 이름이라 거기에 걸면 그 화면들의 머리말까지 두 줄이 된다.
   틀의 첫 줄, 왼쪽 메뉴가 붙는 자리, 서랍이 열리는 자리가 모두 `--top` 을 읽는다. */
@media (max-width: 900px) {
  body.new-work { --top: 96px; }
  body.new-work .bar { flex-wrap: wrap; align-content: center; gap: 6px 10px; padding: 8px 10px; }
  /* 머리말은 `topbar.js` 가 칸으로 나눠 그린다(서랍 단추 · 이름 · 이 화면의 것 · 계정). 이 화면의 것(`.tb-here`)을
     통째로 둘째 줄로 내리고, 계정은 첫 줄 오른쪽 끝에 둔다. */
  body.new-work .bar .tb-here { order: 10; flex: 1 1 100%; min-width: 0; }
  body.new-work .bar .tb-spacer { display: none; }
  body.new-work .bar .tb-account { margin-left: 0; }
  /* 도우미 단추도 다른 화면처럼 계정 옆(오른쪽)에 둔다 — 미는 자리가 둘째 줄로 내려가 왼쪽에 떠 있었다(#203) */
  body.new-work .bar .assist-toggle { margin-left: auto; }
  body.new-work .start-steps { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
  body.new-work .stepper { flex: 1 1 auto; min-width: 0; margin: 0; justify-content: flex-start;
    gap: 4px; font-size: 12px; overflow-x: auto; scrollbar-width: none; }
  body.new-work .stepper li { padding: 5px 8px; flex: 0 0 auto; }
  body.new-work .start-steps .ghost { flex: 0 0 auto; padding: 6px 10px; font-size: 13px; }
}
/* 휴대전화 — 지금 단계만 이름을 적고 나머지는 번호만 둔다(셋을 다 적으면 단추가 밀려 나간다). */
@media (max-width: 480px) {
  body.new-work .stepper li:not(.on) { font-size: 0; gap: 0; padding: 5px 3px; }
}

/* 이 작품의 목적 — 접어 두고, 기본값이 있으면 펼쳐서 보여 준다.
   비용이 드는 선택(길이·제작진) 아래, 스타일 위에 둔다 — 무엇을 만들지 정한 다음
   무엇을 위해 만드는지를 적는 차례다. */
body.start .brief{ margin: 18px 0 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); padding: 12px 14px; }
body.start .brief > summary{ cursor: pointer; font: 600 14.5px var(--sans); color: var(--ink);
  list-style: none; }
body.start .brief > summary::-webkit-details-marker{ display: none; }
body.start .brief > summary::before{ content: "▸ "; color: var(--dim); }
body.start .brief[open] > summary::before{ content: "▾ "; }
body.start .brief > summary span{ font: 400 12.5px var(--sans); color: var(--dim); }
body.start .brief .hint{ margin: 8px 0 12px; color: var(--dim); font-size: 12.5px; line-height: 1.65; }
body.start .brief .field + .field, body.start .brief .row2{ margin-top: 10px; }
body.start .brief button{ margin-top: 12px; }

/* 바로 만들기(#247) — 입력 하나와 단추 하나. 요약 줄은 지금 어떤 기본값으로 가는지를 말한다. */
body.start .step.quick { max-width: 760px; }
body.start .step.quick textarea { font-size: 17px; }
body.start .quick-row { display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; flex-wrap: wrap; }
body.start .quick-sum { flex: 1 1 260px; margin: 0; color: var(--dim); font-size: 14px; }
body.start .quick-sum b { color: var(--ink); }
body.start .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.start .start-steps[hidden] { display: none; }