/**
 * 60:30:10 색상 비율 분석기 CSS
 * Tool: color-ratio-analyzer
 * Category: image
 */

.cra-main-layout,
.cra-input-col,
.cra-result-col,
.cra-upload-placeholder,
.cra-preview-container,
.cra-action-row,
.cra-field,
.cra-format-tabs,
.cra-waiting,
.cra-loading,
.cra-result-section,
.cra-hero-card,
.cra-hero-copy,
.cra-hero-preview,
.cra-score-line,
.cra-role-summary,
.cra-grid,
.cra-bar-group,
.cra-bar-row,
.cra-kpi-grid,
.cra-distribution-grid,
.cra-role-card-grid,
.cra-role-card,
.cra-role-head,
.cra-role-chip-row,
.cra-family-grid,
.cra-family-section,
.cra-insight-section,
.cra-insight-list,
.cra-help-list,
.cra-detail-table,
.cra-disclaimer p,
.cra-image-meta,
.cra-meta-row,
.cra-stage-head,
.cra-heatmap-grid,
.cra-heatmap-cell,
.cra-color-chip,
.cra-family-card,
.cra-family-card-main,
.cra-family-chip-row,
.cra-card,
.cra-section-title,
.cra-waiting-body,
.cra-distribution-item,
.cra-kpi-card {
    box-sizing: border-box;
}

.cra-main-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    align-items: start;
}

.cra-input-col {
    display: block;
}

.cra-main-layout > .cra-card,
.cra-result-col {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cra-upload-card,
.cra-option-card {
    height: 100%;
}

.cra-result-col,
.cra-help-card {
    grid-column: 1 / -1;
}

.cra-upload-card,
.cra-option-card,
.cra-help-card,
.cra-ratio-card,
.cra-distribution-card {
    min-width: 0;
}

.cra-option-card {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 8px 10px;
    align-items: start;
}

.cra-card {
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 14px;
    padding: 11px 12px;
    box-shadow: 0 8px 24px rgba(45, 42, 38, 0.04);
}

.cra-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 7px;
    font-size: 14px;
    font-weight: 700;
    color: #1a1816;
}

.cra-option-card .cra-section-title {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.cra-section-title i,
.cra-upload-icon,
.cra-disclaimer i,
.cra-waiting-icon,
.cra-score-label,
.cra-stage-head i {
    color: #d4af37;
}

.cra-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 12px;
    border: 2px dashed #e8e4dc;
    border-radius: 10px;
    background: #faf9f7;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.cra-upload-area:hover,
.cra-upload-area.dragover {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.06);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.10);
}

#craFileInput {
    display: none;
}

.cra-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cra-upload-area.has-image .cra-upload-placeholder {
    display: none;
}

.cra-preview-container {
    display: none;
    width: 100%;
    gap: 6px 10px;
}

.cra-upload-area.has-image .cra-preview-container {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(190px, 0.9fr);
    align-items: start;
}

.cra-preview-container > .cra-preview-stage {
    grid-row: 1 / span 2;
}

.cra-upload-icon {
    font-size: 2rem;
}

.cra-upload-text {
    font-size: 13px;
    font-weight: 700;
    color: #2d2a26;
}

.cra-upload-hint {
    font-size: 12px;
    line-height: 1.45;
    color: #716a64;
}

.cra-upload-btn,
.cra-secondary-btn,
.cra-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cra-upload-btn {
    padding: 10px 14px;
    border: none;
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.22);
}

.cra-secondary-btn,
.cra-copy-btn {
    padding: 8px 10px;
    border: 1px solid #e8e4dc;
    background: #faf9f7;
    color: #2d2a26;
}

.cra-upload-btn:hover,
.cra-secondary-btn:hover,
.cra-copy-btn:hover,
.cra-color-chip:hover {
    transform: translateY(-1px);
}

.cra-preview-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 136px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #ebe5dc;
    background: repeating-linear-gradient(45deg, rgba(232, 228, 220, 0.55), rgba(232, 228, 220, 0.55) 10px, rgba(255, 255, 255, 0.9) 10px, rgba(255, 255, 255, 0.9) 20px);
}

.cra-preview-stage img,
.cra-stage-frame img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#craImagePreview,
#craHeroImage {
    display: none;
}

.cra-stage-frame {
    position: relative;
}

.cra-stage-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: #7a726d;
}

.cra-image-meta {
    display: grid;
    gap: 5px;
}

.cra-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11.5px;
    color: #5f5a56;
}

.cra-meta-row strong {
    text-align: right;
    color: #2d2a26;
}

.cra-action-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.cra-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cra-field > span,
.cra-kpi-label,
.cra-bar-label,
.cra-stage-caption {
    font-size: 12px;
    font-weight: 700;
    color: #7a726d;
}

.cra-select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #e8e4dc;
    border-radius: 10px;
    background: #fff;
    color: #2d2a26;
    font-size: 14px;
}

