/* imdesigndocs 제품 확장. V6 코어(impacsys-v6.css)는 고치지 않고 여기에만 둔다. */

.inline-form { display: inline; margin: 0; }
/* 브랜드 제목·부제를 span 으로 그리므로 줄을 나눈다(V6 샘플은 p 요소). */
.v6-brand-title, .v6-brand-subtitle { display: block; }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 로그인 */
.auth-box { display: grid; gap: 18px; }
.auth-title { font-size: 22px; }
.auth-box > p { margin: 0; }
.auth-form { gap: 14px; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--tertiary); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--separator-soft); }
.auth-sso { width: 100%; }
.login-error { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); color: var(--red); background: var(--red-soft); font-weight: 700; }

.narrow { max-width: 520px; }
.notice { margin-bottom: 16px; grid-template-columns: 34px minmax(0, 1fr); }
.notice-warn { background: var(--orange-soft); }
.notice-warn .notice-icon { color: var(--orange); background: rgba(178, 94, 9, 0.14); }
.notice-risk { background: var(--red-soft); }
.notice-risk .notice-icon { color: var(--red); background: rgba(209, 47, 63, 0.14); }
.notice-ok { background: var(--green-soft); }
.notice-ok .notice-icon { color: var(--green); background: rgba(36, 138, 61, 0.14); }
.empty-state h2 { margin-bottom: 8px; }
.empty-state .btn { margin-top: 14px; }

/* V6 .subtab 의 margin-bottom:-1px 때문에 세로로 넘쳐 윈도에서 스크롤 화살표가 생긴다. */
.subtab-bar { overflow-y: hidden; }
/* 내용이 짧은 화면에서 배경 그라데이션이 중간에 끊기지 않게 */
body { min-height: 100vh; }

/* 갤러리 */
.subtab-count { margin-left: 6px; color: var(--tertiary); font-weight: 700; }
.style-card .card-body { display: grid; gap: 10px; align-content: start; height: 100%; }
.style-card h2, .style-card p { margin: 0; }
.style-card .btn { justify-self: start; }
.style-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* 상세: 왼쪽 설정, 오른쪽 미리보기 */
.style-detail { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
.style-detail aside .card-body.stack { gap: 14px; }
.check { display: flex; align-items: flex-start; gap: 8px; font-weight: 650; cursor: pointer; }
.check input { margin-top: 3px; }
.check input:disabled + .rule-title, .check input:disabled { cursor: default; }
.preview-pane { position: sticky; top: 82px; display: grid; gap: 8px; }
.preview-bar { display: flex; justify-content: space-between; align-items: center; }
.preview-frame { width: 100%; height: calc(100vh - 150px); min-height: 560px; border: 0; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card); }
.pack { display: block; margin-bottom: 8px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--canvas); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.compact-table th, .compact-table td { padding: 9px 12px; }
.swatches { list-style: none; margin: 0; padding: 12px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.swatches li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.swatches span { display: grid; min-width: 0; }
.swatches strong { font-size: 12px; }
.rule-list { list-style: none; margin: 0; padding: 0; }
.rule { display: grid; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--separator-soft); }
.rule:last-child { border-bottom: 0; }
.rule details summary { color: var(--secondary); font-size: 12px; cursor: pointer; }
.rule details p { margin: 6px 0 0; font-size: 13px; }
.example { padding: 6px 8px; border-radius: var(--radius-sm); }
.example.good { background: var(--green-soft); }
.example.bad { background: var(--red-soft); }
.example strong { margin-right: 6px; }

/* 시안 선택 */
.choice-list { display: grid; gap: 8px; }
.choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--radius-md); box-shadow: var(--shadow-hairline); cursor: pointer; }
.choice span { display: grid; gap: 2px; }
.choice:has(input:checked) { background: var(--accent-soft); box-shadow: 0 0 0 1px rgba(0, 113, 227, 0.35); }
.choice input { margin-top: 3px; }
.pre-wrap { margin: 0; white-space: pre-wrap; }
.section-gap-bottom { margin-bottom: 16px; }
.big-btn { height: 46px; font-size: 15px; }

.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* AI 연결 */
.steps-list { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.inline-code { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--canvas); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; word-break: break-all; }
.card-body h3 { margin-bottom: 6px; }

/* 관리자 */
.admin-title { margin: 0; font-size: 18px; }
.admin-shell .v6-page-head h1 { font-size: 24px; }
.plain-fieldset { margin: 0; padding: 0; border: 0; }
.plain-fieldset legend { margin-bottom: 7px; font-weight: 720; }
.admin-shell.collapsed [data-collapse] .icon { transform: rotate(180deg); }
.section-gap { margin-top: 16px; }
.form-wide { max-width: 1040px; }
.form-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.textarea.short { min-height: 64px; }
.textarea.tall { min-height: 220px; }
.textarea.mono, .input.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.file-input { height: auto; padding: 8px 11px; }
.order-input { width: 72px; }
.rule-edit { margin: 0; padding: 14px; border: 1px solid var(--separator-soft); border-radius: var(--radius-lg); }
.rule-edit legend { padding: 0 6px; font-weight: 760; }
.rule-blank { border-style: dashed; }
.rule-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.rule-edit-grid .span-2 { grid-column: span 2; }
.rule-edit-grid .span-3 { grid-column: 1 / -1; }
.rule-edit-grid .checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }

@media (max-width: 900px) {
  .style-detail { grid-template-columns: minmax(0, 1fr); }
  .preview-pane { position: static; }
  .preview-frame { height: 70vh; }
  .rule-edit-grid, .form-actions { grid-template-columns: minmax(0, 1fr); }
  .rule-edit-grid .span-2 { grid-column: auto; }
}