/* New-order page composition. Namecard entry uses the same FactoryB shell as
 * cards and postcards: production/design content on the left and the order
 * summary/quote rail visible on the right from the first paint. The summary
 * must not be a child of the specification disclosure. */
.fb-detail-renewal .fb-entry-page .content-area {
  display:grid;
  /* 결정 패널이 사양과 금액과 행동을 한 자리에서 들려면 300px 로는 좁다.
   * 상품 상세 기준 치수 520 / 48 / 432 로 맞춘다. */
  grid-template-columns:520px 432px;
  align-items:start;
  gap:48px;
}
@media (max-width:1199px) {
  .fb-detail-renewal .fb-entry-page .content-area {
    grid-template-columns:minmax(0,1fr) 360px;
    gap:24px;
  }
}
.fb-detail-renewal .fb-entry-page .content-main,
.fb-detail-renewal .fb-entry-page .content-left {
  width:100%;
  max-width:none;
  min-width:0;
}
.fb-detail-renewal .fb-entry-page .content-right {
  display:block;
  width:432px !important;
  max-width:none;
  min-width:0;
  position:sticky;
  /* 패널이 화면보다 길면 머리 대신 바닥이 붙는다(음수 top) — detail-renewal.js bindEntryPanelStickyOffset 가 잰다. */
  top:var(--fb-panel-sticky-top,20px);
  margin:0;
}
/* 1199 이하는 칸이 360 인데(위 grid-template-columns) 패널은 432 !important 그대로라, 1025~1199 에서 패널이 제 칸보다 72px 넓게
 * 삐져나가 가로 스크롤이 생겼다(실측 20260924 — 1040 폭 문서 1092 · 1100 폭 1122). 1024 이하는 공용 max-width:100% 가 눌러 줘서
 * 드러나지 않았다. 패널은 제 칸 폭을 따른다 — 위 432 규칙보다 뒤에 둔다(같은 우선순위). */
