/**
 * 파일명: create.css
 * 파일경로: /home/qrcanvas/public_html/assets/css/
 * 기능: QR 코드 생성 페이지 스타일 (카드형 UI, 2×2 유형 그리드)
 * 작성일: 2026-05-18
 * 수정일: 2026-05-20
 */

/* ── 페이지 기본 ──────────────────────────────────────────── */
.qrc-create {
    padding: 56px 0 90px;
}

.qrc-create-head {
    max-width: 620px;
    margin-bottom: 32px;
}

.qrc-create-head h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.05em;
}

.qrc-create-head p:not(.qrc-eyebrow) {
    margin: 12px 0 0;
    color: var(--qrc-muted);
    font-size: 16px;
}

/* ── 2-컬럼 레이아웃 ─────────────────────────────────────── */
.qrc-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(320px, 1fr);
    gap: 20px;
    align-items: start;
}

/* ── 설정 카드 ────────────────────────────────────────────── */
.qrc-settings-card {
    background: #fff;
    border: 1px solid var(--qrc-line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.qrc-settings-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.qrc-settings-card form,
.qrc-type-section {
    padding: 0 24px;
}

.qrc-type-section {
    padding-top: 20px;
    padding-bottom: 4px;
}

/* ── 섹션 라벨 ────────────────────────────────────────────── */
.qrc-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 900;
    color: var(--qrc-text);
    letter-spacing: 0.01em;
}

/* ── 유형 2×2 카드 그리드 ─────────────────────────────────── */
.qrc-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.qrc-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px 14px;
    background: #fff;
    border: 1.5px solid var(--qrc-line);
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.qrc-type-card:hover {
    border-color: #93c5fd;
    background: #f0f7ff;
}

.qrc-type-card.is-active {
    border-color: var(--qrc-primary);
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.qrc-type-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--qrc-soft);
    color: var(--qrc-muted);
    transition: background 0.15s, color 0.15s;
}

.qrc-type-icon svg {
    width: 22px;
    height: 22px;
}

.qrc-type-card.is-active .qrc-type-icon {
    background: var(--qrc-primary);
    color: #fff;
}

.qrc-type-card strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--qrc-text);
    line-height: 1.2;
}

.qrc-type-card span {
    font-size: 12px;
    color: var(--qrc-muted);
    line-height: 1.3;
}

/* ── 동적 입력 필드 ────────────────────────────────────────── */
.qrc-dyn-field {
    margin-bottom: 16px;
}

.qrc-dyn-field[hidden] {
    display: none;
}

/* 아이콘 + 인풋 래퍼 */
.qrc-input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.qrc-input-pfx {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--qrc-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.qrc-input-icon-wrap input,
.qrc-input-icon-wrap select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px 0 42px;
    border: 1.5px solid var(--qrc-line);
    border-radius: 13px;
    font: inherit;
    font-size: 15px;
    color: var(--qrc-text);
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    -webkit-appearance: none;
}

.qrc-input-icon-wrap select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    cursor: pointer;
}

.qrc-input-icon-wrap input:focus,
.qrc-input-icon-wrap select:focus {
    border-color: var(--qrc-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

/* 아이콘 없는 일반 인풋 (Wi-Fi 필드) */
.qrc-plain-input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--qrc-line);
    border-radius: 13px;
    font: inherit;
    font-size: 15px;
    color: var(--qrc-text);
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.qrc-plain-input:focus {
    border-color: var(--qrc-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

/* 텍스트 카운터 */
.qrc-counter {
    font-size: 12px;
    font-weight: 700;
    color: var(--qrc-muted);
    margin-left: auto;
}

.qrc-dyn-field textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: 1.5px solid var(--qrc-line);
    border-radius: 13px;
    font: inherit;
    font-size: 15px;
    color: var(--qrc-text);
    background: #fff;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    line-height: 1.6;
}

.qrc-dyn-field textarea:focus {
    border-color: var(--qrc-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

/* 도움말 */
.qrc-help {
    margin: 6px 0 0;
    color: var(--qrc-muted);
    font-size: 12px;
    line-height: 1.5;
}

.qrc-help--tip {
    color: #0284c7;
}

/* ── Wi-Fi SSID 안내 ─────────────────────────────────────── */
.qrc-wifi-ssid-em {
    color: #6366f1;
    font-weight: 700;
}

.qrc-wifi-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 4px 11px 4px 8px;
    border: 1.5px solid #c4b5fd;
    border-radius: 999px;
    background: #ede9fe;
    color: #5b21b6;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.qrc-wifi-info-btn:hover {
    background: #ddd6fe;
    border-color: #a78bfa;
}

.qrc-wifi-info-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.qrc-wifi-info-panel.is-open { max-height: 1200px; }

.qrc-wifi-info-img {
    display: block;
    width: 100%;
    border-radius: 10px;
    margin-top: 10px;
}

.qrc-wifi-info-close {
    display: block;
    margin: 8px auto 6px;
    padding: 5px 22px;
    border: 1.5px solid var(--qrc-line);
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--qrc-muted);
    cursor: pointer;
    transition: background 0.15s;
}

.qrc-wifi-info-close:hover { background: var(--qrc-soft); }

/* ── PDF 업로드 영역 ─────────────────────────────────────── */
.qrc-pdf-login-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    font-size: 14px;
    color: #9a3412;
    margin-bottom: 12px;
}

.qrc-pdf-login-notice a {
    color: var(--qrc-primary);
    font-weight: 700;
}

.qrc-pdf-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    border: 2px dashed var(--qrc-line);
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
    background: var(--qrc-bg);
    margin-bottom: 10px;
}