.cra-inline-note {
    grid-column: 1 / -1;
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(212, 175, 55, 0.08);
    font-size: 12px;
    line-height: 1.55;
    color: #5f5a56;
}

.cra-format-tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    min-width: 0;
    background: #faf9f7;
    border-radius: 10px;
}

.cra-format-tab {
    flex: 1;
    min-height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #6c655f;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.cra-format-tab.active {
    background: #fff;
    color: #2d2a26;
    box-shadow: 0 2px 8px rgba(45, 42, 38, 0.08);
}

.cra-help-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding-left: 18px;
}

.cra-insight-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.cra-help-list li {
    color: #4f4944;
    line-height: 1.65;
}

.cra-insight-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
    padding: 7px 8px;
    border: 1px solid #ece6de;
    border-radius: 10px;
    background: #faf9f7;
    color: #4f4944;
    line-height: 1.55;
    font-size: 12.5px;
}

.cra-insight-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37 0%, #c7522a 100%);
    flex: none;
}

.cra-waiting,
.cra-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 10px;
}

.cra-waiting-icon,
.cra-spinner {
    flex: none;
}

.cra-waiting-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.12);
    font-size: 1.25rem;
}

.cra-waiting-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cra-waiting-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1816;
}

.cra-waiting-body p,
.cra-loading-text,
.cra-distribution-item p,
.cra-score-summary,
.cra-role-text,
.cra-family-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #5f5a56;
}

.cra-loading {
    display: none;
}

.cra-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(212, 175, 55, 0.18);
    border-top-color: #d4af37;
    border-radius: 50%;
    animation: cra-spin 0.9s linear infinite;
}

@keyframes cra-spin {
    to {
        transform: rotate(360deg);
    }
}

.cra-result-section {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.cra-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
    gap: 10px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.14) 0%, rgba(255, 255, 255, 0.96) 55%, #faf9f7 100%);
    border: 1px solid rgba(212, 175, 55, 0.24);
    border-radius: 10px;
}

.cra-hero-copy,
.cra-hero-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cra-score-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.cra-score-badge,
.cra-role-pill,
.cra-role-badge,
.cra-role-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    white-space: nowrap;
}

.cra-score-badge {
    padding: 6px 10px;
    background: rgba(212, 175, 55, 0.14);
    color: #8a6502;
    font-size: 12px;
    font-weight: 700;
}

.cra-score-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cra-score-value {
    font-size: clamp(28px, 4.4vw, 42px);
    line-height: 1;
    font-weight: 800;
    color: #1a1816;
}

.cra-role-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cra-role-pill,
.cra-role-badge,
.cra-role-tag {
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.is-dominant {
    background: #d4af37;
}

.is-secondary {
    background: #8f6f35;
}

.is-accent {
    background: #c7522a;
}

.cra-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #2d2a26;
}

.cra-stage-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ebe5dc;
    background: repeating-linear-gradient(45deg, rgba(232, 228, 220, 0.55), rgba(232, 228, 220, 0.55) 10px, rgba(255, 255, 255, 0.9) 10px, rgba(255, 255, 255, 0.9) 20px);
}

.cra-grid {
    display: grid;
    gap: 8px;
}

.cra-grid-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cra-grid-bottom {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
}

.cra-bar-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cra-bar-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cra-stack-bar {
    display: flex;
    width: 100%;
    min-height: 16px;
    border-radius: 10px;
    overflow: hidden;
    background: #f2ede6;
}

.cra-stack-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.cra-stack-bar.is-placeholder .cra-stack-segment {
    opacity: 0.42;
    font-size: 10px;
}

.cra-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.cra-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #faf9f7;
    border: 1px solid #ece6de;
}

.cra-kpi-card strong {
    font-size: 18px;
    color: #1a1816;
}

.cra-distribution-grid {
    display: grid;
    gap: 8px;
}

.cra-distribution-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cra-heatmap-wrap {
    margin-top: 6px;
}

.cra-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.cra-heatmap-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 46px;
    padding: 5px 4px;
    border-radius: 10px;
    background: rgba(212, 175, 55, calc(0.10 + var(--cra-heat, 0) * 0.65));
    border: 1px solid rgba(199, 82, 42, calc(0.12 + var(--cra-heat, 0) * 0.48));
}

.cra-heatmap-cell.is-active {
    box-shadow: inset 0 0 0 1px rgba(199, 82, 42, 0.35);
}

.cra-heatmap-cell-label {
    font-size: 11px;
    font-weight: 700;
    color: #7a726d;
}

.cra-heatmap-cell-value {
    font-size: 12px;
    font-weight: 700;
    color: #2d2a26;
}

.cra-heatmap-empty,
.cra-role-empty,
.cra-family-empty {
    padding: 10px;
    border: 1px dashed #e2d7c8;
    border-radius: 10px;
    background: #faf9f7;
    color: #6c655f;
    font-size: 14px;
    line-height: 1.6;
}

.cra-role-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.cra-role-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ece6de;
    background: #fff;
}