@media (max-width:1199px) {
  .fb-detail-renewal .fb-entry-page .content-right { width:100% !important; }
}
.fb-detail-renewal .fb-entry-page .fb-order-entry-identity { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:center; gap:24px; margin:0 0 28px; padding:0; border:0; border-radius:0; box-shadow:none; }
.fb-namecard-hero-product { display:grid; width:180px; height:132px; margin:0; place-items:center; overflow:hidden; border:1px solid var(--bj-line,#e5e2de); border-radius:8px; background:var(--bj-soft-surface,#f6f5f2); }
.fb-namecard-hero-product img { display:block; width:100%; height:100%; padding:12px; object-fit:contain; }
.fb-namecard-hero-product > span { display:flex; width:126px; height:72px; flex-direction:column; justify-content:center; padding:0 14px; border:1px solid #d3ccc4; border-radius:3px; background:#fff; color:#756f68; box-shadow:5px 5px 0 #e5e0d9; }
.fb-namecard-hero-product b { color:#242321; font-size:10px; letter-spacing:.1em; }
.fb-namecard-hero-product strong { margin-top:7px; font-size:9px; }
.fb-namecard-hero-product small { margin-top:4px; font-size:7px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-entry-copy h1 { margin:0; font-size:24px; line-height:1.4; }
.fb-detail-renewal .fb-entry-page .fb-namecard-entry-copy p { margin:8px 0 0; font-size:16px; line-height:1.6; }
.fb-detail-renewal .fb-entry-page .upload-detail-info .fb-specification-head { align-items:center; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specification-identity { display:flex; align-items:center; min-width:0; gap:12px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specification-thumb { display:grid; flex:0 0 88px; width:88px; height:54px; place-items:center; overflow:hidden; border:1px solid var(--bj-line,#e5e2de); border-radius:7px; background:var(--bj-soft-surface,#f6f5f2); }
.fb-detail-renewal .fb-entry-page .fb-namecard-specification-thumb img { display:block; width:100%; height:100%; padding:0; object-fit:cover; object-position:center 58%; transform:scale(1.3); }
.fb-detail-renewal .fb-entry-page .fb-namecard-specification-fallback { display:flex; width:70px; height:38px; flex-direction:column; justify-content:center; padding:0 7px; border:1px solid #d3ccc4; border-radius:3px; background:#fff; color:#6c665f; box-shadow:3px 3px 0 #e5e0d9; line-height:1; }
/* 안의 세 줄은 «인쇄된 줄»을 뜻하는 그림이다 — 글자였을 때는 4~6px 이라 읽을 수도 없었고
 * 상품명을 찍으면서 글자 하한(13px)까지 어겼다(전수 조사 20260921). 줄로 긋는다. */
.fb-detail-renewal .fb-entry-page .fb-namecard-specification-fallback i { display:block; height:2px; border-radius:1px; background:#242321; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specification-fallback i:nth-child(1) { width:60%; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specification-fallback i:nth-child(2) { width:80%; margin-top:4px; height:1px; background:#a8a29a; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specification-fallback i:nth-child(3) { width:44%; margin-top:3px; height:1px; background:#c4bdb4; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specification-copy { display:flex; min-width:0; flex-direction:column; gap:3px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specification-copy h2 { min-width:0; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specification-copy > span { min-width:0; overflow:hidden; color:var(--bj-muted,#6f6b66); font-size:12px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.fb-detail-renewal .fb-entry-page #fbDesignMethod { display:block; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.fb-detail-renewal .fb-entry-page .fb-design-first-intro { margin:0 0 16px; padding:0; }
.fb-detail-renewal .fb-entry-page .fb-design-first-intro h2 { margin:0; font-size:20px; line-height:1.5; }
.fb-detail-renewal .fb-entry-page .fb-design-first-intro p { margin:8px 0 0; font-size:16px; line-height:1.6; }
.fb-detail-renewal .fb-entry-page .fb-design-section,
.fb-detail-renewal .fb-entry-page .fb-template-entry-card,
.fb-detail-renewal .fb-entry-page .fb-store-template-browser,
.fb-detail-renewal .fb-entry-page #fbDesignEditorPanel { margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.fb-detail-renewal .fb-entry-page .fb-template-entry-card { display:block; }
.fb-detail-renewal .fb-entry-page .upload-detail-thumb-left,
.fb-detail-renewal .fb-entry-page .fb-design-tab-headers { display:none; }
.fb-detail-renewal .fb-entry-page #fbDesignMethod + .design-after + .upload-detail-info,
.fb-detail-renewal .fb-entry-page #fbDesignMethod ~ .upload-detail-info { margin-top:28px; }
.fb-detail-renewal .fb-entry-page .fb-design-request-cta--integrated { margin:16px 0 0; padding:16px 0; border:0; border-radius:0; box-shadow:none; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications { display:block; min-width:0; margin:0 0 28px; border-top:1px solid var(--bj-line,#e5e2de); border-bottom:1px solid var(--bj-line,#e5e2de); }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications > summary { display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:10px 0; font-size:18px; font-weight:600; cursor:pointer; list-style:none; }
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-summary-copy { display:flex; min-width:0; flex-direction:column; gap:2px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-summary-title { display:flex; min-width:0; align-items:center; gap:8px; flex-wrap:wrap; }
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-summary-copy strong { font-size:18px; line-height:26px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-summary-copy em { display:inline-flex; min-height:22px; align-items:center; padding:1px 7px; border-radius:999px; background:#e4efe9; color:#2e6a4e; font-size:11px; font-style:normal; font-weight:700; line-height:18px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-summary-copy small { color:var(--bj-muted,#6f6b66); font-size:13px; font-weight:400; line-height:20px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications[open] > summary { border-bottom:1px solid var(--bj-line,#e5e2de); }
.fb-namecard-specifications > summary::-webkit-details-marker { display:none; }
.fb-namecard-specifications > summary::after { content:'+'; font-size:24px; font-weight:400; }
.fb-namecard-specifications[open] > summary::after { content:'−'; }
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-context {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  margin:16px 0 20px;
  padding:12px;
  border:1px solid var(--bj-line,#e5e2de);
  border-radius:8px;
  background:var(--bj-soft-surface,#f8f7f4);
}
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-context-thumb {
  display:grid;
  flex:0 0 72px;
  width:72px;
  height:46px;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--bj-line,#e5e2de);
  border-radius:5px;
  background:#fff;
  color:var(--bj-muted,#6f6b66);
  font-size:11px;
  font-weight:700;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-context-thumb img { display:block; width:100%; height:100%; padding:4px; object-fit:contain; }
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-context-copy { display:flex; min-width:0; flex-direction:column; gap:2px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-context-copy strong { color:var(--bj-ink,#20201e); font-size:14px; line-height:20px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-context-copy p,
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-context-copy > span { margin:0; color:var(--bj-muted,#6f6b66); font-size:12px; line-height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-namecard-base-cut {
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:16px;
  align-items:center;
  margin:0 0 20px;
  padding:16px;
  border:1px solid var(--bj-line,#e5e2de);
  border-radius:8px;
  background:var(--bj-soft-surface,#f8f7f4);
}
.fb-namecard-production-basis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 20px; align-items:stretch; }
.fb-namecard-production-basis .fb-namecard-size-route,
.fb-namecard-production-basis .fb-namecard-base-cut { height:100%; margin:0; }
.fb-namecard-production-basis .fb-namecard-size-route { grid-template-columns:minmax(0,1fr); align-content:start; }
.fb-namecard-production-basis .fb-namecard-size-route small { grid-column:1; }
.fb-namecard-production-basis .fb-namecard-size-route a { width:100%; margin-top:8px; justify-content:space-between; }
.fb-namecard-production-basis .fb-namecard-base-cut { grid-template-columns:72px minmax(0,1fr); gap:12px; padding:14px; }
.fb-namecard-production-basis .fb-namecard-base-cut-visual { width:72px; height:68px; }
.fb-namecard-production-basis .fb-namecard-base-cut-visual span { width:50px; height:30px; box-shadow:3px 3px 0 #d7d1ca; }
.fb-namecard-base-cut-visual { position:relative; display:grid; width:104px; height:72px; place-items:center; border-radius:6px; background:#ebe8e3; }
.fb-namecard-base-cut-visual span { display:block; width:72px; height:40px; border:1px solid #a8a098; border-radius:2px; background:#fff; box-shadow:4px 4px 0 #d7d1ca; }
.fb-namecard-base-cut-visual i,
.fb-namecard-base-cut-visual b { position:absolute; display:block; width:7px; height:7px; border-style:solid; border-color:#595550; }
.fb-namecard-base-cut-visual i { top:13px; left:13px; border-width:1px 0 0 1px; }
.fb-namecard-base-cut-visual b { right:13px; bottom:13px; border-width:0 1px 1px 0; }
.fb-namecard-base-cut-badge { display:inline-flex; min-height:22px; align-items:center; padding:1px 7px; border-radius:999px; background:#e4efe9; color:#2e6a4e; font-size:11px; font-weight:700; line-height:18px; }
.fb-namecard-base-cut h3 { margin:6px 0 0; color:var(--bj-ink,#20201e); font-size:16px; line-height:24px; }
.fb-namecard-base-cut p { margin:5px 0 0; color:var(--bj-muted,#6f6b66); font-size:13px; line-height:20px; word-break:keep-all; }
.fb-namecard-base-cut small { display:block; margin-top:6px; color:var(--bj-tertiary,#918e87); font-size:12px; line-height:18px; word-break:keep-all; }
.fb-detail-renewal .fb-entry-page .fb-production-surface > .opt-post-section[data-postproc-slug="thomson"] { display:none !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-group > .fb-option-group-head,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-group > .fb-option-group-head { min-height:44px; padding:0 4px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-option-group-head h2 { display:block; font-size:17px; line-height:24px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .opt-post-desc { display:none; }
.fb-detail-renewal .fb-entry-page[data-namecard-spec-overview="true"] .fb-production-surface .opt-header-selected-desc,
.fb-detail-renewal .fb-entry-page[data-namecard-spec-overview="true"] .fb-production-surface .opt-header-guide-link { display:none !important; }
.fb-detail-renewal .fb-entry-page .upload-detail-info,
.fb-detail-renewal .fb-entry-page .fb-option-surface,
.fb-detail-renewal .fb-entry-page .order-summary { box-shadow:none; }
.fb-detail-renewal .fb-entry-page .fb-order-identity { display:block; }
.fb-detail-renewal .fb-entry-page .fb-order-identity .fb-order-product-title { display:block; }
.fb-detail-renewal .fb-entry-page .order-summary { padding:24px; border:1px solid var(--bj-line,#e5e2de); border-radius:8px; }
.fb-detail-renewal .fb-entry-page .order-label-wrap { flex:0 0 auto; min-width:120px; }
.fb-detail-renewal .fb-entry-page .order-total-price { overflow-wrap:break-word; }
.fb-detail-renewal .fb-entry-page .order-summary-total { gap:16px; }
.fb-detail-renewal .fb-entry-page .order-summary-total .order-total-price {
  max-width:140px;
  white-space:normal;
  text-align:right;
  line-height:1.45;
  overflow-wrap:anywhere;
}
/* The method cards only select a route. The mobile dock owns the one execution CTA. */
/* Status copy and actions wrap between Korean words, not individual syllables. */
html.fb-detail-renewal body[data-fb-entry-actions-visible] .mobile-total-price,
html.fb-detail-renewal body[data-fb-entry-actions-visible] .mobile-btn-order {
  word-break:keep-all;
  overflow-wrap:anywhere;
}
@media(max-width:959px) {
  /* The shared footer is a body sibling of .page-wrap. Reserve the measured
     dock below the entire document, not before that footer. The bar's measured
     height already includes the safe-area inset. */
  html.fb-detail-renewal body[data-fb-entry-actions-visible] {
    padding-bottom:calc(var(--bj-fixed-action-clearance, 0px) + 16px) !important;
  }
  .fb-detail-renewal .page-wrap.fb-entry-page[data-ui-contract] {
    padding-bottom:16px !important;
  }
  .fb-detail-renewal .fb-entry-page .content-area { display:block; }
  .fb-detail-renewal .fb-entry-page .content-right { display:block; width:100% !important; position:static; margin:24px 0 0; }
}
@media(max-width:767px) {
  .fb-detail-renewal .fb-entry-page .fb-order-entry-identity { margin-bottom:24px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications { margin:0 0 24px; }
  .fb-detail-renewal .fb-entry-page .order-summary { padding:16px; }
}
@media(max-width:600px) {
  .fb-detail-renewal .fb-entry-page .fb-order-entry-identity { grid-template-columns:104px minmax(0,1fr); gap:14px; }
  .fb-namecard-hero-product { width:104px; height:104px; }
  .fb-namecard-hero-product img { padding:8px; }
  .fb-namecard-hero-product > span { width:78px; height:46px; padding:0 8px; box-shadow:3px 3px 0 #e5e0d9; }
  .fb-namecard-hero-product b { font-size:6px; }
  .fb-namecard-hero-product strong { margin-top:4px; font-size:6px; }
  .fb-namecard-hero-product small { margin-top:2px; font-size:4px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specification-identity { gap:10px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specification-thumb { flex-basis:72px; width:72px; height:46px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specification-thumb img { padding:5px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specification-fallback { width:58px; height:32px; padding-inline:5px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specification-copy h2 { font-size:18px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specification-copy > span { font-size:11px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-spec-context { margin:12px 0 16px; padding:10px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-spec-context-thumb { flex-basis:64px; width:64px; height:42px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-spec-context-copy p,
  .fb-detail-renewal .fb-entry-page .fb-namecard-spec-context-copy > span { font-size:11px; }
  .fb-namecard-base-cut { grid-template-columns:72px minmax(0,1fr); gap:12px; padding:12px; }
  .fb-namecard-base-cut-visual { width:72px; height:68px; }
  .fb-namecard-base-cut-visual span { width:50px; height:30px; box-shadow:3px 3px 0 #d7d1ca; }
  .fb-namecard-editor-finishing { display:block; padding:16px; }
  .fb-namecard-editor-finishing a { width:100%; justify-content:space-between; margin-top:14px; }
}

/* ?fb_view=mobile renders the canonical mobile shell even in a desktop
 * browser. Media queries cannot see that server-forced surface, so mirror the
 * same structural handoff explicitly; otherwise the 300px quote rail steals
 * the narrow main column and Korean copy collapses into one-character lines. */
html.fb-detail-renewal.fb-detail-mobile-forced .fb-entry-page .content-area {
  display:block;
}
html.fb-detail-renewal.fb-detail-mobile-forced .fb-entry-page .content-right {
  display:block;
  width:100% !important;
  position:static;
  margin:24px 0 0;
}
html.fb-detail-renewal.fb-detail-mobile-forced .fb-entry-page .order-summary {
  padding:16px;
}
html.fb-detail-renewal.fb-detail-mobile-forced .fb-entry-page .upload-detail-info .upload-form-grid {
  grid-template-columns:minmax(0, 1fr);
  gap:16px;
}
html.fb-detail-renewal.fb-detail-mobile-forced .fb-entry-page .upload-detail-info[data-spec-mode="fixed"] .upload-form-grid > .upload-form-group:first-child {
  grid-template-columns:minmax(0, 1fr);
  row-gap:8px;
}
html.fb-detail-renewal.fb-detail-mobile-forced .fb-entry-page .upload-detail-info[data-spec-mode="fixed"] .fb-orient-group {
  grid-column:1;
  width:100%;
  margin-top:0 !important;
}

/* Namecard entry v4: one product identity, one server-owned price story. */
.fb-detail-renewal .fb-entry-page .fb-order-entry-identity {
  align-items:start;
  padding:20px;
  border:1px solid var(--bj-line,#e5e2de);
  border-radius:10px;
  background:var(--bj-clean,#fff);
}
.fb-detail-renewal .fb-entry-page .fb-namecard-entry-copy { min-width:0; }
.fb-detail-renewal .fb-entry-page .fb-entry-spec-summary { margin:4px 0 0; color:var(--bj-muted,#6f6b66); font-size:14px; line-height:22px; }
.fb-namecard-size-route {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 20px;
  align-items:center;
  margin:0 0 16px;
  padding:16px;
  border:1px solid var(--bj-line,#e5e2de);
  border-radius:8px;
  background:#fff;
}
.fb-namecard-size-route > div > span { color:var(--bj-tertiary,#918e87); font-size:11px; font-weight:700; }
.fb-namecard-size-route h3 { margin:3px 0 0; font-size:16px; line-height:24px; }
.fb-namecard-size-route p,
.fb-namecard-size-route small { color:var(--bj-muted,#6f6b66); font-size:12px; line-height:19px; word-break:keep-all; }
.fb-namecard-size-route p { margin:4px 0 0; }
.fb-namecard-size-route small { grid-column:1 / -1; }
.fb-namecard-size-route a { display:inline-flex; min-height:44px; align-items:center; gap:14px; padding:0 14px; border:1px solid var(--bj-line-strong,#938d86); border-radius:8px; color:var(--bj-ink,#20201e); font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-context { display:block; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specification-identity { display:none; }
.fb-detail-renewal .fb-entry-page .fb-order-identity { position:relative; display:block; padding-right:36px; }
.fb-detail-renewal .fb-entry-page .fb-order-estimate-title { margin:4px 0 0; font-size:22px; line-height:30px; }
.fb-detail-renewal .fb-entry-page .fb-order-product-title { display:none !important; }
.fb-order-product-identity { display:grid; grid-template-columns:88px minmax(0,1fr); align-items:center; gap:12px; margin:0 0 18px; padding:0 0 18px; border-bottom:1px solid var(--bj-line,#e5e2de); }
.fb-order-product-identity .fb-namecard-specification-thumb { width:88px; height:58px; }
.fb-order-product-copy { display:flex; min-width:0; flex-direction:column; gap:4px; }
.fb-order-product-copy h1 { margin:0; color:var(--bj-ink,#20201e); font-size:20px; line-height:28px; word-break:keep-all; }
.fb-order-product-meta { color:var(--bj-muted,#6f6b66); font-size:13px; line-height:20px; word-break:keep-all; }
.fb-namecard-price-close { display:none; }
.fb-namecard-price-backdrop { display:none; }

/* The order surface explains how to configure and start. The complete product
   story below remains visible because production proof and in-house craft are
   part of the purchase decision, not expendable decoration. */
.fb-detail-renewal .pressb-finish-intent { display:grid; width:100%; min-height:52px; margin-top:18px; padding:8px 12px; border:1px solid var(--fbd-line); border-radius:8px; background:#fff; color:var(--fbd-ink); text-align:left; cursor:pointer; }
.fb-detail-renewal .pressb-finish-intent > span { color:inherit; font-size:14px; font-weight:700; line-height:20px; letter-spacing:0; }
.fb-detail-renewal .pressb-finish-intent small { color:var(--fbd-muted); font-size:11px; line-height:17px; }
.fb-detail-renewal .pressb-finish-intent[aria-pressed="true"] { border-color:var(--fbd-ink); background:var(--fbd-ink); color:#fff; }
.fb-detail-renewal .pressb-finish-intent[aria-pressed="true"] small { color:#d7d7d2; }
.fb-detail-renewal .pressb-finish-route-note { margin-top:18px; padding-top:14px; border-top:1px solid var(--fbd-line-soft); }
.fb-detail-renewal .pressb-finish-route-note strong,
.fb-detail-renewal .pressb-finish-route-note span { display:block; color:var(--fbd-ink); font-size:12px; line-height:19px; letter-spacing:0; }
.fb-detail-renewal .pressb-finish-route-note span { margin-top:3px; color:var(--fbd-muted); font-weight:400; }

@media(max-width:959px) {
  .fb-detail-renewal .fb-entry-page .content-right { display:contents; margin:0; }
  .fb-detail-renewal .fb-entry-page .order-summary {
    display:none;
    position:fixed;
    z-index:1202;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    max-height:min(82dvh,720px);
    margin:0;
    padding:20px 20px calc(20px + env(safe-area-inset-bottom));
    overflow:auto;
    border:1px solid var(--bj-line,#e5e2de);
    border-radius:16px 16px 0 0;
    background:#fff;
    box-shadow:0 -16px 50px rgba(24,24,23,.18);
  }
  body[data-namecard-price-sheet-open="true"] .fb-entry-page .order-summary { display:block; }
  body[data-namecard-price-sheet-open="true"] { overflow:hidden; }
  .fb-namecard-price-backdrop { position:fixed; z-index:1201; inset:0; width:100%; height:100%; padding:0; border:0; background:rgba(20,20,18,.42); }
  body[data-namecard-price-sheet-open="true"] .fb-namecard-price-backdrop { display:block; }
  .fb-namecard-price-close { position:absolute; top:0; right:0; display:grid; width:44px; height:44px; place-items:center; border:0; background:transparent; color:var(--bj-ink,#20201e); font-size:28px; cursor:pointer; }
}

@media(max-width:600px) {
  .fb-detail-renewal .fb-entry-page .fb-order-entry-identity { grid-template-columns:88px minmax(0,1fr); gap:12px; margin-bottom:20px; padding:14px; }
  .fb-namecard-hero-product { width:88px; height:88px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-entry-copy h1 { font-size:20px; line-height:28px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-entry-copy { display:contents; }
  .fb-namecard-hero-product { grid-row:1 / 3; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-entry-copy h1,
  .fb-detail-renewal .fb-entry-page .fb-entry-spec-summary { grid-column:2; }
  .fb-detail-renewal .fb-entry-page .fb-entry-spec-summary { margin:0; font-size:12px; line-height:20px; overflow:visible; word-break:keep-all; overflow-wrap:anywhere; }
  .fb-namecard-size-route { grid-template-columns:minmax(0,1fr); gap:10px; padding:14px; }
  .fb-namecard-size-route small { grid-column:1; }
  .fb-namecard-size-route a { width:100%; justify-content:space-between; }
  .fb-namecard-production-basis { grid-template-columns:minmax(0,1fr); gap:12px; margin-bottom:16px; }
}

@media(max-width:657px) {
  /* The fixed dock owns the next design step. Keep the specification-return
     link visible: changing production options is a distinct action. */
  html.fb-namecard-entry-mode .pressb-story-hero-actions .pressb-story-primary,
  html.fb-namecard-entry-mode .pressb-story-cta { display:none !important; }
}

/* Unified namecard decision surface --------------------------------------
 * Product identity and every base production control belong to one card.
 * The price rail remains read-only; the existing form nodes keep all state
 * and quote ownership. */
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications {
  overflow:hidden;
  margin:0 0 28px;
  border:1px solid var(--bj-line,#e5e2de);
  border-radius:10px;
  background:#fff;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications > .fb-namecard-spec-header {
  display:none;
  grid-template-columns:88px minmax(0,1fr);
  gap:14px;
  min-height:82px;
  /* 머리 선 → 첫 줄 이름이 0px 이었다(폰 전수 점검 20260917). */
  margin-bottom:16px;
  padding:14px 16px;
  border-bottom:1px solid var(--bj-line,#e5e2de);
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications > .fb-namecard-spec-header .fb-namecard-specification-thumb {
  display:grid;
  width:88px;
  height:54px;
  align-self:center;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-summary-copy { justify-content:center; }
.fb-detail-renewal .fb-entry-page .fb-namecard-spec-summary-copy h1 { margin:0; font-size:22px; line-height:30px; word-break:keep-all; }
.fb-namecard-fixed-meta { display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:5px; color:var(--bj-muted,#6f6b66); font-size:13px; line-height:20px; }
.fb-namecard-fixed-meta > span { position:relative; }
.fb-namecard-fixed-meta > span + span::before { position:absolute; left:-7px; color:var(--bj-line-strong,#938d86); content:'·'; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications > .fb-production-group { padding:0 20px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications > .upload-detail-info {
  margin:0;
  padding:18px 20px 20px;
  border:0;
  border-top:1px solid var(--bj-line,#e5e2de);
  border-radius:0;
  background:#fff;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-print-option {
  display:block !important;
  margin:0 0 14px;
  padding:0 0 14px;
  border:0;
  border-bottom:1px solid var(--bj-line,#e5e2de);
  background:#fff !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-print-option .opt-print-header > .opt-header-row {
  min-height:32px !important;
  padding:0 !important;
  background:#fff !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-fixed-print .opt-print-header > .opt-header-row {
  cursor:default !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-fixed-print .fb-base-option-current {
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  width:100%;
  min-height:52px;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid var(--bj-line,#e5e2de);
  border-radius:8px;
  background:var(--bj-soft-surface,#f6f5f2);
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-fixed-print .fb-base-option-current b {
  color:var(--bj-muted,#6f6b66);
  font-size:13px;
  line-height:20px;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-fixed-print .fb-base-option-current span {
  color:var(--bj-ink,#20201e);
  font-size:14px;
  font-weight:650;
  line-height:20px;
}
.fb-namecard-fixed-print-badge { display:inline-flex; min-height:26px; align-items:center; padding:2px 9px; border-radius:999px; background:#fff; color:var(--bj-muted,#6f6b66); font-size:13px; font-style:normal; font-weight:650; line-height:20px; white-space:nowrap; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-fixed-print .opt-arrow,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-fixed-print .opt-header-print-row-info,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-fixed-print .opt-print-body-card,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-fixed-print > .opt-section-body,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-fixed-print > [id="opt-print"],
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-fixed-print > :not(.opt-section-header),
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-namecard-fixed-print #opt-print,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-namecard-fixed-print .opt-section-body,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-namecard-fixed-print .opt-select-wrap { display:none !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-fixed-print .opt-print-header > .opt-header-row { pointer-events:none; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-selectable-print .opt-print-header > .opt-header-row {
  display:block !important;
  min-height:52px !important;
  cursor:pointer !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-selectable-print .opt-header-default,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-selectable-print .opt-header-print-row-info,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-selectable-print .opt-arrow { display:none !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-selectable-print .opt-print-body-card { display:none !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-selectable-print .fb-base-option-current {
  position:relative;
  display:block;
  width:100%;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-selectable-print .fb-base-option-current b {
  position:absolute;
  z-index:1;
  top:50%;
  left:14px;
  color:var(--bj-muted,#6f6b66);
  font-size:14px;
  font-weight:700;
  line-height:18px;
  transform:translateY(-50%);
  pointer-events:none;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-selectable-print .fb-base-option-current > span {
  min-height:52px;
  padding:0 42px 0 88px;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-selectable-print #opt-print {
  margin-top:10px !important;
  border-top:1px solid var(--bj-line,#e5e2de) !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-selectable-print #opt-print .opt-select-list {
  padding:8px 0 0 !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications > .option-area {
  gap:0;
  padding:0 20px 20px;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-group { gap:0; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-group > .fb-option-group-head {
  display:flex;
  min-height:auto;
  align-items:center;
  padding:18px 0 10px;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-group > .fb-option-group-head h2 {
  font-size:16px;
  line-height:24px;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface {
  border:0;
  border-radius:0;
  box-shadow:none;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .opt-section {
  background:#fff !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-fixed-print { display:block !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-print-option {
  margin:0;
  padding:0 0 14px;
  border-bottom:1px solid var(--bj-line,#e5e2de);
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print .opt-print-header > .opt-header-row {
  display:block !important;
  min-height:52px !important;
  cursor:pointer !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print .fb-base-option-current {
  position:relative;
  display:block;
  width:100%;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print .fb-base-option-current b {
  position:absolute;
  z-index:1;
  top:50%;
  left:14px;
  color:var(--bj-muted,#6f6b66);
  font-size:14px;
  font-weight:700;
  transform:translateY(-50%);
  pointer-events:none;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print .fb-base-option-current > span {
  min-height:52px;
  padding:0 42px 0 96px;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print .opt-header-default,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print .opt-header-print-row-info,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print .opt-print-body-info,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print .opt-print-body-divider,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print .opt-envelope-face-row { display:none !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print .opt-print-body-card {
  display:block !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
/* 면 단추 → 펼친 목록 윗선 16. 8 이었을 때는 그 사이에 빈 「면별 인쇄 색상」 칸이 줄 간격 8 을 한 번 더 먹어 16 으로 보였다 —
 * 빈 칸을 걷자(detail-renewal.js decorateProductionSubRows) 선이 단추·별색 칸의 밑줄처럼 8 에 붙었다(20260917). */
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print { margin-top:16px !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print .opt-select-list {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  /* 카드 사이는 선 한 줄이 가른다 — 격자 간격 8 이 남아 선 위가 24, 아래가 16 이었다(실측).
   * 목록 위 선에서 첫 카드 제목까지도 25(8 + 카드 안 16)였다 — 모두 16 으로 맞춘다. */
  gap:0;
  padding:0 !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print .opt-select-card {
  display:flex !important;
  min-height:52px;
  align-items:center;
  padding:12px 14px !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print .opt-select-card.is-option-policy-hidden {
  display:none !important;
}
/* 설명은 살린다 — 고객이 여기서 묻는 것은 「디지털과 UV가 뭔가 다른가」이고,
   그 답은 이미 페이지에 쓰여 있었다(사장님 20260917). 그림과 중복 금액만 끄다. */
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print .opt-select-img,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print .print-est-cost { display:none !important; }
/* display 는 건드리지 않는다 — 설명은 PC용·모바일용 둘이고 style.css:1917 이 640px 을
   경계로 한 쪽만 보인다. 여기서 display 를 강제하면 둘 다 나와 빈틈이 생긴다(실측 51px). */
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print .opt-select-desc {
  margin:8px 0 0 !important;
  color:var(--bj-muted,#66635e) !important;
  font-size:14px !important;
  line-height:21px !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print .opt-select-info { width:100%; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print .opt-select-title {
  margin:0;
  font-size:14px;
  line-height:22px;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-header-digital-row,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-header-uv-row,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-header-master-row {
  margin-top:10px;
  padding:12px 0 0 !important;
  border-top:1px solid var(--bj-line,#e5e2de);
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-sub-selects {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-sub-selects select {
  width:100%;
  min-height:48px;
  font-size:14px;
}
@media(max-width:600px) {
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print .opt-select-list,
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-sub-selects { grid-template-columns:1fr; }
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications [data-entry-spec-section="size"] > .upload-form-label,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications [data-entry-spec-section="size"] > .spec-size-text { display:none !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications [data-entry-spec-section="size"] .fb-orient-group { margin-top:0 !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-multi-design-group > .upload-form-label,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications [data-fb-quantity-host] > .upload-form-label { display:none !important; }
.fb-namecard-size-control { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:start; gap:12px; margin:0 0 16px; padding:0 0 16px; border-bottom:1px solid var(--bj-line,#e5e2de); }
.fb-namecard-field-label { min-height:52px; display:flex; align-items:center; color:var(--bj-muted,#6f6b66); font-size:14px; font-weight:700; line-height:20px; }
.fb-namecard-size-picker { position:relative; min-width:0; }
.fb-namecard-size-picker > summary { display:grid; min-height:52px; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:0 14px; border:1px solid var(--bj-line,#e5e2de); border-radius:8px; background:#fff; cursor:pointer; list-style:none; }
.fb-namecard-size-picker > summary::-webkit-details-marker { display:none; }
.fb-namecard-size-picker > summary strong { overflow:hidden; color:var(--bj-ink,#20201e); font-size:15px; line-height:22px; text-overflow:ellipsis; white-space:nowrap; }
.fb-namecard-size-picker > summary > span { color:var(--bj-muted,#6f6b66); font-size:14px; font-weight:700; line-height:20px; text-decoration:underline; text-underline-offset:3px; }
.fb-namecard-size-picker > summary:focus-visible { outline:2px solid #5579a3; outline-offset:2px; }
.fb-namecard-size-options { position:absolute; z-index:20; top:calc(100% + 6px); right:0; left:0; overflow:hidden; padding:6px; border:1px solid var(--bj-line,#e5e2de); border-radius:8px; background:#fff; box-shadow:0 12px 30px rgba(32,32,30,.12); }
.fb-namecard-size-options a { display:grid; min-height:48px; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:0 10px; border-radius:6px; color:var(--bj-ink,#20201e); font-size:14px; font-weight:650; text-decoration:none; }
.fb-namecard-size-options a:hover { background:var(--bj-soft-surface,#f6f5f2); }
.fb-namecard-size-options a:focus-visible { outline:2px solid #5579a3; outline-offset:-2px; }
.fb-namecard-size-options a[aria-current="page"] { background:var(--bj-soft-surface,#f6f5f2); }
.fb-namecard-size-options em { color:var(--bj-muted,#6f6b66); font-size:13px; font-style:normal; font-weight:600; }
.fb-namecard-alt-size-link {
  display:inline-flex;
  grid-column:1 / -1;
  min-height:44px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:10px;
  padding:0 12px;
  border:1px solid var(--bj-line,#e5e2de);
  border-radius:8px;
  color:var(--bj-ink,#20201e);
  font-size:13px;
  font-weight:650;
  text-decoration:none;
}
.fb-namecard-alt-size-link:hover { border-color:var(--bj-ink,#20201e); }
.fb-namecard-alt-size-link:focus-visible { outline:2px solid #5579a3; outline-offset:2px; }

.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-group {
  gap:0;
  margin-top:0;
  border-top:1px solid var(--bj-line,#e5e2de);
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-list-head { display:flex; align-items:center; gap:8px; padding:16px 0 10px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-list-head h2 { font-size:16px; line-height:24px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-list-head p { margin:0; color:var(--bj-muted,#6f6b66); font-size:14px !important; line-height:21px !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-size-help,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-estimate-add { display:none !important; }

/* Size and paper use the same field grammar: inset label, selected value, chevron. */
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-paper-header > .opt-header-row { min-height:52px !important; padding:0 !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-paper-header .fb-base-option-current { position:relative; display:block; width:100%; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-paper-header .fb-base-option-current b { position:absolute; z-index:1; top:50%; left:14px; display:block; min-height:0; padding:0; border-radius:0; background:transparent; color:var(--bj-muted,#6f6b66); font-size:14px; font-weight:700; line-height:20px; transform:translateY(-50%); pointer-events:none; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-paper-header .fb-base-option-current.is-changeable > span { min-height:52px; padding:0 42px 0 62px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-paper-header .fb-base-option-current { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:0 10px; min-height:52px; padding:0 42px 0 14px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-paper-header .fb-base-option-current b { position:static; transform:none; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-paper-header .fb-base-option-current.is-changeable > span { min-height:0; padding:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-finishing-choice-rail { display:grid; width:100%; min-width:0; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; box-sizing:border-box; }
/* 고를 칩이 없는 상품(얇은 종이의 리플릿)에서 후가공 줄을 열면 보이는 한 줄 — 옛 견적 안내 칸과 같은 조용한 면. */
.fb-finishing-choice-empty { grid-column:1 / -1; margin:0; padding:11px 12px; border-radius:7px; background:var(--bj-soft-surface,#f6f5f2); color:var(--bj-muted,#6f6b66); font-size:14px; line-height:21px; word-break:keep-all; }
.fb-finishing-choice-empty[hidden] { display:none !important; }
/* 모서리를 바꿔 넘어와 빠진 후가공을 알리는 한 줄(detail-renewal syncCornerCarryNotice) — 같은 조용한 면. */
.fb-corner-carry-note { margin:8px 0 0; padding:11px 12px; border-radius:7px; background:var(--bj-soft-surface,#f6f5f2); color:var(--bj-muted,#6f6b66); font-size:14px; line-height:21px; word-break:keep-all; }
.fb-corner-carry-note[hidden] { display:none !important; }
.fb-finishing-choice {
  position:relative;
  display:flex;
  min-width:0;
  min-height:84px;
  align-items:center;
  justify-content:flex-start;
  flex-direction:column;
  gap:7px;
  padding:8px 6px 7px;
  border:1px solid var(--bj-line,#e5e2de);
  border-radius:8px;
  background:#fff;
  color:var(--bj-ink,#20201e);
  font:inherit;
  cursor:pointer;
}
.fb-finishing-choice { min-width:0; box-sizing:border-box; }
.fb-finishing-choice:hover { border-color:var(--bj-line-strong,#938d86); }
.fb-finishing-choice:focus-visible { outline:2px solid #5579a3; outline-offset:2px; }
.fb-finishing-choice.is-selected { border-color:var(--bj-ink,#20201e); box-shadow:inset 0 0 0 1px var(--bj-ink,#20201e); }
.fb-finishing-choice.is-disabled { color:var(--bj-tertiary,#918e87); background:var(--bj-soft-surface,#f6f5f2); cursor:not-allowed; }
.fb-finishing-choice-media { display:block; width:100%; height:44px; overflow:hidden; border-radius:5px; background:var(--bj-soft-surface,#f6f5f2); }
.fb-finishing-choice-media img { display:block; width:100%; height:100%; object-fit:cover; }
.fb-finishing-choice.has-missing-media .fb-finishing-choice-media { background:linear-gradient(135deg,#f5f2ed,#e7e1d9); }
.fb-finishing-choice-label { overflow:hidden; width:100%; font-size:14px; font-weight:700; line-height:20px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.fb-finishing-choice-check { position:absolute; top:5px; right:5px; display:grid; width:20px; height:20px; place-items:center; border:1px solid rgba(32,32,30,.18); border-radius:50%; background:rgba(255,255,255,.94); color:transparent; font-size:12px; font-weight:800; }
.fb-finishing-choice.is-selected .fb-finishing-choice-check { border-color:var(--bj-ink,#20201e); background:var(--bj-ink,#20201e); color:#fff; }
/* 위 12 + 묶음 4 = 16 · 아래 4 + 칩 안 12 = 16 — 8/0 이면 12·11.8 로 사다리 밖(전수 점검 20260918, 인쇄 방식 안내가 늘 보이게 되면서). */
/* 후가공 줄 밑 안내 — 정본 안내 면(DNA.COLOR.INFORMATION_SURFACE #f8f7f4, «비조작 안내 배경») 위 ink 글자. 종전 아이보리 바탕·갈색 글자는
 * 정본에 없는 색이었다(사장님 20260919 「디자인 시스템에 맞는 거야? 느낌표로 눈에 띄게」). 표식: info = 동그라미 i(muted), warn = 동그라미 !(DNA.COLOR.DANGER).
 * 짜임(사장님 20260919 「배너 여백 이런 것들을 맞춰 줘야지」): 표식 20 · 글 · 단추가 한 격자 — 칸 안쪽 14/16, 표식↔글 10, 글↔단추 10(줄 사다리 8·16 사이의 한 걸음),
 * 단추는 두 기둥을 다 써 칸 안쪽 여백에 딱 맞는 44 높이 · 정본 컨트롤 모서리(--bj-control-radius 8; DNA.SHAPE.PILL 은 «상태 배지에만»이라 알약 아님) ·
 * 「option action 의 실제 pointer target 44×44 이상」. */
.fb-finishing-choice-feedback { display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:10px; row-gap:10px; align-items:start; margin:12px 0 4px; padding:14px 16px; border-radius:8px; background:var(--bj-information-surface); color:var(--bj-ink,#181817); font-size:14px; line-height:21px; word-break:keep-all; }
.fb-finishing-choice-feedback[hidden] { display:none; }
.fb-finishing-choice-feedback-icon { grid-column:1; grid-row:1; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-top:0.5px; border-radius:999px; background:var(--bj-muted,#66635e); color:#fff; font-size:13px; font-weight:700; line-height:1; }
.fb-finishing-choice-feedback[data-level="warn"] .fb-finishing-choice-feedback-icon { background:var(--bj-danger,#a14b46); }
.fb-finishing-choice-feedback-text { grid-column:2; grid-row:1; min-width:0; }
.fb-finishing-choice-feedback-action { grid-column:1 / -1; grid-row:2; display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin:0; padding:0 16px; border:1px solid var(--bj-line-strong,#938d86); border-radius:var(--bj-control-radius,8px); background:var(--bj-clean,#fff); color:var(--bj-ink,#181817); font:inherit; font-size:14px; font-weight:600; line-height:20px; cursor:pointer; }
.fb-finishing-choice-feedback-action:hover { border-color:var(--bj-ink,#181817); }
.fb-finishing-estimate-notice { display:flex; align-items:flex-start; gap:8px 14px; margin:10px 0 0; padding:11px 12px; border-radius:7px; background:var(--bj-soft-surface,#f6f5f2); color:var(--bj-muted,#6f6b66); font-size:14px; line-height:21px; word-break:keep-all; }
.fb-finishing-estimate-notice[hidden] { display:none !important; }
.fb-finishing-estimate-notice strong { flex:0 0 auto; color:var(--bj-ink,#20201e); font-size:14px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface {
  display:block !important;
  margin-top:0;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface[hidden] { display:block !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .is-namecard-route-hidden { display:none !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface > .opt-post-section[data-process-group="finishing"] { display:none !important; margin-top:12px; border:1px solid var(--bj-line,#e5e2de); border-radius:8px; overflow:hidden; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface > .opt-post-section[data-process-group="finishing"].is-active,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface > .opt-post-section[data-process-group="finishing"].is-locked-on { display:block !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface > .opt-post-section[data-process-group="finishing"].is-namecard-finishing-rail-hidden { display:none !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface > .opt-post-section[data-process-group="finishing"] > .opt-post-header > .opt-header-row { display:none !important; }
.fb-finishing-config-title { display:none; margin:0; padding:16px 16px 0; color:var(--bj-ink,#20201e); font-size:15px; line-height:22px; }
.opt-post-section.is-active .fb-finishing-config-title,
.opt-post-section.is-locked-on .fb-finishing-config-title { display:block; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface .fb-post-effect-panel { display:none !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface > .opt-post-section:not(.is-active):not(.is-locked-on) .fb-post-summary,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface > .opt-post-section:not(.is-active):not(.is-locked-on) .fb-post-status { display:none !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface > .opt-post-section[data-process-group="finishing"]:not(.is-active) .opt-header-row { min-height:56px; padding-block:8px; }

@media(max-width:768px) {
  html.fb-detail-renewal.fb-namecard-entry-mode,
  html.fb-detail-renewal.fb-namecard-entry-mode body { max-width:100%; overflow-x:clip; }
}

@media(max-width:767px) {
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications { margin-bottom:24px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications > .fb-namecard-spec-header {
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    gap:10px;
    min-height:72px;
    padding:12px;
  }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications > .fb-namecard-spec-header .fb-namecard-specification-thumb { width:72px; height:46px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-spec-summary-copy h1 { font-size:18px; line-height:25px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications > .fb-production-group { padding:0 14px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications > .upload-detail-info { padding:16px 14px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications > .option-area { padding:0 14px 14px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info > .fb-namecard-fixed-print .fb-base-option-current { grid-template-columns:62px minmax(0,1fr) auto; gap:8px; padding-inline:12px; }
  .fb-namecard-size-control { grid-template-columns:64px minmax(0,1fr); gap:10px; padding-bottom:14px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-list-head { padding:16px 0 9px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-list-head p { font-size:14px !important; line-height:21px !important; }
  .fb-finishing-choice-rail { gap:5px; }
  .fb-finishing-choice { min-height:82px; gap:5px; padding:5px 3px; border-radius:7px; }
  .fb-finishing-choice-media { height:46px; border-radius:4px; }
  .fb-finishing-choice-label { font-size:13px; line-height:19px; }
  .fb-finishing-choice-check { top:3px; right:3px; width:18px; height:18px; font-size:11px; }
  .fb-finishing-config-title { padding:14px 12px 0; font-size:14px; line-height:20px; }
  .fb-finishing-estimate-notice { display:block; margin-top:8px; padding:10px 12px; font-size:14px; line-height:21px; }
  .fb-finishing-estimate-notice strong { display:block; margin-bottom:2px; }
}

@media(max-width:359px) {
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications > .fb-namecard-spec-header { grid-template-columns:64px minmax(0,1fr); gap:8px; padding-inline:10px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications > .fb-namecard-spec-header .fb-namecard-specification-thumb { width:64px; height:42px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-spec-summary-copy h1 { font-size:17px; line-height:23px; }
  .fb-namecard-fixed-meta { gap:3px 10px; margin-top:3px; font-size:11px; line-height:17px; }
  .fb-namecard-fixed-meta > span + span::before { left:-6px; }
  .fb-finishing-choice-rail { gap:4px; }
  .fb-finishing-choice { min-height:78px; padding-inline:2px; }
  .fb-finishing-choice-media { height:43px; }
}

@media(max-width:959px) {
  .fb-order-product-identity { display:none; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications > .fb-namecard-spec-header { display:grid; }
}

/* Full-width namecard specification and single-action route ---------------- */
.fb-detail-renewal .fb-entry-page .fb-namecard-size-control { margin:0 0 16px; padding:0 0 16px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info .upload-form-grid { grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:12px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info [data-entry-spec-section="size"],
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info [data-fb-quantity-host] { min-width:0; }

.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .opt-header-paper-cut-row { display:none !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .opt-header-paper-cut-row .opt-sub-selects { grid-template-columns:minmax(0,1fr) !important; min-width:0; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .paper-cut-select-bar { display:grid; grid-template-columns:18px auto minmax(0,1fr) auto; width:100%; min-height:52px; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--bj-line,#e5e2de); border-radius:8px; background:var(--bj-soft-surface,#f6f5f2); cursor:pointer; }
.fb-namecard-paper-cut-check { display:grid; width:18px; height:18px; flex:0 0 18px; place-items:center; border-radius:50%; background:#e4efe9; color:#2e6a4e; font-size:11px; font-weight:800; }
.fb-namecard-paper-cut-label { flex:0 0 auto; color:var(--bj-ink,#20201e); font-size:14px; line-height:20px; white-space:nowrap; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .paper-cut-select-text { min-width:0; overflow:visible; color:var(--bj-muted,#6f6b66); font-size:14px; line-height:20px; white-space:normal; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .paper-cut-select-text::before { content:'·'; margin-right:6px; color:var(--bj-tertiary,#918e87); }
.fb-namecard-paper-cut-action { flex:0 0 auto; margin-left:auto; color:var(--bj-ink,#20201e); font-size:13px; font-weight:700; white-space:nowrap; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .paper-cut-select-arrow { display:none; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .paper-cut-select-bar:focus-visible { outline:2px solid #5579a3; outline-offset:3px; }
.fb-namecard-paper-cut-explanation { margin:12px 0; color:var(--bj-muted,#6f6b66); font-size:13px; line-height:20px; word-break:keep-all; }
.paper-cut-popup .paper-spec-item.is-readonly { cursor:default; }
/* ══ 종이 배치 산출 기준 — 후보 접힘·펼침 (사장님 20260928 「다른 배치들도 이렇게 접힌 상태에서 펼쳐지게」) ══
 * 창은 body 에 붙어 페이지 범위(.page-wrap[data-namecard-shared-entry]) 밖이다 — 창 클래스(is-layout-evidence, factory.js)로 좁힌다.
 * 줄 = 옅은 면 한 장(테두리·구분선 없음 · 줄 사이 8) · 머리 52(위아래 16·좌우 16) · 펼친 그림은 그 면 안의 흰 판(안쪽 8).
 * 꺾쇠는 정본 펼침 줄 표시(bojagi-design-system.css .bj-disclosure__indicator)와 같은 꼴을 여기 둔다 — 폰(/m/ 머리)은 정본 시트를
 * 싣지 않아 그 클래스가 폭 0 으로 사라졌다(20260928 실측). 두 변 네모를 돌린 꼴이라 꼭짓점 쪽으로 3px 치우친 것을 되민다. */
.paper-cut-popup-wrap.is-layout-evidence .fb-namecard-paper-cut-explanation { margin:0 0 16px; }
.paper-cut-popup-wrap.is-layout-evidence .paper-cut-popup-list { display:grid; flex:0 0 auto; gap:8px; overflow:visible; }
.paper-cut-popup-wrap.is-layout-evidence .paper-spec-item { display:block; padding:0; border-radius:8px; background:var(--bj-soft-surface,#f5f5f3); color:var(--bj-ink,#181817); font-size:14px; line-height:20px; transition:none; }
.paper-cut-popup-wrap.is-layout-evidence .paper-spec-item[hidden] { display:none; }
.paper-cut-popup-wrap.is-layout-evidence .paper-cut-more { display:flex; width:100%; align-items:center; justify-content:center; gap:10px; margin:12px 0 0; padding:14px 16px; border:0; border-radius:8px; background:var(--bj-soft-surface,#f5f5f3); color:var(--bj-ink,#181817); font:inherit; font-weight:700; cursor:pointer; }
.paper-cut-popup-wrap.is-layout-evidence .paper-cut-more .paper-spec-chevron { width:9px; height:9px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.paper-cut-popup-wrap.is-layout-evidence .paper-cut-more[aria-expanded="true"] .paper-spec-chevron { transform:translateY(2px) rotate(225deg); }
.paper-cut-popup-wrap.is-layout-evidence .paper-spec-item.is-insufficient { opacity:1; }
.paper-cut-popup-wrap.is-layout-evidence .paper-spec-head { display:flex; width:100%; min-height:52px; align-items:center; gap:8px; margin:0; padding:16px; border:0; border-radius:8px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.paper-cut-popup-wrap.is-layout-evidence .paper-spec-head.is-static { cursor:default; }
.paper-cut-popup-wrap.is-layout-evidence .paper-spec-badge { flex:0 0 auto; margin-right:0; }
.paper-cut-popup-wrap.is-layout-evidence .paper-spec-label { flex:1 1 auto; min-width:0; overflow:visible; white-space:normal; word-break:keep-all; }
.paper-cut-popup-wrap.is-layout-evidence .paper-spec-note { margin-left:4px; color:var(--bj-danger,#a14b46); font-size:13px; font-weight:600; white-space:nowrap; }
.paper-cut-popup-wrap.is-layout-evidence .paper-spec-price { flex:0 0 auto; color:var(--bj-ink,#181817); font-weight:700; white-space:nowrap; }
.paper-cut-popup-wrap.is-layout-evidence .paper-spec-chevron { width:10px; height:10px; flex:0 0 auto; border-right:1px solid currentColor; border-bottom:1px solid currentColor; color:var(--bj-muted,#66635e); transform:translateY(-3px) rotate(45deg); }
.paper-cut-popup-wrap.is-layout-evidence .paper-spec-head[aria-expanded="true"] .paper-spec-chevron { transform:translateY(3px) rotate(225deg); }
.paper-cut-popup-wrap.is-layout-evidence .paper-spec-panel { padding:0 8px 8px; }
.paper-cut-popup-wrap.is-layout-evidence .paper-spec-panel .paper-cut-popup-svg { height:320px; padding:12px; border-radius:4px; background:var(--bj-clean,#fff); }
.paper-cut-popup-wrap.is-keyboard-nav .paper-spec-head:focus-visible { outline:2px solid var(--bj-charcoal,#1a1a18); outline-offset:-3px; }
@media (max-width:768px) {
  .paper-cut-popup-wrap.is-layout-evidence .paper-spec-panel .paper-cut-popup-svg { height:280px; }
}
.fb-namecard-paper-change { margin-left:auto; color:var(--bj-muted,#6f6b66); font-size:14px; font-style:normal; font-weight:700; line-height:20px; text-decoration:underline; text-underline-offset:3px; }
.fb-paper-layout-status { display:grid; width:100%; min-height:58px; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:10px; margin:10px 0 0; padding:10px 12px; border:1px solid var(--bj-line,#e5e2de); border-radius:8px; background:var(--bj-soft-surface,#f6f5f2); color:var(--bj-ink,#20201e); font:inherit; text-align:left; cursor:pointer; }
.fb-paper-layout-icon { display:grid; width:20px; height:20px; place-items:center; border-radius:50%; background:#e4efe9; color:#2e6a4e; font-size:11px; font-weight:800; }
.fb-paper-layout-copy { display:grid; min-width:0; gap:2px; }
.fb-paper-layout-copy strong { font-size:14px; line-height:20px; }
.fb-paper-layout-state { color:var(--bj-muted,#6f6b66); font-size:13px; line-height:19px; word-break:keep-all; }
.fb-paper-layout-action { color:var(--bj-ink,#20201e); font-size:13px; font-weight:700; white-space:nowrap; }
.fb-paper-layout-status[data-state="loading"] { cursor:progress; }
.fb-paper-layout-status[data-state="loading"] .fb-paper-layout-icon { background:#eceae6; color:#918e87; }
.fb-paper-layout-status[data-state="loading"] .fb-paper-layout-icon { font-size:0; }
.fb-paper-layout-status[data-state="loading"] .fb-paper-layout-icon::after { content:''; width:10px; height:10px; border:2px solid #b7b2aa; border-top-color:#5f5b55; border-radius:50%; animation:fbPaperLayoutSpin .8s linear infinite; }
.fb-paper-layout-status[data-state="empty"] .fb-paper-layout-icon { background:#eceae6; color:#918e87; }
.fb-paper-layout-status[data-state="error"] { border-color:#d9b8b8; background:#fff8f8; cursor:default; }
.fb-paper-layout-status[data-state="error"] .fb-paper-layout-icon { background:#f4dede; color:#9d3f3f; }
.fb-paper-layout-status[data-state="error"] .fb-paper-layout-icon::before { content:'!'; }
.fb-paper-layout-status[data-state="empty"] .fb-paper-layout-action,
.fb-paper-layout-status[data-state="loading"] .fb-paper-layout-action,
.fb-paper-layout-status[data-state="error"] .fb-paper-layout-action { visibility:hidden; }
.fb-paper-layout-status:focus-visible { outline:2px solid #5579a3; outline-offset:2px; }
@keyframes fbPaperLayoutSpin { to { transform:rotate(360deg); } }

/* Print details are one full-width decision group. The former shared option
   grid reserved a blank legacy label column and made the customer controls
   look subordinate to an unrelated field. */
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-header-digital-row,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-header-uv-row,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-header-master-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) !important;
  gap:8px;
  width:100%;
  margin-top:12px;
  padding:14px 0 0 !important;
  border-top:1px solid var(--bj-line,#e5e2de) !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-header-digital-row[style*="display: none"],
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-header-uv-row[style*="display: none"],
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-header-master-row[style*="display: none"] { display:none !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .fb-production-sub-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) !important;
  gap:8px;
  width:100%;
}
/* 「별색」만 14px/700 먹색이라 다른 줄 이름(13px/600 muted)과 다른 층위로 보였다(UV 화면, 사장님 지적 20260917). */
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .fb-production-sub-label {
  display:block;
  color:var(--bj-muted,#66635e);
  font-size:13px;
  font-weight:600;
  line-height:20px;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .fb-production-sub-controls-full,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .fb-production-sub-grid .opt-sub-selects {
  grid-column:1 !important;
  width:100% !important;
  margin:0 !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-sub-divider { display:none !important; }
.fb-print-side-mode { display:grid; grid-template-columns:88px repeat(2,minmax(0,1fr)); align-items:center; gap:8px; width:100%; margin:0 0 4px; }
.fb-print-side-label { color:var(--bj-muted,#6f6b66); font-size:14px; font-weight:700; line-height:20px; }
.fb-print-side-mode button { min-height:48px; border:1px solid var(--bj-line,#e5e2de); border-radius:8px; background:#fff; color:var(--bj-muted,#6f6b66); font:inherit; font-size:14px; font-weight:650; cursor:pointer; }
.fb-print-side-mode button:hover:not(.is-active) { border-color:var(--bj-line-strong,#938d86); }
.fb-print-side-mode button.is-active { border-color:var(--bj-ink,#20201e); color:var(--bj-ink,#20201e); box-shadow:inset 0 0 0 1px var(--bj-ink,#20201e); }
.fb-print-side-mode button:focus-visible { outline:2px solid #5579a3; outline-offset:2px; }
/* 레터프레스 = 단면 고정(사장님 20260919 뒷면 인쇄 불가) — 닫힌 「양면」은 흐리게, 이유는 바로 아래 한 줄(13px/400, 위 8). */
.fb-print-side-mode button[disabled] { background:var(--bj-soft-surface,#f6f5f2); color:var(--bj-tertiary,#918e87); border-color:var(--bj-line,#e5e2de); cursor:not-allowed; }
.fb-print-side-mode button[disabled]:hover { border-color:var(--bj-line,#e5e2de); }
.fb-print-side-lock-note { margin:8px 0 0; color:var(--bj-muted,#66635e); font-size:13px; font-weight:400; line-height:20px; word-break:keep-all; }
.fb-print-side-lock-note[hidden] { display:none; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .is-single-sided .fb-production-sub-controls-full select:last-child { background-color:var(--bj-soft-surface,#f6f5f2); color:var(--bj-tertiary,#918e87); }
@media(max-width:959px) {
  .fb-print-side-mode { grid-template-columns:64px repeat(2,minmax(0,1fr)); gap:8px; }
}
/* ══ 옵셋(UV) 「인쇄 색」 — 면마다 원색 한 칸 + 별색 도수 한 칸 (사장님 20260920) ═══════════════════════
 * 종전 「별색」 줄(앞·뒤 별색 도수 두 칸)이 이 줄로 바뀐다 — 정본 별색 select 는 상태로 남고 화면에서만 걷는다(detail-renewal.js decorateNamecardInkChoice).
 * 줄 하나 = 면 이름(앞면·뒷면) + 원색 칸(컬러 4도·먹 1도·별색만) + 별색 칸(없음·1도…4도). 첫 판(조합 여섯을 한 칸에)은 별색 도수가 조합 속에 숨어
 * 사장님이 「별색은 별색 1도·2도로 골라야」 하셨다 — 두 단계로. 이름은 후가공 세부 줄 이름과 같은 무게(14px/500 muted), 값 칸은 다른 select 와 같은 48.
 * 폰(390)에서 두 칸이 나란히 서려면 칸 안쪽 여백을 줄인다(정본 select 는 0 42 0 14 — 「먹 1도」·「별색 없음」이 들어갈 만큼). 단면이면 뒷면 줄은 없다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .fb-production-sub-grid[data-print-ink] > .opt-sub-selects { display:none !important; }
.fb-print-ink-rows { display:grid; row-gap:8px; width:100%; }
.fb-print-ink-row { display:grid; grid-template-columns:40px minmax(0,1fr) minmax(0,1fr); align-items:center; column-gap:8px; }
.fb-print-ink-row[hidden] { display:none; }
.fb-print-ink-face { display:flex; align-items:center; align-self:stretch; color:var(--bj-muted,#66635e); font-size:14px; font-weight:500; line-height:20px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .fb-print-ink-select { width:100%; min-width:0; min-height:48px; padding:0 34px 0 12px; background-position:calc(100% - 12px) 50%; font-size:14px; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .fb-print-ink-select:disabled { background-color:var(--bj-soft-surface,#f6f5f2); color:var(--bj-tertiary,#918e87); opacity:1; }

/* Direction is one choice, shown as a check radio instead of a filled tab. */
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-orient-toggle { height:52px; overflow:visible; gap:8px; border:0; background:transparent; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-orient-btn { min-height:52px; gap:9px; border:1px solid var(--bj-line,#e5e2de); border-radius:8px; background:#fff; color:var(--bj-muted,#6f6b66); }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-orient-btn:last-child { border-right:1px solid var(--bj-line,#e5e2de); }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-orient-btn:hover:not(.is-active) { border-color:var(--bj-line-strong,#938d86); background:#fff; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-orient-btn.is-active { border-color:var(--bj-ink,#20201e); background:#fff; color:var(--bj-ink,#20201e); box-shadow:inset 0 0 0 1px var(--bj-ink,#20201e); }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-orient-check { position:relative; display:block; width:18px; height:18px; flex:0 0 18px; border:1px solid var(--bj-line-strong,#938d86); border-radius:4px; background:#fff; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-orient-btn.is-active .fb-orient-check { border-color:var(--bj-ink,#20201e); background:var(--bj-ink,#20201e); }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-orient-btn.is-active .fb-orient-check::after { content:''; position:absolute; top:3px; left:5px; width:5px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-orient-btn .fb-orient-label,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-orient-btn.is-active .fb-orient-label { color:inherit; }

.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-list-head { justify-content:space-between; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-list-head p { margin-left:auto; }
.fb-finishing-choice-rail { grid-template-columns:repeat(5,minmax(0,1fr)); }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface > .opt-post-section[data-process-group="finishing"] { width:100%; }
.fb-finishing-config-title { display:none; width:100%; min-height:52px; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; margin:0; padding:13px 16px; border:0; background:#fff; color:var(--bj-ink,#20201e); font:inherit; text-align:left; cursor:pointer; }
.opt-post-section.is-active .fb-finishing-config-title,
.opt-post-section.is-locked-on .fb-finishing-config-title { display:grid; }
.fb-finishing-config-label { font-size:15px; font-weight:700; line-height:22px; }
.fb-detail-renewal .fb-option-surface .fb-finishing-config-summary { min-width:0; overflow:hidden; color:var(--bj-muted,#6f6b66); font-size:14px !important; font-weight:400; line-height:20px !important; text-overflow:ellipsis; white-space:nowrap; }
.fb-finishing-config-chevron { transition:transform .16s ease; }
.fb-finishing-config-title[aria-expanded="true"] .fb-finishing-config-chevron { transform:rotate(180deg); }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface > .opt-post-section[data-process-group="finishing"] .opt-post-sub { display:none !important; width:100%; margin:0 !important; padding:16px !important; border-top:1px solid var(--bj-line,#e5e2de); }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface > .opt-post-section[data-process-group="finishing"].is-config-open .opt-post-sub { display:block !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface .opt-post-sub > *,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface .opt-post-sub .gold-stamp-row,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface .opt-post-sub .gold3d-stamp-row,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface .opt-post-sub .emboss-stamp-row,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface .opt-post-sub .lp-stamp-row { width:100%; max-width:none; margin-left:0 !important; }

/* The selector and every expanded decision use the same full content column.
   Legacy production-option CSS reserved a 148px label gutter inside the paper
   catalog and finishing configuration, which made both look accidentally
   nested and left too little room for the actual controls. */
/* 좌우 0 은 PC 패널 칸(806)에 맞추려는 것이다. 768 이하에서 종이 목록은 화면을 덮는 시트라
 * 같은 0 이 탭·사진을 화면 끝에 붙였다(아이폰 390 실측 20260917) — 시트의 16px 여백을 돌려준다. */
@media (min-width:769px) {
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface #opt-paper .fb-paper-toolbar {
    margin:8px 0 0 !important;
  }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface #opt-paper .opt-select-list {
    padding:12px 0 16px !important;
  }
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info .upload-form-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info [data-entry-spec-section="size"] { display:block !important; }
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info [data-entry-spec-section="size"] .fb-orient-group { width:100%; }
/* 패널의 컨트롤은 한 키로 선다 — 44px(모양 단추·수량 칸·×·=·총). 크기 칸만 52 여서 한 줄만 키가 컸다
 * (사장님 2026-09-20 「크기 입력만 좀 높은 건가, 부수 넣는 거에 맞춰야 되는 거 아니야」 — 실측 52 대 44). */
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-size-inputs,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .spec-size-input,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-size-inputs .opt-size-input {
  height:44px !important;
  min-height:44px !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-md-wrap .order-qty-box,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-md-multiply,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-md-equals,
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-md-total {
  height:44px !important;
  min-height:44px !important;
}
.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-md-controls { height:44px; }

#fbNamecardPriceSheet .order-detail-row[data-key="paper"],
#mobileOrderPanel .order-detail-row[data-key="paper"] { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:4px 10px; }
#fbNamecardPriceSheet .order-detail-row[data-key="paper"] .order-detail-label,
#mobileOrderPanel .order-detail-row[data-key="paper"] .order-detail-label { min-width:0; word-break:keep-all; overflow-wrap:normal; }
#fbNamecardPriceSheet .order-detail-row[data-key="paper"] .order-detail-price,
#mobileOrderPanel .order-detail-row[data-key="paper"] .order-detail-price { white-space:nowrap; }
.fb-order-paper-cut-summary { display:block; grid-column:1 / -1; min-width:0; margin:0; color:var(--bj-muted,#6f6b66); font-size:13px; line-height:19px; word-break:keep-all; }
.fb-namecard-start-confirm { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 8px; color:var(--bj-muted,#6f6b66); font-size:14px; line-height:21px; }
.fb-namecard-start-confirm strong { color:var(--bj-ink,#20201e); font-size:14px; }
.fb-detail-renewal .fb-entry-page #pressb-order-start .fb-namecard-start-card > p { color:var(--bj-muted,#6f6b66); font-size:14px; line-height:21px; }
.fb-detail-renewal .fb-entry-page #pressb-order-start .fb-namecard-start-detail { color:var(--bj-muted,#6f6b66); font-size:13px; line-height:19px; }
.fb-detail-renewal .fb-entry-page #fbNamecardPriceSheet .order-detail-row,
.fb-detail-renewal .fb-entry-page #mobileOrderPanel .order-detail-row { font-size:14px; line-height:20px; }
.fb-namecard-primary-cta { display:flex; width:100%; min-height:50px; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border:1px solid var(--bj-ink,#20201e); border-radius:8px; background:var(--bj-ink,#20201e); color:#fff; font:inherit; font-size:14px; font-weight:750; cursor:pointer; }
.fb-namecard-primary-cta:hover { background:#30302d; }
.fb-namecard-primary-cta:focus-visible { outline:2px solid #5579a3; outline-offset:2px; }
.fb-namecard-primary-cta:disabled { cursor:wait; opacity:.5; }
.fb-namecard-primary-cta--inline { min-height:52px; font-size:15px; }
/* 견적 패널이 시작 행동을 소유한다 — 총액을 보여 주는 자리와 살 수 있는 자리를 같게 둔다. */
.fb-namecard-primary-cta--panel { min-height:56px; margin-top:16px; font-size:16px; }
/* 디자인을 봐야 답할 수 있는 결정은 상세에서 묻지 않는다 — 편집 화면이 소유한다.
 * 이 파일에 두는 이유: 같은 파일의
 *   .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface { display:block !important }
 *   .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-sub-selects { display:grid !important }
 * 가 detail-renewal.css 의 3-class 규칙을 이긴다. 같은 자리에서 더 구체적으로 끈다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications [data-namecard-editor-owned="face-color"],
/* 크기는 옵션이 아니라 상품 정체성이고(다른 규격은 다른 상품 코드), 용지 배치는
 * 종이를 고를 때 보는 근거다. 첫 화면의 결정 목록에서 뺀다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-size-control,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .paper-cut-select-bar,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .opt-header-paper-cut-row { display:none !important; }
/* (뒤집힘 20260918) 건수(.fb-md-design-wrap)와 × 는 여기서 감추지 않는다 — 앞서 「건수는 고객 어휘가 아니다」로 껐지만,
 * 사장님이 수량을 「100장 × 몇 건 = 총 몇 장」으로 읽게 하라고 하셨다. 한 주문에 서로 다른 명함(사람마다)을 여러 벌
 * 담는 길이 이 칸 하나다 — 감추면 복수 명함 주문이 화면에서 사라진다. 모양은 아래 「수량 = 100장 × 건수」 블록. */
/* (뒤집힘 20260919) 배치 안내(.fb-paper-layout-status)도 다시 보인다 — 앞서 「용지 배치는 종이를 고를 때 보는 근거」라며
 * 회색 상자(58px)째 껐지만, 사장님이 「종이 옆에 절수, 누르면 명함이 앉혀진 배치 그림」을 보이라 하셨다.
 * 상자가 아니라 종이 칸 밑 한 줄(「종이 한 장에 명함 20개 · 배치 보기」)로 — 아래 「종이 줄의 절수·배치 보기」 블록.
 * 정본 셀렉트바(.paper-cut-select-bar)는 그대로 감춘 채 그 줄이 대신 눌러 준다. */
.fb-namecard-panel-note { margin:8px 0 0; font-size:14px; line-height:20px; color:var(--bj-muted,#66635e); text-align:center; }

/* The specification is the only quantity editor. The quote rail is a receipt,
   so it must never acquire the legacy detached dropdown affordance. */
.fb-detail-renewal .fb-entry-page .order-detail-row[data-key="design"] .order-detail-qty-text-label,
.fb-detail-renewal .fb-entry-page .order-detail-row[data-key="design"] .order-detail-qty-text { display:inline !important; }
.fb-detail-renewal .fb-entry-page .order-detail-row[data-key="design"] .order-detail-qty-dd { display:none !important; }
html.fb-detail-renewal body[data-fb-order-method="shared"] #btnMobileOrder[data-namecard-start-primary] > .order-button-label { display:inline !important; }
html.fb-detail-renewal body[data-fb-order-method="shared"] #btnMobileOrder[data-namecard-start-primary] > .fb-shared-mobile-label { display:none !important; }

@media(max-width:767px) {
  .fb-detail-renewal .fb-entry-page #pressb-order-start,
  .fb-detail-renewal .fb-entry-page #pressb-product-proof,
  .fb-detail-renewal .fb-entry-page #pressb-story-start,
  .fb-detail-renewal .fb-entry-page #pressb-finish-start,
  .fb-detail-renewal .fb-entry-page #tab-schedule,
  .fb-detail-renewal .fb-entry-page #tab-cs { scroll-margin-top:72px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .upload-detail-info .upload-form-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .paper-cut-select-bar {
    display:grid;
    grid-template-columns:18px minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    row-gap:2px;
    min-height:62px;
  }
  .fb-namecard-paper-cut-check { grid-column:1; grid-row:1; }
  .fb-namecard-paper-cut-label { grid-column:2; grid-row:1; }
  .fb-namecard-paper-cut-action { grid-column:3; grid-row:1; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .paper-cut-select-text {
    grid-column:2 / 4;
    grid-row:2;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
  }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .paper-cut-select-text::before { content:none; }
  .fb-finishing-choice-rail { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-group { scroll-margin-bottom:calc(var(--bj-fixed-action-clearance,104px) + 16px); }
  .fb-finishing-choice { min-height:82px; }
  .fb-finishing-config-title { grid-template-columns:auto minmax(0,1fr) auto; padding:12px; }
  .fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-finishing-surface > .opt-post-section[data-process-group="finishing"].is-config-open .opt-post-sub { padding:14px 12px !important; }
  .fb-namecard-start-confirm,
  .fb-namecard-primary-cta { display:none; }
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-bottom-bar { display:flex; flex-wrap:wrap; }
  /* 시작 단추의 사유(「먼저 디자인을 골라 주세요」)는 바 안 첫 줄 — 금액·단추 줄 위에 한 줄로. 단추 옆에 두면 단추가 세로로 찌그러진다(실측 20260919). */
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-bottom-bar > .fb-namecard-start-reason { flex:1 1 100%; margin:0; padding:8px 12px 0; font-size:13px; line-height:19px; }
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-bottom-bar > .fb-namecard-start-reason[hidden] { display:none; }
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-total-label,
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-product-name { font-size:13px; line-height:19px; }
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-btn-order { min-width:174px; padding-inline:13px; font-size:15px; line-height:21px; }
}

/* 결정은 금액 옆에서 내린다 — 사양 카드가 우측 패널의 본문이 된다 (PC ≥960).
 * 960 미만에서 패널은 바텀시트라 카드가 시트 안에 갇힌다. 그래서 그 폭에서는
 * detail-renewal.js 의 syncNamecardSpecPlacement() 가 카드를 본문 흐름으로 되돌리고,
 * 아래 규칙은 [data-namecard-spec-placement="panel"] 일 때만 걸린다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications {
  overflow:visible;
  margin:16px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications > .upload-detail-info {
  margin:0;
  padding:16px 0 0;
  border:0;
  border-top:1px solid var(--bj-line,#e5e2de);
  background:transparent;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications > .fb-production-group,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications > .option-area { padding:0; }
/* 「인쇄와 종이」라는 제목은 패널 안에서 할 일이 없다. 구분선이 그 역할을 한다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-group > .fb-option-group-head { display:none !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface {
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--bj-line,#e5e2de);
}

/* 한 줄에 한 결정. 라벨은 왼쪽 68px, 컨트롤이 남는 폭을 전부 쓴다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-detail-info .upload-form-grid {
  grid-template-columns:minmax(0,1fr);
  gap:8px;
}
/* display 은 이 규칙의 일이 아니다. 수량 편집기는 단건용(.fb-print-info-group)과
 * 다건용(.fb-multi-design-group) 둘이 있고 쓰지 않는 쪽은 inline style 로 꺼져 있다.
 * 여기서 display 를 !important 로 덮으면 수량칸이 두 개 뜼다(실측 20260917). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-detail-info .upload-form-grid > .upload-form-group {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:16px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}
/* 줄 이름이 아직 안 붙은 칸에 68px 기둥을 주면 수량칸이 그 기둥으로 들어가
 * 두 줄로 접힌다(실측 20260917). 이름이 있는 줄에만 기둥을 세운다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-detail-info .upload-form-grid > .upload-form-group:has(> .fb-panel-row-label) {
  grid-template-columns:68px minmax(0,1fr);
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-detail-info .upload-form-grid > [data-entry-spec-section="size"] {
  display:grid !important;
}
/* 인쇄 방식 줄만 20px 안으로 들어가 종이·방향과 왼쪽 끝이 어긋난다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .opt-print-header > .opt-header-row {
  padding:0 !important;
}
.fb-panel-row-label { display:flex; min-height:44px; align-items:center; color:var(--bj-muted,#66635e); font-size:14px; font-weight:700; line-height:20px; }
/* 원칙 5 — 뒷면이 있는 디자인을 단면으로 둘 때. 후가공 안내(.fb-finishing-choice-feedback)와 같은 정본 안내 면. */
.fb-namecard-face-notice { display:flex; flex-direction:column; gap:4px; margin:8px 0 16px; padding:14px 16px; border-radius:8px; background:var(--bj-information-surface); color:var(--bj-muted,#66635e); font-size:13px; font-weight:400; line-height:20px; word-break:keep-all; }
.fb-namecard-face-notice[hidden] { display:none; }
/* 인쇄 방식 목록을 펼친 동안에는 안내가 목록 아래(「종이」 바로 위)로 밀려 [단면][양면]과 멀어진다(실측 y200 대 y503).
 * 방식을 고르는 동안만 접어 두고, 닫으면 제자리([단면][양면] 바로 아래)에 다시 뜬다. */
.fb-namecard-selectable-print > .opt-print-header.open ~ .fb-namecard-face-notice { display:none !important; }
.fb-namecard-face-notice strong { color:var(--bj-ink,#181817); font-size:14px; font-weight:600; line-height:20px; }
/* 비어 있는 필수 칸 — 금액 내역의 「선택 필요」(.order-config-status.is-required)와 같은 표시. */
.fb-panel-row-status { display:inline-flex; align-items:center; margin-left:8px; padding:0 8px; border:1px solid #ead5ba; border-radius:999px; background:#fff7ea; color:#9a5a16; font-size:13px; font-weight:700; line-height:20px; white-space:nowrap; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-toggle { height:44px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-btn { min-height:44px; }
/* 안쪽 14 — 정본 수량 칸만 12 라 값이 다른 줄보다 2px 왼쪽에서 시작했다(캡처 검토 20260917). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .order-qty-box { height:44px !important; min-height:44px !important; padding-left:14px !important; padding-right:14px !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-print-side-mode { grid-template-columns:68px repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-print-side-label { margin-right:8px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-print-side-mode button { min-height:44px; }

/* 크기는 상품 정체성이라 첫 화면의 「결정 목록」에서 뺐지만, 금액 패널의 머리에서는
 * 무엇을 만드는지 말해 주는 줄이다. 다른 규격으로 가는 길을 여기서만 연다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-size-control {
  display:grid !important;
  grid-template-columns:68px minmax(0,1fr);
  align-items:center;
  gap:16px;
  margin:0 0 8px;
  padding:0;
  border-bottom:0;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-field-label { min-height:44px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-size-picker > summary { min-height:44px; }

/* 인쇄 방식과 종이도 다른 줄과 같은 68px 라벨 기둥을 쓴다. 지금은 라벨이 컨트롤 박스
 * «안에» 들어가 있어 크기·방향·수량·인쇄 면과 왼쪽 끝이 어긋난다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .fb-base-option-current {
  display:grid !important;
  grid-template-columns:68px minmax(0,1fr) auto !important;
  align-items:center;
  gap:0 16px !important;
  padding:0 !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .fb-base-option-current > b {
  position:static !important;
  width:auto !important;
  color:var(--bj-muted,#66635e);
  font-size:14px;
  font-weight:700;
  line-height:20px;
  transform:none !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .fb-base-option-current > span {
  min-height:44px !important;
  padding:0 42px 0 14px !important;
}

/* 정체성 밑줄과 사양 카드 윗줄이 18px 사이로 두 번 그어졌다. 한 줄이면 족하다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications > .upload-detail-info {
  padding-top:0;
  border-top:0;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .opt-header-digital-row,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .opt-header-uv-row,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .opt-header-master-row {
  margin-top:8px;
  padding-top:0 !important;
  border-top:0;
}
/* 금액 내역은 총액 아래로 접는다. 접힘 안에서만 옛 목록 머리(선택 내역)를 쓴다. */
/* 총액 줄이 곧 손잡이다 — 접혀 있을 때 높이가 늘지 않는다(사장님 20260917). */
.fb-namecard-quote-breakdown { margin:0; }
/* 총액 줄을 손잡이로 만들면서 선이 꺾쇠만큼 짧아졌다(실측 382 → 358). 선은 묶음의 것이니
   묶음(details)이 긋고, 그 안의 총액 줄은 자기 선을 내려놓는다. */
.fb-namecard-quote-breakdown > summary { display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; }
.fb-namecard-quote-breakdown > summary > .order-summary-total {
  flex:1 1 auto; min-width:0;
  margin:0 !important; padding:0 !important; border-top:0 !important;
}
/* 레이저처럼 금액이 아직 안 정해지는 후가공을 고르면 정본이 금액 자리에 두 줄짜리 문장을
   넣는다(「기본 제작 금액 8,850원」 + 「+ 레이저 커팅 금액 미포함」). 그러면 45px 짜리 금액
   덩어리 옆에서 「총 제작 금액」 이름이 홀로 떠 어긋난다(실측 20260917). 정본은 견적마다 이
   자리를 다시 그리므로 DOM 을 옮기지 않고 정렬로 잡는다 — 이름은 가운데, 문장은 숫자와 같은
   오른쪽 모서리에 세로로 쌓는다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .order-summary-total { align-items:center; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .order-total-price {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  text-align:right;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-confirmed-base-price {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-confirmed-base-price small,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-pending-price-note {
  color:var(--bj-muted,#66635e);
  font-size:13px;
  font-weight:400;
  line-height:19px;
}
/* 「(1장당 233원)」이 이름보다 6px 안으로 들어가 있었다(style.css 의 margin-left) —
   두 줄은 같은 세로선에서 시작해야 한다(사장님 20260917). */
.fb-namecard-quote-breakdown .order-per-unit { margin-left:0 !important; }
.fb-namecard-quote-breakdown {
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--bj-line,#ece9e6);
}
/* 꺾쇠는 회전한 네모라 상자가 제 크기보다 커져 칸 밖으로 1px 삐져나왔다 — 상자를 고정하고
   그 안에서 돌린다. 세로도 금액과 같은 줄 가운데에 선다. */
.fb-quote-breakdown-chevron {
  position:relative;
  flex:0 0 auto;
  width:12px; height:12px;
  border:0;
  transform:none;
}
.fb-quote-breakdown-chevron::after {
  content:'';
  position:absolute;
  left:1px; top:0;
  width:8px; height:8px;
  border-right:2px solid var(--bj-muted,#66635e);
  border-bottom:2px solid var(--bj-muted,#66635e);
  transform:rotate(45deg);
}
.fb-namecard-quote-breakdown[open] .fb-quote-breakdown-chevron::after { top:3px; transform:rotate(-135deg); }
.fb-namecard-quote-breakdown > summary > .order-summary-total { margin:0; }
.fb-namecard-quote-breakdown > summary::-webkit-details-marker { display:none; }
/* Block surface focus: the price disclosure row underlines its label; the full-width "more" row underlines itself. No box. */
.fb-namecard-quote-breakdown > summary:focus-visible { outline:none; }
.fb-namecard-quote-breakdown > summary:focus-visible .order-label,
html.fb-detail-renewal .fb-namecard-work-more:focus-visible { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
html.fb-detail-renewal .fb-namecard-work-more:focus-visible { outline:none; box-shadow:none; }
.fb-namecard-quote-breakdown[open] > summary { margin-bottom:4px; }
html.fb-detail-renewal .page-wrap[data-namecard-spec-placement="panel"] .order-summary .fb-namecard-quote-breakdown .order-summary-head { margin-top:0; }
/* 금액 내역의 리듬도 사다리로 — 공통 규칙은 줄 12/12 · 제목 14/10 이라 틈이 11~13 으로 흩어졌다(전수 점검 20260917). */
#fbNamecardPriceSheet .order-summary-head,
#mobileOrderPanel .order-summary-head { padding:16px 0 8px !important; }
#fbNamecardPriceSheet .order-detail-list .order-detail-row,
#mobileOrderPanel .order-detail-list .order-detail-row { padding:16px 0 !important; }
#fbNamecardPriceSheet .fb-quote-calculation > summary,
#mobileOrderPanel .fb-quote-calculation > summary { min-height:44px; padding:8px 0 !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-md-controls,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-md-wrap .order-qty-box,
/* × = 도 같은 키 — 위 「.fb-entry-page … .fb-md-multiply { height:52px !important }」 가 44 줄 안에서 8 넘쳐 글자가 4px 내려앉는다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-md-multiply,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-md-equals,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-md-total { height:44px !important; min-height:44px !important; }
/* 줄이 모자라면 「= 총 N장」만 둘째 줄로 — 한 줄 산식(사장님 20260918)은 그대로 두되, 320 폭(줄 258px)에서 두 칸이 78px 로
 * 눌려 「500 / 장」·「20 / 건」 이 두 줄로 꺾이고 꺾쇠와 겹쳤다(실측 20260924). 판정은 화면 폭이 아니라 이 칸의 폭이다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-multi-design-group { container-type:inline-size; }
@container (max-width:289px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-md-controls { flex-wrap:wrap; row-gap:0; height:auto !important; }
  /* 빈 줄 하나(100%)가 줄을 끊는다 — 높이 8 이 두 줄 사이 간격(이 패널의 줄 간격)이다. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-md-controls::before { content:''; order:3; flex:0 0 100%; height:8px; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-md-controls > .fb-md-qty-wrap { order:0; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-md-controls > .fb-md-multiply { order:1; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-md-controls > .fb-md-design-wrap { order:2; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-md-controls > .fb-md-equals { order:4; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-md-controls > .fb-md-total { order:5; }
}

/* 종이는 이름이 아니라 금액으로 고른다 — 카드마다 그 종이로 만들었을 때의 총액과
 * 지금 고른 종이 대비 차액을 적는다. 값은 서버 견적(_paperCutResults)을 그대로 쓴다. */
.fb-namecard-paper-amount {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 8px;
  margin:6px 0 0;
  line-height:20px;
}
.fb-namecard-paper-amount strong { color:var(--bj-ink,#20201e); font-size:15px; font-weight:700; }
.fb-namecard-paper-amount span { color:var(--bj-muted,#66635e); font-size:13px; font-weight:600; }
.fb-namecard-paper-amount span[data-amount-direction="cheaper"] { color:#1f6f4a; }
.fb-namecard-paper-amount span[data-amount-direction="same"] { color:var(--bj-tertiary,#918e87); font-weight:500; }
/* 막힌 종이 — 정본(style.css)은 카드 전체를 opacity .4 로 흐려 사유까지 읽기 어렵다.
 * 이름·사진만 물리고, 금액 자리에 적은 사유는 제 농도로 둔다. 누를 때 뜨는
 * 정본 겹침 사유는 같은 말을 두 번 하므로 여기서는 끈다. */
#opt-paper[data-namecard-paper-amounts] .opt-select-card.is-disabled { opacity:1; }
#opt-paper[data-namecard-paper-amounts] .opt-select-card.is-disabled .opt-select-title { color:var(--bj-tertiary,#918e87); }
#opt-paper[data-namecard-paper-amounts] .opt-select-card.is-disabled .opt-select-img { opacity:.5; filter:grayscale(1); }
#opt-paper[data-namecard-paper-amounts] .opt-select-card.is-disabled .opt-select-reason-overlay { display:none; }
.fb-namecard-paper-amount[data-amount-state="unavailable"] { color:var(--bj-muted,#66635e); font-size:13px; font-weight:400; }

/* 인쇄 방식도 종이와 같은 어휘로 고른다 — 총액 + 지금 고른 것과의 차액.
 * 다른 상품의 레거시 표시(.print-est-cost)는 그대로 두고 여기서만 새로 적는다. */
.fb-namecard-print-amount {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 8px;
  margin:8px 0 0;
  line-height:20px;
}
.fb-namecard-print-amount strong { color:var(--bj-ink,#20201e); font-size:15px; font-weight:700; }
.fb-namecard-print-amount span { color:var(--bj-muted,#66635e); font-size:13px; font-weight:600; }
.fb-namecard-print-amount span[data-amount-direction="cheaper"] { color:#1f6f4a; }
.fb-namecard-print-amount span[data-amount-direction="same"] { color:var(--bj-tertiary,#918e87); font-weight:500; }
.fb-namecard-print-amount small { flex:1 0 100%; color:var(--bj-tertiary,#918e87); font-size:12px; line-height:18px; }
/* 금액이 붙는 순간 카드는 한 줄짜리가 아니다. 세로 가운데 정렬을 푼다. */
html.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print .opt-select-list { grid-template-columns:minmax(0,1fr); }
/* 카드 안쪽 14px 때문에 「100장 · 단면 기준 금액입니다」와 카드 글이 서로 다른 세로선에서
   시작했다(실측 806 대 820). 상세 패널에서 이 줄들은 상자가 아니라 목록이다 — 왼쪽 모서리를
   패널의 다른 줄과 맞추고, 사이는 간격이 아니라 선으로 가른다(사장님 20260917). */
html.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print .opt-select-card {
  min-height:44px;
  align-items:flex-start;
  padding:16px 0 !important;
  /* 선은 카드 사이에 한 줄 — 정본 카드의 아래 선까지 남아 디지털·옵셋 사이가 8px 두 줄이었고,
   * 마지막 카드의 아래 선은 「종이」 글자에 0px 로 붙었다(사장님 지적 · 실측 20260917). */
  border-bottom:0 !important;
}
html.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print .opt-select-card + .opt-select-card { border-top:1px solid var(--bj-line,#e5e2de); }
/* 목록을 펼쳐도 지금 고른 방식의 [단면][양면]은 남긴다 — 비교 금액이 그 면 수를 전제한다.
 * 레거시가 .open 에서 면 줄을 셋 다 !important 로 감추므로, 고른 방식의 줄(detail-renewal.js 가 표식)만 되살린다. */
html.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print .opt-print-header.open [data-print-row-active] { display:grid !important; }
/* UV 로 바꿔도 옛 코드가 디지털 줄의 inline display:grid 를 남겨 [단면][양면]이 두 벌 보였다(사장님 지적 20260917).
 * 표식이 붙은 뒤(data-print-rows-marked)에는 고른 방식의 줄만 보인다. 표식 전에는 옛 inline 표시를 따른다. */
html.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-namecard-selectable-print[data-print-rows-marked] :is(.opt-header-digital-row, .opt-header-uv-row, .opt-header-master-row):not([data-print-row-active]) { display:none !important; }
/* 키보드 포커스 테두리가 줄 전체(라벨 「인쇄 방식」까지)를 안쪽으로 감싸 엉뚱한 상자로 보였다(사장님 화면).
 * 포커스 표시는 남기되 값 칸에만 두른다. */
html.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-section-header > .opt-header-row:focus-visible { outline:0 !important; }
html.fb-detail-renewal .fb-entry-page .fb-namecard-specifications .fb-production-surface .opt-section-header > .opt-header-row:focus-visible .fb-base-option-current > span { outline:2px solid #5579a3; outline-offset:2px; }

/* 후가공 줄 — 상세는 고르는 자리가 아니라 「얼마인지」를 알려 주는 자리다. */
.fb-namecard-finishing-row {
  display:grid;
  grid-template-columns:68px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:44px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--bj-line,#e5e2de);
}
.fb-namecard-finishing-label { color:var(--bj-muted,#66635e); font-size:14px; font-weight:700; line-height:20px; }
.fb-namecard-finishing-value { color:var(--bj-ink,#20201e); font-size:15px; line-height:22px; }
.fb-namecard-finishing-open {
  min-height:44px;
  padding:0 2px;
  border:0;
  background:transparent;
  color:var(--bj-muted,#66635e);
  font:inherit;
  font-size:14px;
  font-weight:700;
  line-height:20px;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.fb-namecard-finishing-open:focus-visible { outline:2px solid #5579a3; outline-offset:2px; }
/* 브라우저 기본 [hidden] 은 작성자 CSS 에 진다(20260904 실사고). 여기서 못박는다. */
.fb-namecard-finishing-sheet[hidden] { display:none !important; }
.fb-namecard-finishing-sheet { margin:10px 0 0; padding:14px; border:1px solid var(--bj-line,#e5e2de); border-radius:8px; background:var(--bj-soft-surface,#f6f5f2); }
.fb-namecard-finishing-basis { margin:0 0 8px; color:var(--bj-muted,#66635e); font-size:13px; line-height:19px; }
.fb-namecard-finishing-list { margin:0; padding:0; list-style:none; }
.fb-namecard-finishing-list li {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:10px;
  min-height:32px;
  padding:5px 0;
}
.fb-namecard-finishing-list li + li { border-top:1px solid var(--bj-line,#e5e2de); }
.fb-namecard-finishing-list span { color:var(--bj-ink,#20201e); font-size:14px; line-height:20px; }
.fb-namecard-finishing-list strong { color:var(--bj-ink,#20201e); font-size:15px; font-weight:700; line-height:22px; text-align:right; }
.fb-namecard-finishing-list li[data-finishing-state="unavailable"] strong { color:var(--bj-tertiary,#918e87); font-size:13px; font-weight:600; word-break:keep-all; }
.fb-namecard-finishing-note { margin:10px 0 0; color:var(--bj-muted,#66635e); font-size:13px; line-height:19px; word-break:keep-all; }

/* ── 패널 세로 리듬 정본화 (부록 G-1·G-2) ──────────────────────────────
 * 정본 사다리는 --bj-space-1/2/3 = 8/16/32 다. 10·12·14·15·18 은 그 사다리에
 * 없는 값이라 전부 걷어낸다. 묶음은 넷(정체성 / 주문 틀 / 제작 사양 / 금액과
 * 행동), 구분선은 그 사이 셋뿐이다. 줄과 줄 사이에는 선을 긋지 않는다. */
html.fb-detail-renewal .page-wrap[data-namecard-spec-placement="panel"] .order-summary .fb-order-identity {
  padding-bottom:16px;
}
/* 구분선 1 = 정체성 / 주문 틀. 사양 카드의 margin-top:16 이 아래쪽 16 을 만든다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications > .upload-detail-info {
  margin:0;
  padding:0;
  border:0;
  border-top:1px solid var(--bj-line,#e5e2de);
  padding-top:16px;
  margin-top:0;
  background:transparent;
}
/* 인쇄 방식·종이 줄 사이에는 선이 없다 — 간격 8 만.
 * detail-renewal.css 가 `.fb-option-surface > .opt-section { border-bottom: 1px … !important }`
 * 로 그어 둔다. 특정도로는 이길 수 없어 같은 무게로 끌다(CDP 실측 20260917). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface > .fb-namecard-print-option {
  margin:0;
  padding:0;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface > .opt-section + .opt-section {
  margin-top:8px;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface > .opt-section,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface > .opt-post-section {
  border-bottom:0 !important;
}
/* 구분선 3 = 제작 사양 / 금액과 행동. */
html.fb-detail-renewal .page-wrap[data-namecard-spec-placement="panel"] .order-summary .order-summary-total {
  margin-top:16px;
  padding:16px 0 0;
  border-top:1px solid var(--bj-line,#e5e2de);
}
html.fb-detail-renewal .page-wrap[data-namecard-spec-placement="panel"] .order-summary .fb-namecard-panel-note { margin-top:8px; }
html.fb-detail-renewal .page-wrap[data-namecard-spec-placement="panel"] .order-summary .fb-shared-quote-note { margin-top:8px; }

/* ── 손잡이는 ▾ 하나 (부록 G-3 · H-1) ──────────────────────────────────
 * 실측: 종이 줄은 값 박스를 눌러도 「변경」을 눌러도 같은 목록이 열린다.
 * 줄 전체가 하나의 role=button 이라 손잡이가 둘일 이유가 없다. 크기의
 * 「크기 변경」도 같다. 글자 손잡이를 패널에서 전부 뺀다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-paper-change,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-size-picker > summary > span { display:none !important; }
/* 손잡이가 빠진 자리는 ▾ 가 대신한다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-size-picker > summary {
  grid-template-columns:minmax(0,1fr) auto;
}
/* ▾ 는 패널 전체가 한 모양이다 — 인쇄 방식·종이의 것(8px · 2px · muted). 크기·후가공만 9px · 1.6px ·
 * 연한 선이라 같은 줄들이 서로 다른 손잡이로 보였다(PC·390 캡처 20260917). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-size-picker > summary::after {
  content:'';
  width:8px;
  height:8px;
  margin-right:3px;
  border-right:2px solid var(--bj-muted,#66635e);
  border-bottom:2px solid var(--bj-muted,#66635e);
  transform:translateY(-3px) rotate(45deg);
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-size-picker[open] > summary::after {
  transform:translateY(1px) rotate(225deg);
}
/* 수량 칸은 정본(factory.js)이 15×9 SVG 꺾쇠와 14px 회색 값을 그린다 — 같은 줄들과 맞춘다.
 * 칸을 다시 그려도 모양이 따라가도록 SVG 를 지우지 않고 가리기만 한다(펼침 회전은 정본이 부모에 건다). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .order-qty-arrow svg,
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .order-qty-arrow svg { display:none; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .order-qty-arrow::after,
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .order-qty-arrow::after {
  content:'';
  width:8px;
  height:8px;
  margin-right:3px;
  border-right:2px solid var(--bj-muted,#66635e);
  border-bottom:2px solid var(--bj-muted,#66635e);
  transform:translateY(-3px) rotate(45deg);
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .order-qty-value {
  color:var(--bj-ink,#20201e) !important;
  font-size:15px !important;
  font-weight:600 !important;
}
/* 아이폰 금액 시트(#mobileOrderPanel)는 패널 밖이라 위 규칙이 닿지 않았다 — 같은 꺾쇠를 함께 건다(위 선택자 묶음).
 * 「(1장당 N원)」도 PC 내역처럼 라벨과 같은 세로선에서 시작한다(시트 실측 20 대 26, 20260917). */
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .order-summary-total .order-per-unit { margin-left:0 !important; }
/* 크기 입력칸만 값이 가운데라 다른 줄의 값(왼쪽 14px)과 줄이 안 맞았다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-size-inputs .opt-size-input { text-align:left; }
/* 후가공 가공 크기 칸: 틀은 두 칸 격자인데 둘째 칸(숨긴 원본 select)이 비어 간격 6px 만 남아
 * 버튼이 틀보다 6px 좁았다 — 패널 칸 오른쪽 끝(1188)에 못 닿았다(실측). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-size-control { column-gap:0; }
/* 금액 내역 안 「계산 과정 보기」만 브라우저 삼각형(▶)이었다 — 패널의 ▾ 와 같은 모양으로. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-quote-calculation > summary,
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .fb-quote-calculation > summary { display:flex; align-items:center; gap:8px; list-style:none; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-quote-calculation > summary::-webkit-details-marker,
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .fb-quote-calculation > summary::-webkit-details-marker { display:none; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-quote-calculation > summary::after,
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .fb-quote-calculation > summary::after {
  content:'';
  width:8px;
  height:8px;
  border-right:2px solid var(--bj-muted,#66635e);
  border-bottom:2px solid var(--bj-muted,#66635e);
  transform:translateY(-3px) rotate(45deg);
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-quote-calculation[open] > summary::after,
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .fb-quote-calculation[open] > summary::after { transform:translateY(1px) rotate(225deg); }

/* ── 후가공: 고르는 줄 (부록 H) ────────────────────────────────────────
 * 줄은 다른 「고르는 줄」과 같은 모양이다 — 라벨 + 값 + ▾. 누르면 정본 선택
 * 목록이 그 아래에서 열린다. 목록은 본문의 사진 칩 5개를 432px 세로로 옮긴 것이다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-finishing-row {
  display:grid;
  grid-template-columns:68px minmax(0,1fr);
  align-items:center;
  gap:16px;
  min-height:44px;
  /* 앞 줄(종이) 칸 → 「후가공」 8 이면 이름이 앞 칸의 설명처럼 붙어 읽혔다(UV 펼침 화면 20260917). 줄 → 줄 16. */
  margin-top:16px;
  padding:0;
  border:0;
}
.fb-namecard-finishing-label { color:var(--bj-muted,#66635e); font-size:14px; font-weight:700; line-height:20px; }
.fb-namecard-finishing-open {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--bj-line,#e5e2de);
  border-radius:8px;
  background:#fff;
  color:var(--bj-ink,#20201e);
  font:inherit;
  font-size:15px;
  text-align:left;
  cursor:pointer;
}
.fb-namecard-finishing-open:hover { border-color:var(--bj-line-strong,#938d86); }
.fb-namecard-finishing-open:focus-visible { outline:2px solid #5579a3; outline-offset:2px; }
/* 값 글자는 인쇄 방식·종이와 같은 15px/600. 「없음」은 색만 물린다 — 아무것도 넣지 않았다는 표시. */
.fb-namecard-finishing-value { overflow:hidden; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.fb-namecard-finishing-value[data-finishing-state="none"] { color:var(--bj-muted,#66635e); }
.fb-namecard-finishing-amount { font-size:15px; font-weight:700; white-space:nowrap; }
.fb-namecard-finishing-chevron {
  width:8px; height:8px; margin-right:3px;
  border-right:2px solid var(--bj-muted,#66635e);
  border-bottom:2px solid var(--bj-muted,#66635e);
  transform:translateY(-3px) rotate(45deg);
}
.fb-namecard-finishing-open[aria-expanded="true"] .fb-namecard-finishing-chevron { transform:translateY(1px) rotate(225deg); }
.fb-namecard-finishing-open[aria-expanded="true"] { border-color:var(--bj-ink,#20201e); box-shadow:inset 0 0 0 1px var(--bj-ink,#20201e); }

/* 접힘은 CSS 로 못박는다 — 브라우저 기본 [hidden] 은 작성자 CSS 에 진다(20260904 실사고). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-group[hidden] { display:none !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-group {
  display:flex;
  flex-direction:column;
  margin:8px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
/* 이 묶음의 머리는 위의 줄이다. 제목을 두 번 쓰지 않는다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-group > .fb-option-group-head { display:none !important; }

/* 사진 칩 5열 → 432px 세로 목록. 사진은 여기서 뺀다(접힘을 다 먹는다). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice-rail {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:0;
  margin:0;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice {
  display:grid !important;
  /* 이름은 늘 제 폭(max-content), 금액 근거가 남는 폭을 쓰며 필요하면 줄을 바꾼다. 종전 «20px 1fr auto auto» 는
   * 근거가 긴 줄(톰슨 «보유 목형 · 모양 디자인을 고르면 사용료·세팅비가 붙어요», 줄바꿈 없음)에서 이름 칸을 0 으로
   * 밀고 카드 밖으로 넘쳤다(실측 320·390·1024). */
  grid-template-columns:20px max-content minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:40px;
  padding:6px 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  text-align:left;
}
/* 상품 정책이 끈 후가공은 칩이 없다(hidden) — display:grid !important 가 [hidden] 을 이기므로 여기서 끈다. 줄 사이 선은 보이는 칩끼리만. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice[hidden] { display:none !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice:not([hidden]) ~ .fb-finishing-choice:not([hidden]) {
  border-top:1px solid var(--bj-line,#e5e2de) !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice-media { display:none !important; }
/* 금액 옆에 「무엇에 대한 금액인가」를 적는다 — 「금박 +20,503원」만으로는 알 수 없다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice-basis {
  grid-column:3; grid-row:1;
  text-align:right;
  color:var(--bj-muted,#66635e);
  font-size:13px;
  font-weight:400;
  line-height:20px;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:break-word;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice-label {
  order:2; font-size:14px; line-height:20px; color:var(--bj-ink,#20201e); white-space:normal;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice-check {
  order:1;
  display:grid !important;
  place-items:center;
  width:18px; height:18px;
  border:1px solid var(--bj-line-strong,#938d86);
  border-radius:4px;
  background:#fff;
  color:transparent;
  font-size:12px;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice.is-selected .fb-finishing-choice-check,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice[aria-pressed="true"] .fb-finishing-choice-check {
  border-color:var(--bj-ink,#20201e); background:var(--bj-ink,#20201e); color:#fff;
}
.fb-finishing-choice-amount { order:4; font-size:14px; font-weight:700; white-space:nowrap; color:var(--bj-ink,#20201e); }
.fb-finishing-choice-amount[data-finishing-amount-state="unavailable"] { color:var(--bj-tertiary,#918e87); font-size:13px; font-weight:400; }

/* 고른 뒤 세부(포일 색상·가공 크기)는 정본 섹션 그대로, 폭만 좁힌다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface {
  margin-top:8px;
  border:0 !important;
  background:transparent !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface > .opt-post-section {
  margin:0;
  border:0 !important;
  background:transparent !important;
}
/* ★ 세부(포일 색상·가공 크기)는 .opt-post-header 「안」에 있다 — 헤더를 통째로
 * 감추면 고를 것이 같이 사라진다(실측 20260917). 중복인 이름·토글 줄만 끓다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-header > .opt-header-row { display:none !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-sub {
  padding:0 0 0 30px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
.fb-finishing-choice-amount[data-finishing-amount-state="basis"] { color:var(--bj-muted,#66635e); font-size:13px; font-weight:400; }
/* 금액 대신 안내 문장이 서는 줄(톰슨 «보유 목형 · 모양 디자인을 고르면…» 등)은 좁은 폭에서 줄을 바꾼다 — 금액과 달리
 * 한 줄 고정일 까닭이 없다. 한 줄로 두면 이름 칸을 0 으로 밀고 카드 밖으로 넘쳤다(실측 320·390·1024, 이름 폭 0 · 문장 288px). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice-amount[data-finishing-amount-state="basis"],
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice-amount[data-finishing-amount-state="unavailable"] {
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:break-word;
}
/* 정본 칩은 사진 위에 ✓ 를 얹으려고 체크를 절대배치로 두고, order 만으로는 자리가
 * 안 잡힌다(실측). 세로 목록에서는 칸을 명시한다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice-check {
  position:static !important;
  inset:auto !important;
  grid-column:1; grid-row:1;
  margin:0 !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice-label {
  grid-column:2; grid-row:1;
  white-space:nowrap;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice-amount {
  grid-column:4; grid-row:1;
  text-align:right;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice-label { text-align:left; }
/* 고른 후가공의 세부(포일 색상·가공 크기)는 늘 펼쳐 둔다 — 한 번 더 누르게 하지 않는다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface > .opt-post-section.is-active .opt-post-sub,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface > .opt-post-section.is-locked-on .opt-post-sub {
  display:block !important;
}
/* 둘 이상을 고르면 「포일 색상·가공 크기」가 두 벌 나오는데 순서 말고는 구분이 없었다
 * (사장님 화면: 금박과 3D박이 똑같다). 벌마다 그 후가공 이름을 다시 적는다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-finishing-config-title {
  display:grid !important;
  grid-template-columns:minmax(0,1fr);
  min-height:0 !important;
  /* 위 16 은 묶음의 padding-top 32 에 더해져 구분선 아래가 48 이 됐다(실측) — 선 위아래 32/32 로 맞춘다. */
  margin:0 0 8px !important;
  padding:0 !important;
  background:transparent !important;
  cursor:default;
}
/* 두 번째부터는 앞 묶음과 한 칸 떨어뜨렸다 — 선은 묶음 사이에만 긋고, 사이는 간격으로 가른다. */
/* 첫 세부에도 선을 긋는다 — 고르는 목록과 그 세부가 선 없이 붙어 있었다(사장님 20260917). */
/* 32/32 는 패널의 다른 구분선(16/16)보다 두 배라 목록 끝 → 선이 41px 로 떴다(전수 점검 20260917). 같은 16/16. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface > .opt-post-section {
  margin-top:16px !important;
  padding-top:16px !important;
  border-top:1px solid var(--bj-line,#e5e2de) !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-finishing-config-label {
  color:var(--bj-ink,#20201e) !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:20px !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-finishing-config-summary,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-finishing-config-chevron { display:none !important; }
/* 값을 고르려고 펼친 목록을 조상이 잘라 두 줄만 보였다(사장님 화면 실측 20260917).
   상자를 걷어낸 자리에 남은 overflow 는 이제 아무것도 감싸지 않으면서 목록만 자른다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-option-surface,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface > .opt-post-section { overflow:visible !important; }
/* 코딱지 글씨를 본문 크기로 올린다 — 작으면서 굵은 이름이 제일 읽기 나빴다(사장님 20260917). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-finishing-config-label { font-size:15px !important; font-weight:700 !important; line-height:22px !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-desc { font-size:14px !important; line-height:21px !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-stamp-row-no { font-size:14px; font-weight:600; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-finishing-repeat { font-size:14px; }
/* 「선택: 골드박」은 11px 인데, 바로 위 셀렉트가 이미 고른 색을 이름으로 말한다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-color-selection { display:none !important; }
/* 「한 번 더 넣기」 — 같은 후가공을 두 자리에 넣거나 2도로 찍을 때 쓰는 작은 글자 단추.
   세부의 맨 끝, 칸 목록 바로 아래에 놀는다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-finishing-repeat {
  display:inline-flex;
  min-height:36px;
  align-items:center;
  padding:0 2px;
  border:0;
  background:transparent;
  color:var(--bj-muted,#66635e);
  font:inherit;
  font-size:13px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-finishing-repeat:hover { color:var(--bj-ink,#20201e); }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-finishing-repeat[hidden] { display:none !important; }
/* 두 벌 이상일 때만 「1도 / 2도」를 붙인다 — 한 벌뿐이면 번호는 군더더기다. */
/* [×] 는 상자 시절의 우상단(12,12)에 그대로 남아 「1도」보다 13px 아래,
   칸에서 12px 안쪽에 떠 있었다(실측 20260917). 번호와 같은 줄, 칸의 오른쪽 모서리에 맞춘다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .gold-stamp-row > .btn-gold-remove {
  top:0 !important;
  right:0 !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-stamp-row-no {
  display:block;
  width:100%;
  margin:0 0 8px;
  color:var(--bj-muted,#66635e);
  font-size:13px;
  font-weight:700;
  line-height:20px;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .fb-finishing-config-chevron { display:none !important; }
/* detail-renewal.css:5158 이 공유 입구에서 .opt-post-wrap 을 통째로 감춘다.
 * 패널 안 목록에서는 그 안의 세부(포일 색상·가공 크기)가 있어야 고를 수 있다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"][data-namecard-spec-placement="panel"] .order-summary .fb-finishing-surface,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"][data-namecard-spec-placement="flow"] .fb-namecard-specifications .fb-finishing-surface { display:block !important; }

/* ── 모바일에 남아 있던 레거시 주문 단추 3종 (부록 G-5) ────────────────
 * PC 패널에서는 이미 뺐는데 #mobileOrderPanel 에서는 안 뺐다. 폰에서는 「견적서
 * 미리보기」·「장바구니」·「바로 구매(디자인 파일 필요)」가 그대로 떠 있고, 누르면
 * 되는 것이 없는 막다른 길이다. 주문 행동은 도크의 시작 단추 하나다(원칙 4). */
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .mobile-panel-btn-estimate,
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .mobile-panel-action-group,
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .btn-order { display:none !important; }

/* 390 에서는 라벨 기둥을 조금 좁힌다 — 68 이면 두 버튼이 109px 로 눌린다. */
@media(max-width:600px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-detail-info .upload-form-grid > .upload-form-group:has(> .fb-panel-row-label),
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-size-control,
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-finishing-row { grid-template-columns:60px minmax(0,1fr); }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-print-side-mode { grid-template-columns:60px repeat(2,minmax(0,1fr)); }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .fb-base-option-current { grid-template-columns:60px minmax(0,1fr) auto !important; }
}
/* 방향 칸은 숨은 형제가 여럿이라 자동 배치가 컨트롤을 둘째 줄로 떨어뜨린다(실측 390).
 * 자리를 명시한다 — 이름은 1열, 컨트롤은 2열, 둘 다 첫 줄. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-form-grid > .upload-form-group > .fb-panel-row-label { grid-column:1; grid-row:1; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-form-grid > .upload-form-group > .fb-orient-group,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-form-grid > .upload-form-group > .upload-form-row,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-form-grid > .upload-form-group > .fb-md-controls { grid-column:2; grid-row:1; }

/* 아래 탭 바가 width:100vw 라 스크롤바(15px)만큼 페이지를 오른쪽으로 민다
 * (실측 1440: 문서 1425 인데 바가 1440, left -7 → 가로 스크롤 8px).
 * clip 은 hidden 과 달리 스크롤 컨테이너를 만들지 않아 안의 sticky 가 그대로 산다. */
/* 100vw 는 스크롤바를 포함한다. 바가 테이블 칸 안에 있어 그 15px 이 표 폭을
 * 늘려 문서가 오른쪽으로 8px 밀렸다(실측 1440: 문서 1425 · 바 1440).
 * detail-renewal.js 가 쟴 실제 뷰포트 폭을 쓴다 — 모양은 그대로고 넘침만 사라진다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .bottom-tab-bar {
  width:var(--fb-viewport-width,100vw);
  margin-left:calc(50% - var(--fb-viewport-width,100vw) / 2);
}
/* 공용 푸터도 #tail_area { width:100vw } 라 같은 8px 을 만든다(CDP 로 이긴 규칙 확인).
 * 사이트 전역 시트를 건드리지 않고 이 흐름에서만 실제 뷰포트 폭으로 맞춘다. */
html.fb-detail-renewal body[data-fb-order-method="shared"] #tail_area.bj-compact-footer {
  width:var(--fb-viewport-width,100%) !important;
}

/* ── 후가공 목록 다듬기 (사장님 지적 20260917) ─────────────────────────
 * 상자 안에 상자가 두 겹이고, 설정 옆에 까만 세로줄이 길게 뻗고, 구분선이
 * 다섯이고, 여백이 10·11·16 로 사다리 밖이었다. 면 하나로 편다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface { order:2; margin:0; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice-rail { order:1; }
/* 안내는 맨 아래 한 줄 글로 — 회색 상자가 아니다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-estimate-notice {
  font-size:14px !important;
  line-height:21px !important;
  order:3;
  display:block;
  margin:8px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--bj-muted,#66635e);
  font-size:12px;
  line-height:18px;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-estimate-notice strong { display:none; }
/* 고른 종류의 세부는 그 칩 바로 아래 들여쓰기로 붙인다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-sub > * { margin:0 !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-sub > * + * { margin-top:8px !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-sub-divider,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-sub hr { display:none !important; }

/* 금액 자리가 140px 로 묶여 있어 「사양을 고르면 금액이 보여요」가 두 줄로 눌린다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .order-summary-total { flex-wrap:wrap; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .order-summary-total .order-total-price {
  max-width:none;
  white-space:normal;
}
/* 설정 들여쓰기가 안 먹은 이유: 정본 규칙이 더 구체적이다
 * (.fb-namecard-specifications .fb-finishing-surface > .opt-post-section[data-process-group] .opt-post-sub, 7개).
 * 같은 모양으로 받아친다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-finishing-surface > .opt-post-section[data-process-group="finishing"] .opt-post-sub {
  padding:0 0 0 30px !important;
  border:0 !important;
  background:transparent !important;
}
/* 고른 칩은 체크와 굵은 이름으로 말한다 — 까만 상자를 덧씌우지 않는다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice.is-selected,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice[aria-pressed="true"] {
  box-shadow:none !important;
  outline:0 !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice.is-selected .fb-finishing-choice-label,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice[aria-pressed="true"] .fb-finishing-choice-label { font-weight:700; }
/* 열리는 목록(인쇄 방식·후가공)은 값 칸에 맞춘다 — 라벨 기둥까지 침범하면
 * 패널의 왼쪽 끝이 두 개가 된다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-finishing-group,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print {
  margin-left:84px;
}
/* 세부 줄 이름은 다른 줄 이름과 같은 무게로. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-sub .fb-color-label,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-sub .fb-size-field-label,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-sub .opt-sub-title,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-sub > label,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-sub strong,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-sub .fb-size-axis {
  color:var(--bj-muted,#66635e) !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:20px !important;
}
@media(max-width:600px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-finishing-group,
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print {
    margin-left:76px;
  }
}
/* 값 박스는 글자 손잡이가 아니다 — 밑줄을 걷어낸다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-finishing-open,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-finishing-open * { text-decoration:none !important; }

/* ══ 패널 재설계 (부록 I · 사장님 20260917) ═══════════════════════════
 * ① 이름을 컨트롤 위로 — 왼쪽 68px 기둥이 컨트롤을 298px 로 누르고 있었다.
 *    특히 자유형의 가로·세로 mm 두 칸이 거기서 찌그러진다.
 * ② 「인쇄 방식」과 「인쇄 면」은 한 덩어리 — 둘 다 인쇄를 정하는 일이다.
 *    줄이 하나 줄어 이름을 올려도 접힘(900)을 지킨다.
 * ③ 방향은 체크박스가 아니라 명함 모양 — 체크박스는 「켜고 끄는 것」의 기호라
 *    둘 중 하나를 고르는 자리에 쓰면 둘 다 켤 수 있을 것처럼 보인다.
 * ④ 선은 묶음과 묶음 사이에만 — 정체성 / 주문 틀 / 제작 사양 / 금액 → 선 셋. */

/* ①-1 줄은 한 칸, 이름이 위 */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-detail-info .upload-form-grid { gap:16px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-detail-info .upload-form-grid > .upload-form-group,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-detail-info .upload-form-grid > .upload-form-group:has(> .fb-panel-row-label),
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-size-control,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-finishing-row {
  grid-template-columns:minmax(0,1fr) !important;
  align-items:stretch;
  /* 이름 → 칸 8 — 4 는 사다리(8/16/32)에 없고, 전수 점검에서 「붙음」으로 44건 나왔다(20260917). */
  gap:8px !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-form-grid > .upload-form-group > .fb-panel-row-label,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-size-control > .fb-namecard-field-label,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-finishing-row > .fb-namecard-finishing-label {
  grid-column:1 !important;
  grid-row:1 !important;
  display:block;
  min-height:0;
  font-size:12px;
  line-height:18px;
  letter-spacing:.01em;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-form-grid > .upload-form-group > .fb-orient-group,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-form-grid > .upload-form-group > .upload-form-row,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-form-grid > .upload-form-group > .fb-md-controls,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-size-control > .fb-namecard-size-picker,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-finishing-row > .fb-namecard-finishing-open {
  grid-column:1 !important;
  grid-row:2 !important;
}
/* ①-2 인쇄 방식·종이 줄도 같은 모양으로 — 박스 안에 있던 이름을 위로 꺼낸다 */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .fb-base-option-current {
  grid-template-columns:minmax(0,1fr) !important;
  gap:8px !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .fb-base-option-current > b {
  grid-column:1; grid-row:1;
  font-size:12px !important;
  line-height:18px !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .fb-base-option-current > span {
  grid-column:1; grid-row:2;
  padding:0 42px 0 14px !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .fb-base-option-current > em {
  grid-column:1; grid-row:3;
}
/* ② 인쇄 면은 인쇄 방식과 한 덩어리 — 이름도 선도 없다 */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-print-side-mode {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:0 !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-print-side-label { display:none !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .opt-header-digital-row,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .opt-header-uv-row,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .opt-header-master-row {
  margin-top:8px !important;
  padding:0 !important;
  border-top:0 !important;
}
/* 목록은 이제 이름 기둥이 없으니 들여쓰지 않는다 */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-finishing-group,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print { margin-left:0; }

/* ③ 방향 — 명함 모양 그대로, 90×50 과 50×90 의 비율 */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-toggle { height:auto; gap:8px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-btn {
  display:flex !important;
  min-height:64px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  font-weight:650;
}
/* ⚠ 이 세 줄은 «방향 알약»의 모양표 전용이다 — 종전엔 선택자가 칸 안 모든 .fb-orient-check 를 잡아,
 * 같은 칸으로 들어온 「모서리 라운드」 체크의 채움과 ✓ 를 !important 로 짓밟었다(사장님 20260920 「체크 표시가 빠졌고」).
 * !important 는 구체성으로 이길 수 없으니 이기려 들지 말고 «쓴 대로» 방향 알약에만 닿게 한다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-btn .fb-orient-check {
  flex:0 0 auto;
  border:1.6px solid currentColor !important;
  border-radius:2px !important;
  background:transparent !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-btn .fb-orient-check::after { display:none !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-btn.is-active .fb-orient-check { background:transparent !important; }

/* ④ 선은 묶음 사이에만 — 정체성 아래 선 하나로 합친다 */
/* 상품명 아래 선에 첫 줄 이름(「크기」)이 0px 로 닿아 있었다(사장님 지적 · 전수 점검 20260917) — 선 아래 16. */
html.fb-detail-renewal .page-wrap[data-namecard-spec-placement="panel"] .order-summary .fb-namecard-specifications { margin-top:16px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications > .upload-detail-info {
  border-top:0 !important;
  padding-top:0 !important;
  margin-top:0 !important;
}
/* 정체성 블록 — 사진은 명함이 보이게 (사장님 20260919 「썸네일이 너무 작고 밑으로 쳐져 있다」).
 * 직접원인: 정본(위 46~47행)이 그림을 1.3배 키우고(transform:scale(1.3)) 58% 아래를 보게(object-position) 해 둔 채 — 옛 템플릿 썸네일용 —
 * 이 입구가 칸을 64×40 으로 줄여, 카탈로그 사진(494×550, 명함이 가운데)의 가운데 띠만 오려 보였다.
 * 확대·치우침을 걷고 80×64 칸에 가운데로 채운다(cover): 가로 명함은 칸을 거의 채우고(73×41), 세로 명함(금박·레이저·고급 종이)은
 * 위아래만 조금 잘린다 — 카탈로그 사진 열 장을 이 크기로 전부 잘라 보고 정함(20260919). 줄 높이 52 → 64. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-order-product-identity {
  grid-template-columns:80px minmax(0,1fr);
  gap:12px;
  margin:0 0 16px;
  padding:0 0 16px;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-order-product-identity .fb-namecard-specification-thumb { width:80px; height:64px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-order-product-identity .fb-namecard-specification-thumb img { object-position:center; transform:none; }
html.fb-detail-renewal .page-wrap[data-namecard-spec-placement="panel"] .order-summary .fb-order-identity { padding-bottom:0; }
/* 크기와 방향은 한 덩어리 — 인쇄 방식과 인쇄 면을 묶은 것과 같은 이유다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-size-control { margin-bottom:8px !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-btn { min-height:56px; }
/* 줄의 리듬(전수 점검 20260917 로 다시 정함): 이름 → 칸 8 · 칸 → 딸린 칸(방향·인쇄 면) 8 · 줄 → 다음 줄 16 ·
 * 묶음 → 선 → 묶음 16/16. 앞서 적은 「이름↔컨트롤 4 · 줄↔줄 8」은 4 가 사다리에 없고, 이름 → 칸(4)과
 * 줄 → 줄(8)이 거의 같아 어느 칸이 어느 이름의 것인지 흐려졌다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-detail-info .upload-form-grid { gap:16px; }
/* 공용 `.fb-option-surface > .opt-section { margin-top:0 !important }` 가 이겨 인쇄 방식 칸 → 「종이」가 0px 였다(20260917 CDP). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface > .opt-section + .opt-section { margin-top:16px !important; }

/* ══ 2차 다듬기 (사장님 20260917 밤) ═════════════════════════════════
 * ① 정체성 아래에 폭이 다른 선이 둘(346 / 382)이 17px 간격으로 겹쳐 있었다.
 * ② 줄 이름이 12px/700 — 작은데 굵어서 답답하다. 13px/600 으로.
 * ③ 방향 버튼이 62px 높이에 아이콘이 위·글씨가 아래라 혼자 덩치가 컸다.
 *    아이콘을 줄이고 글씨를 옆에 둬 단면·양면 버튼과 같은 무게로.
 * ④ 포일 색상 칸이 흰 상자 + 윗선 + 16 여백이라 또 하나의 상자가 됐다. */

/* ① 선은 하나만 */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-order-product-identity {
  margin-bottom:0 !important;
  padding-bottom:0 !important;
  border-bottom:0 !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-spec-placement="panel"] .order-summary .fb-order-identity {
  padding-bottom:16px;
  border-bottom:1px solid var(--bj-line,#e5e2de);
}

/* ② 줄 이름 — 작으면 굵지 않아야 읽힌다 */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-form-grid > .upload-form-group > .fb-panel-row-label,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-size-control > .fb-namecard-field-label,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-finishing-row > .fb-namecard-finishing-label,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface .fb-base-option-current > b {
  font-size:13px !important;
  font-weight:600 !important;
  line-height:20px !important;
  letter-spacing:0 !important;
}

/* ③ 방향 — 아이콘은 작게, 글씨는 옆으로. 단면·양면과 같은 키 */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-btn {
  flex-direction:row !important;
  min-height:44px !important;
  gap:10px !important;
  font-size:14px;
  font-weight:650;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-btn[data-orient="landscape"] .fb-orient-check { width:24px; height:14px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-btn[data-orient="portrait"] .fb-orient-check { width:14px; height:24px; }

/* ④ 포일 색상·가공 크기는 상자가 아니라 이어지는 줄이다 */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-finishing-surface > .opt-post-section[data-process-group="finishing"] .opt-post-sub {
  padding:0 !important;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .gold-stamp-row,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .gold3d-stamp-row,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .emboss-stamp-row,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .lp-stamp-row {
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
/* 줄 간격(gap 16)이 이미 있다 — 여기서 8 을 더 주면 포일 색상 → 가로가 24 였다(전수 점검 20260917). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .gold-stamp-color-row { margin-bottom:0 !important; }
/* 형압 종류 상자(양각/음각/3D 형압) — 같은 이유로 밑 여백 0(10 이면 종류 → 가로 26, 전수 점검 20260919). 칸 키 44·모서리 8 은 이 패널의 다른 칸과 같게. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .emboss-stamp-row .emboss-type-row { padding-bottom:0; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .emboss-type-box { min-height:44px; padding:0 14px; border-radius:8px; border:1px solid var(--bj-line,#ece9e6); font-size:15px; color:var(--bj-ink,#181817); }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .emboss-type-box:hover { border-color:var(--bj-line-strong,#938d86); }

/* ══ 3차 다듬기 — 전수 점검 수치(20260917) ══════════════════════════════
 * 점검 도구(tools/namecard-probe/audit2.js)가 틈마다 「왜」(여백·간격 사슬)를 적는다. 그 사슬로 고친 것들. */

/* 「선택 내역」 머리 선 바로 아래 첫 줄이 제 윗선을 또 그어 선이 두 겹(2px)이었다. */
#fbNamecardPriceSheet .order-detail-list > .order-detail-row:first-child,
#mobileOrderPanel .order-detail-list > .order-detail-row:first-child { border-top:0 !important; }
/* 금액 → 「자동 배치 · 종이 한 장…」 4px — 같은 줄의 설명은 8 아래. */
#fbNamecardPriceSheet .order-detail-row[data-key="paper"],
#mobileOrderPanel .order-detail-row[data-key="paper"] { row-gap:8px; }
/* 총액 → 「선택 내역」 20(요약 아래 4 + 머리 위 16) → 16. */
.fb-namecard-quote-breakdown[open] > summary { margin-bottom:0 !important; }
/* 「계산 과정 보기」·「한 번 더 넣기」는 글자 단추다. 누르는 자리는 44px 를 지키되 줄 사이에는 글자 높이(20)만
 * 차지하게 한다 — 44px 상자가 위아래로 12씩 먹어 목록 → 단추 28, 단추 → 시작 단추 28, 단추 → 선 40 이었다. */
#fbNamecardPriceSheet .fb-quote-calculation > summary,
#mobileOrderPanel .fb-quote-calculation > summary { min-height:44px; margin-block:-12px; padding-block:0 !important; }
#fbNamecardPriceSheet .fb-quote-calculation > .order-calc-detail,
#mobileOrderPanel .fb-quote-calculation > .order-calc-detail { margin-top:16px !important; }
/* `.opt-post-sub > * + * { margin-top:8px !important }` 가 이긴다 — 같은 자리에서 더 구체적으로. 위 4 + 상자 안 12 = 칸 → 글자 16,
 * 아래 -12 로 글자 → 다음 선 16(다음 묶음의 위 여백). */
/* inline-flex 면 글줄 상자(strut)의 아래 여유가 더해져 단추 → 다음 선이 24 였다 — 줄 상자 밖의 블록으로 둔다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-sub > .fb-finishing-repeat { display:flex; width:fit-content; min-height:44px; margin:4px 0 -12px !important; }
/* 후가공 줄은 누르는 줄이다 — 40px 에 글자 ↔ 줄 사이 선 9 로 빽빽했다. 손가락 기준 44px, 글자 위아래 12. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice-rail > .fb-finishing-choice { min-height:44px; padding:12px 2px !important; }
/* 후가공 목록 끝 → 첫 세부의 선이 28 이 된다(줄 안 글자 아래 12 + 선 위 16). 목록이 펼쳐져 있을 때만 그 12 를 거둔다
 * — 닫혀 있으면 목록이 없어 단추 → 선 16 이 그대로다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-group.is-finishing-open > .fb-finishing-choice-rail { margin-bottom:-12px; }

/* PC 종이 목록 — 도구줄 선 → 첫 종이 22, 종이 선 → 다음 종이 22, 금액 → 선 12 로 제각각이었다. 한 칸 위아래 16. */
@media (min-width:769px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications #opt-paper .opt-select-list { padding-top:0 !important; gap:0 !important; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications #opt-paper .opt-select-card { padding-block:16px !important; }
}
/* 종이 설명이 「레이 / 저 커팅」「탄탄 / 한」처럼 낱말 가운데서 끊겼다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications #opt-paper .opt-select-desc { word-break:keep-all; overflow-wrap:break-word; }

/* 폰 사양 줄 간격 — detail-renewal.css 의 `.upload-form-grid { gap:12px !important }`(767 이하)가 16 을 이겼다. */
@media (max-width:767px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-detail-info .upload-form-grid { gap:16px !important; }
}

/* 주문 시작 영역은 헤더와 같은 밝은 면을 사용한다. 흰 명함과 주문 패널은 각각 그림자로 분리한다.
 *
 * 바탕은 border-image 로 칠한다. 가상 요소(::before, z-index:-1)는 쌓임 맥락을 새로 만들어야 해서 폰 종이 시트·
 * 금액 시트(position:fixed)의 층을 흔들고, clip-path 는 fixed 자손까지 자른다. border-image-outset 은 그리기만
 * 넓히고 스크롤 폭을 늘리지 않는다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] { --fb-order-band:var(--bj-header-surface); }
/* 뒤로 가기 줄 — 바깥 여백(위 16 · 아래 8, detail-renewal.css .fb-detail-entry)까지 칠해 틈이 없다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] > .fb-detail-entry {
  border-image:conic-gradient(var(--fb-order-band) 0 0) fill 0 / / 16px 100vmax 8px;
}
/* 아래 여백은 바탕 안에 둔다(다음 칸 위 여백에 기대면 폭마다 달라 바탕이 상세 탭까지 번질 수 있다). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] > #pressb-order-start {
  padding-bottom:64px;
  border-image:conic-gradient(var(--fb-order-band) 0 0) fill 0 / / 0 100vmax;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] > #pressb-order-start + * { margin-top:0 !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-design-first-column,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-design-request-cta--integrated { background:transparent !important; }
/* 위 칸(「모두 보기」·폰 사양 카드) → 아이콘 36(위 여백 16 + 안쪽 16 + 아이콘 가운데 4) → 묶음 사이 32. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-design-request-cta--integrated { margin-top:12px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-design-request-cta--integrated .fb-drc-icon {
  background:var(--bj-clean,#fff);
  box-shadow:inset 0 0 0 1px var(--bj-line,#ece9e6);
}
/* 흰 면은 R12(디자인 시스템 표면). 열린 모바일 시트의 별도 그림자는 유지한다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .content-right .order-summary { border-radius:12px; }
@media (min-width:960px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .content-right .order-summary {
    box-shadow:var(--bj-order-panel-shadow);
  }
}

/* 방법 탭 — 단추는 내용을 세로 가운데에 둔다. 설명 줄 수가 다르면 두 탭의 이름 높이가 어긋났다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-start-tab {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* 왼쪽 열 리듬(전수 점검 20260917 — PC 왼쪽 열은 그동안 재지 않았다): 제목 → 탭 이름 16 · 탭 설명 → 탭 밑줄 8 ·
 * 탭 밑줄 → 명함 32(폰 16) · 명함 ↔ 명함 가로·세로 같게 · 명함 → 「모두 보기」 32(폰 16). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] #fbDesignMethod .fb-design-first-intro { margin-bottom:8px !important; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-start-tabs { margin-bottom:0; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-start-tab { min-height:44px; padding:8px 12px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area { margin-top:16px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-more { margin-top:16px; }

/* 명함 템플릿 — 무대 위의 명함. 누를 자리(칸)는 그대로 두고 칸의 회색 면만 걷는다.
 * 칸 안쪽 위아래 16 = 명함 사이 세로 틈(16+16+16)이 가로 틈(가운데 정렬로 생기는 좌우 여백 + 16)과 같아진다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area [data-template-overview-grid] { gap:16px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card { padding:0; }
/* 안쪽 여백은 «칸»이 아니라 «카드»가 갖는다 — 칸에 비율(1.756)을 주고 그 안에서 여백을 빼면 그림 자리의 비율이
 * 달라져(232×112 = 2.08) 좌우에 다시 흰 띠가 생겼다(실측 20260918). 칸은 그림 자리 그대로다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card {
  padding:16px 10px;
}
/* 모서리는 «상품»이 정한다 — 각진 명함인데 썸네일이 둥글게 잘리면 화면이 제품을 잘못 말한다(사장님 20260918).
 * 라운드 명함은 별도 상품(FBNFBNN003)이므로, 그 선택은 오른쪽 패널에서 한다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-media {
  padding:0;
  border-radius:0;
  background:transparent;
  transition:background-color 120ms ease;
}
/* ⚠ 이 칠은 «칸» 전체에 깔리는 사각형이다. 사각 디자인은 그림이 칸을 덮어 안 보이지만,
 * 모양대로 자른 명함(톰슨)은 칼선 밖이 투명해서 그 칠이 그대로 회색 사각형으로 드러난다
 * (사장님 20260920 「마우스 오버 했을 때 그림자 효과가 … 사각형으로 보여」). 바로 아래 ::before 그림자는
 * 이미 톰슨을 빼 두고 있었는데 이 배경 칠만 같이 안 뺀 것이다 — «사각형을 그리는 규칙»은 한 번에 다 뺀다.
 * 톰슨은 대신 실루에을 따라가는 drop-shadow 가 진해져 «떠올랐다»를 말한다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card:not([data-template-process="thomson"]):hover .fb-store-template-media {
  background:color-mix(in srgb, var(--bj-ink,#181817) 4%, transparent);
}
/* 자유형 톰슨(2026-09-20 검토 4장): 목형 있는 디자인의 「목형 포함」 배지 — 그림 왼쪽 위, 칼선 색(보라)의 작은 알약. 목록 위 안내 한 줄은 구역 머리와 같은 회색 14. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-media { position:relative; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-die-badge {
  position:absolute; left:8px; top:8px; z-index:1;
  display:inline-flex; align-items:center; height:22px; padding:0 8px;
  border-radius:999px; background:#7a2f92; color:#fff;
  font-size:12px; font-weight:600; line-height:22px; white-space:nowrap; pointer-events:none;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-namecard-die-hint {
  margin:0 0 12px; color:var(--bj-muted,#6f6b66); font-size:14px; font-weight:400; line-height:20px; word-break:keep-all;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-upload .fb-nwu-die-hint {
  display:block; margin-top:8px; color:var(--bj-muted,#6f6b66); font-size:12px; font-weight:400; line-height:17px; word-break:keep-all;
}
/* (그림의 그림자는 맨 아래 「톰슨 명함」 블록에서 실루엣을 따라가는 drop-shadow 로 준다.) */

@media (max-width:767px) {
  /* 머리 바로 밑에 「만드는 방법을 선택하세요」가 0px 로 붙어 있었다. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] > #pressb-order-start { padding-top:16px; padding-bottom:32px; }
  /* 390 에서 칸(175×158) 안의 명함은 88px 높이라 줄 사이가 80px 가까이 비었다. 명함 높이 + 위아래 8 로 맞춘다. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card { padding:8px; }
  /* 탭 밑줄 → 명함 16 = 8 + 칸 안 여백 8 (종류 칩이 있을 땐 16 이었다 — 칩을 걷자 24 로 사다리 밖 · 전수 점검 20260918). 안내가 뜨면 탭 → 안내 8, 안내 → 명함 8+8. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area { margin-top:8px; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-more { margin-top:8px; }
}

/* 폰·태블릿(사양이 본문을 따라 흐를 때) — 사양은 PC 금액 패널과 같은 흰 카드다. 무대 위에 흰 칸만 늘어서 있으면
 * 어디까지가 고르는 자리인지 경계가 없고, 인쇄 방식 칸만 흰 바탕이라 띠처럼 보였다(시안 20260917). */
html.fb-detail-renewal .page-wrap[data-namecard-spec-placement="flow"] .fb-namecard-specifications {
  padding:0 16px 16px;
  border:1px solid var(--bj-line,#ece9e6);
  border-radius:12px;
  background:var(--bj-clean,#fff);
}
html.fb-detail-renewal .page-wrap[data-namecard-spec-placement="flow"] .fb-namecard-specifications > .fb-namecard-spec-header {
  padding:16px 0 !important;
}
/* PC 패널의 상품명(굵게)과 같은 무게 — 폰에서만 본문 굵기로 가늘게 나왔다. */
html.fb-detail-renewal .page-wrap[data-namecard-spec-placement="flow"] .fb-namecard-spec-summary-copy h1 { font-weight:600; }

/* ══ 5차 — 눈으로 본 화면에서 잡은 것(UV 인쇄 방식 펼침 20260917) ══════════════════
 * 점검 도구는 8/16/32 이면 통과시켰다. 사다리 위의 값이어도 자리가 틀리면 틀린다 — 도구에 「선가까움」·「줄이름붙음」을 더했다. */
/* 별색 칸 → 펼친 목록의 윗선 8: 선이 칸의 밑줄처럼 보였다 — `#opt-print { margin-top }`(위, 16)에서 고쳤다. */
/* 펼친 목록의 마지막 방식(인쇄 안 함) → 「종이」: 종전에는 목록 끝에 선이 없어 줄 → 줄 16 으로 붙였다(`+ .opt-section { margin-top:0 }`).
 * 사장님 20260920 「인쇄 안 함과 종이 사이에 구분 라인이 하나 들어가야」 — 목록의 아래선을 그어 묶음 → 선 → 묶음 16/16 으로 돌아간다
 * (카드 아래 16 + 선 + 줄 사이 16). 선은 카드가 아니라 목록(.opt-select-list)에 긋는다 — 카드의 아래선은 「종이」 글자에 0px 로 붙던 그 선이다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-production-surface > .fb-namecard-selectable-print #opt-print .opt-select-list { border-bottom:1px solid var(--bj-line,#e5e2de); }

/* ══ 「더 싼 인쇄 방식」 안내 (사장님 20260920) — 후가공 줄 밑 안내(.fb-finishing-choice-feedback)와 같은 정본 안내 면·같은 짜임(i · 글 · 「…로 바꾸기」 단추).
 * 자리: 인쇄 방식 칸([단면][양면]·별색) 밑 16, 그 밑의 「종이」(접힘)·목록 윗선(펼침, #opt-print margin-top 16)까지 16. */
.fb-namecard-print-saving { display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:10px; row-gap:10px; align-items:start; margin:16px 0 0; padding:14px 16px; border-radius:8px; background:var(--bj-information-surface); color:var(--bj-ink,#181817); font-size:14px; line-height:21px; word-break:keep-all; }
.fb-namecard-print-saving[hidden] { display:none; }
.fb-namecard-print-saving-icon { grid-column:1; grid-row:1; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-top:0.5px; border-radius:999px; background:var(--bj-muted,#66635e); color:#fff; font-size:13px; font-weight:700; line-height:1; }
.fb-namecard-print-saving-text { grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:2px; min-width:0; margin:0; }
.fb-namecard-print-saving-text strong { color:var(--bj-ink,#181817); font-size:14px; font-weight:600; line-height:21px; }
/* 아끼는 금액은 목록 줄의 「선택하면 −N원」과 같은 초록 — 같은 값이 같은 색으로 두 자리에 보인다. */
.fb-namecard-print-saving-text strong em { color:#1f6f4a; font-style:normal; font-weight:700; }
.fb-namecard-print-saving-text span { color:var(--bj-muted,#66635e); font-size:13px; font-weight:400; line-height:20px; }
.fb-namecard-print-saving-action { grid-column:1 / -1; grid-row:2; display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin:0; padding:0 16px; border:1px solid var(--bj-line-strong,#938d86); border-radius:var(--bj-control-radius,8px); background:var(--bj-clean,#fff); color:var(--bj-ink,#181817); font:inherit; font-size:14px; font-weight:600; line-height:20px; cursor:pointer; }
.fb-namecard-print-saving-action:hover { border-color:var(--bj-ink,#181817); }
.fb-namecard-print-saving-action:focus-visible { outline:2px solid var(--bj-ink,#181817); outline-offset:2px; }
/* 자유형: 「크기」 칸 → 「만들 크기」 이름 8. 크기 칸의 아래 8 은 템플릿 명함의 방향 단추(이름 없는 딸린 칸)를 위한 것이라,
 * 이름을 가진 줄이 바로 오면 앞 칸에 붙는다. 이름이 보일 때만 8 을 더해 줄 → 줄 16. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-size-control + .upload-form-grid > .upload-form-group:first-child > .fb-panel-row-label { margin-top:8px; }
/* 「…출력하는 방식입니 / 다.」 — 한 글자가 다음 줄로 떨어졌다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications #opt-print .opt-select-desc { word-break:keep-all; overflow-wrap:break-word; }

/* 못 넣는 후가공(「브니엘 300g에는 못 넣어요」)이 이름·체크 칸 모두 고를 수 있는 줄과 똑같이 진했다 — 줄 모양 규칙
 * (`.fb-finishing-choice-label { color:ink }`)이 `.fb-finishing-choice.is-disabled` 의 흐린 글자를 덮었다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice.is-disabled .fb-finishing-choice-label { color:var(--bj-tertiary,#918e87); }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-choice.is-disabled .fb-finishing-choice-check {
  border-color:var(--bj-line,#ece9e6);
  background:var(--bj-soft-surface,#f5f5f3);
}

/* 「한 번 더 넣기」 뒤의 빈 추가 칸(정본 .btn-gold-add 를 감춘 채 담은 칸, 높이 0)이 `.opt-post-sub > * + *` 의 위 여백 8 을 받아
 * 마지막 세부의 단추 → 총액 선이 24 였다(20260918 전수 점검). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-finishing-surface .opt-post-sub > :is(.gold-stamp-add, .gold3d-stamp-add, .emboss-stamp-add, .lp-stamp-add) { margin-top:0 !important; }
/* 펼친 후가공 목록은 단추에 딸린 목록이다 — 단추 → 첫 줄 글자 16(위 4 + 줄 안 12). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-finishing-group.is-finishing-open { margin-top:4px; }

/* 「선택한 디자인」 표가 칸 안 (8,8) 에 떠 명함의 왼쪽 위(로고 자리)를 가렸다(템플릿 고른 화면 20260918).
 * 테두리의 왼쪽 위 모서리에 붙는 작은 꼬리표로 — 명함과는 모서리 몇 px 만 겹친다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card.is-selected .fb-store-template-media::after {
  top:0;
  left:0;
  padding:1px 8px 2px;
  border-radius:12px 0 8px 0;
  font-size:13px;
  line-height:18px;
}
@media (max-width:767px) {
  /* 폰 칸은 안쪽 여백이 8 이라 글자 꼬리표(21px)가 그래도 로고를 덮었다 — 폰은 ✓ 한 글자. 읽기 도구에는 같은 말을 준다. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card.is-selected .fb-store-template-media::after {
    content:'✓';
    content:'✓' / '선택한 디자인';
    width:22px;
    padding:1px 0 2px;
    text-align:center;
  }
}

/* ══ 6차 — 넓은 화면에서는 명함을 더 많이 (사장님 20260918) ═══════════════════
 * 1000px 고정이라 1440 화면에서 좌우 440px 을 비워 두고 명함은 6장만 보였다. 주문 시작 영역만 창을 따라 넓히고,
 * 명함 한 장의 크기는 그대로 둔 채 «열 수»를 늘린다 — 크기까지 줄이면 디자인을 보고 고를 수 없다.
 * 금액 패널은 432 그대로 오른쪽에 붙는다(고르는 내내 금액이 보이는 것이 이 화면의 값이다).
 * 머리·푸터·상세 탭은 1000 을 지킨다 — 넓어진 자리가 「고르고 정하는 자리」로 읽힌다. */
@media (min-width:1200px) {
  /* 처음 화면은 사이트 공통 1000 — 머리·상세 탭과 줄이 맞는다. 「모두 보기」로 펼쳐 고르기 시작할 때만 창을 따라 넓어진다.
   * «되살린» 펼침(기억 복원·고른 디자인 드러내기)은 이 표식을 붙이지 않는다 — 페이지가 «열릴 때»는 늘 1000 이다
   * (detail-renewal.js toggleWorkAreaExpanded keepPageWidth, 사장님 20260920). */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"][data-namecard-templates-expanded="1"] > #pressb-order-start {
    width:min(1500px, 100vw - 96px);
    margin-left:calc(50% - min(1500px, 100vw - 96px) / 2);
  }
  /* 왼쪽 열은 520 고정이었다 — 넓어진 만큼 왼쪽이 받고, 금액 패널은 432 그대로다. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"][data-namecard-templates-expanded="1"] .content-area {
    grid-template-columns:minmax(0,1fr) 432px;
  }
}
/* 폰은 2열 그대로 — 232px 을 기준으로 자동 계산하면 390 화면에서 1열이 된다. */
@media (min-width:768px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area [data-template-overview-grid] {
    grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
  }
  /* 232 는 «가로로 누운 명함»(90mm)의 폭이다. 세로로 선 상품(카드·리플릿)의 칸은 그 폭에 넣으면
   * 한 장이 252×381 로 부풀어 520 열에 두 장밖에 안 들어가고, 디자인을 견주어 고를 수가 없다
   * (실측 20260921). 세로형 목록일 때만 기준을 좁혀 세 장이 나란히 서게 한다 — 520 에서 163×245.
   * 가로형 목록(명함·리플릿)은 이 조건에 걸리지 않아 지금 모습 그대로다. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area[data-gallery-orientation="portrait"] [data-template-overview-grid] {
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* 「모두 보기」는 그 자리에서 펼친다(detail-renewal.js toggleWorkAreaExpanded). 목록 안에 따로 스크롤을 만들지 않는다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area[data-template-expanded="1"] [data-template-overview-grid] {
  max-height:none;
}
/* ══ 명함 위에서 굴리면 목록이 «자란다» (사장님 20260918 「스크롤이 한번 두번 먹히면서 서서히 확장돼서 액션으로」 · 20260926 다시) ══
 * 걸음(detail-renewal.js bindWorkAreaScrollExpand: 첫 줄 수 → ＋3 줄 → 전부)마다 높이가 480ms 동안 움직인다 — 확 튀지 않는다.
 * 움직이는 것은 걸음 사이뿐이다 — 처음 재는 것과 걸러서 다시 재는 것, 「접기」·지나가서 접히는 것은 즉시. 첫 값은 방향이 정해 둘이다
 * (가로형 4 · 세로형 3 — detail-renewal.js workAreaFirstRows). 둘 다 빼지 않으면 가로형은 «처음 그려질 때»부터 높이가 움직인다.
 * 폰도 같다(사장님 20260927) — 접힌 동안은 옆으로 넘기는 페이지라 높이가 안 움직이고, 끌어서 자라는 동안은 세로 목록이라 PC 처럼 자란다.
 * 움직임을 줄인 설정에서는 걸음도 즉시 — 굳히기는 시간으로도 온다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area[data-template-rows]:not([data-template-rows="3"]):not([data-template-rows="4"]):not([data-template-expanded="1"]) [data-template-overview-grid] {
  transition:max-height 480ms cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion:reduce) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area [data-template-overview-grid] { transition:none; }
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-selected-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:12px 0; padding:12px 16px; border-radius:8px; background:var(--fb-order-band,#f4f2ee); color:var(--bj-ink,#181817); }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-selected-summary[hidden] { display:none; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-selected-summary strong { min-width:0; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-selected-summary button { flex:none; border:0; padding:4px 0; background:transparent; color:inherit; font-size:14px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:479px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-selected-summary { flex-direction:column; align-items:flex-start; gap:4px; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-selected-summary strong { white-space:normal; overflow-wrap:anywhere; }
}
/* 펼친 목록은 길다 — 단추가 화면 아래에 떠 따라오다가 목록이 끝나면 제자리에 내려앉는다(스크롤은 그대로 하나다).
 * 폰도 띄운다(사장님 20260927 — 끌기만 해도 펼쳐지므로 한 번에 접을 길이 늘 보여야 한다). 아래 금액·시작 막대와 겹치지 않게
 * 막대 높이(--bj-fixed-action-clearance, order-method.js 가 잰 값 · 막대가 없으면 0) 위 12px 에 뜬다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area[data-template-expanded="1"] .fb-namecard-work-more {
  position:sticky;
  bottom:calc(var(--bj-fixed-action-clearance, 0px) + 12px);
  z-index:2;
  /* 떠 있는 컨트롤은 면이 아니다 — 명함 위에 겹치므로 둥근 알약과 그림자로 「떠 있음」을 말한다. */
  border-radius:999px;
  box-shadow:0 6px 20px rgba(24,24,23,.16);
}
@media (min-width:768px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area[data-template-expanded="1"] .fb-namecard-work-more {
    bottom:calc(var(--bj-fixed-action-clearance, 0px) + 24px);
  }
}
/* 목록 머리로 데려갈 때(「접기」·아직 안 고르고 「디자인 고르고 계속하기」) 내려앉는 자리 — detail-renewal.js workAreaLandingTop 이 읽는다.
 * PC 는 위에 붙는 머리가 없어 24. 모바일 기기(preview.php 가 fb-detail-mobile-forced 를 단다 — 폭이 아니라 기기라 태블릿 820 도 같다)는
 * 위에 붙은 머리띠(52)가 목록 머리를 가리지 않게 52 + 16(24 였을 때 28px 가려짐, 실측 20260927). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area { scroll-margin-top:24px; }
html.fb-detail-renewal.fb-detail-mobile-forced .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area { scroll-margin-top:68px; }
@media (max-width:767px) {
  /* 폰의 떠 있는 「접기」는 가운데 작은 알약이다 — 화면 폭 전체로 뜨면 명함 한 줄을 통째로 가린다. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area[data-template-expanded="1"] .fb-namecard-work-more {
    width:max-content;
    min-width:176px;
    margin-inline:auto;
    padding-inline:32px;
  }
}
/* (「필터로 고르기」 글자 링크는 없다 — 거르기는 격자 앞의 종류 칩이 그 자리에서 한다. 맨 아래 「종류 칩」 블록.) */

/* 칸과 그림의 비율이 달라(칸 1.905 · 썸네일 1.756) 남는 좌우를 그림의 흰 배경이 채워 흰 띠가 생겼다(사장님 지적 20260918).
 * 칸 높이를 고정하지 않고 명함이 열 너비를 다 쓰게 하면 띠가 없어지고, 열이 넓어질수록 명함도 같이 커진다. */
/* 자리는 미리 잡아 둔다 — 사진은 「보일 때 받기」라 높이를 사진에 맡기면 아직 안 받은 줄이 납작해져
 * 「세 줄」 계산이 흔들린다. 그래서 칸에 비율을 준다.
 *
 * ⚠ 그 비율은 «그 디자인»이 정한다(--fb-template-aspect, detail-renewal.js 가 채운다).
 * 명함 썸네일 치수(799×455)를 값이 없을 때의 기본으로만 남긴다 — 이 셸을 카드·리플릿이 같이 쓰면서
 * 비율이 다른 상품에 명함 비율이 물렸고, object-fit:contain 이 그림을 칸 «가운데»에 띄워 위아래로 빈 띠가
 * 남았다. 선택 테두리·그림자·시작 알약이 모두 그 띠까지 둘러서 「테두리가 어긋난다」로 보였다
 * (사장님 20260921 · 카드 113×170 실측: 칸 132×232 인데 그려진 그림은 132×197 — 위아래 17.5 씩). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-media {
  height:auto;
  min-height:0;
  aspect-ratio:var(--fb-template-aspect, 799 / 455);
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card[data-template-card-orientation="portrait"] .fb-store-template-media {
  aspect-ratio:var(--fb-template-aspect, 455 / 799);
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-media img {
  width:100%;
  height:100%;
  object-fit:contain;
}
/* 세로형 썸네일이 세로 칸을 다 채운다 — detail-renewal.css 가 세로형 visual 을 140px 로 묶어 452px 세로 칸(aspect 455/799) 안에서
 * 80×140 으로 작게 떠 ~312px 여백이 생겼다(사장님 20260919 「세로형은 여백이 너무 많다」). 가로형이 칸을 다 쓰듯 세로형도 칸을 채운다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card.is-portrait .fb-store-template-visual {
  height:100%;
}
/* 세로형 카드는 좁고 길다 — 가로형과 같은 열 수(3열)로 두면 한 장이 484px 로 커진다. 세로형일 때만 열을 더 촘촘히 해 카드를 알맞게 줄인다(PC 4열). */
@media (min-width:768px) {
  /* (걷음 20260920) 세로형 전용 열 밀도는 여기서 정하지 않는다 — detail-renewal.js syncGalleryCardScale 이
   * 가로형 칸과 같은 배율이 되도록 재서 정한다. 두 주인이 같은 것을 정하면 어긋난다 —
   * 실제로 176px 규칙이 «자»(열 폭)를 거짓말로 만들어 배율 계산이 틀어졌다. */
}

/* 넓어진 열에서 «컨트롤»까지 늘리지 않는다 — 탭과 단추는 읽고 누르는 것이라 길어질수록 나빠진다.
 * 늘어나는 것은 명함 격자뿐이다. */
@media (min-width:1200px) {
  /* (탭 줄은 열 너비를 다 쓴다 — 밑줄이 열의 머리선이라서. 단추 폭만 300 으로 묶는다: 맨 아래 「제목 띠」 블록.) */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-more { max-width:360px; margin-inline:auto; }
}

/* 「접기」 단추가 떠 있으려면(sticky) 조상 중에 overflow:hidden 이 없어야 한다 — 세 겹이 막고 있었다(실측 20260918).
 * 잘라야 하는 것은 명함 격자 자신이고(제 max-height + overflow), 이 조상들은 자를 것이 없다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .upload-detail.has-template-gallery,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-design-first-column,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-design-section {
  overflow:visible;
}

/* 정본(detail-renewal.css)이 썸네일 그림에 R4 를 준다 — 명함은 각지게 잘린다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-media img {
  border-radius:0;
}

/* ══ 모서리(각/라운드) — 방향과 같은 줄, 한 칸 떨어뜨려서 (사장님 선택 20260918) ══
 * 라운드는 방향이 아니라 «모서리»이고 다른 상품이다. 같은 줄에 두되 8+8 로 떨어뜨려 「다른 결정」으로 읽히게 한다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-toggle {
  display:flex;
  gap:8px;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-toggle > .fb-orient-btn { flex:1 1 0; }
/* 방향 단추와 같은 꼴(그림 + 이름 한 줄, 14px, 틈 10) — 라운드만 세로 쌓임이면 이름 줄이 10px 내려앉아 한 줄로 안 읽혔다(시각 검토 20260918). */
/* 키는 44 — 이 패널의 칸 키(수량·인쇄 방식 칸, 단면·양면 단추, 방향 단추 min-height:44 !important)와 같다.
 * 64 였을 때 flex 줄이 가장 큰 항목에 맞춰 늘어나 가로형·세로형까지 64 로 부풀었다(사장님 지적 20260918 「선택 박스가 너무 커」). */
/* 방향 줄도 이 칸의 «줄 하나»다 — 이웃 줄 간격은 8 이다(크기 칸 margin-bottom:8 실측).
 * 0 이면 「크기」 글자가 알약 밑에 붙어 두 줄이 한 덩어리로 보인다(실측 gap 0). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-group { margin-bottom:8px; }
/* 줄이 모자라면 「모서리 라운드」가 다음 줄로 — 한 줄 고정이라 줄 폭 258·298·309·310px(320·360·375 폰, PC 960~1024 패널)에서
 * 내용 318~334px 가 넘쳐 「모서리 라」 로 잘렸다(실측 20260924). 390 폰(324)·1100 이상 PC 패널(382)은 종전처럼 한 줄.
 * 내려간 줄에서는 구분선·들여쓰기 없이 방향 알약과 같은 왼쪽 선에서 시작한다(판정은 이 줄의 폭 — 컨테이너 쿼리). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-group { container-type:inline-size; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-orient-toggle { flex-wrap:wrap; row-gap:8px; }
/* 「모서리 라운드」는 세 번째 방향이 아니다 (사장님 20260919 「라운드는 성격이 좀 다른 거잖아, 이건 그냥 체크 고정」).
 * 가로형·세로형은 둘 중 하나(알약), 이것은 켬다/끈다 — 같은 모양의 알약을 셀이면 셋 중 하나로 읽힌다.
 * 구분선 뒤에 떼어 두고 네모 체크로 말한다. (상품 라우트라 실제로는 링크이다 — 그래서 inline-flex.) */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-corner-btn {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  min-height:44px;
  margin-left:6px;
  padding:0 4px 0 14px;
  gap:9px;
  border:0;
  border-left:1px solid var(--bj-line,#e5e2de);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--bj-muted,#66635e);
  font:inherit;
  font-size:14px;
  font-weight:650;
  text-decoration:none;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-corner-btn:hover { border-color:var(--bj-line-strong,#938d86); }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-corner-btn.is-active { color:var(--bj-ink,#181817); box-shadow:none; }
/* 켜면 차는 네모 체크 — 방향 알약의 누운 사각형과 다른 언어여야 한다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-corner-btn .fb-orient-check {
  /* 올 규칙의 flex:0 0 18px 가 width 를 이긴다(flex-basis 가 주축 크기를 정한다) — 18×20 으로 찌그러졌다. 사각으로 되돌린다. */
  flex:0 0 20px;
  width:20px;
  height:20px;
  border:1.5px solid currentColor;
  border-radius:5px !important;
  background:transparent;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-corner-btn.is-active .fb-orient-check {
  position:relative;
  border-color:var(--bj-ink,#181817);
  background:var(--bj-ink,#181817);
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-corner-btn.is-active .fb-orient-check::after {
  content:'';
  position:absolute;
  left:6px;
  top:2px;
  width:5px;
  height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
/* (위 「줄이 모자라면 모서리 라운드가 다음 줄로」의 짝) 구분선·들여쓰기를 걷는 규칙은 모서리 단추의 기본 규칙보다 뒤에 둔다 — 컨테이너 쿼리는 우선순위를 올리지 않는다. */
@container (max-width:317px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-corner-btn { flex:1 0 100%; margin-left:0; padding-left:0; border-left:0; }
}
/* 라운드 상품을 보고 있으면 목록의 명함도 둥글다 — 화면이 지금 파는 것을 말한다.
 * 굽은 정도는 «실제 R»이다 — detail-renewal.js syncTemplateCornerRadius 가 상품 원장의 R(mm)과 그림의 긴 변(px)으로 잰다.
 * 6px 은 재기 전 한 프레임의 바닥값일 뿐이다(사장님 20260919 「알 값이 실제로 너무 좀 작아, 5미리 정도 되거든」). */
html.fb-detail-renewal .page-wrap[data-namecard-corner="round"] .fb-namecard-work-area .fb-store-template-media img {
  border-radius:var(--fb-template-corner-r, 6px);
}

/* 톰슨 썸네일은 칼선 바깥이 투명하다. 정본의 흰 배경·테두리·그림자를 그림 자체에서 제거한다. */
/* 썸네일은 종이 모양만 표시한다. 그림자는 특히 라운드의 잘린 모서리에 사각 잔상을 남기므로 쓰지 않는다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-media img {
  border:0;
  background:transparent;
  box-shadow:none;
}
/* 헤더와 같은 밝은 바탕에서는 흰 종이의 윤곽이 사라지므로 카드 자체에만 얇은 선을 둔다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card:not([data-template-process="thomson"]) .fb-store-template-visual:not(.is-blank-canvas) img {
  outline:1px solid var(--bj-line);
  outline-offset:-1px;
}


/* ══ 두 열은 같은 선에서 시작한다 (사장님 20260918 「단차 때문에 안 맞아」 → 「만드는 방법을 선택하세요, 이 말이 필요할까?」) ══
 * 실측 1440×900: 화살표가 혼자 44px 띠(y132~176)를 차지하고, 그 밑에서 왼쪽 제목 글자(184)와 오른쪽 패널의 흰 모서리(184)가
 * 나란히 시작해 글자 머리와 상자 모서리가 어긋나 보였다. 탭 밑줄(283)과 패널 정체성 밑줄(277)은 6px 차이 — 「단차」.
 * 제목은 탭이 이미 하는 말(템플릿에서 고르기 / 파일·사진 올리기)의 되풀이라 명함 시작 화면에서는 내지 않는다(preview.php).
 * 그러면 두 열이 184 에서 «같은 종류의 것»(왼쪽 탭 줄 · 오른쪽 패널)으로 같이 시작한다. */
/* 펼친 폭(1500)에서는 화살표 줄도 같이 넓어져야 화살표가 왼쪽 열의 왼쪽에 놓인다 — 1000 에 남아 있으면 172px 떠 있었다. */
@media (min-width:1200px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"][data-namecard-templates-expanded="1"] > .fb-detail-entry {
    width:min(1500px, 100vw - 96px);
    margin-left:calc(50% - min(1500px, 100vw - 96px) / 2);
  }
  /* 탭 줄의 밑줄은 열의 머리선이다 — 열이 864 로 넓어졌는데 600 에서 끊기면 그것도 단차다. 단추 폭만 300 으로 묶는다. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-start-tabs { max-width:none; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-start-tab { flex:0 1 300px; }
}

/* ══ 양면 디자인은 양면이라고 말한다 (사장님 20260918) — 61장 중 39장이 뒷면이 있는데 앞면만 보였다 ══
 * 글자(「양면」)가 아니라 표(두 장 겹친 그림)로 — 「텍스트 말고 배지 같은 걸로」(사장님). 오른쪽 위 28px 원.
 * 표를 누르면 뒤집힌다 — 폰과 PC 가 같다. 마우스를 올리기만 해서는 뒤집지 않는다(20260920).
 * 뒤집기는 세로축 회전 — 「다른 면」이라는 뜻이 그대로 전해진다. 움직임을 줄인 설정에서는 서서히 바뀐다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-card[data-template-faces="2"] .fb-store-template-visual > img {
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:perspective(900px) rotateY(0deg);
  transition:transform 380ms cubic-bezier(.2,.7,.2,1), filter 140ms ease;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-card[data-template-faces="2"] .fb-store-template-visual > .fb-store-template-back {
  position:absolute;
  inset:0;
  transform:perspective(900px) rotateY(180deg);
  pointer-events:none;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-card[data-face="back"] .fb-store-template-visual > img:not(.fb-store-template-back) { transform:perspective(900px) rotateY(180deg); }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-card[data-template-faces="2"][data-face="back"] .fb-store-template-visual > .fb-store-template-back { transform:perspective(900px) rotateY(360deg); }
/* ⚠ 마우스를 올리기만 해도 뒤집히던 규칙은 걷었다 (사장님 20260920 「마우스 오버 시에 뒤집히는 버그」).
 * 뒷면 그림에는 «칼선 모양이 없다» — 톰슨으로 예쁘게 륌 명함이 손가락이 지나가는 것만으로 회색 사각형이 됐다
 * (실측 D057~D060: 쉬는 상태의 잘린 모서리는 바탕색 244,242,238 로 깨끗하다 — 더러움은 오직 뒤집힌 뒷면이었다).
 * 뒤집기는 손님이 «표를 눌렀을 때»만. 표(두 장 겹친 그림)는 그대로 있고 폰과 PC 가 같은 길이 됐다. */
@media (prefers-reduced-motion:reduce) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-card[data-template-faces="2"] .fb-store-template-visual > img { transition:opacity 200ms ease, filter 140ms ease; transform:none !important; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-card[data-template-faces="2"] .fb-store-template-visual > .fb-store-template-back { opacity:0; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-card[data-template-faces="2"][data-face="back"] .fb-store-template-visual > .fb-store-template-back { opacity:1; }
}
/* 표 — 두 장 겹친 그림. 앞면일 때 흰 원에 먹 선, 뒷면을 보고 있을 때 먹 원에 흰 선. */
/* 조용하게 — 39장에 하나씩 붙는 표라 흰 원·먹 선·그림자면 목록 전체가 시끄러웠다(사장님 20260918 「아이콘이 너무 강해」).
 * 쉬는 상태: 22px 반투명 원 + 옅은 선. 카드에 올리면 또렷해지고, 뒷면을 보는 동안만 먹 원. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-flip {
  position:absolute;
  top:6px;
  right:6px;
  z-index:2;
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:rgba(24,24,23,.55);
  cursor:pointer;
  transition:background-color 140ms ease, color 140ms ease;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-flip svg { display:block; width:13px; height:11px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-flip svg rect { stroke-width:1.3; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-card:hover .fb-store-template-flip { background:rgba(255,255,255,.96); color:var(--bj-ink,#181817); }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-card[data-face="back"] .fb-store-template-flip,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-card[data-template-faces="2"]:not([data-face]):hover .fb-store-template-flip {
  background:var(--bj-ink,#181817);
  color:#fff;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-card[data-face="back"] .fb-store-template-flip rect:last-child,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-card[data-template-faces="2"]:not([data-face]):hover .fb-store-template-flip rect:last-child { fill:currentColor; }

/* 올렸을 때 정본은 그림을 어두운 막(68%)으로 덮고 「이 디자인 선택」을 가운데 띄운다 — 그러면 방금 넘어간 뒷면이 안 보인다.
 * 명함 목록에서는 막을 걷고 그 글자만 작은 알약으로 둔다. 그림은 그대로 보이고, 누를 수 있다는 신호는 남는다.
 * 자리는 «칸 안옆, 아래»다 (사장님 20260920 시각 검토) — 명함은 위에 이름·로고가, 아래에 작은 연락처가 온다.
 * 위 가운데에 두었더니 고를 때 정작 보아야 할 이름(「다인 모터스」)을 덤었다 — 무엇을 고르는지를 가리는 새였다.
 * 칸 밖으로 매달지 않는다 — 둥근 모서리 모양이 깨진다. 예전에 걸리던 아래 오른쪽 「골드박 적용」 표는
 * 이 목록에서 이미 숨긴다(.fb-store-template-postproc-status display:none) — 겹칠 것이 없다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-media {
  /* 알약의 크기는 «그 칸의 너비»가 정한다 — 아래 @container 가 이 상자를 잰다. */
  container-type:inline-size;
  container-name:fb-template-stage;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-edit {
  inset:auto 0 8px 0;
  width:max-content;
  margin:0 auto;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(24,24,23,.86);
  box-shadow:0 1px 3px rgba(24,24,23,.14);
}

/* ══ 고른 칸이 곧 시작 단추 (사장님 20260919 「버튼을 선택하고 『이 디자인으로 시작』 이거를 두 번 눌러야 되잖아」) ══
 * 고르면 그 칸의 알약이 「이 디자인으로 시작 →」으로 바뀌어 «올리지 않아도» 늘 보인다. 한 번 더 누르면 그대로 편집기로 간다.
 * 왼쪽 위 「선택한 디자인」 꼬리표는 내지 않는다 — 이 알약이 같은 말을 더 분명하게 하고, 가운데 알약과 자리도 겹쳤다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card.is-selected .fb-store-template-media::after { content:none; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card.is-selected .fb-store-template-edit {
  opacity:1;
  max-width:calc(100% - 12px);
  padding:5px 12px;
  background:var(--bj-ink,#20201e);
  box-shadow:0 2px 8px rgba(24,24,23,.28);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
/* 세로로 긴 상품(카드·리플릿)의 칸은 명함 칸보다 훨씬 좁다 — 같은 글자·같은 크기를 넣었더니 알약이
 * 칸 너비의 91% 를 차지해 디자인 위에 띠를 하나 얹은 꼴이 됐다(사장님 20260921 「너무 길게 돼 있고」 ·
 * 실측: 카드 120/132=91% · 명함 135/232=58%). 글자를 바꾸지 않고 «좁은 칸에서만» 알약을 줄인다 —
 * 넓은 칸(명함)은 재어 보면 조건에 걸리지 않아 지금 모습 그대로다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-edit [data-template-action-brief] { display:none; }
@container fb-template-stage (max-width: 190px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-edit [data-template-action-full] { display:none; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-edit [data-template-action-brief] { display:inline; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-edit { padding:3px 9px; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card.is-selected .fb-store-template-edit { padding:4px 11px; }
}
@media (max-width:767px) {
  /* 폰에서는 이 알약을 내지 않는다 — 바닥 바가 이미 「이 디자인으로 시작」을 들고 따라다니고 있어 같은 말을 두 번 하게 되며,
   * 좋은 자리도 없다 — 실측 390: 알약이 명함 윗부분을 덮고 화살표는 칸에 못 들어가 잘렸다(320 에선 글자까지 잘렸다).
   * 그래서 폰의 고른 칸은 종전대로 ✓ 표만 달고, 시작은 바닥 바가 한다.
   * 칸이 「시작」이라고 말하지 않으므로 다시 눌러도 시작하지 않는다 — 보이는 것과 하는 일을 같은 조건으로 묶었다(detail-renewal.js cardStartAffordanceVisible). */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card.is-selected .fb-store-template-edit { opacity:0; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card.is-selected .fb-store-template-media::after { content:'✓'; content:'✓' / '선택한 디자인'; }
}

/* 라운드의 선도 이미지와 같은 반경으로 그린다. outline 은 모서리에서 네모난 잔상을 남긴다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"][data-namecard-corner="round"] .fb-namecard-work-area .fb-store-template-card:not([data-template-process="thomson"]) .fb-store-template-visual:not(.is-blank-canvas) img {
  outline:none;
  border:1px solid var(--bj-line);
  box-sizing:border-box;
  box-shadow:none;
}

/* 모양대로 자른 톰슨 명함에도 그림자를 두지 않는다. 오목한 칼선 안쪽에 회색 얼룩이 생긴다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card[data-template-process="thomson"] .fb-store-template-media img,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card[data-template-process="thomson"]:hover .fb-store-template-media img,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card[data-template-process="thomson"]:focus-visible .fb-store-template-media img {
  box-shadow:none;
  filter:none;
}
/* 오버·초점의 신호는 «들림» 하나다 — 사각형도, 그림자도 쓰지 않는다.
 * 사장님은 둘 다 물렸다: 20260920 「마우스 오버 했을 때 … 사각형으로 보여」(칸에 그리는 네모),
 * 그리고 같은 날 「그림자 깨끗하게 좀 하라니까」(오목한 자리를 채우는 그림자).
 * 칼선 밖이 투명한 카드에서 남는 것은 위치뿐이라 그것으로 말한다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card[data-template-process="thomson"] .fb-store-template-visual {
  transition:transform 140ms ease;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card[data-template-process="thomson"]:hover .fb-store-template-visual,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card[data-template-process="thomson"]:focus-visible .fb-store-template-visual {
  transform:translateY(-3px);
}

/* ══ 두 방향은 같은 배율로 그린다 (사장님 20260920 「세로형이 더 커 보이잖아」) ══
 * 실측: PC 가로형 2.86 px/mm 에 세로형 3.59(26% 큰), 폰은 1.72 대 3.06(78% 큰).
 * 같은 명함인데 두 크기로 보였다 — 두 격자가 각자 열을 채워서다.
 * detail-renewal.js syncGalleryCardScale 이 가로형 칸의 폭(=90mm)을 재 세로형 칸의 폭을 정해 준다.
 * 칸을 가운데 두어 남는 자리가 한쪽으로 몰리지 않게 한다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-card.is-portrait {
  width:100%;
  max-width:var(--fb-portrait-card-w, none);
  justify-self:center;
}

/* 백지 칸에도 라운드가 들어간다 (사장님 20260920 「라운드가 들어가면 라운드 표시가 돼야 되겠지」).
 * 백지는 그림이 없어 <img> 에 준 규칙이 닿지 않았다 — 칸 자체가 둥글게. 테두리(inset box-shadow)도 그 모양을 따른다. */
html.fb-detail-renewal .page-wrap[data-namecard-corner="round"] .fb-namecard-work-area .fb-store-template-visual.is-blank-canvas {
  border-radius:var(--fb-template-corner-r, 6px);
}

/* ══ 다른 방향 디자인은 숨기지 않고 «구역»을 나눈다 (사장님 20260920) ══
 * 기본이 가로형이라 세로형 18장(61장 중 29%)을 손님이 한 번도 못 봤다.
 * 한 격자에 섞으면 칸 높이가 제각각이라 구멍이 생긴다(사장님 20260919 「에헤 이렇게 섞이면 안 돼」) —
 * 그래서 섞지 않고 구역을 나눈다. 구역 안은 방향이 같아 줄이 맞는다.
 * 펼쳐야 나온다 — 접힌 화면은 세 줄이 정본이고, 「N개 모두 보기」의 N 이 이 구역까지 세어 약속을 지킨다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area:not([data-template-expanded="1"]) [data-template-other-orient] { display:none; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-namecard-other-orient {
  margin:22px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--bj-line,#e5e2de);
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-namecard-other-orient-head {
  margin:0 0 12px;
  color:var(--bj-muted,#6f6b66);
  font-size:14px;
  font-weight:600;
  line-height:20px;
}
/* 구역의 격자는 제 방향의 열 밀도를 따른다 — 세로형은 촌촌히(PC 176px), 가로형은 기본값. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area [data-template-other-grid] {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
}
@media (min-width:768px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area [data-template-other-grid] { grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:16px; }
  /* 같은 이유로 구역 격자의 세로형 열 밀도도 JS 가 갖는다. */
}

/* ══ 「백지로 시작하기」는 칸 안에서 이름을 말한다 (사장님 20260919 「제일 첫번째는 백지로 시작하기 이게 하나 있어야 되지 않겠어」) ══
 * 이 목록은 칸 밑 글자를 내지 않는다(.fb-store-template-copy display:none — 디자인이 스스로 말하므로).
 * 백지 칸에는 보여 줄 디자인이 없어 「+」 하나만 남았다 — 그림을 가리지 않는 유일한 칸이니 이름을 안에 적는다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-visual.is-blank-canvas {
  flex-direction:column;
  gap:8px;
}
/* 문자 + 의 좌우 여백은 글꼴마다 달라 원 안에서 어긋난다. 두 획을 원의 정확한 중심에 그린다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-blank-mark {
  position:relative;
  flex:none;
  box-sizing:border-box;
  font-size:0;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-blank-mark::before,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-blank-mark::after {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  background:currentColor;
  transform:translate(-50%,-50%);
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-blank-mark::before { width:12px; height:2px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-blank-mark::after { width:2px; height:12px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-blank-label {
  max-width:calc(100% - 16px);
  color:var(--bj-ink,#20201e);
  font-size:14px;
  font-weight:600;
  line-height:20px;
  text-align:center;
  /* 좁은 칸에서 「백지로 시작 / 하기」로 끊겼다 — 한글은 낱말 사이에서 끊는다. */
  word-break:keep-all;
}
@media (max-width:767px) {
  /* 폰 칸은 작다 — 「+」을 줄이고 글자는 정본의 13px 밑으로 내리지 않는다. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-visual.is-blank-canvas { gap:6px; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-blank-mark { width:30px; height:30px; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-blank-label { font-size:13px; line-height:18px; }
}
@media (max-width:359px) {
  /* 두 줄 이름이 30px 원과 합쳐져 카드 높이를 넘지 않도록 좁은 폭에서 내용 높이만 줄인다. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-visual.is-blank-canvas { gap:0; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-blank-mark { width:22px; height:22px; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-blank-mark::before { width:10px; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-blank-mark::after { height:10px; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-blank-label { line-height:15px; }
}

/* ══ 「디자인을 골라 주세요」는 목록 머리에서 (사장님 20260919 「이 안내가 지금 여기 이렇게 나오는게 맞을까?」) ══
 * 종전에는 오른쪽 끝 시작 단추 밑에 붙었다 — 보고 있는 곳과 해야 할 일이 서로 다른 열에 있었다. 이제 말이 필요한 자리(목록 위)에 선다.
 * 경고가 아니라 안내라서 빨강이 아니다. 하나를 고르면 사라진다(detail-renewal.js setWorkAreaPickHint). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-namecard-pick-hint {
  margin:0 0 12px;
  padding:9px 14px;
  border:1px solid var(--bj-ink,#20201e);
  border-radius:10px;
  background:#fff;
  color:var(--bj-ink,#20201e);
  font-size:14px;
  font-weight:600;
  line-height:20px;
}

/* ══ 첫 화면의 목록은 닫힌 상자가 아니다 (사장님 20260918 「6개에 딱 갇혀 있는 느낌」) ══
 * 세 줄에서 딱 끊기면 그것이 전부로 보인다. 네 번째 줄의 윗부분이 비쳐 보이고(detail-renewal.js 가 40% 만큼 더 보여 준다)
 * 그 끝을 바닥색으로 서서히 지운다 — 「밑에 더 있다」는 말을 그림이 한다. 펼치면 지우개는 없다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area [data-template-overview-grid] { position:relative; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area[data-template-clipped="1"]:not([data-template-expanded="1"]) [data-template-overview-grid]::after {
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:56px;   /* 비치는 넷째 줄(≈72)의 윗 24px 은 또렷이, 나머지가 사라진다 — 88 이면 전부 흐려져 얼룩으로 보였다(시각 검토 20260918) */
  background:linear-gradient(to bottom, transparent, var(--fb-order-band) 85%);
  pointer-events:none;
  z-index:3;
}

/* (돋보기 .fb-store-template-lens 는 걷었다 — 사장님 20260919 「뒷면 디자인을 가려서」.) */

/* ══ 가공을 입힌 목록의 한 줄 — 「가공 모습은 실물과 다를 수 있어요」 (기획안 §3, 시뮬레이션이지 사진이 아니다) ══
 * 격자 앞, 가공이 입혀질 때만(detail-renewal.js syncGalleryFoil). 종류 칩은 걷었다(사장님 20260918). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-note { margin:0; font-size:13px; line-height:19px; color:var(--bj-muted,#66635e); }
/* 다른 방향의 디자인 안내 — 목록 밑 한 줄(13px 흐림) + 「세로형으로 바꾸기」(밑줄 글자 단추, 높이 44 로 누르기 쉽게). 방향은 크기 칸의 사양이라 누르는 것은 손님. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-note[hidden] { display:none; }
@media (max-width:767px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-note { margin:0 0 8px; padding-top:8px; font-size:13px; line-height:19px; }  /* 탭 밑줄 → 안내 = 8 + 8 = 16(선 뒤는 16 — 위 여백은 격자 칸의 여백과 겹쳐 사라지니 padding) · 안내 → 명함 = 8 + 칸 안 여백 8 = 16 */
}

/* ══ 폰에서는 목록이 옆으로 넘기는 «페이지»다 (사장님 20260918 「모바일에서는 좌우 스와이프로 볼 수 있게」) ══
 * 3줄×2장이 한 화면. 셋째 열이 20px 비쳐 「옆에 더 있다」를 말하고, 밑의 점이 어디쯤인지 말한다(detail-renewal.js syncWorkAreaPages).
 * 위아래 길이는 그대로라 수량·종이 카드가 늘 바로 밑에 있다 — 세로로 61장을 늘어놓지 않는다. 가로 굴림은 세로 페이지 굴림과 축이 달라
 * 「두 겹 스크롤」이 아니다. 「모두 보기」로 펼치면 세로 목록(기존)이고 이 규칙은 빠진다.
 * 명함 위에서 세로로 끌어 목록이 «자라는 동안»(data-template-growing — 사장님 20260927 「폰에서도 스크롤하면 펼쳐지게」)도
 * 세로 목록이다: 여섯 줄에서 자르고 지우개로 끝을 흐린다(PC 와 같은 잘린 끝) — 이 규칙들은 빠진다. */
@media (max-width:767px) {
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area:not([data-template-expanded="1"]):not([data-template-growing="1"]) [data-template-overview-grid] {
    grid-auto-flow:column;
    grid-template-columns:none;
    /* 줄 수는 방향이 정한다 — 가로형 넷(칸이 낮다) · 세로형 셋. detail-renewal.js workAreaFirstRows 와 같은 규칙이다. */
    grid-template-rows:repeat(4, auto);
    grid-auto-columns:calc((100% - 16px * 2 - 20px) / 2);   /* 두 열 + 틈 16 둘 + 셋째 열 20px 비침 */
    max-height:none;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:8px;    /* 아랫줄 그림자가 잘리지 않게(카드 안쪽 8 과 합쳐 16 — 그림자 12 를 덮는다). 명함 → 점 = 16. */
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area[data-gallery-orientation="portrait"]:not([data-template-expanded="1"]):not([data-template-growing="1"]) [data-template-overview-grid] { grid-template-rows:repeat(3, auto); }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area:not([data-template-expanded="1"]):not([data-template-growing="1"]) [data-template-overview-grid]::-webkit-scrollbar { display:none; }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area:not([data-template-expanded="1"]):not([data-template-growing="1"]) [data-template-overview-grid] > .fb-store-template-card.is-page-start { scroll-snap-align:start; }
  /* 마지막 칸은 «끝»에 붙는다 — 페이지 시작점이 굴릴 수 있는 길이를 넘어서면 그 자리가 닿지 않아 밀어도 안 움직인다(실측 세로형). */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area:not([data-template-expanded="1"]):not([data-template-growing="1"]) [data-template-overview-grid] > .fb-store-template-card.is-page-end { scroll-snap-align:end; }
  /* 페이지에서는 잘린 끝이 없으니 지우개도 없다. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area:not([data-template-expanded="1"]):not([data-template-growing="1"]) [data-template-overview-grid]::after { display:none; }
  /* 점 — 지금 페이지는 길게, 나머지는 작게. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-pages {
    display:flex;
    justify-content:center;
    gap:6px;
    margin-top:0;
  }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-pages > i {
    display:block;
    width:6px;
    height:6px;
    border-radius:999px;
    background:rgba(24,24,23,.18);
    transition:width 160ms ease, background-color 160ms ease;
  }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-pages > i.is-active { width:16px; background:var(--bj-ink,#181817); }
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-pages[hidden] { display:none; }
  /* 153px 명함 위에서는 20px. */
  html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-store-template-flip { top:5px; right:5px; width:20px; height:20px; }
}

/* (「골드박 적용」 표는 이 목록에서 아예 감춘다 — 맨 아래 「금박 미리보기에는 표가 없다」 블록. 뒷면 겹침 규칙은 그래서 필요 없다.) */

/* (종류 칩 [전체][일반][금박]… 은 걷었다 — 사장님 20260918 「별 의미가 없을 것 같아」. 무엇이 보이는지는 켜진 가공이 정한다.) */
/* 세 줄에 다 들어가면 「모두 보기」는 없다(JS 가 hidden) — 그때 격자 밑 여백은 격자가 아니라 다음 줄이 갖는다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-more[hidden] { display:none; }
/* ══ 금박 미리보기에는 표가 없다 (사장님 20260918 「금박 칩과 가격은 표기할 필요 없어」) ══
 * 그림이 이미 금박을 말한다. 값은 고르면 패널의 금박 칸이 말한다. 금박 디자인 6장의 「골드박 적용」 표도 이 목록에서는 감춘다 — 같은 이유. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-work-area .fb-store-template-postproc-status { display:none; }

/* ══ 종이 줄의 절수·배치 보기 (사장님 20260919 「벨라 300g 몇 절이라고 같이 표기 · 클릭하면 절수·앉혀진 목업이 보여야」) ══
 * 종이 칸: 「그렌디 300g · 4×6전지 8절」 — 절수는 이름 옆, 흐리게(값은 factory.js orderData.paperCut).
 * 칸 밑 한 줄: 「종이 한 장에 명함 20개 · 배치 보기」 — 회색 상자·아이콘·제목은 걷고 13px 한 줄. 이름 → 칸 8 · 칸 → 딸린 줄 8 (사다리).
 * 누르면 정본 팝업(paper-cut-select-bar → .paper-cut-popup)이 명함이 앉혀진 배치 SVG 를 연다. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-paper-cut-inline {
  color:var(--bj-muted,#66635e);
  font-weight:500;
  white-space:nowrap;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-paper-layout-status {
  display:flex;
  min-height:0;
  align-items:baseline;
  gap:8px;
  margin:8px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--bj-muted,#66635e);
  font-size:13px;
  line-height:20px;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-paper-layout-status[data-state="error"] { background:transparent; border:0; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-paper-layout-status[data-state="error"] .fb-paper-layout-state { color:#9d3f3f; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-paper-layout-icon,
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-paper-layout-copy strong { display:none; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-paper-layout-copy { display:block; min-width:0; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-paper-layout-state { font-size:13px; line-height:20px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-paper-layout-action {
  margin-left:auto;
  color:var(--bj-ink,#181817);
  font-size:13px;
  font-weight:600;
  line-height:20px;
  text-decoration:underline;
  text-underline-offset:3px;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-paper-layout-status:hover .fb-paper-layout-action { color:var(--bj-muted,#66635e); }

/* ══ 총액은 먹색 (사장님 20260919 「빨간색은 여기밖에 없는데 까만색 아냐」) ══
 * 사이트의 금액은 --bj-ink 다(common/bojagi-design-system.css). 붉은 #d6535d 는 detail-renewal.css 의
 * `.fb-detail-renewal .order-total-price, .mobile-total-price` — 팩토리비 상세 공통 규칙이라 이 입구(PC 패널 · 폰 아래 막대 · 폰 주문 패널)에서만 되돌린다.
 * 폰 주문 패널(#mobileOrderPanel)은 page-wrap 밖이라 body 의 shared 표시로 잡는다(20260919 실측: 붉게 남아 있었다). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .order-total-price,
html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-total-price,
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .order-total-price { color:var(--bj-ink,#181817); }
/* 「기본 제작 금액 8,820원 + 레이저 커팅 별도」처럼 덜 찬 견적의 금액(strong)도 먹색 — detail-renewal.css 의 accent(#e94f5f)가 남아 레이저를 켜면 총액만 붉어졌다(실측 20260919). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-confirmed-base-price strong,
html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-total-price .fb-confirmed-base-price strong,
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .fb-confirmed-base-price strong { color:var(--bj-ink,#181817); }
/* 그 밑 「+ 레이저 커팅 별도 · …」 도 폰 아래 막대에서는 page-wrap 밖이라 갈색(#8a4c0f)이 남았다 — PC 패널과 같은 흐린 글자. */
html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-total-price .fb-pending-price-note,
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .fb-pending-price-note { color:var(--bj-muted,#66635e); font-weight:400; }

/* ══ 선택 내역 「톰슨 재단 · 면처리」 줄 (사장님 20260919 「톰슨은 값을 내리지 말고 보이게」) ══
 * 이름 밑 한 줄 「한 장씩 목형으로 따서 재단면에 뒷묻음이 없고, 박·형압이 늘 같은 자리에 앉아요」 — 종이 줄의 배치 안내와 같은 자리·같은 글자(13px 흐림).
 * 줄은 종이 줄과 같은 격자(이름·안내 왼쪽, 금액 오른쪽 위)라 안내가 길어도 금액이 내려앉지 않는다. */
#fbNamecardPriceSheet .order-detail-row[data-key="thomson"],
#mobileOrderPanel .order-detail-row[data-key="thomson"] { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:4px 10px; }
#fbNamecardPriceSheet .order-detail-row[data-key="thomson"] .order-detail-label,
#mobileOrderPanel .order-detail-row[data-key="thomson"] .order-detail-label { min-width:0; word-break:keep-all; overflow-wrap:normal; }
#fbNamecardPriceSheet .order-detail-row[data-key="thomson"] .order-detail-price,
#mobileOrderPanel .order-detail-row[data-key="thomson"] .order-detail-price { white-space:nowrap; }
.fb-namecard-cut-note { display:block; margin:8px 0 0; color:var(--bj-muted,#6f6b66); font-size:13px; font-weight:400; line-height:19px; word-break:keep-all; }  /* 이름 → 안내 8 — 종이 줄의 배치 안내와 같은 걸음(전수 점검 20260919: 4 는 사다리 밖) */
/* 대량명함 안내 줄(「지금 건당 ○○원 · 40건이면 건당 ○○원」) — 총액 아래 1장당 줄과 같은 회색, 비면 자리도 없다. */
.fb-detail-renewal .order-summary-total .order-bulk-hint { display:block; margin-top:2px; font-size:12px; line-height:16px; color:var(--bj-muted,#6f6b66); font-weight:400; }
.fb-detail-renewal .order-summary-total .order-bulk-hint:empty { display:none; }

/* ══ 자유형 「모양」 줄 (사장님 2026-09-19 오후 「사각형이면 재단으로 크기 자유, 톰슨이면 목형 값을 받고 진행」 · 2026-09-20 「자유형 톰슨은 무조건 맞춤 목형」 — 「목형」 줄 없음) ══
 * 다른 줄과 같은 꼴(①-1 「줄은 한 칸, 이름이 위」) — 이름 1행 · 칸 2행 · 단서/목록 3행. 2열에 놓으면 암시적 둘째 열이 생겨
 * 390 에서 이름이 세로로 찢어졌다(헤드리스 실측 2026-09-19). 사다리 8/16/32 · 칸 키 44 · 세그먼트는 방향 단추(.fb-orient-btn)와 같은 꼴. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .upload-form-grid > .fb-namecard-shape-group {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:8px;
  align-items:start;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-shape-toggle { grid-column:1; grid-row:2; display:flex; gap:8px; }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-shape-btn {
  flex:1 1 0;
  min-height:44px;
  border:1px solid var(--bj-line,#e5e2de);
  border-radius:8px;
  background:#fff;
  color:var(--bj-muted,#66635e);
  font:inherit;
  font-size:14px;
  font-weight:650;
  cursor:pointer;
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-shape-btn:hover:not(.is-active) { border-color:var(--bj-line-strong,#938d86); }
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-shape-btn.is-active {
  border-color:var(--bj-ink,#181817);
  box-shadow:inset 0 0 0 1px var(--bj-ink,#181817);
  color:var(--bj-ink,#181817);
}
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-shape-btn:focus-visible { outline:2px solid var(--bj-ink,#181817); outline-offset:2px; }
/* 단서 한 줄 — 줄 이름 기둥을 비우고 컨트롤 밑에 8. 13px/400 은 이 패널의 단서 글자. */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-specifications .fb-namecard-shape-hint { grid-column:1; grid-row:3; margin:0; color:var(--bj-muted,#66635e); font-size:13px; font-weight:400; line-height:20px; }
/* 「예상」 한 줄 — 맞춤 목형인데 칼선 검사 전. 금액 이름 줄 «안»에서 「(1장당 N원)」과 같은 결로 말한다.
 * 종전의 보라 알약은 금액 밑에 홀로 떠 다른 것으로 보였다(사장님 20260920 「이게 여기 왜 들어가」). */
html.fb-detail-renewal .page-wrap[data-namecard-shared-entry="1"] .fb-namecard-quote-estimate,
html.fb-detail-renewal body[data-fb-order-method="shared"] #mobileOrderPanel .fb-namecard-quote-estimate {
  display:block;
  margin:2px 0 0;
  padding:0;
  border:0;
  color:var(--bj-muted,#66635e);
  font-size:13px;
  font-weight:400;
  line-height:19px;
  white-space:nowrap;
}


/* ══ 크기를 묻는 칸은 하나다 (전수 조사 20260921) ══════════════════════════════
 * 자유형 리플릿에는 크기 칸이 둘 있었다 — 패널의 「만들 크기」와 접지 모듈의 「펼침 가로/세로」.
 * 그런데 값을 쥔 것은 접지 모듈 하나뿐이다(leaflet-order.js applySize → _fb_setProductSize).
 * 실측: 패널에 250 을 넣어도 금액은 29,460원 그대로였고, 접지 모듈에 180 을 넣자 28,160원으로
 * 움직였다. 즉 패널의 그 칸은 «받기는 하는데 반영하지 않는» 칸이었다 — 고객이 넣은 크기와
 * 주문되는 크기가 달라진다. 값을 쥐지 않는 쪽을 없앤다.
 * (카드·명함의 자유형은 반대다 — 그쪽은 이 칸이 정본이라 그대로 둔다.) */
html.fb-detail-renewal .page-wrap[data-entry-category="leaflet"] .spec-size-input,
html.fb-detail-renewal .page-wrap[data-entry-category="leaflet"] .size-input-hint-row { display:none !important; }

/* 명함의 고정 구매 바는 금액과 산출 기준 두 줄만 보여 준다.
 * 총 제작 금액이라는 중복 라벨은 시각적으로 숨기고 화면 읽기에는 남긴다. */
@media(max-width:767px) {
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-bottom-bar[data-namecard-shared-entry="1"] .mobile-bottom-inner {
    min-height:72px;
    padding:6px 20px;
  }
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-bottom-bar[data-namecard-shared-entry="1"] .mobile-total {
    gap:0;
  }
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-bottom-bar[data-namecard-shared-entry="1"] .mobile-total-label {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
  }
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-bottom-bar[data-namecard-shared-entry="1"] .mobile-total-price {
    font-size:17px;
    line-height:20px;
  }
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-bottom-bar[data-namecard-shared-entry="1"] .mobile-total-price .fb-confirmed-base-price,
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-bottom-bar[data-namecard-shared-entry="1"] .mobile-total-price .fb-pending-price-note {
    line-height:16px;
  }
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-bottom-bar[data-namecard-shared-entry="1"] .fb-mobile-quote-basis {
    font-size:12px;
    line-height:18px;
    white-space:nowrap;
  }
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-bottom-bar[data-namecard-shared-entry="1"] .mobile-btn-order {
    height:48px;
    min-width:154px;
    padding-inline:12px;
  }
}
@media(max-width:360px) {
  html.fb-detail-renewal body[data-fb-order-method="shared"] .mobile-bottom-bar[data-namecard-shared-entry="1"] .mobile-bottom-inner {
    padding-inline:var(--bj-page-gutter-mobile, 16px);
  }
}