.qrc-pdf-drop:hover,
.qrc-pdf-drop.is-drag-over {
    border-color: var(--qrc-primary);
    background: #eff6ff;
}

.qrc-pdf-drop.is-selected {
    border-color: #10b981;
    background: #ecfdf5;
}

.qrc-pdf-drop input[type="file"] {
    display: none;
}

.qrc-pdf-drop strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--qrc-text);
}

.qrc-pdf-drop span {
    font-size: 12px;
    color: var(--qrc-muted);
}

.qrc-pdf-tip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    font-size: 12px;
    color: #0c4a6e;
    line-height: 1.5;
}

/* ── 색상 설정 ────────────────────────────────────────────── */
.qrc-color-section {
    margin-top: 16px;
    margin-bottom: 4px;
}

.qrc-color-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.qrc-color-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--qrc-muted);
    margin-bottom: 6px;
}

.qrc-color-pair {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1.5px solid var(--qrc-line);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.15s;
}

.qrc-color-pair:focus-within {
    border-color: var(--qrc-primary);
}

.qrc-color-pair input[type="color"] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    background: none;
}

.qrc-hex-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: var(--qrc-text);
    letter-spacing: 0.04em;
    background: transparent;
}

/* ── 버튼 행 ──────────────────────────────────────────────── */
.qrc-action-row {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-bottom: 24px;
}

.qrc-btn-generate {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}

.qrc-btn-generate:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); }
.qrc-btn-generate:active              { transform: translateY(0); }
.qrc-btn-generate:disabled            { opacity: 0.55; cursor: not-allowed; }

.qrc-btn-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 52px;
    padding: 0 20px;
    border: 1.5px solid var(--qrc-line);
    border-radius: 14px;
    background: #fff;
    color: var(--qrc-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.qrc-btn-reset:hover {
    background: var(--qrc-soft);
    color: var(--qrc-text);
    border-color: #94a3b8;
}

/* 메시지 */
.qrc-create-message {
    min-height: 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--qrc-muted);
    padding: 0 0 2px;
}

.qrc-create-message.is-error   { color: #dc2626; }
.qrc-create-message.is-success { color: #15803d; }

/* ── 미리보기 컬럼 ────────────────────────────────────────── */
.qrc-preview-col {
    position: sticky;
    top: 24px;
}

.qrc-result-card {
    background: #fff;
    border: 1px solid var(--qrc-line);
    border-radius: 22px;
    min-height: 460px;
    display: grid;
    place-items: center;
    padding: 28px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.qrc-result-empty {
    display: grid;
    gap: 10px;
    place-items: center;
    color: var(--qrc-muted);
    text-align: center;
}

.qrc-result-empty[hidden] { display: none; }

.qrc-result-empty strong {
    font-size: 20px;
    color: var(--qrc-text);
    letter-spacing: -0.03em;
}

.qrc-result-preview {
    width: 100%;
    display: grid;
    gap: 16px;
    justify-items: center;
}

.qrc-result-preview[hidden] { display: none; }

.qrc-result-preview img {
    max-width: min(100%, 380px);
    height: auto;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--qrc-line);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    display: block;
}

.qrc-size-label {
    margin: 0;
    font-size: 12px;
    color: var(--qrc-muted);
    font-weight: 600;
}

/* ── 결과 액션 버튼 ────────────────────────────────────────── */
.qrc-result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.qrc-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
    border: none;
    background: var(--qrc-text);
    color: #fff;
}

.qrc-act-btn:hover { opacity: 0.85; transform: translateY(-1px); }

.qrc-act-btn--primary { background: var(--qrc-primary); }

.qrc-act-btn--share   { background: #059669; }

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .qrc-create-layout {
        grid-template-columns: 1fr;
    }
    .qrc-preview-col {
        position: static;
    }
    .qrc-result-card {
        min-height: 300px;
    }
}

@media (max-width: 640px) {
    .qrc-create { padding: 36px 0 64px; }

    .qrc-settings-head { padding: 14px 18px; }
    .qrc-type-section,
    .qrc-settings-card form { padding-left: 16px; padding-right: 16px; }

    .qrc-type-card { padding: 14px 8px 12px; }
    .qrc-type-icon { width: 38px; height: 38px; }
    .qrc-type-icon svg { width: 18px; height: 18px; }
    .qrc-type-card strong { font-size: 13px; }
    .qrc-type-card span { font-size: 11px; }

    .qrc-color-row { grid-template-columns: 1fr; }
    .qrc-action-row { flex-direction: column; }
    .qrc-btn-reset { width: 100%; }
}