:root {
  --v3-blue: #0066cc;
  --v3-ink: #1d1d1f;
  --v3-muted: #6e6e73;
  --v3-canvas: #fff;
  --v3-parchment: #f5f5f7;
  --v3-line: rgba(0, 0, 0, 0.08);
}
body {
  font-family:
    Inter,
    'Noto Sans KR',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  color: var(--v3-ink);
  letter-spacing: -0.01em;
}
.account-actions,
.project-toolbar,
.current-project,
.saved-project-list article {
  display: flex;
  align-items: center;
}
.account-actions {
  gap: 14px;
  margin-left: auto;
}
.local-notice {
  font-size: 12px;
  color: var(--v3-muted);
}
.account-button,
.project-toolbar button,
.project-dialog button {
  min-height: 44px;
  border: 1px solid var(--v3-line);
  background: var(--v3-canvas);
  color: var(--v3-ink);
  border-radius: 9999px;
  padding: 8px 18px;
  font:
    600 14px/1 Inter,
    'Noto Sans KR',
    sans-serif;
  cursor: pointer;
  transition: transform 0.12s;
}
.account-button:active,
.project-toolbar button:active,
.project-dialog button:active {
  transform: scale(0.95);
}
.project-toolbar .primary,
.dialog-primary {
  background: var(--v3-blue) !important;
  color: #fff !important;
  border-color: var(--v3-blue) !important;
}
.workspace {
  position: relative;
  padding-top: 78px;
}
.project-toolbar {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 56px;
  padding: 0 18px;
  border-bottom: 1px solid var(--v3-line);
  background: rgba(245, 245, 247, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
  z-index: 2;
}
.current-project {
  min-width: 0;
  gap: 10px;
}
.current-project span,
.current-project small {
  font-size: 12px;
  color: var(--v3-muted);
  white-space: nowrap;
}
.current-project strong {
  font-size: 17px;
  font-weight: 600;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.save-state[data-tone='dirty'] {
  color: #9a6700;
}
.save-state[data-tone='saved'] {
  color: #16803c;
}
.save-state[data-tone='error'] {
  color: #b42318;
}
.project-dialog {
  width: min(520px, calc(100vw - 32px));
  border: 0;
  border-radius: 18px;
  padding: 32px;
  background: #fff;
  box-shadow: none;
}
.project-dialog.compact {
  width: min(440px, calc(100vw - 32px));
}
.project-dialog.wide {
  width: min(680px, calc(100vw - 32px));
}
.project-dialog::backdrop {
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
}
.dialog-close {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 44px;
  padding: 0 !important;
  font-size: 20px;
  background: var(--v3-parchment) !important;
}
.project-dialog h2 {
  margin: 8px 0 8px;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.project-dialog p {
  margin: 0;
  color: var(--v3-muted);
  font-size: 17px;
  line-height: 1.47;
}
.project-dialog label {
  display: grid;
  gap: 8px;
  margin: 26px 0 14px;
  font-size: 14px;
  font-weight: 600;
}
.project-dialog input {
  height: 48px;
  border: 1px solid var(--v3-line);
  border-radius: 11px;
  padding: 0 14px;
  font:
    400 17px/1.4 Inter,
    'Noto Sans KR',
    sans-serif;
  outline: none;
}
.project-dialog input:focus {
  outline: 2px solid #0071e3;
  outline-offset: 1px;
}
.project-dialog small {
  display: block;
  margin-top: 10px;
  color: var(--v3-muted);
}
.saved-project-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--v3-line);
}
.saved-project-list article {
  gap: 12px;
  border-bottom: 1px solid var(--v3-line);
  padding: 8px 0;
}
.project-open {
  display: grid !important;
  justify-items: start;
  flex: 1;
  border: 0 !important;
  border-radius: 8px !important;
  text-align: left;
  padding: 12px !important;
}
.project-open strong {
  font-size: 17px;
}
.project-open small {
  margin: 5px 0 0;
}
.project-delete {
  border: 0 !important;
  color: #b42318 !important;
  padding: 8px 12px !important;
}
.empty-projects {
  padding: 48px 20px;
  text-align: center;
  color: var(--v3-muted);
  background: var(--v3-parchment);
  border-radius: 18px;
}
@media (max-width: 760px) {
  .topbar nav,
  .local-notice {
    display: none;
  }
  .current-project span {
    display: none;
  }
  .current-project strong {
    font-size: 14px;
  }
  .project-dialog h2 {
    font-size: 28px;
  }
}
:where(.result-panel) {
  min-width: 0;
}
@media (max-width: 760px) {
  .project-toolbar {
    padding-inline: 10px;
    gap: 7px;
  }
  .current-project {
    gap: 6px;
  }
  .current-project strong {
    max-width: 27vw;
  }
}
.current-project {
  margin-right: auto;
}
.save-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  padding: 7px 11px;
  background: #fff;
  font-weight: 600;
}
.save-state::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b42318;
}
.save-state[data-tone='saved']::before {
  background: #16803c;
}
.result-header > div:first-child {
  min-width: 190px;
}
@media (max-width: 760px) {
  .project-toolbar {
    display: grid;
    padding-block: 8px;
  }
  .current-project {
    display: flex;
    grid-column: 1/-1;
  }
  .save-state {
    display: inline-flex;
    padding: 7px 9px;
    font-size: 11px;
  }
  .project-toolbar button {
    min-width: 0;
    font-size: 10px;
    padding-inline: 3px;
  }
  .workspace {
    padding-top: 116px;
  }
  .result-header {
    align-items: flex-start;
  }
}
#newProjectTop {
  background: #f2f2f4;
  border-color: #d7d7dc;
  color: #49494e;
}
#openProjects {
  background: #f4f1fb;
  border-color: #ddd5f0;
  color: #5b4d7d;
}
#loadDemo {
  background: #eef7ef;
  border-color: #cfe5d2;
  color: #2c6a3f;
}
.project-toolbar button:hover {
  filter: brightness(0.98);
}
.project-toolbar button:focus-visible {
  outline: 2px solid var(--v3-blue);
  outline-offset: 2px;
}
.topbar {
  padding-inline: max(18px, calc((100% - 1440px) / 2));
}
.account-button {
  background: var(--v3-blue);
  border-color: var(--v3-blue);
  color: #fff;
}
.account-button[data-state='signed-in'] {
  background: #fff4f2;
  border-color: #f0cec8;
  color: #9d352b;
  box-shadow: none;
}
.account-button:hover {
  filter: brightness(0.97);
}
.account-button:focus-visible {
  outline: 2px solid var(--v3-blue);
  outline-offset: 2px;
}
.guest-save-note {
  margin-top: 16px !important;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f5f5f7;
  color: #515154 !important;
  line-height: 1.5;
}
.account-button {
  min-width: 76px;
  min-height: 36px;
  padding: 6px 14px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.16);
}
.topbar nav button {
  border: 0;
  background: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.72);
  font:
    400 12px/1 Inter,
    'Noto Sans KR',
    sans-serif;
  cursor: pointer;
}
.topbar nav button:hover {
  color: #fff;
}
.topbar nav button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
  border-radius: 2px;
}
.policy-dialog {
  width: min(880px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  overflow: auto;
}
.policy-dialog > p {
  max-width: 740px;
}
.policy-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 26px 0;
}
.policy-summary article {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  background: var(--v3-parchment);
}
.policy-summary b {
  color: var(--v3-blue);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.policy-summary strong {
  font-size: 16px;
}
.policy-summary span {
  color: var(--v3-muted);
  font-size: 12px;
  line-height: 1.5;
}
.policy-sections {
  border-top: 1px solid var(--v3-line);
}
.policy-sections details {
  border-bottom: 1px solid var(--v3-line);
  padding: 0 4px;
}
.policy-sections summary {
  padding: 17px 0;
  font-weight: 600;
  cursor: pointer;
}
.policy-sections ol,
.policy-sections ul {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--v3-muted);
  font-size: 13px;
  line-height: 1.8;
}
.policy-warning {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  padding: 15px 17px;
  border-radius: 12px;
  background: #fff7e8;
  color: #755414;
  font-size: 12px;
  line-height: 1.55;
}
.policy-warning strong {
  flex: none;
}
@media (max-width: 760px) {
  .policy-summary {
    grid-template-columns: 1fr;
  }
  .policy-dialog {
    padding: 24px;
  }
  .policy-warning {
    display: grid;
  }
}
.account-identity {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
}
.account-identity::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #55d58b;
  box-shadow: 0 0 0 3px rgba(85, 213, 139, 0.14);
}
@media (min-width: 761px) {
  .policy-summary {
    grid-template-columns: repeat(4, 1fr);
  }
}
.message-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 36px;
  text-align: center;
}
.message-dialog h2 {
  margin-top: 10px;
  font-size: 28px;
}
.message-dialog p {
  font-size: 15px;
  white-space: pre-line;
}
.message-symbol {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: auto;
  border-radius: 50%;
  background: #eaf4ff;
  color: var(--v3-blue);
}
.message-symbol span::after {
  content: 'i';
  font:
    700 27px/1 Georgia,
    serif;
}
.message-dialog[data-tone='success'] .message-symbol {
  background: #eaf8ef;
  color: #16803c;
}
.message-dialog[data-tone='success'] .message-symbol span::after {
  content: '✓';
  font-family: inherit;
}
.message-dialog[data-tone='warning'] .message-symbol,
.message-dialog[data-tone='confirm'] .message-symbol {
  background: #fff5dd;
  color: #9a6700;
}
.message-dialog[data-tone='warning'] .message-symbol span::after,
.message-dialog[data-tone='confirm'] .message-symbol span::after {
  content: '!';
  font-family: inherit;
}
.message-dialog[data-tone='error'] .message-symbol,
.message-dialog[data-tone='danger'] .message-symbol {
  background: #fff0ee;
  color: #b42318;
}
.message-dialog[data-tone='error'] .message-symbol span::after,
.message-dialog[data-tone='danger'] .message-symbol span::after {
  content: '!';
  font-family: inherit;
}
.message-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.message-actions button {
  min-width: 112px;
}
.message-dialog[data-tone='danger'] .dialog-primary {
  background: #b42318 !important;
  border-color: #b42318 !important;
}
@media (max-width: 760px) {
  .message-dialog {
    padding: 30px 24px;
  }
  .message-actions {
    flex-direction: column-reverse;
  }
  .message-actions button {
    width: 100%;
  }
}
.admin-button {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 6px 13px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font:
    600 12px/1 Inter,
    'Noto Sans KR',
    sans-serif;
}
.admin-dialog {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 26px 0;
}
.admin-metrics article {
  padding: 18px;
  border-radius: 14px;
  background: var(--v3-parchment);
}
.admin-metrics span {
  display: block;
  color: var(--v3-muted);
  font-size: 12px;
}
.admin-metrics strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}
.admin-section {
  padding: 24px 0;
  border-top: 1px solid var(--v3-line);
}
.admin-section h3 {
  margin: 0 0 5px;
  font-size: 18px;
}
.admin-section small {
  margin: 0;
  color: var(--v3-muted);
}
.admin-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 18px;
}
.admin-add input {
  min-width: 0;
}
.admin-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.admin-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #eef5ff;
  color: #174f87;
  font-size: 12px;
}
.admin-list button {
  min-height: 24px;
  padding: 2px 7px;
  border: 0;
  color: #b42318;
  background: transparent;
  font-size: 11px;
}
.admin-table-wrap {
  margin-top: 18px;
  overflow: auto;
  border: 1px solid var(--v3-line);
  border-radius: 12px;
}
.admin-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
.admin-table-wrap th,
.admin-table-wrap td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--v3-line);
  text-align: left;
  font-size: 12px;
}
.admin-table-wrap th {
  background: var(--v3-parchment);
  color: var(--v3-muted);
  font-weight: 600;
}
.admin-table-wrap td:last-child,
.admin-table-wrap th:last-child {
  text-align: right;
}
.admin-table-wrap tr:last-child td {
  border-bottom: 0;
}
.admin-empty {
  text-align: center !important;
  color: var(--v3-muted);
}
@media (max-width: 760px) {
  .account-identity {
    display: none;
  }
  .admin-metrics {
    grid-template-columns: 1fr;
  }
  .admin-add {
    grid-template-columns: 1fr;
  }
  .admin-dialog {
    padding: 26px 20px;
  }
  .admin-button {
    padding-inline: 10px;
  }
}
/* Keep the safety disclaimer visible beside project state. */
.project-toolbar .current-project {
  margin-right: 0;
}
.project-toolbar .safety-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-color: #ead9ae;
  border-radius: 10px;
  color: #755414;
  line-height: 1.35;
}
.project-toolbar .safety-notice strong {
  color: #8a5d00;
  white-space: nowrap;
}
.project-toolbar .safety-notice span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .project-toolbar .safety-notice span {
    white-space: normal;
  }
}
/* Native collapsible cards keep dense planning data optional. */
.collapsible-card {
  margin-top: 20px;
  border: 1px solid var(--v3-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.collapsible-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  list-style: none;
  cursor: pointer;
}
.collapsible-card > summary::-webkit-details-marker {
  display: none;
}
.collapsible-card > summary > div {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.collapsible-card > summary strong {
  font-size: 12px;
}
.collapsible-card > summary div > span {
  overflow: hidden;
  color: var(--v3-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collapse-state::after {
  white-space: nowrap;
}
.collapsible-card[open] .collapse-state::after {
  content: '접기  ▴';
}
.product-list-card .product-list {
  margin: 0;
  padding: 0 12px 8px;
}
.securing-card {
  margin-top: 14px;
}
.securing-card .securing-recommendation {
  margin: 0;
  border-radius: 0;
}
.canvas-wrap + .stats {
  margin-top: 12px;
}
@media (max-width: 760px) {
  .collapsible-card > summary {
    padding-inline: 12px;
  }
}
/* Product and sequence lists share compact/expanded behavior. */
.collapsible-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}
.collapsible-head > div:first-child {
  display: flex;
  min-width: 0;
}
.collapsible-head strong {
  font-size: 12px;
}
.collapsible-head span {
  overflow: hidden;
  color: var(--v3-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collapsible-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.collapsible-actions #toggleProducts {
  min-height: 34px;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  padding: 6px 10px;
  background: #fff;
  color: var(--v3-blue);
  font-size: 10px;
  font-weight: 600;
}
.product-list-card.expanded .product-list {
  max-height: none;
  overflow: visible;
}
.product-list-card.expanded #toggleProducts {
  background: var(--v3-ink);
  color: #fff;
}
@media (max-width: 760px) {
  .collapsible-head {
    align-items: flex-start;
  }
  .collapsible-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
button.collapse-toggle,
.collapse-state {
  display: inline-flex;
  align-items: center;
}
.collapsible-card[open] .collapse-state {
  background: var(--v3-ink);
  color: #fff;
}
.balance-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  margin-top: 12px;
  padding: 18px;
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  background: #fff;
}
.balance-card[hidden] {
  display: none;
}
.balance-card h3 {
  margin: 3px 0 0;
}
.balance-card > strong {
  align-self: center;
  border-radius: 999px;
  padding: 7px 12px;
  background: #eaf8ef;
  color: #16803c;
  font-size: 12px;
}
.balance-card[data-level='caution'] > strong {
  background: #fff5dd;
  color: #9a6700;
}
.balance-card[data-level='danger'] > strong {
  background: #fff0ee;
  color: #b42318;
}
.balance-grid {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.balance-grid span {
  padding: 10px;
  border-radius: 9px;
  background: var(--v3-parchment);
  color: var(--v3-muted);
  font-size: 10px;
}
.balance-grid b {
  display: block;
  margin-top: 5px;
  color: var(--v3-ink);
}
.balance-card p {
  grid-column: 1/-1;
  margin: 0;
  color: var(--v3-muted);
  font-size: 10px;
}
@media (max-width: 760px) {
  .balance-grid {
    grid-template-columns: 1fr 1fr;
  }
  .plan-actions {
    flex-wrap: wrap;
  }
}
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm;
  }
  body {
    background: #fff !important;
  }
  .topbar,
  main,
  footer,
  dialog {
    display: none !important;
  }
  .report-summary,
  .report-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 8px;
  }
  .report-summary div,
  .report-metrics span {
    padding: 7px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .report-summary span,
  .report-metrics span {
    color: #666;
  }
  .report-summary b,
  .report-metrics b {
    display: block;
    margin-top: 3px;
    color: #111;
  }
  .report-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  .report-images figure {
    margin: 0;
    border: 1px solid #ddd;
  }
  .report-images img {
    display: block;
    width: 100%;
    height: 112px;
    object-fit: contain;
  }
  .report-images figcaption {
    padding: 3px;
    text-align: center;
  }
}
/* Result hierarchy: balance → load sequence → securing, with readable working text. */
.loading-plan {
  margin-top: 14px;
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.loading-plan .sequence-empty {
  margin: 0;
}
.loading-plan .sequence-list {
  margin: 0;
  padding: 0 14px 14px;
}
.loading-plan.expanded .sequence-list {
  padding: 0 14px 14px;
}
.step-heading h2,
.result-header h2,
.plan-head h2 {
  font-size: 21px;
}
.step-heading p,
.coordinate-note {
  font-size: 12px;
  line-height: 1.5;
}
.form-grid label,
.container-select {
  font-size: 12px;
}
.product-item strong,
.collapsible-head strong,
.collapsible-card > summary strong {
  font-size: 13px;
}
.product-item small,
.collapsible-head span,
.collapsible-card > summary div > span {
  font-size: 11px;
}
.stats span,
.balance-grid span {
  font-size: 11px;
}
.stats small,
.balance-card p {
  font-size: 10px;
  line-height: 1.5;
}
.balance-card h3 {
  font-size: 18px;
}
.balance-grid b {
  font-size: 13px;
}
.sequence-empty,
.sequence-list li,
.sequence-list strong {
  font-size: 12px;
}
.sequence-list small {
  font-size: 11px;
}
.securing-recommendation h3 {
  font-size: 14px;
}
.securing-recommendation p,
.securing-items strong {
  font-size: 11px;
}
.securing-items div {
  font-size: 10px;
  line-height: 1.45;
}
.plan-head button,
button.collapse-toggle,
.collapse-state,
.collapsible-actions #toggleProducts {
  font-size: 11px;
}
/* Clear three-row simulation controls: title/status, view tools, then options. */
.result-header .simulation-status {
  margin-left: auto;
}
.result-control-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  min-width: 0;
}
.result-control-row .container-tabs {
  margin: 0;
  flex-wrap: nowrap;
  align-items: center;
  border-left: 1px solid var(--v3-line);
  padding-left: 9px;
}
.result-control-row .container-nav-slot {
  flex: 0 0 86px;
  width: 86px;
}
.result-control-row .container-tabs .page-label {
  min-width: 44px;
  justify-content: center;
  font-size: 11px;
  color: var(--v3-ink);
}
.result-control-row .container-tabs .nav-arrow {
  width: 28px;
  padding: 5px 0;
  border: 0;
  background: transparent;
}
.result-control-row .view-actions button {
  min-height: 34px;
  padding: 7px 8px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .project-toolbar .current-project {
    grid-column: span 2;
  }
  .project-toolbar .safety-notice {
    grid-column: span 3;
    width: 100%;
    max-width: none;
    justify-content: center;
  }
  .project-toolbar .safety-notice span {
    display: none;
  }
  .result-header .simulation-status {
    position: static;
    margin-left: 0;
  }
  .result-control-row {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .simulation-config-bar {
    margin-top: 12px;
  }
  .simulation-config-bar .top-simulate {
    width: 100%;
  }
}
@media (max-width: 760px) {
  .loading-plan .plan-head {
    align-items: flex-start;
    gap: 14px;
    padding: 15px;
  }
  .loading-plan .sequence-list,
  .loading-plan.expanded .sequence-list {
    padding: 0 10px 10px;
  }
  .plan-actions {
    justify-content: flex-start;
  }
  .step-heading h2,
  .result-header h2,
  .plan-head h2 {
    font-size: 19px;
  }
}
/* Compact planner chrome and align the view controls with the title baseline. */
body .workspace {
  min-height: 0;
  margin-top: 6px;
  margin-bottom: 12px;
  padding-top: 64px;
}
.project-toolbar {
  top: 0;
}
.result-header {
  flex-wrap: nowrap;
}
.result-header .result-control-row {
  flex: 1;
  flex-wrap: nowrap;
  margin: 0 0 1px auto;
}
.canvas-wrap .simulation-status {
  position: absolute;
  right: 12px;
  z-index: 4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.simulation-config-bar {
  grid-template-columns: minmax(200px, 1fr) 108px 120px 235px 122px;
  gap: 6px;
  margin-top: 10px;
  padding: 9px;
}
.simulation-config-bar select,
.simulation-config-bar .top-simulate {
  height: 34px;
  min-height: 34px;
}
.simulation-config-bar select {
  padding-block: 5px;
}
.simulation-config-bar .top-simulate {
  padding-inline: 9px;
}
@media (max-width: 1100px) {
  .result-header {
    flex-wrap: wrap;
  }
  .result-header .result-control-row {
    flex-basis: 100%;
  }
  .simulation-config-bar {
    grid-template-columns: minmax(210px, 1fr) 104px 124px 122px;
  }
}
@media (max-width: 760px) {
  /* 프로젝트 도구줄(높이 72px)이 위에 절대 위치로 놓이므로 그만큼만 비운다 */
  body .workspace {
    margin-top: 4px;
    padding-top: 76px;
  }
  .project-toolbar {
    top: 0;
  }
  .result-header {
    flex-wrap: wrap;
  }
  .result-header .result-control-row {
    flex-basis: 100%;
  }
  .simulation-config-bar {
    grid-template-columns: 1fr 1fr;
  }
}
#recalculateOptions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 122px;
  min-width: 122px;
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 11px;
}
#recalculateOptions b {
  margin-left: 0;
}
.site-footer {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 8px 32px;
  padding: 28px max(18px, calc((100% - 1440px) / 2 + 18px));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: #101512;
  color: #fff;
}
.site-footer .footer-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.site-footer .footer-brand strong {
  font-size: 20px;
  color: #fff;
}
.site-footer > p {
  margin: 0;
  color: #b8c5bd;
  font-size: 12px;
}
.site-footer .footer-meta {
  grid-column: 1/3;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9aaba1;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.site-footer .footer-meta span {
  font-size: 10px;
  font-weight: 600;
  color: #cbd5cf;
}
/* 방문자 수: 버전·제작자와 같은 크기·색의 한 줄. 숫자는 고정폭이라 자릿수가 바뀌어도 흔들리지 않는다. */
.site-footer .footer-visitors {
  display: inline-flex;
  gap: 10px;
}
.site-footer .footer-visitors b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.site-footer .footer-meta i {
  font-style: normal;
  color: #66776d;
}
.site-footer .footer-meta small {
  margin-left: 6px;
  color: #8d9d94;
}
@media (max-width: 760px) {
  .site-footer {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    gap: 12px;
  }
  .site-footer > p,
  .site-footer .footer-meta {
    grid-column: 1;
    grid-row: auto;
  }
  .site-footer .footer-meta {
    flex-wrap: wrap;
  }
  .site-footer .footer-meta small {
    width: 100%;
    margin-left: 0;
  }
}
.social-login-buttons {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.project-dialog .social-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  border-color: #d2d2d7;
  border-radius: 11px;
  background: #fff;
  font-size: 15px;
}
.project-dialog .social-login:hover {
  background: #f7f7f8;
}
.project-dialog .social-login:disabled {
  opacity: 0.55;
  cursor: wait;
}
.google-mark {
  color: #4285f4;
  font-size: 18px;
  font-family: Arial, sans-serif;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  color: var(--v3-muted);
  font-size: 12px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--v3-line);
}
#signedOutPanel .guest-save-note {
  display: block;
  margin-top: 18px !important;
}
.email-otp {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}
.email-otp[hidden] {
  display: none;
}
.email-otp label {
  margin: 0 !important;
}
.email-otp input {
  letter-spacing: 0.3em;
  font-weight: 700;
  text-align: center;
}
.project-dialog .email-otp button {
  height: 48px;
  border-radius: 11px;
  background: var(--v3-ink);
  color: #fff;
}
@media (max-width: 520px) {
  .email-otp {
    grid-template-columns: 1fr;
  }
  .project-dialog .email-otp button {
    width: 100%;
  }
}
.sample-dialog {
  width: min(760px, calc(100vw - 32px));
}
.sample-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.project-dialog .sample-filters button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f5f5f7;
  font-size: 13px;
  font-weight: 600;
}
.project-dialog .sample-filters button[aria-pressed='true'] {
  background: var(--v3-blue);
  border-color: var(--v3-blue);
  color: #fff;
}
.sample-list {
  display: grid;
  gap: 8px;
  max-height: min(58vh, 560px);
  overflow-y: auto;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.project-dialog .sample-list button {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  text-align: left;
  background: #f5f5f7;
}
.project-dialog .sample-list button:hover {
  background: #eef5ff;
  border-color: #aacdf5;
}
.sample-list b {
  font-size: 13px;
  color: var(--v3-blue);
  font-variant-numeric: tabular-nums;
}
.sample-list span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.sample-list strong {
  font-size: 15px;
}
.sample-list small {
  color: var(--v3-muted);
  font-size: 13px;
  line-height: 1.45;
}
.sample-list em {
  color: var(--v3-muted);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}
@media (max-width: 680px) {
  .project-dialog .sample-list button {
    grid-template-columns: 28px 1fr;
  }
  .sample-list em {
    grid-column: 2;
    white-space: normal;
  }
}
/* Local readability pass: raise only the smallest interface text one step. */
.simulation-status,
.simulation-status > b {
  font-size: 11px;
}
.product-item small,
.collapsible-head span,
.collapsible-card > summary div > span,
.sequence-list small,
.stats span,
.balance-grid span,
.stats small,
.balance-card p,
.securing-recommendation p,
.securing-items strong,
.result-control-row .container-tabs .page-label {
  font-size: 12px;
}
.securing-items div,
.coordinate-note {
  font-size: 11px;
}
.plan-head button,
button.collapse-toggle,
.collapse-state,
.collapsible-actions #toggleProducts,
.result-control-row .view-actions button,
#recalculateOptions {
  font-size: 12px;
}
.simulation-config-bar .top-simulate {
  font-size: 11px;
}
.project-toolbar .safety-notice {
  font-size: 11px;
}
.site-footer .footer-brand span,
.site-footer .footer-meta,
.site-footer .footer-meta span {
  font-size: 11px;
}
.site-footer .footer-meta small {
  font-size: 10px;
}
.product-options label {
  gap: 6px;
  font-size: 11px;
}
.product-options input {
  width: 14px;
  height: 14px;
}
.collapsible-head > div:first-child {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.collapsible-head strong {
  white-space: nowrap;
}
.collapsible-head span {
  display: block;
}
@media (max-width: 760px) {
  .project-toolbar {
    grid-template-columns: 1fr 1fr 1.35fr 0.9fr 0.75fr;
  }
  .project-toolbar button {
    white-space: nowrap;
  }
}
@media (max-width: 900px) {
  .topbar {
    padding: 0 18px;
  }
  .topbar nav,
  .local-notice {
    display: none;
  }
  .account-button {
    margin-left: auto;
  }
  .workspace {
    display: block;
    margin: 0 12px 50px;
    padding-top: 122px;
  }
  .control-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .result-panel {
    padding: 20px;
  }
  .project-toolbar {
    top: 8px;
    grid-template-columns: 1fr 1fr 1.35fr 0.9fr 0.75fr;
    gap: 7px;
    padding: 8px 10px;
  }
  .project-toolbar button {
    min-width: 0;
    padding-inline: 3px;
    font-size: 10px;
    white-space: nowrap;
  }
  .project-toolbar .current-project {
    grid-column: span 2;
  }
  .project-toolbar .safety-notice {
    grid-column: span 3;
    width: 100%;
    max-width: none;
    justify-content: center;
  }
  .project-toolbar .safety-notice span {
    display: none;
  }
  .current-project span {
    display: none;
  }
  .current-project strong {
    max-width: 34vw;
    font-size: 14px;
  }
  .result-header {
    align-items: flex-start;
  }
  .result-control-row {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .simulation-config-bar {
    grid-template-columns: 1fr 1fr;
    margin-top: 12px;
  }
  .simulation-config-bar .top-simulate {
    width: 100%;
  }
  .loading-plan .plan-head {
    align-items: flex-start;
    gap: 14px;
    padding: 15px;
  }
  .plan-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .loading-plan .sequence-list,
  .loading-plan.expanded .sequence-list {
    padding: 0 10px 10px;
  }
}
/* 글자 크기 체계: 12px 보조·메타 / 14px 본문·버튼 / 16px 카드 제목 / 21px 구역 제목 / 22px 지표. 12px 미만은 쓰지 않는다.
   앞선 스타일시트들이 같은 선택자를 여러 번 덮어쓰므로 마지막 파일에서 한 번에 정한다. */
.brand > small,
.site-footer .footer-meta,
.site-footer .footer-meta span,
.site-footer .footer-meta small,
.securing-visibility button,
.securing-visibility button b,
.coordinate-note,
.stats span,
.stats small,
.balance-grid span,
.balance-card p,
.product-options label,
.qty-stepper,
.product-item small,
.dropzone small,
.simulation-status,
.simulation-status > b,
.save-state,
.project-toolbar .safety-notice,
.collapsible-head span,
.collapsible-card > summary div > span,
button.collapse-toggle,
.collapse-state,
.collapse-state::after,
.collapsible-actions #toggleProducts,
.plan-head button,
.securing-items div,
.securing-recommendation p,
.sequence-list small,
.list-empty,
.empty-state span,
.recommendation p,
.form-grid label,
.container-select,
.policy-summary b,
.account-identity,
.text-button,
.sequence-empty,
.result-control-row .container-tabs .page-label,
.result-control-row .view-actions button,
.simulation-config-bar .top-simulate,
#recalculateOptions {
  font-size: 12px;
}
.brand > small {
  letter-spacing: 0;
  color: #9aa4ad;
}
.site-footer .footer-brand span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #b8c5bd;
}
.securing-items strong,
.sequence-list strong,
.sequence-list li {
  font-size: 13px;
}
.securing-recommendation h3,
.balance-card h3 {
  font-size: 16px;
}
.playback span,
.sequence-list .num {
  font-size: 12px;
}
.step-heading > span {
  font-size: 12px;
}
#addProduct {
  font-size: 14px;
}
/* 1.1.1 화면 정리: 드롭다운 메뉴, 한 줄 툴바, 3D 화면 안 보기 컨트롤, 고정재 패널 좌표 범례 */
details.menu {
  position: relative;
}
details.menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
details.menu > summary::-webkit-details-marker {
  display: none;
}
details.menu > summary::after {
  content: ' ▾';
  font-size: 11px;
  opacity: 0.7;
}
details.menu > summary[aria-label]::after {
  content: '';
}
.menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.menu-list button,
.project-toolbar .menu-list button,
.topbar nav .menu-list button {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--v3-ink);
  font:
    500 14px/38px Inter,
    'Noto Sans KR',
    sans-serif;
  text-align: left;
  white-space: nowrap;
}
.menu-list button:hover,
.menu-list button:focus-visible {
  background: #f2f5fa;
}
.topbar nav {
  align-items: center;
}
.project-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.project-toolbar .safety-notice {
  margin: 0 auto 0 0;
  max-width: none;
  padding: 0;
  border: 0;
  background: none;
}
.project-toolbar .safety-notice > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #ead9ae;
  border-radius: 999px;
  background: #fff9e9;
  cursor: pointer;
  list-style: none;
}
.project-toolbar .safety-notice > summary::-webkit-details-marker {
  display: none;
}
.project-toolbar .safety-notice > summary::before {
  content: 'i';
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #c28b1b;
  color: #fff;
  font:
    700 11px/1 Inter,
    sans-serif;
}
.project-toolbar .safety-notice > span {
  position: absolute;
  z-index: 30;
  max-width: 420px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid #ead9ae;
  border-radius: 12px;
  background: #fffdf6;
  color: #755414;
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.toolbar-actions .current-project {
  margin: 0 4px 0 0;
}
.project-toolbar details.menu > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-canvas);
  color: var(--v3-ink);
  font:
    600 14px/1 Inter,
    'Noto Sans KR',
    sans-serif;
}
.project-toolbar details.menu > summary[aria-label] {
  min-width: 44px;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  letter-spacing: 1px;
}
.result-header {
  margin-bottom: 0;
}
.canvas-wrap .result-control-row {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 4;
  margin: 0;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.canvas-wrap .result-control-row .container-nav-slot {
  margin-left: auto;
}
.canvas-wrap .simulation-status {
  top: auto;
  bottom: 86px;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 900px) {
  .project-toolbar {
    display: flex;
    padding-block: 8px;
  }
  .project-toolbar .safety-notice {
    flex: 1 1 100%;
  }
  .toolbar-actions {
    justify-content: flex-end;
  }
  .toolbar-actions .current-project {
    margin-right: auto;
  }
  .project-toolbar details.menu > summary,
  .project-toolbar .primary {
    min-height: 40px;
    font-size: 13px;
    padding-inline: 14px;
  }
  .canvas-wrap .result-control-row {
    top: 10px;
    left: 10px;
    right: 10px;
    gap: 6px;
  }
}
.simulation-status[hidden] {
  display: none;
}
.project-toolbar .menu-list button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--v3-ink) !important;
}
.project-toolbar .menu-list button:hover {
  background: #f2f5fa !important;
}
.brand > small {
  white-space: nowrap;
}
@media (max-width: 480px) {
  .brand > small {
    display: none;
  }
}
@media (max-width: 900px) {
  .canvas-wrap .result-control-row .view-actions {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .canvas-wrap .result-control-row .view-actions button {
    flex: 0 0 auto;
  }
}
/* 1.1.2 균형 조정: 헤더 베타 칩·계정 메뉴, 툴바 좌우 배치, 단계 번호, 지표 5칸, 계산 시간 */
.header-beta {
  position: relative;
  margin: 0 auto 0 14px;
  padding: 0;
  border: 0;
  background: none;
}
.header-beta > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(234, 217, 174, 0.45);
  border-radius: 999px;
  background: rgba(255, 249, 233, 0.1);
  color: #f1d08a;
  font-size: 12px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.header-beta > summary::-webkit-details-marker {
  display: none;
}
.header-beta > summary::before {
  content: 'i';
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #c28b1b;
  color: #fff;
  font:
    700 10px/1 Inter,
    sans-serif;
}
.header-beta strong {
  color: inherit;
  font-weight: 600;
}
.header-beta > span {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  width: 340px;
  padding: 12px 14px;
  border: 1px solid #ead9ae;
  border-radius: 12px;
  background: #fffdf6;
  color: #755414;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.topbar nav {
  flex: 0 1 auto;
}
.account-menu > summary {
  display: inline-flex;
  align-items: center;
  max-width: 240px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu > summary::before {
  content: '';
  flex: 0 0 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #34c759;
}
.account-menu .menu-list {
  min-width: 150px;
}
.account-menu .menu-list button {
  border: 0;
  background: transparent;
  color: var(--v3-ink);
  min-height: 38px;
  font-size: 14px;
  text-align: left;
  border-radius: 9px;
  padding: 0 12px;
}
.account-menu .menu-list button:hover {
  background: #f2f5fa;
}
.project-toolbar {
  justify-content: space-between;
}
.project-toolbar .current-project {
  display: flex;
  gap: 10px;
  min-width: 0;
  margin: 0;
}
.project-toolbar .current-project strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.step-badge {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink, #1d1d1f);
  color: var(--lime, #fff);
  font-size: 12px;
  font-weight: 700;
}
.result-header .step-heading {
  align-items: center;
}
.result-header .step-heading h2 {
  margin: 0;
}
.stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.stats > div:nth-child(4) {
  border-right: 1px solid var(--line);
}
.calc-time {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--v3-muted);
  font-size: 12px;
}
.calc-time[hidden] {
  display: none;
}
@media (max-width: 900px) {
  .header-beta {
    margin-left: 8px;
  }
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .stats > div:nth-child(5) {
    grid-column: 1/-1;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 480px) {
  .header-beta strong {
    display: none;
  }
  .header-beta > summary {
    padding: 0 7px;
  }
}
.collapsible-head > .list-heading {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.list-heading > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.collapsible-head .step-badge {
  display: grid;
  overflow: visible;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.collapsible-head > div.list-heading:first-child {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
@media (max-width: 900px) {
  .header-beta > span {
    position: fixed;
    top: 56px;
    left: 16px;
    right: 16px;
    width: auto;
  }
  .project-toolbar {
    flex-wrap: nowrap;
  }
  .project-toolbar .current-project {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .project-toolbar .current-project strong {
    max-width: 46vw;
    font-size: 14px;
  }
  .toolbar-actions {
    flex: 0 0 auto;
  }
}
/* 1.1.3 흐름 정리: 01·02 카드와 연결 버튼, 불러오기 메뉴, 버튼 색 역할(파랑=실행, 검정=저장, 테두리=보조) */
.panel-card {
  border: 1px solid var(--v3-line);
  border-radius: 12px;
  background: #fff;
  padding: 16px 16px 18px;
}
.panel-card .control-heading {
  align-items: center !important;
  margin-bottom: 16px;
}
.panel-card .form-grid {
  margin-top: 0;
}
.step-heading h2,
.result-header h2,
.product-list-card .collapsible-head strong {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  color: var(--v3-ink);
}
.product-list-card {
  margin-top: 0;
}
.product-list-card .collapsible-head {
  padding: 16px;
}
.load-menu > summary {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  font:
    600 13px/1 Inter,
    'Noto Sans KR',
    sans-serif;
  white-space: nowrap;
}
.load-menu .menu-list button {
  background: transparent !important;
  border: 0 !important;
  color: var(--v3-ink) !important;
  box-shadow: none !important;
}
.load-menu .menu-list button:hover {
  background: #f2f5fa !important;
}
.add-connector {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 14px 0;
}
.add-connector::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2px dashed #b9d4f1;
}
.add-connector .add-button {
  position: relative;
  width: auto;
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid #aacdf5;
  border-radius: 999px;
  background: #eef6ff;
  color: #0066cc;
  font-size: 14px;
  font-weight: 600;
}
.add-connector .add-button b {
  margin-left: 6px;
}
.add-connector .add-button:hover {
  background: #e0efff;
}
.project-toolbar .current-project {
  align-items: center;
}
.project-toolbar #saveProject {
  background: #1d1d1f !important;
  border-color: #1d1d1f !important;
  color: #fff !important;
}
.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.result-header #recalculateOptions {
  flex: 0 0 auto;
}
.import-dialog {
  width: min(560px, calc(100vw - 32px));
}
.import-dialog .dropzone {
  margin-top: 18px;
  cursor: pointer;
}
.import-dialog .text-button {
  margin-top: 12px;
}
.project-toolbar #newProjectTop,
.project-toolbar #saveProject {
  white-space: nowrap;
}
@media (max-width: 900px) {
  .project-toolbar #newProjectTop,
  .project-toolbar #saveProject {
    min-height: 40px;
    padding-inline: 14px;
    font-size: 13px;
  }
}
/* 보기 방향(세그먼트)과 표시 토글(ON/OFF 칩)을 구분한다 */
.canvas-wrap .result-control-row .view-actions {
  order: 1;
}
.canvas-wrap .result-control-row .securing-visibility {
  order: 2;
  padding-left: 10px;
  border-left: 1px solid var(--v3-line);
}
.canvas-wrap .result-control-row .container-nav-slot {
  order: 3;
}
/* 조건 선택: 안전 수준 슬라이더 · 3칸 버튼 · 고정재 칩 · 컨테이너 드롭박스 */
.simulation-config-bar.option-board {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: 'safety pref trans' 'safety secure secure';
  gap: 14px 18px;
  align-items: start;
}
.option-board .safety-field {
  grid-area: safety;
}
.option-board .securing-field {
  grid-area: secure;
}
.option-board .container-select {
  grid-area: container;
}
.option-board > .pref-field {
  grid-area: pref;
}
.option-board > .route-field {
  grid-area: trans;
}
.option-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgb(67, 80, 71);
}
.option-field > span small {
  font-weight: 500;
  color: #8a938e;
  margin-left: 4px;
}
.option-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.option-head b {
  font-size: 14px;
  color: #1b1f1d;
}
.safety-field[data-level='standard'] .option-head b {
  color: #9a6200;
}
.safety-field[data-level='secure'] .option-head b {
  color: #17693a;
}
.safety-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  margin: 6px 0 0;
  background: linear-gradient(90deg, #1766d6 var(--fill, 50%), #dfe5e2 var(--fill, 50%));
  cursor: pointer;
}
.safety-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #1766d6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.safety-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #1766d6;
}
.slider-stops {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: #7a847f;
}
.safety-hint {
  margin-top: 2px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #cfe0f7;
  background: #eef5ff;
}
.segment-hint {
  margin: 0;
  min-height: 54px;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #d8cffa;
  background: #f4f1ff;
  font-size: 13px;
  font-weight: 600;
  color: #3b2a82;
  line-height: 1.45;
  display: flex;
  align-items: center;
}
.route-field .segment-hint {
  border-color: #bfe2e8;
  background: #ebf7f9;
  color: #0f4f5c;
}
.safety-hint ul {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 3px;
}
.safety-hint li {
  font-size: 13px;
  font-weight: 600;
  color: #1b3f73;
  line-height: 1.45;
}
.safety-field[data-level='standard'] .safety-hint {
  border-color: #f0d9a8;
  background: #fff7e6;
}
.safety-field[data-level='standard'] .safety-hint li {
  color: #7a4d00;
}
.safety-field[data-level='secure'] .safety-hint {
  border-color: #b7e0c6;
  background: #ecf8f0;
}
.safety-field[data-level='secure'] .safety-hint li {
  color: #145c33;
}
.run-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.header-container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgb(67, 80, 71);
}
.header-container .select-box {
  min-width: 330px;
}
@media (max-width: 900px) {
  .run-group {
    flex-wrap: wrap;
    margin-left: 0;
    width: 100%;
  }
  .header-container {
    flex: 1 1 100%;
  }
  .header-container .select-box {
    min-width: 0;
    flex: 1;
  }
}
.segmented {
  display: flex;
  border: 1px solid var(--v3-line, #dde3e0);
  border-radius: 10px;
  background: #f4f6f5;
  padding: 3px;
  gap: 3px;
}
.segmented button {
  flex: 1;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 600;
  color: #56605b;
  cursor: pointer;
  white-space: nowrap;
}
.segmented button[aria-checked='true'] {
  background: #fff;
  color: #1766d6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip-group button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--v3-line, #dde3e0);
  border-radius: 999px;
  background: #fff;
  padding: 6px 11px 6px 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #39413c;
  cursor: pointer;
}
.chip-group button .securing-icon {
  margin: 0;
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}
.chip-group button[aria-pressed='false'] {
  background: #f1f3f2;
  color: #9aa39e;
  text-decoration: line-through;
}
.chip-group button[aria-pressed='false'] .securing-icon {
  filter: grayscale(1);
  opacity: 0.5;
}
@media (max-width: 1100px) {
  .simulation-config-bar.option-board {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'safety safety' 'pref trans' 'secure secure';
  }
}
@media (max-width: 640px) {
  .simulation-config-bar.option-board {
    grid-template-columns: 1fr;
    grid-template-areas: 'safety' 'pref' 'trans' 'secure';
  }
}
.field-card {
  margin-top: 12px;
}
.field-form {
  display: grid;
  grid-template-columns: 140px 140px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 4px 18px 8px;
}
.field-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: rgb(67, 80, 71);
}
.field-form input {
  height: 38px;
  border: 1px solid var(--v3-line, #dde3e0);
  border-radius: 10px;
  padding: 0 10px;
  font-size: 14px;
}
.field-save {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: #1d1d1f;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.field-compare {
  margin: 4px 18px 16px;
  font-size: 13px;
  color: #39413c;
}
@media (max-width: 760px) {
  .field-form {
    grid-template-columns: 1fr 1fr;
  }
  .field-form .field-notes {
    grid-column: 1/-1;
  }
}
.result-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 10px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--v3-line, #dde3e0);
  border-left: 4px solid #1f9d55;
  border-radius: 12px;
  background: #fff;
}
.result-summary[hidden] {
  display: none;
}
.result-summary[data-level='caution'] {
  border-left-color: #d38b00;
}
.result-summary[data-level='danger'] {
  border-left-color: #b42318;
}
.result-summary > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.result-summary span {
  font-size: 12px;
  color: #667069;
  font-weight: 600;
}
.result-summary strong {
  font-size: 14px;
  color: #1b1f1d;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
}
.result-summary em {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.result-summary em .securing-icon {
  margin: 0;
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}
.result-summary[data-level='caution'] .summary-verdict strong {
  color: #9a6200;
}
.result-summary[data-level='danger'] .summary-verdict strong {
  color: #b42318;
}
@media (max-width: 900px) {
  .result-summary {
    grid-template-columns: 1fr;
  }
}
.securing-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  vertical-align: -4px;
  margin-right: 6px;
}
.securing-icon svg {
  width: 100%;
  height: 100%;
}
.securing-visibility i.securing-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  margin: 0;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0;
}
.securing-visibility button:not(.active) i.securing-icon {
  filter: grayscale(1);
  opacity: 0.55;
}
.securing-items div.has-icon {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 8px;
  align-items: start;
}
.securing-items div.has-icon > .securing-icon {
  grid-row: span 2;
  margin: 1px 0 0;
}
.securing-visibility .axes-toggle.active {
  border-color: #c4b5f0;
  color: #5b3fb2;
}
.securing-visibility .axes-toggle.active i {
  background: #7b61d8;
  box-shadow: 0 0 0 3px rgba(123, 97, 216, 0.15);
}
@media (max-width: 900px) {
  .canvas-wrap .result-control-row .view-actions {
    order: 1;
    flex: 1 1 100%;
  }
  .canvas-wrap .result-control-row .securing-visibility {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    padding-left: 0;
    border-left: 0;
    scrollbar-width: none;
  }
  .canvas-wrap .result-control-row .container-nav-slot {
    order: 3;
  }
}
/* 실행 버튼이 03 제목 줄로 옮겨 가서 조건 영역은 네 칸이 폭을 나눠 쓴다 */
@media (min-width: 1101px) {
  .simulation-config-bar {
    gap: 10px;
    padding: 12px 14px;
  }
}
/* 재생 막대는 왼쪽 아래에 두어 컨테이너 문 쪽 모서리(좌표 원점)를 가리지 않는다 */
@media (min-width: 901px) {
  .canvas-wrap .playback {
    left: 16px;
    right: auto;
    transform: none;
    bottom: 14px;
  }
}
@media (max-width: 900px) {
  .canvas-wrap .result-control-row .securing-visibility button {
    padding: 5px 8px;
    gap: 5px;
  }
  .canvas-wrap .result-control-row .securing-visibility button b {
    display: none;
  }
  .canvas-wrap .result-control-row .securing-visibility button:not(.active) {
    opacity: 0.6;
  }
  .canvas-wrap .result-control-row .container-nav-slot {
    margin-left: auto;
  }
}
/* 프로젝트 관리 버튼(불러오기·새 프로젝트)은 같은 연한 청록, 무게중심 칸은 판정 색 */
.load-menu > summary,
.project-toolbar #newProjectTop {
  background: #e9f6f3 !important;
  border-color: #b8e0d6 !important;
  color: #0f6b5c !important;
}
.load-menu > summary:hover,
.load-menu[open] > summary,
.project-toolbar #newProjectTop:hover {
  background: #dcf0eb !important;
  border-color: #94d0c2 !important;
}
.balance-grid span[data-level] {
  border: 1px solid transparent;
}
.balance-grid span[data-level='good'] {
  background: #eefaf2;
  border-color: #cdebd8;
}
.balance-grid span[data-level='good'] b {
  color: #16803c;
}
.balance-grid span[data-level='caution'] {
  background: #fff7e6;
  border-color: #f3dca8;
}
.balance-grid span[data-level='caution'] b {
  color: #9a6700;
}
.balance-grid span[data-level='danger'] {
  background: #fff1ef;
  border-color: #f3c4bd;
}
.balance-grid span[data-level='danger'] b {
  color: #b42318;
}
/* 무게중심 토글 점은 판정과 무관한 파랑(판정 색은 3D 표시와 무게중심 카드에서 보여 준다) */
.securing-visibility .cog-toggle.active {
  border-color: #b6c8f5;
  color: #2448b8;
}
.securing-visibility .cog-toggle.active i {
  background: #3563e9;
  box-shadow: 0 0 0 3px rgba(53, 99, 233, 0.15);
}
/* 무게중심 좌표는 판정값이 아닌 참고 정보라 제목 옆에 두고, 판정 칸 6개는 3열로 나눈다 */
.balance-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-width: 0;
}
.balance-title .cog-position {
  color: var(--v3-muted);
  font-size: 13px;
}
.balance-title .cog-position b {
  margin-left: 4px;
  color: var(--v3-ink);
  font-weight: 600;
}
@media (min-width: 761px) {
  .balance-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 조건 선택상자: 기본 목록 대신 부드럽게 열리는 목록 */
.select-box {
  position: relative;
  min-width: 0;
}
.select-box .native-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.select-button {
  display: flex;
  align-items: center;
  width: 100%;
  height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--v3-line);
  border-radius: 8px;
  background: #fff;
  color: var(--v3-ink);
  font:
    600 14px/1 Inter,
    'Noto Sans KR',
    sans-serif;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  position: relative;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.select-button::after {
  content: '';
  position: absolute;
  right: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.6px solid #6e6e73;
  border-bottom: 1.6px solid #6e6e73;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.select-button:hover {
  border-color: #b9c6d6;
}
.select-button:focus-visible,
.select-box.open .select-button {
  border-color: #0071e3;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
  outline: none;
}
.select-box.open .select-button::after {
  transform: rotate(-135deg);
  margin-top: -1px;
}
.select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 35;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--v3-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0s linear 0.14s;
}
.select-box.open .select-list {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
}
.select-list li {
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--v3-ink);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.select-list li:hover {
  background: #f2f5fa;
}
.select-list li[aria-selected='true'] {
  color: #0066cc;
  font-weight: 600;
  background: #eef6ff;
}
.form-grid .select-button {
  height: 44px;
  border-color: rgba(0, 0, 0, 0.08);
  border-radius: 11px;
  padding-left: 10px;
}
/* 01·02 카드 파스텔 톤과 입력 이력 추천 목록 */
.panel-card.input-card {
  background: #f5f9ff;
  border-color: #cfdff3;
}
.product-list-card {
  background: #f3faf6;
  border-color: #c9e6d6;
}
.product-list-card .collapsible-head {
  background: transparent;
}
.panel-card .form-grid input,
.panel-card .form-grid .select-button {
  border-color: #d3dde9;
  background: #fff;
}
.suggest-box {
  position: relative;
  min-width: 0;
}
.suggest-box > input {
  width: 100%;
}
.suggest-box.open .select-list {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
}
.suggest-box .select-list {
  max-height: 240px;
  overflow-y: auto;
}
/* 제품 편집 모드, 새 프로젝트 로즈 톤, 접근성 보완 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.project-toolbar #newProjectTop {
  background: #fdf0f3 !important;
  border-color: #f3c3cf !important;
  color: #b0284a !important;
}
.project-toolbar #newProjectTop:hover {
  background: #fbe3e9 !important;
  border-color: #eba9ba !important;
}
.panel-card.input-card.editing {
  border-color: #f0b35a;
  box-shadow: 0 0 0 3px rgba(240, 179, 90, 0.18);
  background: #fffaf1;
}
.add-connector {
  gap: 8px;
}
.product-item {
  border-radius: 10px;
  transition: background 0.15s;
}
.product-item:hover {
  background: rgba(255, 255, 255, 0.7);
}
.product-item.editing {
  background: #fff6e6;
  box-shadow: inset 3px 0 0 #f0b35a;
}
.edit-product {
  align-self: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #c9e6d6;
  border-radius: 999px;
  background: #fff;
  color: #17693a;
  font-size: 12px;
  font-weight: 600;
}
.edit-product:hover {
  background: #eefaf2;
}
.product-item {
  padding-inline: 6px;
}
.list-empty {
  color: #5f6368 !important;
}
.securing-visibility button {
  color: #5b6660;
}
.dropzone:focus-visible {
  outline: 3px solid #0071e3;
  outline-offset: 3px;
}
.balance-card > strong {
  white-space: nowrap;
}
.product-item .edit-product {
  width: auto;
  height: auto;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #c9e6d6;
  border-radius: 999px;
  background: #fff;
  color: #17693a;
  font-size: 12px;
  font-weight: 600;
  line-height: 26px;
}
.product-item .edit-product:hover {
  background: #eefaf2;
}
/* 수정 중 안내는 부제 자리를 대신해 카드 높이가 변하지 않는다. 삭제는 빨간 글자 버튼으로 수정·취소와 구분한다. */
.input-card.editing #inputHint {
  color: #9a5b00;
  font-weight: 600;
}
.product-item {
  cursor: default;
}
.product-item .edit-product.cancel {
  border-color: #f0c98a;
  background: #fff4df;
  color: #9a5b00;
}
.product-item .delete-product {
  width: auto;
  height: auto;
  min-height: 28px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #f3c3cf;
  border-radius: 999px;
  background: #fff;
  color: #b0284a;
  font-size: 12px;
  font-weight: 600;
  line-height: 26px;
}
.product-item .delete-product:hover {
  background: #fdf0f3;
}
/* 결과 카드 3종(무게중심·적재 순서·고정재 권고) 제목 크기와 여백을 맞춘다. 적재 순서 제목 줄은 눌러서 접고 편다. */
.balance-card h3,
.loading-plan .plan-head h2,
.securing-card > summary strong {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--v3-ink);
}
.loading-plan .plan-head {
  align-items: center;
  padding: 18px;
  cursor: pointer;
}
.loading-plan .plan-head > div:first-child {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
}
.loading-plan .plan-head .coordinate-note {
  margin: 0;
  color: var(--v3-muted);
  font-size: 13px;
}
.securing-card > summary {
  padding: 18px;
}
.securing-card > summary > div {
  align-items: baseline;
  gap: 12px;
}
.securing-card > summary span#securingCount {
  font-size: 13px;
}
/* 제품 카드 오른쪽 버튼 열: 폭을 고정하고 위아래로 쌓아 왼쪽 내용이 움직이지 않게 한다 */
.product-item {
  grid-template-columns: 34px 1fr 56px;
}
.product-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.product-actions button {
  width: 100%;
  text-align: center;
  padding: 0;
}
.product-item.editing .qty-stepper,
.product-item.editing .product-options {
  opacity: 0.5;
}
#recalculateOptions:disabled {
  cursor: not-allowed;
}
.message-actions button {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-inline: 20px;
}
/* 저장 확인 팝업: 취소(회색)·다른 이름으로 저장(청록)·저장(파랑)을 색으로 구분한다 */
.message-actions #messageCancel {
  background: #f2f2f5;
  border-color: #e2e2e7;
  color: #3a3a3f;
}
.message-actions #messageAlt {
  background: #e9f6f3;
  border-color: #b8e0d6;
  color: #0f6b5c;
}
.message-actions #messageAlt:hover {
  background: #dcf0eb;
}
/* 고정재 선택이 들어가 조건 영역은 다섯 칸(안전·우선, 운송모드, 고정재, 컨테이너, 내부 치수)이다 */
@media (min-width: 1101px) {
  .simulation-config-bar {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 0.78fr) minmax(0, 0.78fr) minmax(0, 0.78fr) auto;
  }
}
.option-board .option-field > select.native-select {
  display: none;
}
.run-group .header-container {
  flex-direction: row;
  display: flex;
  align-items: center;
  margin: 0;
}
.run-group .header-container > span {
  white-space: nowrap;
}
@media (max-width: 900px) {
  .run-group .header-container {
    min-width: 0;
    flex: 1 1 100%;
  }
  .run-group .header-container .select-box {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
  }
  .run-group .header-container .select-button {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .run-group .select-list {
    max-width: calc(100vw - 32px);
  }
}
.run-group .select-list {
  left: auto;
  right: 0;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
}
.run-group .select-list li {
  white-space: normal;
}
/* 고정재: 이름(아래에 안내)과 칩을 한 줄에 둔다. 안전 수준 칸은 두 줄에 걸치고 설명 상자를 칸 아래에 붙여 고정재 줄과 아래를 맞춘다. */
.option-board .securing-field {
  align-self: end;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.option-board .securing-field > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}
.option-board .securing-field .securing-note {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: #8a938e;
}
.option-board .securing-field .chip-group {
  flex-wrap: nowrap;
}
.option-board .field-control {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
@media (min-width: 1101px) {
  .simulation-config-bar.option-board {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'sc pc rc' 'sh ph rh' 'sh sec sec';
    gap: 12px 18px;
    align-items: stretch;
  }
  .option-board > .safety-field,
  .option-board > .pref-field,
  .option-board > .route-field {
    display: contents;
  }
  .option-board .safety-field > .field-control {
    grid-area: sc;
  }
  .option-board .safety-field > .safety-hint {
    grid-area: sh;
    margin: 0;
    display: flex;
    align-items: center;
  }
  .option-board .pref-field > .field-control {
    grid-area: pc;
  }
  .option-board .pref-field > .segment-hint {
    grid-area: ph;
  }
  .option-board .route-field > .field-control {
    grid-area: rc;
  }
  .option-board .route-field > .segment-hint {
    grid-area: rh;
  }
  .option-board .field-control {
    align-self: end;
  }
  .option-board > .securing-field {
    grid-area: sec;
    align-self: end;
  }
}
@media (max-width: 640px) {
  .option-board .securing-field {
    flex-direction: column;
    align-items: flex-start;
  }
  .option-board .securing-field .chip-group {
    flex-wrap: wrap;
  }
}
.option-board select.native-select {
  display: none;
}
/* 현장 결과 기록 카드는 고정재 권고 카드와 같은 제목·여백을 쓴다. 좁은 화면에서는 제목을 한 줄로 두고 요약 글을 제목 아래로 내린다. */
.field-card > summary {
  padding: 18px;
}
.field-card > summary > div {
  align-items: baseline;
  gap: 12px;
}
.field-card > summary strong {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--v3-ink);
}
.field-card > summary span#fieldSummary {
  font-size: 13px;
}
.securing-card > summary strong,
.field-card > summary strong {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .securing-card > summary > div,
  .field-card > summary > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
  }
}
/* 휴대폰: 카드 머리 정리 — 요약 글은 버튼과 겹치지 않게 줄바꿈, 적재 순서 버튼은 제목 아래 한 줄, 무게중심 카드 제목은 단어 단위로 줄바꿈 */
@media (max-width: 640px) {
  .securing-card > summary > div,
  .field-card > summary > div {
    flex: 1 1 auto;
  }
  .securing-card > summary span#securingCount,
  .field-card > summary span#fieldSummary {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .loading-plan .plan-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .loading-plan .plan-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-start;
  }
  .loading-plan .plan-actions button {
    white-space: nowrap;
    flex: 0 0 auto;
    padding-inline: 12px;
  }
  .balance-card .balance-title h3 {
    word-break: keep-all;
    font-size: 17px;
  }
}
/* 가독성: 보조 글자를 한 단계 진하게, 설명 글자는 13px·줄간격 1.5로. 조작부 라벨도 13px로 맞춘다. */
:root {
  --muted: #555a5f;
}
.product-item small,
.sequence-list small,
.securing-items div,
.balance-card > p,
.securing-recommendation p,
.product-options label,
.option-row label {
  font-size: 13px;
  line-height: 1.5;
}
.securing-items strong {
  font-size: 13.5px;
}
.form-grid label,
.container-select > span,
.option-head > span,
.field-control > span,
.option-field > span,
.field-form > label,
.qty-stepper > span {
  font-size: 13px;
  color: #3a423d;
}
.stats span,
.balance-grid > span,
.summary-verdict > span,
.summary-needs > span,
.summary-checks > span {
  font-size: 12.5px;
  color: #4f5752;
}
.stats small {
  font-size: 12.5px;
}
.slider-stops span,
.securing-note {
  font-size: 12px;
  color: #5f6863;
}
.chip-group > button {
  font-size: 13px;
}
#inputHint,
#productCount,
.calc-time {
  font-size: 12.5px;
}
@media (max-width: 640px) {
  .chip-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .chip-group > button {
    font-size: 12.5px;
    padding-left: 4px;
    padding-right: 4px;
    justify-content: center;
    white-space: nowrap;
    gap: 4px;
  }
}
/* 자동 평가 카드 */
.auto-review {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid #d9e4dc;
  border-left: 4px solid #16734f;
  border-radius: 12px;
  background: #fff;
}
.auto-review[data-grade='warn'] {
  border-left-color: #c77700;
}
.auto-review[data-grade='bad'] {
  border-left-color: #b3261e;
}
.auto-review-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.auto-review-head span {
  font-size: 12.5px;
  color: #4f5752;
  font-weight: 600;
}
.auto-review-head strong {
  font-size: 16px;
}
.auto-review-head small {
  font-size: 12px;
  color: #6b736e;
}
.auto-review[data-grade='ok'] .auto-review-head strong {
  color: #16734f;
}
.auto-review[data-grade='warn'] .auto-review-head strong {
  color: #9a5b00;
}
.auto-review[data-grade='bad'] .auto-review-head strong {
  color: #b3261e;
}
.auto-review ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.auto-review li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 9px;
  background: #f6f8f6;
  font-size: 13px;
  line-height: 1.5;
}
.auto-review li i {
  flex: 0 0 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #16734f;
}
.auto-review li[data-level='info'] i {
  background: #4a6fa5;
}
.auto-review li[data-level='warn'] i {
  background: #c77700;
}
.auto-review li[data-level='bad'] i {
  background: #b3261e;
}
.auto-review li b {
  display: block;
}
.auto-review li span {
  display: block;
  color: #4f5752;
}
.auto-review li em {
  display: block;
  font-style: normal;
  color: #16734f;
  font-weight: 600;
}
.auto-review-flag,
.auto-review-scope {
  margin: 10px 0 0;
  font-size: 12px;
  color: #6b736e;
}
/* 제품 데이터 입력칸 접기(제목 옆 ▴/▾) */
.panel-toggle em {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.input-card.input-collapsed #manualPane {
  display: none;
}
.input-card.input-collapsed + .add-connector {
  display: none;
}
.input-card.input-collapsed {
  padding-bottom: 18px;
}
/* 왼쪽 칸 전체 숨기기(두 칸 화면에서만, 칸 경계의 손잡이) */
.result-panel {
  position: relative;
}
.panel-toggle {
  position: absolute;
  left: -14px;
  top: 30px;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
@media (min-width: 901px) {
  .workspace.panel-hidden {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .workspace.panel-hidden > .control-panel {
    display: none;
  }
  .workspace.panel-hidden .panel-toggle {
    left: 0;
    border-radius: 0 14px 14px 0;
    border-left: 0;
  }
}
@media (max-width: 900px) {
  .panel-toggle {
    display: none;
  }
}
/* 접기·펼치기 통일(1.1.64): 모든 접기 버튼은 같은 알약 모양 + 굵은 꺾쇠. 열림이면 위(⌃), 닫힘이면 아래(⌄). */
button.collapse-toggle,
.collapse-state {
  gap: 8px;
  min-height: 34px;
  border: 1.5px solid #b9cdbf !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1;
  white-space: nowrap;
}
button.collapse-toggle::after,
.collapse-state::before {
  content: '';
  flex: 0 0 auto;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
}
button.collapse-toggle[aria-expanded='true']::after,
details[open] > summary .collapse-state::before {
  transform: translateY(2px) rotate(-135deg);
}
.collapse-state::after {
  content: '펼치기' !important;
  color: inherit !important;
  font-weight: 700 !important;
}
details[open] > summary .collapse-state::after {
  content: '접기' !important;
}
/* 왼쪽 칸 손잡이: 큰 꺾쇠 */
.panel-toggle {
  width: 30px;
  height: 68px;
  border: 1.5px solid #b9cdbf;
}
.panel-toggle::after {
  content: '';
  width: 11px;
  height: 11px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateX(2px) rotate(45deg);
}
.panel-toggle[aria-expanded='false']::after {
  transform: translateX(-2px) rotate(-135deg);
}
@media (min-width: 901px) {
  .workspace.panel-hidden::after {
    display: none;
  }
}
/* 입력칸을 접었을 때 아래 제품 목록 카드와 간격 */
.input-card.input-collapsed {
  margin-bottom: 18px;
}
button.collapse-toggle::after,
.collapse-state::before {
  width: 9px;
  height: 9px;
  border-right-width: 3px;
  border-bottom-width: 3px;
}
/* 접기·펼치기·불러오기 버튼 재구성(1.1.65): 같은 알약(높이 32px, 13px 굵게) + 오른쪽 삼각형(11×7px). 접기류는 흰 바탕·초록 테두리, 불러오기는 초록 채움. */
.heading-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
button.collapse-toggle,
.collapse-state,
.load-menu > summary {
  display: inline-flex !important;
  align-items: center;
  border: 1.5px solid #9fc1ab !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #16734f !important;
  font:
    700 13px/1 Inter,
    'Noto Sans KR',
    sans-serif !important;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
}
/* 삼각형: 닫힘 ▼, 열림 ▲ */
button.collapse-toggle::after,
.collapse-state::before,
.load-menu > summary::after {
  content: '' !important;
  flex: 0 0 auto;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  border-left: 5.5px solid transparent !important;
  border-right: 5.5px solid transparent !important;
  border-top: 7px solid currentColor !important;
  border-bottom: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  margin: 0 !important;
  font-size: 0 !important;
}
button.collapse-toggle[aria-expanded='true']::after,
details[open] > summary .collapse-state::before,
.load-menu[open] > summary::after {
  border-top: 0 !important;
  border-bottom: 7px solid currentColor !important;
}
.collapse-state::before {
  order: 2;
}
.collapse-state::after {
  font:
    700 13px/1 Inter,
    'Noto Sans KR',
    sans-serif !important;
}
.input-card .control-heading {
  align-items: center;
}
/* 왼쪽 칸 손잡이: 꺾쇠 유지, 접기 버튼과 구분되게 짙은 바탕 + 흰 꺾쇠 */
.panel-toggle {
  background: #24302b !important;
  border-color: #24302b !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.panel-toggle:hover {
  background: #16734f !important;
  border-color: #16734f !important;
}
/* 1.1.66 버튼 정리: 접기·펼치기는 중립 회색 + "펼치기" 폭으로 고정(글자가 바뀌어도 옆 버튼이 움직이지 않음), 불러오기는 파란색(제품 데이터 카드와 같은 계열). */
button.collapse-toggle,
.collapse-state {
  width: 88px !important;
  padding: 0 10px !important;
  justify-content: center !important;
  background: #f4f5f6 !important;
  border-color: #c5cbd1 !important;
  color: #3a4148 !important;
}
button.collapse-toggle:hover,
.collapsible-card > summary:hover .collapse-state {
  background: #e8ebee !important;
  border-color: #8f98a1 !important;
  color: #1f262c !important;
}
.load-menu > summary {
  background: #0066cc !important;
  border-color: #0066cc !important;
  color: #fff !important;
}
.load-menu > summary:hover,
.load-menu[open] > summary {
  background: #0055aa !important;
  border-color: #0055aa !important;
  color: #fff !important;
}
/* 제목 줄에 버튼 정렬: 버튼(32px)의 가운데를 제목 글자 줄(27px)의 가운데에 맞춘다. */
.input-card .control-heading,
.product-list-card .collapsible-head {
  align-items: flex-start !important;
}
.input-card .heading-actions,
.product-list-card .collapsible-actions {
  align-self: flex-start;
}
/* 상단 새 프로젝트·저장 버튼 높이 44 → 38px */
.project-toolbar #newProjectTop,
.project-toolbar #saveProject {
  min-height: 38px !important;
  height: 38px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* 실행 중: 계산 중… + 도는 표시 */
.top-simulate.is-running {
  opacity: 1 !important;
  cursor: progress !important;
  background: #4a6fa5 !important;
}
.top-simulate.is-running b {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  font-size: 0;
  animation: status-spin 0.8s linear infinite;
}
/* 1.1.67: 01·02 카드 좌우 안쪽 여백 16→12px, 불러오기·접기·펼치기 버튼은 모두 같은 크기(76×30px, 12px 굵게 = 시뮬레이션 실행과 같은 글자 크기) */
.input-card {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.product-list-card .collapsible-head {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
button.collapse-toggle,
.collapse-state,
.load-menu > summary {
  width: 76px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 8px !important;
  gap: 6px !important;
  font-size: 12px !important;
  justify-content: center !important;
}
.collapse-state::after {
  font-size: 12px !important;
}
button.collapse-toggle::after,
.collapse-state::before,
.load-menu > summary::after {
  border-left-width: 5px !important;
  border-right-width: 5px !important;
  border-top-width: 6px !important;
}
button.collapse-toggle[aria-expanded='true']::after,
details[open] > summary .collapse-state::before,
.load-menu[open] > summary::after {
  border-bottom-width: 6px !important;
}
.heading-actions {
  gap: 6px;
}
.input-card .heading-actions,
.product-list-card .collapsible-actions {
  margin-top: -1.5px;
}
/* 제품 데이터 제목 줄은 한 줄로: 안내 문구는 수정 중일 때만 보인다(1.1.68). */
#inputHint:empty {
  display: none;
}
/* 상단 메뉴의 샘플 결과 링크: 다른 메뉴 버튼과 같은 모양 */
.topbar nav a.nav-link {
  color: rgba(255, 255, 255, 0.72);
  font:
    400 12px/1 Inter,
    'Noto Sans KR',
    sans-serif;
  text-decoration: none;
}
.topbar nav a.nav-link:hover {
  color: #fff;
}
/* 모바일(900px 이하): 상단 메뉴를 헤더 둘째 줄에 가로 스크롤로 보인다(1.1.73). */
@media (max-width: 900px) {
  .topbar {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: 10px;
    padding-bottom: 0;
  }
  .topbar nav {
    display: flex !important;
    order: 10;
    flex: 1 0 100%;
    justify-content: flex-start;
    gap: 4px;
    margin: 10px -18px 0;
    padding: 0 12px;
    overflow-x: auto;
    white-space: nowrap;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar {
    display: none;
  }
  .topbar nav > a,
  .topbar nav > button {
    flex: 0 0 auto;
    padding: 12px 8px;
    font-size: 13px !important;
    line-height: 1;
  }
  .topbar nav > a.active {
    box-shadow: inset 0 -2px 0 #fff;
  }
}
@media (min-width: 481px) and (max-width: 900px) {
  .topbar nav {
    justify-content: center;
    gap: 18px;
  }
}
@media (max-width: 480px) {
  .topbar nav {
    justify-content: space-between;
    gap: 0;
    padding: 0 6px;
  }
  .topbar nav > a,
  .topbar nav > button {
    padding: 12px 5px;
    font-size: 12px !important;
    letter-spacing: -0.02em;
  }
}
/* 모바일 헤더 한 줄 정렬(1.1.74): 로고는 PC처럼 왼쪽, 베타 안내는 로고 바로 오른쪽, 계정은 오른쪽 끝에 한 줄로. */
@media (max-width: 900px) {
  .topbar {
    column-gap: 10px;
  }
  .topbar .brand {
    flex: 0 0 auto;
    justify-content: flex-start;
    transform: none;
  }
  .topbar .brand-mark {
    display: flex;
  }
  .topbar .header-beta {
    margin: 0 auto 0 10px;
    flex: 0 0 auto;
  }
  .topbar .account-actions {
    margin-left: auto;
    min-width: 0;
    flex: 0 1 auto;
  }
  .topbar .account-menu {
    min-width: 0;
  }
  .topbar .account-identity {
    display: block;
    max-width: min(190px, calc(100vw - 222px));
    height: 36px;
    min-height: 0;
    padding: 0 12px;
    line-height: 34px;
  }
  .topbar .account-menu > summary::before {
    display: inline-block;
    width: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }
}
/* iOS가 이메일을 자동으로 링크로 바꾸지 않게 한다. */
.account-identity a,
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
}

/* 고정 조건(마찰·래싱 MSL·고정점, 1.1.79): 고정재 칩 옆 작은 펼침 메뉴 */
.securing-conditions {
  position: relative;
}
.securing-conditions > summary {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 10px;
  border: 1px solid var(--v3-line, #dde3e0);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 600;
  color: #39413c;
  white-space: nowrap;
}
.securing-conditions > summary::-webkit-details-marker {
  display: none;
}
.securing-conditions > summary small {
  font-size: 11px;
  font-weight: 500;
  color: #6b736e;
}
.securing-conditions[open] > summary {
  border-color: #0071e3;
}
.securing-conditions-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  width: min(340px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--v3-line, #dde3e0);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.securing-conditions-panel label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #435047;
}
.securing-conditions-panel select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--v3-line, #dde3e0);
  border-radius: 8px;
  background: #fafbf9;
  font-size: 13px;
  color: #1d1d1f;
}
.securing-conditions-panel p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #6b736e;
}
@media (max-width: 900px) {
  .securing-conditions-panel {
    left: 0;
    right: auto;
  }
}
.securing-field {
  flex-wrap: wrap;
  row-gap: 8px;
}
.securing-field .securing-conditions {
  flex: 1 0 100%;
}
.securing-conditions > summary {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
}
.securing-conditions > summary::after {
  content: '';
  align-self: center;
  border: 4px solid transparent;
  border-top: 5px solid currentColor;
  border-bottom: 0;
  margin-left: 2px;
}
.securing-conditions[open] > summary::after {
  border-top: 0;
  border-bottom: 5px solid currentColor;
}
.securing-conditions-panel {
  left: 0;
  right: auto;
  width: min(360px, calc(100vw - 32px));
}
@media (max-width: 480px) {
  .securing-conditions-panel {
    position: static;
    width: auto;
    margin-top: 6px;
    box-shadow: none;
  }
  .securing-conditions > summary {
    white-space: normal;
    flex-wrap: wrap;
  }
}
/* 계정(관리자) 버튼의 삼각형: 불러오기·접기와 같은 CSS 삼각형(폭 10·높이 6px). 긴 이메일이 말줄임돼도 보이게 오른쪽에 고정(1.1.81). */
details.account-menu > summary {
  position: relative;
  padding-right: 30px;
}
details.account-menu > summary::after {
  content: '' !important;
  position: absolute;
  right: 13px;
  top: 50%;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  border-bottom: 0;
  opacity: 0.9;
  font-size: 0;
}
details.account-menu[open] > summary::after {
  border-top: 0;
  border-bottom: 6px solid currentColor;
}
@media (max-width: 900px) {
  .topbar details.account-menu > summary.account-identity {
    padding-right: 30px;
  }
}

/* 도로 축하중 추정(결과 요약 아랫줄, 1.1.82) */
.result-summary .summary-axle {
  grid-column: 1/-1;
  padding-top: 8px;
  border-top: 1px dashed var(--v3-line, #dde3e0);
}
.result-summary .summary-axle span small {
  margin-left: 6px;
  font-weight: 600;
  color: #1f7a45;
}
.result-summary .summary-axle[data-level='caution'] span small {
  color: #9a5b00;
}
.result-summary .summary-axle[data-level='danger'] span small {
  color: #b42318;
}
.result-summary .summary-axle em.axle {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef6f1;
  color: #1f5f3b;
  font-size: 13px;
}
.result-summary .summary-axle em.axle.caution {
  background: #fff3df;
  color: #7a4d00;
}
.result-summary .summary-axle em.axle.danger {
  background: #fde7e5;
  color: #b42318;
}
.result-summary .axle-note {
  font-size: 11.5px;
  color: #6b736e;
  line-height: 1.5;
}

/* 첫 화면 두 갈래(1.1.83): 샘플로 먼저 보기 / 내 제품 직접 입력 */
.empty-state .empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.empty-state .empty-actions button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 200px;
  padding: 12px 16px;
  border: 1.5px solid #c5cbd1;
  border-radius: 12px;
  background: #fff;
  color: #1d1d1f;
  text-align: left;
  cursor: pointer;
}
.empty-state .empty-actions button b {
  font-size: 14px;
}
.empty-state .empty-actions button small {
  font-size: 12px;
  color: #6b736e;
}
.empty-state .empty-actions button:hover {
  border-color: #0071e3;
}
.empty-state .empty-actions .empty-primary {
  background: #0071e3;
  border-color: #0071e3;
  color: #fff;
}
.empty-state .empty-actions .empty-primary small {
  color: rgba(255, 255, 255, 0.85);
}
.empty-state .empty-actions .empty-primary:hover {
  background: #0062c4;
}
.empty-state .empty-link {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0071e3;
  text-decoration: none;
}
.form-grid label small.optional {
  font-weight: 500;
  color: #8a938e;
}
/* 새 프로젝트 버튼: 분홍 대신 중립색(행동색은 파란 저장·실행 버튼 하나로) */
#newProjectTop {
  background: #fff !important;
  border-color: #c5cbd1 !important;
  color: #1d1d1f !important;
}
#newProjectTop:hover {
  background: #f2f5fa !important;
  border-color: #8d969e !important;
}
@media (max-width: 640px) {
  .empty-state .empty-actions button {
    min-width: 0;
    width: 100%;
  }
}
@media (max-width: 640px) {
  .empty-state .empty-cube {
    display: none;
  }
  .empty-state {
    justify-content: flex-start;
    padding: 88px 14px 10px;
  }
}
/* 제품 입력: (선택)은 제목 옆에, 단위(kg·mm)는 입력칸 안 숫자 바로 뒤에 */
.form-grid .field-title {
  display: block;
}
.form-grid .field-title small.optional {
  font-size: 10.5px;
}
/* 좁은 폭에서 제목이 두 줄이 되어도 같은 줄의 입력칸 높이를 맞춘다 */
.form-grid label.third > :last-child {
  margin-top: auto;
}
.unit-field {
  position: relative;
  display: block;
}
.unit-field .unit-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  font-style: normal;
  color: var(--ink);
  pointer-events: none;
  white-space: nowrap;
}
.unit-field.has-value .unit-suffix,
.unit-field.is-empty .unit-suffix {
  display: block;
}
/* 입력칸의 예시(예: 산업용 펌프, 420kg)는 모두 같은 흐린 색. 단위 칸은 숫자와 단위를 같은 색으로 */
.form-grid input::placeholder,
.unit-field.is-empty .unit-suffix {
  color: #b8bcc1;
  opacity: 1;
}
/* 중간 폭(약 920~1240px): 상단 메뉴가 세로로 쌓이지 않게 한 줄로 두고, 부가 문구(표어·로컬 저장 안내)를 먼저 숨긴다 */
.topbar nav > * {
  white-space: nowrap;
}
@media (max-width: 1240px) {
  .topbar .brand small,
  .topbar .local-notice {
    display: none;
  }
}
/* 제품 데이터 제목과 불러오기·접기 버튼이 겹치지 않게, 자리가 모자라면 버튼을 다음 줄로 */
.input-card .control-heading {
  flex-wrap: wrap;
  row-gap: 8px;
}
.input-card .control-heading > .step-heading {
  min-width: max-content;
}
/* 03 제목과 컨테이너·실행 버튼: 자리가 모자라면 버튼 묶음을 다음 줄로(가로 스크롤 방지) */
.result-header {
  flex-wrap: wrap;
  row-gap: 10px;
}
.result-header > .step-heading {
  min-width: max-content;
}
/* 손가락 조작(640px 이하): 자주 누르는 작은 버튼은 36px 이상으로 */
@media (max-width: 640px) {
  .qty-stepper {
    gap: 6px;
  }
  .qty-stepper input {
    width: 56px;
    height: 36px;
    font-size: 13px;
  }
  .qty-arrows {
    gap: 2px;
  }
  .qty-arrows button {
    width: 30px;
    height: 17px;
    font-size: 9px !important;
  }
  .edit-product,
  .product-item .edit-product {
    min-height: 36px;
    padding: 0 14px;
    line-height: 34px;
  }
  button.collapse-toggle,
  details.menu > summary {
    min-height: 36px;
  }
  .playback button {
    width: 36px;
    height: 36px;
  }
  .container-tabs .nav-arrow,
  .result-control-row .container-tabs .nav-arrow {
    width: 36px;
    min-height: 36px;
  }
}
@media (max-width: 640px) {
  /* 위쪽 모바일 규칙이 30px !important로 고정한 접기·불러오기 버튼도 36px로 */
  button.collapse-toggle,
  .collapse-state,
  .load-menu > summary {
    height: 36px !important;
    min-height: 36px !important;
  }
  .container-tabs .nav-arrow,
  .result-control-row .container-tabs .nav-arrow,
  .playback button {
    flex: 0 0 36px;
  }
  .securing-visibility button {
    min-height: 36px;
  }
}
@media (max-width: 640px) {
  .option-row input[type='checkbox'],
  .product-item input[type='checkbox'] {
    width: 18px;
    height: 18px;
  }
  #resetView {
    flex: 0 0 36px;
    min-height: 36px;
  }
}
/* 고정 조건 설명(고정점 등): 선택 상자 바로 아래 */
.securing-conditions-panel .condition-note {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f4f7f5;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #435047;
}
/* 설명 글은 단어 중간에서 줄을 바꾸지 않는다(공백에서만) */
.safety-hint li,
.segment-hint,
.securing-conditions-panel p,
.securing-conditions-panel .condition-note,
.auto-review li span,
.auto-review li em,
.summary-verdict strong,
.summary-checks strong {
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 설정 판(넓은 화면): 안전 수준 설명 상자를 옆 상자들과 같은 줄에 두고 3줄 높이로 고정해 세로 가운데 정렬. 고정재는 아래 한 줄 전체. */
@media (min-width: 1101px) {
  .simulation-config-bar.option-board {
    grid-template-areas: 'sc pc rc' 'sh ph rh' 'sec sec sec';
  }
  .option-board .safety-field > .safety-hint,
  .option-board .segment-hint {
    min-height: 76px;
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  .option-board .safety-field > .safety-hint ul {
    width: 100%;
  }
  .option-board > .securing-field {
    align-self: start;
  }
  .option-board .securing-field .securing-conditions {
    margin-left: auto;
  }
}
/* 넓은 화면: 고정 조건은 고정재 칩과 같은 줄 오른쪽 끝에 */
@media (min-width: 1101px) {
  .option-board .securing-field .securing-conditions {
    flex: 0 0 auto;
    margin-left: auto;
  }
}
/* 운송 경로 설명: 문장과 가속도를 두 줄로(문자열의 줄바꿈 그대로) */
.segment-hint {
  white-space: pre-line;
}
/* 슬라이더 아래 단계 이름은 눌러서 고를 수 있다 */
.slider-stops span {
  pointer-events: auto;
  cursor: pointer;
}
.slider-stops span:hover {
  color: #0071e3;
}
/* 휴대폰 팝업이 위아래로 가려지지 않게: iOS Safari 의 100vh 는 주소창·아래 도구줄이 숨은 높이라
   calc(100vh - 32px) 팝업이 보이는 화면보다 커져 제목과 닫기 단추가 주소창 뒤로 들어갔다.
   지금 보이는 높이(dvh)로 자르고, 넘치는 내용은 팝업 안에서 스크롤한다. */
.sample-dialog {
  max-height: calc(100vh - 32px);
  overflow: auto;
}
@supports (height: 100dvh) {
  .policy-dialog {
    max-height: min(820px, calc(100dvh - 32px));
  }
  .admin-dialog,
  .sample-dialog {
    max-height: calc(100dvh - 32px);
  }
}
/* 맨 위로 단추(to-top.js): 한 화면쯤 내려가면 오른쪽 아래에 뜬다. 모든 화면 공통. */
.to-top {
  position: fixed;
  right: 20px;
  bottom: calc(20px + var(--to-top-lift, 0px));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #d5dbe1;
  border-radius: 50%;
  background: #fff;
  color: #1d1d1f;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.to-top[hidden] {
  display: none;
}
/* 본문 옆에 설 때는 스크립트가 left·top 을 준다 */
.to-top.is-beside {
  right: auto;
  bottom: auto;
}
.to-top:hover {
  border-color: #0071e3;
  color: #0071e3;
}
.to-top:focus-visible {
  outline: 3px solid #8ebcf4;
  outline-offset: 2px;
}
.to-top svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 640px) {
  .to-top {
    right: 14px;
    bottom: calc(14px + var(--to-top-lift, 0px));
    width: 44px;
    height: 44px;
  }
}
@media print {
  .to-top {
    display: none !important;
  }
}

/* 결과 첫 줄: 전량 적재 여부 · 대수 · 자동 평가를 크게. 색은 나쁜 쪽을 따른다. */
.result-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 14px 0 0;
  padding: 14px 18px;
  border: 1px solid #cfe6d8;
  border-left: 5px solid #1f8a4c;
  border-radius: 12px;
  background: #f1faf4;
  font-size: 15px;
  color: #33413a;
}
.result-headline[hidden] {
  display: none;
}
.result-headline strong {
  font-size: 22px;
  font-weight: 800;
  color: #145c33;
}
.result-headline span + span::before {
  content: '·';
  margin-right: 14px;
  color: #9aa4a0;
}
.result-headline[data-level='caution'] {
  border-color: #f0d9a8;
  border-left-color: #c98a00;
  background: #fff8e8;
}
.result-headline[data-level='caution'] strong {
  color: #8a5a00;
}
.result-headline[data-level='danger'] {
  border-color: #f2c6c2;
  border-left-color: #c62828;
  background: #fdf1f0;
}
.result-headline[data-level='danger'] strong {
  color: #b3261e;
}
@media (max-width: 640px) {
  .result-headline strong {
    font-size: 19px;
  }
}
/* 샘플: 대표 셋을 먼저, 전체는 접어 둔다 */
.sample-featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.project-dialog .sample-featured button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 0;
  padding: 14px;
  border: 1px solid #d5dbe1;
  border-radius: 12px;
  background: #fff;
  color: #1d1d1f;
  text-align: left;
  cursor: pointer;
}
.project-dialog .sample-featured button:hover {
  border-color: #0071e3;
}
.sample-featured em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #0071e3;
}
.sample-featured strong {
  font-size: 15px;
}
.sample-featured small {
  font-size: 12.5px;
  line-height: 1.5;
  color: #5f6763;
}
.sample-all {
  margin-top: 16px;
}
.sample-all > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #d5dbe1;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.sample-all > summary::-webkit-details-marker {
  display: none;
}
.sample-all > summary::after {
  content: '▾';
  font-size: 11px;
}
.sample-all[open] > summary::after {
  content: '▴';
}
@media (max-width: 640px) {
  .sample-featured {
    grid-template-columns: 1fr;
  }
}
/* 알고리즘 점검 기록: 다시 계산 · JSON 내려받기 · 삭제 */
.flag-actions {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 6px;
}
.flag-actions button[data-flag-replay] {
  grid-column: 1 / -1;
}
#algorithmFlagList td:nth-child(3),
#algorithmFlagList td:nth-child(4) {
  min-width: 120px;
  white-space: normal;
}
.flag-actions button {
  padding: 6px 10px;
  border: 1px solid var(--v3-line);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.flag-actions button[data-flag-replay] {
  border-color: #0071e3;
  background: #0071e3;
  color: #fff;
}
.flag-actions button[data-flag-delete] {
  color: #b3261e;
}