/* Three customer goals are choices. The next action stays beside that choice. */
.fb-namecard-start-container { container-type:inline-size; width:100%; }
.fb-namecard-start-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  width:100%;
}
@container (min-width:600px) {
  .fb-namecard-start-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.fb-namecard-start-card {
  position:relative;
  display:flex;
  min-width:0;
  min-height:132px;
  flex-direction:column;
  padding:18px;
  border:1px solid var(--bj-line,#ece9e6);
  border-radius:var(--bj-control-radius,8px);
  background:var(--bj-clean,#fff);
  color:var(--bj-ink,#181817);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.fb-namecard-start-card.is-selected {
  border-color:var(--bj-line-strong,#938d86);
  box-shadow:inset 0 0 0 1px var(--bj-ink,#181817),0 6px 18px rgba(24,24,23,.05);
}
.fb-namecard-start-card:hover { border-color:var(--bj-line-strong,#938d86); background:var(--bj-soft-surface,#f6f5f2); }
.fb-namecard-start-card:focus-visible { outline:2px solid var(--bj-ink,#181817); outline-offset:3px; }
.fb-namecard-start-card-head {
  display:flex;
  min-height:22px;
  align-items:center;
  justify-content:flex-start;
  margin:0 0 10px;
}
.fb-namecard-start-route {
  display:inline-flex;
  min-height:22px;
  align-items:center;
  padding:1px 7px;
  border:1px solid var(--bj-line,#ece9e6);
  border-radius:999px;
  color:var(--bj-muted,#66635e);
  font-size:13px;
  line-height:19px;
}
.fb-namecard-start-card.is-selected .fb-namecard-start-route { border-color:var(--bj-ink,#181817); color:var(--bj-ink,#181817); }
.fb-namecard-start-card h3 {
  margin:0;
  color:var(--bj-ink,#181817);
  font-size:17px;
  font-weight:var(--bj-type-subsection-weight,600);
  line-height:24px;
  letter-spacing:-.025em;
  word-break:keep-all;
}
.fb-namecard-start-card > p {
  margin:5px 0 10px;
  color:var(--bj-muted,#66635e);
  font-size:13px;
  line-height:20px;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.fb-namecard-start-detail { display:block; margin-top:auto; color:var(--bj-tertiary,#918e87); font-size:12px; line-height:18px; }
.fb-namecard-start-check { position:absolute; top:14px; right:14px; display:grid; width:22px; height:22px; place-items:center; border:1px solid var(--bj-line,#ece9e6); border-radius:50%; background:#fff; color:transparent; font-size:12px; font-weight:800; }
.fb-namecard-start-card.is-selected .fb-namecard-start-check { border-color:var(--bj-ink,#181817); background:var(--bj-ink,#181817); color:#fff; }
.fb-namecard-start-grid [hidden] { display:none; }

/* 시작 버튼은 목록을 기다리는 동안에도 눌린다. 못 받으면 여기에 이유를 적는다. */
.fb-namecard-start-reason {
  margin:8px 0 0;
  font-size:14px;
  line-height:20px;
  color:var(--bj-danger,#a14b46);
}
.fb-namecard-start-reason[hidden] { display:none; }

/* The detail page owns the surrounding template-browser shell. */
.fb-detail-renewal .fb-template-entry-card[data-template-entry-mode="namecard-start"] {
  display:block;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.fb-detail-renewal .fb-template-entry-card[data-template-entry-mode="namecard-start"] .fb-namecard-start-card { height:100%; }

@media(max-width:600px) {
  .fb-namecard-start-grid { gap:10px; }
  .fb-namecard-start-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) 24px;
    grid-template-rows:auto auto auto;
    column-gap:12px;
    min-height:0;
    padding:9px 12px;
  }
  .fb-namecard-start-card-head { grid-column:1; grid-row:1; min-height:19px; margin:0 0 3px; }
  .fb-namecard-start-route { min-height:19px; padding:0; border:0; color:var(--bj-tertiary,#918e87); font-size:13px; line-height:19px; }
  .fb-namecard-start-card.is-selected .fb-namecard-start-route { border-color:transparent; }
  .fb-namecard-start-card h3 { grid-column:1; grid-row:2; font-size:16px; line-height:23px; }
  .fb-namecard-start-card > p { grid-column:1; grid-row:3; margin:3px 0 0; font-size:14px; line-height:21px; }
  .fb-namecard-start-detail { display:none; }
  .fb-namecard-start-check { position:static; grid-column:2; grid-row:1 / 4; align-self:center; justify-self:end; }
}

/* 첫 질문은 둘 중 하나다. 카드 세 장이 아니라 탭 둘로 받는다. */
.fb-namecard-start-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--bj-line-strong,#938d86);
  margin-bottom:4px;
}
.fb-namecard-start-tab {
  appearance:none;
  min-height:64px;
  padding:10px 12px 12px;
  border:0;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  background:none;
  font:inherit;
  text-align:left;
  color:var(--bj-muted,#66635e);
  cursor:pointer;
}
.fb-namecard-start-tab h3 {
  margin:0;
  font-size:16px;
  line-height:24px;
  font-weight:500;
  color:inherit;
}
.fb-namecard-start-tab small {
  display:block;
  margin-top:2px;
  font-size:13px;
  line-height:19px;
  /* 공통 3차 색(#918e87)은 3.27:1 이라 본문 기준에 못 미친다 — 탭 밑 한 줄은 고르는 데 쓰는
     설명이라 읽혀야 한다(전수 조사 20260921). */
  color:var(--bj-muted,#66635e);
  word-break:keep-all;
}
.fb-namecard-start-tab.is-selected {
  color:var(--bj-ink,#20201e);
  border-bottom-color:var(--bj-ink,#20201e);
}
.fb-namecard-start-tab.is-selected h3 { font-weight:600; }
.fb-namecard-start-tab:focus-visible { outline:2px solid #5579a3; outline-offset:-2px; }
@media (max-width:767px) {
  .fb-namecard-start-tab { min-height:56px; padding:8px 10px 10px; }
  .fb-namecard-start-tab h3 { font-size:15px; line-height:22px; }
  .fb-namecard-start-tab small { font-size:13px; line-height:19px; }
}

/* 왼쪽 520px = 내 명함이 될 자리. 탭이 고른 답에 따라 이 안이 바뀐다. */
.fb-namecard-work-area { margin-top:16px; }
.fb-namecard-work-area [data-template-overview-grid] {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
/* 첫 화면은 세 줄까지. 방향 필터가 이미 카드를 걸러내므로 «몇 번째»가 아니라
 * 높이로 자른다 — nth-child 로 자르면 걸러진 뒤 한 장만 남는다(실측). */
.fb-namecard-work-area [data-template-overview-grid] {
  /* 행 중간에서 끈지 않는다 — detail-renewal.js 가 카드 높이로 재 세 행을 정해 준다. */
  max-height:var(--fb-work-rows-height,520px);
  /* overflow:hidden 은 «굴릴 수 있는 상자»다 — 잘린 줄의 카드에 초점(Tab)·scrollIntoView·찾기가 닿으면 브라우저가 상자 안을
   * 굴려 첫 줄이 사라진 채 굳었다(실측 20260919: 「가공 모습은…」 밑에 카드 밑동만 남음). clip 은 그리기만 자르고 굴리지 않는다.
   * 잘린 줄의 카드는 detail-renewal.js 가 inert 로 둔다(초점·클릭 대상 아님). 옛 브라우저는 hidden 으로. */
  overflow:hidden;
  overflow:clip;
}
.fb-namecard-work-more {
  display:block; width:100%; margin-top:14px; min-height:48px;
  border:1px solid var(--bj-line,#ece9e6); border-radius:8px; background:#fff;
  font:inherit; font-size:15px; font-weight:600; color:var(--bj-ink,#20201e); cursor:pointer;
}
.fb-namecard-work-more:hover { border-color:var(--bj-line-strong,#938d86); }


@media (max-width:767px) {
  .fb-namecard-work-area { margin-top:12px; }
  .fb-namecard-work-area [data-template-overview-grid] { gap:12px; }
}

/* 탭이 고른 답에 따라 이 자리에 있는 것이 바뀐다. */
/* ⚠ 목록에 딸린 것은 «전부» 같이 숨어야 한다. 두 번 빼먹었다(20260920):
 *  · 다른 방향 구역 — 「세로형 디자인 18개」가 이 탭에 그대로 남아 있었다.
 *  · 페이지 점 — 탭 밑에 점 줄이 남아 파일 칸과의 간격이 0 이 됐다(사장님 실기기 화면).
 * 목록에 무언가를 더할 때마다 이 줄도 같이 늘린다. */
.fb-namecard-work-area[data-work-mode="upload"] [data-template-overview-grid],
.fb-namecard-work-area[data-work-mode="upload"] [data-template-other-orient],
.fb-namecard-work-area[data-work-mode="upload"] [data-template-work-pages],
.fb-namecard-work-area[data-work-mode="upload"] .fb-namecard-work-more { display:none; }
.fb-namecard-work-area[data-work-mode="template"] .fb-namecard-work-intake { display:none; }
/* 「백지로 시작하기」 탭(2026-09-28) — 고를 디자인이 없는 상품. 목록·올리기 칸을 숨기고 백지 한 칸만 둔다.
 * 목록에 딸린 것이 늘면 위 upload 줄처럼 여기도 같이 늘린다. 백지 칸은 이 탭에서만 보인다. */
.fb-namecard-work-area[data-work-mode="blank"] [data-template-overview-grid],
.fb-namecard-work-area[data-work-mode="blank"] [data-template-other-orient],
.fb-namecard-work-area[data-work-mode="blank"] [data-template-work-pages],
.fb-namecard-work-area[data-work-mode="blank"] .fb-namecard-work-more,
.fb-namecard-work-area[data-work-mode="blank"] .fb-namecard-work-intake { display:none; }
.fb-namecard-work-area:not([data-work-mode="blank"]) .fb-namecard-work-blank { display:none; }
/* 선 없이 면으로 — 흰 판 한 장이 곧 «빈 판»이다(장식 선 금지). */
.fb-namecard-work-blank-start {
  display:flex; flex-direction:column; gap:8px; width:100%;
  min-height:220px; padding:28px 24px; align-items:center; justify-content:center;
  border:0; border-radius:8px; background:#fff;
  font:inherit; color:var(--bj-ink,#20201e); text-align:center; cursor:pointer;
}
.fb-namecard-work-blank-start:hover { background:var(--bj-paper,#fbfaf7); }
.fb-namecard-work-blank-start:focus-visible { outline:2px solid #5579a3; outline-offset:2px; }
.fb-nwb-plus {
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--bj-ink,#20201e); color:#fff; font-size:22px; line-height:1;
}
.fb-nwb-title { font-size:16px; font-weight:600; }
.fb-nwb-size { font-size:13px; color:var(--bj-muted,#6b6660); }
/* 「파일·사진 올리기」 칸 — 파일이 실제로 들어오는 자리(끌어다 놓기·눌러서 고르기), 그 아래 휴대폰(또는 카메라). detail-renewal.js buildWorkIntake. */
.fb-namecard-work-intake { display:flex; flex-direction:column; gap:16px; }
.fb-namecard-work-upload {
  display:flex; flex-direction:column; gap:6px; width:100%;
  min-height:220px; padding:28px 24px; align-items:center; justify-content:center;
  border:1px dashed var(--bj-line-strong,#938d86); border-radius:8px; background:#fff;
  font:inherit; text-align:center; cursor:pointer;
}
.fb-namecard-work-upload:hover { background:var(--bj-paper,#fbfaf7); }
.fb-namecard-work-upload:focus-visible { outline:2px solid #5579a3; outline-offset:2px; }
/* 끌고 들어오면 칸이 «놓을 수 있다»고 답한다 — 선이 실선으로, 바탕이 종이색으로. */
.fb-namecard-work-upload.is-dragover { border-style:solid; border-color:var(--bj-ink,#20201e); background:var(--bj-paper,#fbfaf7); }
.fb-namecard-work-upload[aria-busy="true"] { cursor:progress; opacity:.7; }
.fb-nwu-title { font-size:16px; font-weight:600; line-height:24px; color:var(--bj-ink,#20201e); }
.fb-nwu-hint { font-size:14px; line-height:20px; color:var(--bj-muted,#66635e); }
.fb-nwu-note { font-size:13px; line-height:19px; color:var(--bj-tertiary,#918e87); max-width:34em; }
.fb-nwu-drop { margin-top:10px; font-size:13px; line-height:19px; color:var(--bj-muted,#66635e); }
.fb-nwu-status { margin:0; font-size:14px; line-height:20px; color:var(--bj-muted,#66635e); }
.fb-nwu-status[data-tone="error"] { color:#b42318; }
.fb-nwu-status a { color:var(--bj-ink,#20201e); font-weight:600; text-decoration:underline; }
.fb-namecard-work-phone {
  display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:12px; align-items:center; width:100%;
  min-height:56px; padding:12px 16px; border:1px solid var(--bj-line,#ece9e6); border-radius:8px; background:#fff;
  font:inherit; text-align:left; color:var(--bj-ink,#20201e); cursor:pointer;
}
.fb-namecard-work-phone svg { grid-row:1 / span 2; }
.fb-namecard-work-phone:hover { border-color:var(--bj-line-strong,#938d86); }
.fb-namecard-work-phone:focus-visible { outline:2px solid #5579a3; outline-offset:2px; }
.fb-namecard-work-phone[disabled] { cursor:progress; opacity:.7; }
.fb-nwp-title { font-size:15px; font-weight:600; line-height:22px; }
.fb-nwp-note { font-size:13px; line-height:19px; color:var(--bj-tertiary,#918e87); }
@media (max-width:767px) {
  .fb-namecard-work-intake { gap:12px; }
  .fb-namecard-work-upload { min-height:180px; padding:24px 16px; }
}