/* 사다리 타기 */
.lg-setup { margin-bottom: var(--spacing-lg, 1.5rem); }
.lg-textarea { min-height: 150px; }
.lg-count { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); font-variant-numeric: tabular-nums; }

.lg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.lg-density { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.lg-density-select { width: auto; min-width: 5.5rem; padding-top: .25rem; padding-bottom: .25rem; }

.lg-alert { margin-bottom: var(--spacing-md, 1rem); }
.lg-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.lg-toolbar .lg-hint { margin: 0; flex: 1 1 14rem; }
.lg-swap-btn { width: auto; flex: 0 0 auto; }                                  /* 공통 모바일 전폭 규칙 해제 */
.lg-swap-btn[aria-pressed="true"] { background: var(--accent-primary, #2f6fdb); border-color: var(--accent-primary, #2f6fdb); color: #fff; }
.lg-names.is-swapping .lg-name-btn { border-style: dashed; }
.lg-name-btn.is-picked { background: var(--lg-color, #4a7fd6); color: #fff; box-shadow: 0 0 0 3px rgba(47, 111, 219, .25); }
.lg-hint { margin: 0 0 .5rem; font-size: var(--text-sm, .875rem); font-weight: 600; color: var(--text-secondary, #3d4450); min-height: 1.4em; }

.lg-names { display: grid; gap: 4px; margin-bottom: 6px; }
.lg-name-btn {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: .3rem .25rem;
    border: 2px solid var(--lg-color, #4a7fd6); border-radius: 6px;
    background: #fff; color: var(--lg-color, #4a7fd6);
    font-size: var(--text-ui-sm, .8125rem); font-weight: 700; cursor: pointer;
}
.lg-name-btn:hover, .lg-name-btn:focus-visible { background: var(--lg-color, #4a7fd6); color: #fff; outline: none; }
.lg-name-btn.is-done { background: var(--lg-color, #4a7fd6); color: #fff; }

.lg-canvas-wrap {
    width: 100%; overflow: hidden;
    border: 1px solid var(--border-color, #e1e4e9); border-radius: var(--radius-md, 8px);
    background: #fff;
}
.lg-canvas-wrap canvas { display: block; cursor: pointer; }

.lg-bottom { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--spacing-md, 1rem); }

.lg-table-wrap { margin-top: var(--spacing-md, 1rem); display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.lg-table { width: 100%; max-width: 32rem; border-collapse: collapse; font-size: var(--text-sm, .875rem); }
.lg-table th, .lg-table td { padding: .45rem .75rem; border-bottom: 1px solid var(--border-color, #e1e4e9); text-align: left; }
.lg-table th { font-weight: 600; color: var(--text-muted, #626977); }
.lg-table td:first-child { font-weight: 700; }