.cra-role-card.is-placeholder-card {
    background: linear-gradient(180deg, #fff 0%, #faf9f7 100%);
}

.cra-role-card.is-placeholder-card .cra-role-swatch {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(232, 228, 220, 0.55) 100%);
}

.cra-role-card.is-placeholder-card .cra-color-chip {
    cursor: default;
}

.cra-role-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cra-role-share {
    font-size: 13px;
    font-weight: 700;
    color: #5f5a56;
}

.cra-role-swatch {
    width: 100%;
    min-height: 56px;
    border-radius: 10px;
    border: 1px solid rgba(45, 42, 38, 0.06);
}

.cra-role-name,
.cra-family-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1816;
}

.cra-role-chip-row,
.cra-family-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cra-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 7px;
    border: 1px solid #ece6de;
    border-radius: 10px;
    background: #faf9f7;
    color: #2d2a26;
    cursor: pointer;
}

.cra-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(45, 42, 38, 0.10);
    flex: none;
}

.cra-color-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}

.cra-color-code {
    font-size: 11px;
    font-weight: 700;
    color: #2d2a26;
}

.cra-color-share {
    font-size: 10px;
    color: #7a726d;
}

.cra-family-section,
.cra-insight-section {
    padding: 10px;
}

.cra-family-section .cra-section-title,
.cra-insight-section .cra-section-title {
    margin-bottom: 10px;
    font-size: 14px;
}

.cra-family-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.cra-family-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid #ece6de;
    border-radius: 10px;
    background: #fff;
}

.cra-family-swatch {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(45, 42, 38, 0.08);
}

.cra-family-card-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.cra-family-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.cra-family-note {
    font-size: 12px;
    line-height: 1.55;
}

.cra-family-percent {
    font-size: 12px;
    font-weight: 800;
    color: #2d2a26;
    align-self: center;
}

.cra-detail-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.cra-detail-table {
    width: 100%;
    border-collapse: collapse;
}

.cra-detail-table th,
.cra-detail-table td {
    padding: 8px 7px;
    border-bottom: 1px solid #efe9e1;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
}

.cra-detail-table th {
    color: #6d665f;
    font-weight: 700;
    background: #fcfbfa;
}

.cra-detail-table td {
    color: #2d2a26;
}

.cra-detail-table tr:last-child td {
    border-bottom: none;
}

.cra-copy-btn {
    white-space: nowrap;
}

.cra-disclaimer {
    margin-top: 10px;
    padding: 10px 12px;
    background: #faf9f7;
    border: 1px solid #e8e4dc;
    border-radius: 10px;
}

.cra-disclaimer p {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: #5f5a56;
}

.cra-upload-text,
.cra-upload-hint,
.cra-inline-note,
.cra-waiting-body p,
.cra-loading-text,
.cra-score-summary,
.cra-role-text,
.cra-family-note,
.cra-help-list li,
.cra-insight-list li,
.cra-detail-table th,
.cra-detail-table td,
.cra-meta-row strong,
.cra-role-name,
.cra-family-name,
.cra-disclaimer p {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#craAnalysisCanvas {
    display: none;
}

@media (max-width: 900px) {
    .cra-main-layout,
    .cra-option-card,
    .cra-upload-area.has-image .cra-preview-container,
    .cra-hero-card,
    .cra-grid-top,
    .cra-grid-bottom {
        grid-template-columns: 1fr;
    }

    .cra-result-col,
    .cra-help-card {
        grid-column: auto;
    }

    .cra-preview-container > .cra-preview-stage {
        grid-row: auto;
    }

    .cra-action-row {
        justify-content: flex-start;
    }

    .cra-role-card-grid,
    .cra-family-grid,
    .cra-insight-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .cra-card,
    .cra-hero-card,
    .cra-waiting,
    .cra-loading {
        padding: 10px;
    }

    .cra-role-card-grid,
    .cra-kpi-grid,
    .cra-family-grid,
    .cra-insight-list {
        grid-template-columns: 1fr;
    }

    .cra-stage-frame {
        min-height: 176px;
    }

    .cra-family-card {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        justify-items: stretch;
    }

    .cra-meta-row,
    .cra-stage-head,
    .cra-role-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .cra-main-layout,
    .cra-main-layout > .cra-card,
    .cra-result-col {
        max-width: 100%;
        overflow-x: hidden;
        min-width: 0;
    }

    .cra-upload-area {
        padding: 11px 10px;
    }

    .cra-stage-frame,
    .cra-preview-stage {
        min-height: 150px;
    }

    .cra-score-value {
        font-size: 28px;
    }

    .cra-format-tabs {
        flex-wrap: wrap;
    }

    .cra-format-tab {
        flex: 1 1 84px;
    }

    .cra-family-card {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 7px;
        padding: 8px 9px;
    }

    .cra-family-swatch {
        width: 32px;
        height: 32px;
    }

    .cra-insight-list li {
        padding: 8px 9px;
        font-size: 12px;
    }
}