/* naonax\static\css\remote_code\remote_code.css */

:root {
    --rc-bg: #f6f8fb;
    --rc-card: #ffffff;
    --rc-text: #172033;
    --rc-sub: #637084;
    --rc-line: #dfe8f5;
    --rc-point: #3f6fc8;
    --rc-point-soft: #eef5ff;
    --rc-green: #188658;
    --rc-green-soft: #e9f8f1;
    --rc-warn: #b66a00;
    --rc-warn-soft: #fff5e6;
    --rc-shadow: 0 16px 34px rgba(20, 45, 90, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f6fb 100%);
    color: var(--rc-text);
    font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.rc-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid #e9eff8;
    backdrop-filter: blur(14px);
}

.rc-header-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rc-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.rc-logo {
    height: 34px;
    width: auto;
}

.rc-logo-text {
    display: none;
    font-size: 22px;
    font-weight: 800;
}

.rc-top-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rc-top-link {
    padding: 8px 10px;
    border-radius: 999px;
    color: var(--rc-sub);
    font-size: 14px;
    font-weight: 700;
}

.rc-top-link.active,
.rc-top-link:hover {
    background: var(--rc-point-soft);
    color: var(--rc-point);
}

.rc-main {
    max-width: 980px;
    margin: 0 auto;
    padding: 22px 16px 64px;
}

.rc-hero-inner,
.rc-panel {
    background: var(--rc-card);
    border: 1px solid #e5edf8;
    border-radius: 24px;
    box-shadow: var(--rc-shadow);
}

.rc-hero-inner {
    overflow: hidden;
    position: relative;
    padding: 30px 24px;
    background: linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
}


/* =========================================================
   ✅ REMOTON / 리모톤 브랜드 표시
   ========================================================= */
.rc-brand-line {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 13px;
    border: 1px solid rgba(63, 111, 200, 0.13);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 18px rgba(30, 65, 120, 0.05);
}

.rc-brand-mark {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: #eef5ff;
    color: #315fae;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.09em;
}

.rc-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rc-brand-text strong {
    color: #172033;
    font-size: 17px;
    line-height: 1.2;
}

.rc-brand-text span {
    color: var(--rc-sub);
    font-size: 12px;
    font-weight: 800;
}

.rc-eyebrow {
    margin: 0 0 8px;
    color: var(--rc-point);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.rc-hero h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.22;
}

.rc-hero-desc {
    max-width: 720px;
    margin: 12px 0 0;
    color: var(--rc-sub);
    line-height: 1.75;
}

.rc-hero-points {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.rc-hero-point {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(63, 111, 200, 0.12);
    color: #45628e;
    font-size: 13px;
    font-weight: 800;
}

.rc-panel {
    margin-top: 20px;
    padding: 22px 18px;
}

.rc-panel-head h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.35;
}

.rc-panel-head p {
    margin: 8px 0 0;
    color: var(--rc-sub);
    line-height: 1.7;
    font-size: 14px;
}

.rc-search-form {
    margin-top: 16px;
}

.rc-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.rc-form-item.col-2 {
    grid-column: span 2;
}

/* =========================================================
   ✅ 2026-05-11 사용자 화면 브랜드 선택 제거 후 입력영역 전체폭 처리
   ========================================================= */
.rc-form-item.col-3 {
    grid-column: span 3;
}

.rc-summary-grid-no-brand {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rc-form-item label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 900;
}

.rc-input,
.rc-select {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    border: 1px solid #cbd8ea;
    border-radius: 16px;
    background: #ffffff;
    outline: none;
}

.rc-input:focus,
.rc-select:focus {
    border-color: var(--rc-point);
    box-shadow: 0 0 0 4px rgba(63, 111, 200, 0.12);
}

.rc-input-help {
    margin-top: 10px;
    color: var(--rc-sub);
    font-size: 13px;
    line-height: 1.65;
}

.rc-btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.rc-btn {
    min-width: 140px;
    height: 46px;
    border: 0;
    border-radius: 14px;
    padding: 0 18px;
    font-weight: 900;
    cursor: pointer;
}

.rc-btn.primary {
    background: linear-gradient(180deg, #4f7bd3 0%, #3f6fc8 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(63, 111, 200, 0.18);
}

.rc-btn.line {
    background: #ffffff;
    border: 1px solid #cbd8ea;
    color: #43536c;
}

.rc-result-card {
    border: 1px solid #e4edf8;
    border-radius: 22px;
    background: #ffffff;
    padding: 20px 16px;
}

.rc-result-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.rc-result-label {
    color: var(--rc-sub);
    font-size: 13px;
    font-weight: 900;
}

.rc-result-top h3 {
    margin: 6px 0 0;
    font-size: 26px;
}

.rc-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--rc-point-soft);
    color: var(--rc-point);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.rc-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.rc-summary-box {
    border: 1px solid #edf2f8;
    border-radius: 16px;
    background: #fafcff;
    padding: 13px 12px;
}

.rc-summary-box span {
    display: block;
    color: var(--rc-sub);
    font-size: 12px;
    font-weight: 900;
}

.rc-summary-box strong {
    display: block;
    margin-top: 8px;
    font-size: 15px;
}

.rc-notice {
    margin-top: 16px;
    border: 1px solid #e6eef8;
    border-radius: 16px;
    background: #f8fbff;
    padding: 14px 13px;
    color: #33445d;
    line-height: 1.75;
    font-size: 14px;
    font-weight: 700;
}

.rc-code-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.rc-code-card {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    border: 1px solid #e4edf8;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px 14px;
}

.rc-rank {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf4ff;
    color: var(--rc-point);
    font-weight: 900;
}

.rc-code-no {
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.03em;
}

.rc-code-meta,
.rc-code-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.rc-code-meta span {
    color: #53637a;
    font-size: 13px;
    font-weight: 800;
}

.rc-mini-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f1f5fb;
    color: #53637a;
    font-size: 12px;
    font-weight: 900;
}

.rc-mini-badge.good {
    background: var(--rc-green-soft);
    color: var(--rc-green);
}

.rc-mini-badge.warn {
    background: var(--rc-warn-soft);
    color: var(--rc-warn);
}

.rc-similar-wrap {
    margin-top: 18px;
    border-top: 1px dashed var(--rc-line);
    padding-top: 16px;
}

.rc-similar-wrap h3 {
    margin: 0;
    font-size: 18px;
}

.rc-similar-wrap p {
    margin: 8px 0 0;
    color: var(--rc-sub);
    font-size: 14px;
    line-height: 1.65;
}

.rc-chip-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.rc-similar-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid #cbd8ea;
    border-radius: 999px;
    background: #ffffff;
    padding: 9px 13px;
    font-size: 14px;
    font-weight: 900;
}

.rc-similar-chip span {
    color: var(--rc-sub);
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 760px) {
    .rc-brand-line {
        width: 100%;
        align-items: flex-start;
    }

    .rc-brand-mark {
        min-height: 32px;
        font-size: 13px;
    }

    .rc-header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .rc-form-grid,
    .rc-summary-grid {
        grid-template-columns: 1fr;
    }

    .rc-form-item.col-2,
    .rc-form-item.col-3 {
        grid-column: span 1;
    }

    .rc-result-top {
        flex-direction: column;
    }

    .rc-btn {
        width: 100%;
    }
}


/* =========================================================
   ✅ 사용자 이미지 검색
   ========================================================= */
.rc-input-with-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.rc-btn.image {
    background: #eef4ff;
    border: 1px solid #c8d8f2;
    color: #1e4f9f;
    font-weight: 800;
}

.rc-btn.image:hover {
    background: #e5efff;
}

.rc-btn.small {
    min-height: 42px;
    padding: 0 14px;
    font-size: 14px;
}

.rc-btn.wide {
    width: 100%;
}

.rc-modal-open {
    overflow: hidden;
}

.rc-image-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 18px;
}

.rc-image-modal.is-open {
    display: flex;
}

.rc-image-modal-box {
    width: min(1120px, 100%);
    max-height: 92vh;
    overflow: hidden;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
}

.rc-image-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 18px;
    border-bottom: 1px solid #e7eef7;
}

.rc-image-modal-head h2 {
    margin: 0;
    font-size: 28px;
    color: #10233b;
}

.rc-image-modal-head p {
    margin: 10px 0 0;
    color: #64748b;
    line-height: 1.6;
}

.rc-icon-btn {
    border: 1px solid #c9d7eb;
    background: #ffffff;
    color: #425a78;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.rc-image-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
    gap: 18px;
    padding: 22px 24px 24px;
    min-height: 0;
    overflow: hidden;
}

.rc-image-drop {
    min-height: 620px;
    border: 1px dashed #c8d7eb;
    border-radius: 20px;
    background: linear-gradient(180deg, #f9fbff 0%, #f4f8fd 100%);
    position: relative;
    overflow: hidden;
}

.rc-image-drop.is-dragover {
    border-color: #4f7fd3;
    background: #eef4ff;
}

.rc-image-empty,
.rc-image-preview-wrap {
    position: absolute;
    inset: 0;
}

.rc-image-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding: 24px;
}

.rc-image-empty strong {
    font-size: 20px;
    color: #10233b;
}

.rc-image-empty span {
    max-width: 460px;
    color: #64748b;
    line-height: 1.7;
}

.rc-image-preview-wrap {
    cursor: grab;
    overflow: hidden;
}

.rc-image-preview-wrap img {
    max-width: none;
    max-height: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    user-select: none;
}

.rc-image-preview-wrap img.is-dragging {
    cursor: grabbing;
}

.rc-image-side {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rc-image-toolbar {
    display: flex;
    gap: 8px;
}

.rc-image-guide,
.rc-image-result {
    border: 1px solid #dfebf7;
    border-radius: 18px;
    background: #f8fbff;
    padding: 14px;
}

.rc-image-guide strong,
.rc-image-result h3 {
    display: block;
    margin: 0;
    color: #10233b;
    font-size: 17px;
}

.rc-image-guide p {
    margin: 8px 0 0;
    color: #64748b;
    line-height: 1.6;
    font-size: 14px;
}

.rc-image-result {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.rc-image-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.rc-image-candidate-wrap {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 4px;
}

.rc-image-candidate-btn {
    width: 100%;
    text-align: left;
    border: 1px solid #dbe7f5;
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.rc-image-candidate-btn:hover {
    border-color: #89a9dd;
    transform: translateY(-1px);
}

.rc-image-candidate-btn strong {
    display: block;
    color: #10233b;
    font-size: 24px;
    font-weight: 900;
}

.rc-image-candidate-btn span {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 13px;
}

.rc-empty {
    color: #64748b;
    line-height: 1.7;
}

@media (max-width: 980px) {
    .rc-image-modal-grid {
        grid-template-columns: 1fr;
        overflow: auto;
    }

    .rc-image-drop {
        min-height: 360px;
    }
}

@media (max-width: 720px) {
    .rc-input-with-btn {
        grid-template-columns: 1fr;
    }

    .rc-image-modal {
        padding: 10px;
    }

    .rc-image-modal-box {
        max-height: 96vh;
        border-radius: 18px;
    }

    .rc-image-modal-head {
        padding: 18px 18px 14px;
    }

    .rc-image-modal-head h2 {
        font-size: 24px;
    }

    .rc-image-modal-grid {
        padding: 16px 18px 18px;
    }

    .rc-image-result-head {
        flex-direction: column;
        align-items: stretch;
    }

    .rc-image-toolbar {
        flex-wrap: wrap;
    }
}


/* =========================================================
   ✅ 사용자 작동 결과 피드백
   - 고객이 정상/일부/작동안됨을 입력하면 관리자 누적 현황에 반영
   ========================================================= */
.rc-feedback-box {
    margin-top: 16px;
    border-top: 1px solid #edf2f8;
    padding-top: 14px;
}

.rc-feedback-box p {
    margin: 0 0 10px;
    color: #50627c;
    font-size: 14px;
    line-height: 1.55;
}

.rc-feedback-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rc-feedback-btn {
    border: 1px solid #d7e3f3;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    min-height: 38px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.rc-feedback-btn.good {
    border-color: #bfe8d0;
    background: #f1fff7;
    color: #067647;
}

.rc-feedback-btn.partial {
    border-color: #ffe1aa;
    background: #fffaf0;
    color: #9a5b00;
}

.rc-feedback-btn.fail {
    border-color: #f7c6cf;
    background: #fff5f7;
    color: #b4233c;
}

.rc-feedback-btn:hover {
    transform: translateY(-1px);
}

.rc-feedback-btn:disabled {
    cursor: default;
    opacity: 0.62;
    transform: none;
}

.rc-feedback-btn.is-selected {
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(53, 116, 212, 0.12);
}

.rc-feedback-msg {
    min-height: 20px;
    margin-top: 8px;
    color: #3574d4;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 560px) {
    .rc-feedback-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .rc-feedback-btn {
        width: 100%;
    }
}


/* =========================================================
   ✅ 비슷한 모델명 설정번호 표시
   - 유사도 대신 설정번호를 보여주기 위한 표시 보정
   ========================================================= */
.rc-similar-chip strong {
    display: block;
    color: #10233b;
    font-size: 15px;
    line-height: 1.25;
}

.rc-similar-chip span {
    display: block;
    margin-top: 4px;
    color: #54657d;
    font-size: 12px;
    line-height: 1.35;
}



.rc-feedback-box {
    background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
    border: 1px solid #f3e6bd;
    border-radius: 18px;
    padding: 14px 14px 12px;
}

.rc-feedback-headline {
    margin: 0 0 10px;
    color: #9a5b00 !important;
    font-size: 15px !important;
    font-weight: 800;
    line-height: 1.5;
}

.rc-feedback-choice-wrap {
    margin-bottom: 12px;
}

.rc-feedback-choice-title {
    margin-bottom: 8px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.rc-feedback-radio-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rc-feedback-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.rc-feedback-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rc-feedback-radio span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #cfe0f8;
    background: #f7fbff;
    color: #29528a;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(41, 82, 138, 0.05);
}

.rc-feedback-radio input:checked + span {
    border-color: #2f6fd6;
    background: #2f6fd6;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(47, 111, 214, 0.18);
}

.rc-feedback-radio input:disabled + span {
    opacity: 0.65;
    cursor: default;
}

.rc-feedback-buttons {
    gap: 10px;
}

.rc-feedback-btn {
    min-height: 42px;
    padding: 0 16px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.rc-feedback-btn.is-selected {
    outline: 2px solid rgba(47, 111, 214, 0.18);
    transform: translateY(-1px);
}

.rc-feedback-msg {
    margin-top: 10px;
    color: #2f6fd6;
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .rc-feedback-box {
        padding: 14px 12px 12px;
    }

    .rc-feedback-radio-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rc-feedback-radio span,
    .rc-feedback-btn {
        width: 100%;
    }

    .rc-feedback-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
}


/* =========================================================
   ✅ 사용자 사진찾기 전용 화면
   - 모바일에서 팝업 대신 전용 화면으로 이미지 확인/확대/후보 선택
   ========================================================= */
.rc-image-page-body{min-height:100vh;background:#eef3f9;color:#10233b}.rc-image-page-header{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid #dbe6f4;background:rgba(255,255,255,.94);backdrop-filter:blur(10px)}.rc-image-back{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #ccd9ec;border-radius:50%;background:#fff;color:#17345f;font-size:34px;line-height:1;text-decoration:none}.rc-image-page-header h1{margin:0;font-size:21px;line-height:1.25}.rc-image-page-header p{margin:4px 0 0;color:#64748b;font-size:13px;line-height:1.45}.rc-image-page-main{max-width:720px;margin:0 auto;padding:14px 12px 34px}.rc-image-page-card{margin-bottom:12px;border:1px solid #dce7f5;border-radius:20px;background:#fff;padding:14px;box-shadow:0 8px 24px rgba(15,23,42,.06)}.rc-image-file-row{display:grid;grid-template-columns:1fr 96px;gap:8px;margin-bottom:12px}.rc-mobile-preview-box{position:relative;height:min(54vh,460px);min-height:300px;overflow:hidden;border:1px dashed #c8d7eb;border-radius:18px;background:#f8fbff;touch-action:none}.rc-mobile-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px;text-align:center}.rc-mobile-empty strong{color:#10233b;font-size:18px}.rc-mobile-empty span{color:#64748b;font-size:13px;line-height:1.6}.rc-mobile-preview-box img{position:absolute;top:50%;left:50%;max-width:96%;max-height:96%;transform:translate(-50%,-50%) scale(1);transform-origin:center center;user-select:none;-webkit-user-drag:none}.rc-mobile-tool-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}.rc-image-page-card h2{margin:0;font-size:20px}.rc-image-page-help{margin:6px 0 12px;color:#64748b;font-size:13px;line-height:1.55}.rc-mobile-candidate-list{display:grid;gap:8px}.rc-mobile-candidate{width:100%;border:1px solid #d6e2f3;border-radius:16px;background:#fff;padding:14px;text-align:left;cursor:pointer}.rc-mobile-candidate strong{display:block;color:#10233b;font-size:20px;font-weight:900;word-break:break-all}.rc-mobile-candidate span{display:block;margin-top:5px;color:#3f6fb7;font-size:13px;font-weight:800}.rc-mobile-manual-box{margin-top:14px;border-top:1px solid #edf2f8;padding-top:14px}.rc-mobile-manual-box label{display:block;margin-bottom:8px;color:#10233b;font-size:14px;font-weight:900}.rc-mobile-manual-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.rc-image-home-link{margin-top:10px}@media(max-width:520px){.rc-image-page-main{padding-left:8px;padding-right:8px}.rc-image-page-card{border-radius:16px;padding:12px}.rc-image-file-row,.rc-mobile-manual-row{grid-template-columns:1fr}.rc-mobile-preview-box{height:50vh;min-height:280px}}


/* =========================================================
   ✅ 사진찾기 전용 화면 오류 안내 / 모바일 안정화
   ========================================================= */
.rc-empty-error {
    border-color: #f3c6cf !important;
    background: #fff7f8 !important;
    color: #b42342 !important;
    font-weight: 800;
}

.rc-btn[disabled] {
    opacity: 0.65;
    cursor: wait;
}

.rc-mobile-preview-box {
    touch-action: none;
    overscroll-behavior: contain;
}

.rc-mobile-preview-box img {
    will-change: transform;
}

@media (max-width: 720px) {
    .rc-mobile-preview-box {
        height: min(48vh, 380px);
        min-height: 280px;
    }

    .rc-image-page-card {
        padding: 14px;
    }

    .rc-mobile-tool-row .rc-btn,
    .rc-image-file-row .rc-btn {
        min-width: 0;
    }
}


/* =========================================================
   ✅ 사진으로 찾기 버튼 글씨 중앙 정렬
   - 사용자 설정번호 찾기 화면의 사진 버튼 텍스트가 세로/가로 중앙에 오도록 보정
   ========================================================= */
.rc-input-with-btn .rc-btn.image,
.rc-btn.image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}


/* =========================================================
   ✅ 고객 피드백 메모 입력
   - 정상/일부/작동안됨 선택 후 x_remote_feedback에 저장할 메모 입력 영역
   ========================================================= */
.rc-feedback-memo-wrap {
    margin-top: 12px;
    border-top: 1px dashed #ead7a9;
    padding-top: 12px;
}

.rc-feedback-memo-wrap[hidden] {
    display: none !important;
}

.rc-feedback-memo-label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
}

.rc-feedback-memo {
    width: 100%;
    min-height: 86px;
    resize: vertical;
    border: 1px solid #cfdced;
    border-radius: 16px;
    background: #ffffff;
    padding: 12px 14px;
    color: #10233b;
    font-size: 15px;
    line-height: 1.55;
    box-sizing: border-box;
    outline: none;
}

.rc-feedback-memo:focus {
    border-color: #6f9de8;
    box-shadow: 0 0 0 4px rgba(111, 157, 232, 0.12);
}

.rc-feedback-save-btn {
    margin-top: 10px;
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    background: #2f6fd6;
    color: #ffffff;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(47, 111, 214, 0.18);
}

.rc-feedback-save-btn:disabled {
    opacity: 0.65;
    cursor: default;
    box-shadow: none;
}

@media (max-width: 768px) {
    .rc-feedback-save-btn {
        width: 100%;
    }
}


/* =========================================================
   ✅ 사용자 피드백 이미지 첨부
   - 이미지는 화면에 보여주지 않고 작은 상태 문구만 표시
   ========================================================= */
.rc-feedback-image-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 10px;
    min-height: 22px;
}

.rc-feedback-image-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid #d7e3f3;
    border-radius: 999px;
    background: #ffffff;
    color: #516179;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.rc-feedback-image-status {
    display: inline-flex;
    align-items: center;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}


/* =========================================================
   ✅ 사용자 피드백 사진 첨부 버튼 크기 보정
   - 피드백 저장 버튼과 비슷한 크기로 맞춤
   - 모바일에서도 누르기 쉽도록 높이/패딩 보정
   ========================================================= */
.rc-feedback-file-btn,
.rc-feedback-image-btn,
.rc-feedback-attach-btn,
label[for^="feedbackImage"],
label[for*="FeedbackImage"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #cfe0f8;
    background: #f7fbff;
    color: #29528a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
}

.rc-feedback-file-btn:hover,
.rc-feedback-image-btn:hover,
.rc-feedback-attach-btn:hover,
label[for^="feedbackImage"]:hover,
label[for*="FeedbackImage"]:hover {
    background: #edf4ff;
    border-color: #a9c3ec;
}

.rc-feedback-file-name,
.rc-feedback-image-name,
.rc-feedback-attach-name,
.rc-feedback-image-status {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    margin-left: 8px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .rc-feedback-file-btn,
    .rc-feedback-image-btn,
    .rc-feedback-attach-btn,
    label[for^="feedbackImage"],
    label[for*="FeedbackImage"] {
        width: 100%;
        min-height: 44px;
    }

    .rc-feedback-file-name,
    .rc-feedback-image-name,
    .rc-feedback-attach-name,
    .rc-feedback-image-status {
        width: 100%;
        margin-left: 0;
        margin-top: 6px;
        min-height: auto;
        font-size: 12px;
    }
}


/* =========================================================
   ✅ 사용설명서 / 나오나 유튜브 안내 영상 영역
   - 게시판 문의 전 고객이 먼저 확인할 수 있는 안내 영역
   ========================================================= */
.rc-guide-video-wrap {
    margin: 18px 0 18px;
    padding: 18px;
    border: 1px solid #dbe8f6;
    border-radius: 20px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.rc-guide-video-head span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef5ff;
    color: #2f6fd6;
    font-size: 12px;
    font-weight: 900;
}

.rc-guide-video-head strong {
    display: block;
    margin-top: 10px;
    color: #17345f;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.45;
}

.rc-guide-video-head p {
    margin: 7px 0 0;
    color: #5f7086;
    font-size: 14px;
    line-height: 1.65;
}

.rc-guide-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.rc-guide-video-card {
    display: block;
    overflow: hidden;
    border: 1px solid #dbe8f6;
    border-radius: 16px;
    background: #ffffff;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.rc-guide-video-card:hover {
    transform: translateY(-2px);
    border-color: #9dbbe8;
    box-shadow: 0 10px 20px rgba(47, 111, 214, 0.11);
}

.rc-video-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #edf4ff;
}

.rc-video-thumb::after {
    content: '▶';
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(47, 111, 214, 0.92);
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    transform: translate(-50%, -50%);
}

.rc-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rc-video-title {
    display: block;
    padding: 10px 11px 0;
    color: #17345f;
    font-size: 14px;
    font-weight: 900;
}

.rc-video-link {
    display: block;
    padding: 5px 11px 11px;
    color: #2f6fd6;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 768px) {
    .rc-guide-video-wrap {
        padding: 16px 14px;
        margin: 16px 0;
    }

    .rc-guide-video-grid {
        grid-template-columns: 1fr;
    }

    .rc-guide-video-card {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        align-items: center;
    }

    .rc-video-thumb {
        height: 76px;
        aspect-ratio: auto;
    }

    .rc-video-thumb::after {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .rc-video-title {
        padding: 0 12px 0;
    }

    .rc-video-link {
        padding: 5px 12px 0;
    }
}


/* =========================================================
   ✅ 설정번호 찾기 결과 게시판 문의 유도 영역
   - 설정번호 후보 아래, 유사 모델명 위에 표시
   ========================================================= */
.rc-board-inquiry-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 18px;
    padding: 18px 18px;
    border: 1px solid #f7c6cf;
    border-radius: 20px;
    background: linear-gradient(180deg, #fff5f7 0%, #fffafb 100%);
    box-shadow: 0 10px 22px rgba(180, 35, 60, 0.06);
}

.rc-board-inquiry-copy {
    min-width: 0;
}

.rc-board-inquiry-copy strong {
    display: block;
    color: #8f1d33;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.45;
}

.rc-board-inquiry-copy p {
    margin: 7px 0 0;
    color: #7a4f59;
    font-size: 14px;
    line-height: 1.6;
}

.rc-board-inquiry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid #f0a8b5;
    background: linear-gradient(180deg, #c83b55 0%, #b4233c 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 10px 18px rgba(180, 35, 60, 0.16);
}

.rc-board-inquiry-btn:hover {
    background: linear-gradient(180deg, #b4233c 0%, #9f1f36 100%);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .rc-board-inquiry-wrap {
        align-items: stretch;
        flex-direction: column;
        padding: 16px 14px;
        margin: 16px 0;
    }

    .rc-board-inquiry-btn {
        width: 100%;
        min-height: 48px;
    }
}

/* =========================================================
   ✅ 다른 설정번호 제보 영역
   - 화면 후보와 다른 설정번호를 고객이 알고 있을 때 관리자 확인 대상으로 저장
   ========================================================= */
.rc-other-code-box {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid #d8eadf;
    border-radius: 20px;
    background: linear-gradient(180deg, #f7fff9 0%, #ffffff 100%);
}

.rc-other-code-head span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-bottom: 8px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e9f8f1;
    color: #188658;
    font-size: 12px;
    font-weight: 900;
}

.rc-other-code-head strong {
    display: block;
    color: #17345f;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.45;
}

.rc-other-code-head p {
    margin: 7px 0 0;
    color: #5f7086;
    font-size: 14px;
    line-height: 1.65;
}

.rc-other-code-form {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.rc-other-code-field label,
.rc-other-code-memo-wrap label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 900;
}

.rc-other-code-input,
.rc-other-code-status,
.rc-other-code-memo {
    width: 100%;
    border: 1px solid #cfdced;
    border-radius: 16px;
    background: #ffffff;
    color: #10233b;
    outline: none;
    box-sizing: border-box;
}

.rc-other-code-input,
.rc-other-code-status {
    height: 46px;
    padding: 0 13px;
}

.rc-other-code-memo {
    min-height: 88px;
    resize: vertical;
    padding: 12px 14px;
    line-height: 1.55;
}

.rc-other-code-input:focus,
.rc-other-code-status:focus,
.rc-other-code-memo:focus {
    border-color: #6f9de8;
    box-shadow: 0 0 0 4px rgba(111, 157, 232, 0.12);
}

.rc-other-code-radio-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rc-other-code-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.rc-other-code-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rc-other-code-radio span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid #cfe0f8;
    border-radius: 999px;
    background: #ffffff;
    color: #29528a;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.rc-other-code-radio input:checked + span {
    border-color: #188658;
    background: #188658;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(24, 134, 88, 0.16);
}

.rc-other-code-radio input:disabled + span {
    opacity: 0.65;
    cursor: default;
}

.rc-other-code-memo-wrap {
    margin-top: 12px;
}

.rc-other-code-save-btn {
    min-height: 44px;
    margin-top: 10px;
    border: 0;
    border-radius: 14px;
    background: #188658;
    color: #ffffff;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(24, 134, 88, 0.16);
}

.rc-other-code-save-btn:disabled {
    opacity: 0.65;
    cursor: default;
    box-shadow: none;
}

.rc-other-code-msg {
    min-height: 20px;
    margin-top: 10px;
    color: #188658;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}

@media (max-width: 768px) {
    .rc-other-code-box {
        padding: 16px 14px;
    }

    .rc-other-code-form {
        grid-template-columns: 1fr;
    }

    .rc-other-code-radio-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rc-other-code-radio span,
    .rc-other-code-save-btn {
        width: 100%;
    }
}



/* =========================================================
   ✅ 사진 첨부 버튼 텍스트 중앙 정렬 최종 보정
   - label 안의 텍스트를 span으로 감싸고, 버튼 내부 중앙에 고정
   - 기존 line-height/hidden input 영향으로 텍스트가 위로 붙어 보이는 현상 보정
   ========================================================= */
.rc-feedback-image-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rc-feedback-image-btn {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 88px;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.rc-feedback-image-btn .rc-feedback-image-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1 !important;
    position: relative;
    top: 1px;
    white-space: nowrap;
}

.rc-feedback-image-btn input[hidden] {
    display: none !important;
}


/* =========================================================
   ✅ 설정번호 미등록 표시 / 제보 유도
   - 설정번호가 비어 있는 후보는 '-' 대신 '미등록'으로 보여준다.
   - 고객이 알고 있는 설정번호를 제보할 수 있도록 안내 문구를 강조한다.
   ========================================================= */
.rc-code-no-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff0f4;
    color: #b4233c;
    font-size: 18px !important;
    letter-spacing: 0;
}

.rc-mini-badge.danger {
    background: #fff0f4;
    color: #b4233c;
}

.rc-unregistered-note {
    margin-top: 10px;
    border: 1px dashed #f1bac6;
    border-radius: 14px;
    background: #fff8fa;
    padding: 10px 12px;
    color: #7a4f59;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.rc-unregistered-note strong,
.rc-unregistered-notice strong {
    color: #b4233c;
}

.rc-unregistered-notice {
    border-color: #f1bac6;
    background: #fff8fa;
    color: #7a4f59;
}


/* =========================================================
   ✅ 설정번호 찾기 상단 액션 버튼
   - 초기화 옆에 설정번호 제보 / 게시판 문의 버튼을 배치
   - 사진으로 찾기 버튼처럼 전용 화면으로 이동한다.
   ========================================================= */
.rc-main-action-row .rc-btn,
.rc-suggestion-button-row .rc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

.rc-btn.guide {
    border-color: #c8d8f2;
    background: #eef5ff;
    color: #1e4f9f;
}

.rc-btn.guide:hover {
    background: #e4efff;
    border-color: #9dbbe8;
}

.rc-btn.suggestion {
    border-color: #bfe8d0;
    background: #f1fff7;
    color: #08764b;
}

.rc-btn.suggestion:hover {
    background: #e9f8f1;
    border-color: #8fd9b1;
}

.rc-btn.board {
    border-color: #f0a8b5;
    background: #fff5f7;
    color: #9f1f36;
}

.rc-btn.board:hover {
    background: #fff0f4;
    border-color: #e58da0;
}

/* =========================================================
   ✅ 설정번호 제보 전용 페이지
   ========================================================= */
.rc-suggestion-main {
    max-width: 900px;
}

.rc-suggestion-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f3fff7 100%);
}

.rc-suggestion-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.8fr);
    gap: 12px;
    margin-top: 16px;
}

.rc-suggestion-box {
    margin-top: 16px;
}

.rc-suggestion-button-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.rc-suggestion-button-row .rc-other-code-save-btn {
    margin-top: 0;
}

.rc-suggestion-image-row {
    margin-top: 10px;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .rc-main-action-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .rc-suggestion-grid {
        grid-template-columns: 1fr;
    }

    .rc-suggestion-button-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .rc-suggestion-button-row .rc-other-code-save-btn,
    .rc-suggestion-button-row .rc-btn {
        width: 100%;
    }
}


/* =========================================================
   ✅ 설정 전 확인 영상 전용 페이지
   ========================================================= */
.rc-guide-main {
    max-width: 940px;
}

.rc-guide-hero {
    background: linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
}

.rc-guide-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.rc-guide-note-list {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.rc-guide-note-list li {
    border: 1px solid #e6eef8;
    border-radius: 14px;
    background: #f8fbff;
    padding: 11px 12px;
    color: #33445d;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.rc-guide-video-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.rc-guide-video-page-grid .rc-guide-video-card {
    border-radius: 18px;
}

@media (max-width: 768px) {
    .rc-main-action-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .rc-guide-action-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .rc-guide-action-row .rc-btn {
        width: 100%;
    }

    .rc-guide-video-page-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   ✅ 설정 전 확인영상 페이지 버튼 글씨 중앙 정렬 보정
   - a 태그형 버튼도 세로/가로 중앙에 오도록 맞춘다.
   ========================================================= */
.rc-guide-action-row .rc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .rc-guide-action-row .rc-btn {
        width: 100%;
        min-height: 48px;
    }
}

/* =========================================================
   ✅ 에어컨 모델명 입력란 강조
   - 모바일에서 가장 먼저 입력해야 하는 영역이 눈에 잘 띄도록 테두리를 두껍게 보정
   - 기본 상태에서도 입력란이 묻히지 않게 하고, 포커스 시 더 강하게 표시
   ========================================================= */
label[for="keywordInput"] {
    color: #0f3470;
    font-size: 15px;
}

#keywordInput {
    border-width: 3px;
    border-color: #82abea;
    background: #ffffff;
    box-shadow: 0 9px 20px rgba(47, 111, 214, 0.08);
    font-weight: 800;
}

#keywordInput::placeholder {
    color: #7c8da7;
    font-weight: 700;
}

#keywordInput:focus {
    border-color: #225fc5;
    box-shadow: 0 0 0 6px rgba(47, 111, 214, 0.18), 0 12px 24px rgba(47, 111, 214, 0.12);
}

@media (max-width: 768px) {
    label[for="keywordInput"] {
        font-size: 16px;
    }

    #keywordInput {
        height: 62px;
        border-width: 4px;
        border-color: #6f9de8;
        border-radius: 18px;
        font-size: 17px;
        font-weight: 900;
    }

    #keywordInput:focus {
        border-color: #225fc5;
        box-shadow: 0 0 0 6px rgba(47, 111, 214, 0.20), 0 14px 26px rgba(47, 111, 214, 0.14);
    }
}


/* =========================================================
   ✅ 설정번호 제보 페이지 실내기 모델명 입력란 강조
   - 설정번호 찾기 화면과 같은 기준으로 실내기 모델명 입력란을 선명하게 표시
   ========================================================= */
.rc-suggestion-model-field label {
    color: #0f3470;
    font-size: 15px;
}

#modelInput {
    border-width: 3px;
    border-color: #82abea;
    background: #ffffff;
    box-shadow: 0 9px 20px rgba(47, 111, 214, 0.08);
    font-weight: 800;
}

#modelInput::placeholder {
    color: #7c8da7;
    font-weight: 700;
}

#modelInput:focus {
    border-color: #225fc5;
    box-shadow: 0 0 0 6px rgba(47, 111, 214, 0.18), 0 12px 24px rgba(47, 111, 214, 0.12);
}

@media (max-width: 768px) {
    .rc-suggestion-model-field label {
        font-size: 16px;
    }

    #modelInput {
        height: 62px;
        border-width: 4px;
        border-color: #6f9de8;
        border-radius: 18px;
        font-size: 17px;
        font-weight: 900;
    }

    #modelInput:focus {
        border-color: #225fc5;
        box-shadow: 0 0 0 6px rgba(47, 111, 214, 0.20), 0 14px 26px rgba(47, 111, 214, 0.14);
    }
}


/* =========================================================
   ✅ 사진으로 모델명 찾기 - 후보 없음 버튼 스타일 보정
   - a 태그에 width/height가 제대로 적용되지 않아 작은 pill 형태로 보이는 문제 보정
   - 버튼 글씨를 가로/세로 중앙에 고정하고 입력 버튼과 같은 높이로 맞춘다.
   ========================================================= */
.rc-image-home-link,
.rc-image-home-link.rc-btn,
.rc-image-home-link.rc-btn.line,
.rc-image-home-link.rc-btn.wide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    margin-top: 10px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    box-sizing: border-box !important;
}

.rc-image-home-link:hover {
    background: #eef4ff;
    border-color: #a9c3ec;
    color: #1e4f9f;
}

@media (max-width: 520px) {
    .rc-image-home-link,
    .rc-image-home-link.rc-btn,
    .rc-image-home-link.rc-btn.line,
    .rc-image-home-link.rc-btn.wide {
        min-height: 48px !important;
        height: 48px !important;
        font-size: 15px;
    }
}


/* =========================================================
   ✅ 관리자 모델 안내 코멘트
   - 설정번호 후보가 없는 모델에 대해 관리자가 등록한 안내문을 표시
   - 기본 안내문과 설정번호 없음 안내문 사이에 들어간다.
   ========================================================= */
.rc-admin-model-comment {
    margin-top: 16px;
    border: 1px solid #cfe0f8;
    border-radius: 16px;
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
    padding: 14px 13px;
    color: #24405f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.75;
}

.rc-admin-model-comment span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-bottom: 8px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef5ff;
    color: #2f6fd6;
    font-size: 12px;
    font-weight: 900;
}

.rc-admin-model-comment p {
    margin: 0;
    color: #24405f;
    word-break: keep-all;
}

@media (max-width: 768px) {
    .rc-admin-model-comment {
        padding: 13px 12px;
        font-size: 13px;
    }
}


/* =========================================================
   ✅ 2026-05-11 설정번호 제보 화면 브랜드 선택 제거 후 모델명 전체폭 처리
   ========================================================= */
.rc-suggestion-model-field.full-width {
    grid-column: 1 / -1;
}


/* =========================================================
   ✅ 2026-05-19 설정번호 후보 보기 하단 안내창
   - PC / 모바일 공통 노출
   - 반투명 백색 배경과 움직이는 화살표로 후보 영역 이동을 안내
   ========================================================= */
.rc-candidate-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.rc-candidate-notice.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rc-candidate-notice-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(460px, 100%);
    padding: 10px;
    border: 1px solid rgba(190, 207, 232, 0.86);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 38px rgba(17, 34, 64, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: auto;
}

.rc-candidate-notice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 30px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #4d7bd4 0%, #376cc9 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 9px 20px rgba(55, 108, 201, 0.22);
}

.rc-candidate-notice-arrow {
    display: inline-flex;
    font-size: 20px;
    line-height: 1;
    animation: rcCandidateArrowMove 0.9s ease-in-out infinite;
}

.rc-candidate-notice-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #c6d6ec;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.76);
    color: #61738d;
    font-size: 31px;
    line-height: 1;
    cursor: pointer;
}

@keyframes rcCandidateArrowMove {
    0%, 100% { transform: translateY(-2px); opacity: 0.82; }
    50% { transform: translateY(4px); opacity: 1; }
}

@media (max-width: 768px) {
    .rc-candidate-notice {
        bottom: 16px;
        padding: 0 12px;
    }

    .rc-candidate-notice-box {
        width: auto;
        max-width: calc(100vw - 24px);
        padding: 8px;
    }

    .rc-candidate-notice-btn {
        min-height: 48px;
        padding: 0 22px;
        font-size: 15px;
    }

    .rc-candidate-notice-close {
        width: 42px;
        height: 42px;
        font-size: 29px;
    }
}

/* =========================================================
   ✅ 설정번호 없음 상단 비슷한 모델명 참고 영역
   ========================================================= */
.rc-similar-reference-wrap {
    margin-top: 16px;
    border: 1px dashed #c8d9f2;
    border-radius: 18px;
    background: #f8fbff;
    padding: 13px 13px 12px;
}

.rc-similar-reference-wrap strong {
    display: block;
    color: #17345f;
    font-size: 14px;
    font-weight: 900;
}

.rc-similar-reference-wrap p {
    margin: 7px 0 0;
    color: #65748a;
    font-size: 12px;
    line-height: 1.55;
}

.rc-similar-reference-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}

.rc-similar-reference-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid #cbdcf4;
    border-radius: 999px;
    background: #ffffff;
    color: #17345f;
    font-size: 12px;
    font-weight: 900;
}

.rc-similar-reference-chip:hover {
    border-color: #8eafe3;
    background: #eef5ff;
    color: #225fc5;
}

/* =========================================================
   ✅ 설정번호 후보 추천 별 표시
   - 작동확인 건수 기준으로 별만 표시한다.
   - 1건 이상 ★ / 3건 이상 ★★ / 5건 이상 ★★★
   - 별이 설정번호 줄의 높이와 위치에 영향을 주지 않도록 absolute로 고정한다.
   ========================================================= */
.rc-code-no {
    position: relative;
    display: inline-block;
}

.rc-recommend-star {
    position: absolute;
    left: 100%;
    top: 2px;
    display: inline-flex;
    align-items: center;
    min-height: 0;
    margin: 0 0 0 7px;
    color: #f59e0b;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

@media (max-width: 768px) {
    .rc-recommend-star {
        top: 1px;
        margin-left: 6px;
        font-size: 14px;
    }
}


/* =========================================================
   ✅ 2026-05-29 수정: 사진찾기 전용 화면 모바일 버튼 배치 보정
   - 사진 촬영/선택, 초기화, 이미지추출 버튼은 사진 아래 한 줄로 표시한다.
   - 축소/확대/맞춤은 기호 버튼으로 줄여 사진 테두리 안쪽 하단에 배치한다.
   ========================================================= */
.rc-image-bottom-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr) minmax(0, 1fr) !important;
    gap: 8px;
    margin: 10px 0 0;
}

.rc-image-bottom-action-row .rc-btn {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 7px;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap;
}

.rc-mobile-tool-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7px;
    z-index: 4;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 !important;
    pointer-events: none;
}

.rc-mobile-tool-overlay .rc-image-tool-btn {
    pointer-events: auto;
}

.rc-image-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(168, 188, 220, 0.82);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #233957;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rc-image-tool-btn:active {
    transform: translateY(1px);
}

.rc-image-tool-btn[disabled] {
    opacity: 0.65;
    cursor: wait;
}

@media (max-width: 520px) {
    .rc-image-bottom-action-row {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.78fr) minmax(0, 1fr) !important;
        gap: 6px;
    }

    .rc-image-bottom-action-row .rc-btn {
        height: 42px;
        padding: 0 5px;
        font-size: 13px;
        border-radius: 12px;
    }

    .rc-mobile-tool-overlay {
        bottom: 6px;
        gap: 8px;
    }

    .rc-image-tool-btn {
        width: 36px;
        height: 36px;
        font-size: 21px;
    }
}

/* =========================================================
   ✅ 2026-05-29 수정: 사진찾기 모델명 추출 진행 표시
   - 모바일에서 추출 처리 중임을 사용자가 바로 알 수 있도록 버튼/후보영역에 동적 표시를 추가한다.
   ========================================================= */
.rc-btn.is-loading {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
    cursor: wait;
}

.rc-btn.is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
    transform: translateX(-100%);
    animation: rcAiButtonShine 1.15s infinite;
}

.rc-btn-loading-text,
.rc-btn-loading-dots {
    position: relative;
    z-index: 1;
}

.rc-btn-loading-dots {
    display: inline-flex;
    gap: 2px;
    margin-left: 1px;
}

.rc-btn-loading-dots i,
.rc-extract-loading-dots i {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    animation: rcAiDotMove 0.9s infinite ease-in-out;
}

.rc-btn-loading-dots i:nth-child(2),
.rc-extract-loading-dots i:nth-child(2) {
    animation-delay: 0.14s;
}

.rc-btn-loading-dots i:nth-child(3),
.rc-extract-loading-dots i:nth-child(3) {
    animation-delay: 0.28s;
}

.rc-extract-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 14px;
    border: 1px solid #d7e4f5;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
    color: #284d8c;
    font-size: 14px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.rc-extract-loading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #3f6fc8;
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0.04em;
    box-shadow: 0 6px 14px rgba(63, 111, 200, 0.22);
    animation: rcAiPulse 1.05s infinite ease-in-out;
}

.rc-extract-loading-text {
    background: linear-gradient(90deg, #1d3f78 0%, #3f6fc8 45%, #1d3f78 90%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rcAiTextFlow 1.3s infinite linear;
}

.rc-extract-loading-dots {
    display: inline-flex;
    gap: 4px;
    color: #3f6fc8;
}

@keyframes rcAiButtonShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes rcAiDotMove {
    0%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

@keyframes rcAiPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}

@keyframes rcAiTextFlow {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

@media (max-width: 520px) {
    .rc-extract-loading {
        min-height: 54px;
        padding: 12px;
        gap: 7px;
        font-size: 13px;
    }

    .rc-extract-loading-icon {
        width: 31px;
        height: 31px;
        font-size: 11px;
    }
}

/* =========================================================
   ✅ 2026-05-29 수정: 사진 확대 후 드래그 이동 보정
   - 모바일에서 사진을 확대한 뒤 손가락으로 끌어서 라벨 구석까지 확인할 수 있게 한다.
   ========================================================= */
.rc-mobile-preview-box {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.rc-mobile-preview-box.is-dragging {
    cursor: grabbing;
}

.rc-mobile-preview-box.is-dragging img {
    cursor: grabbing;
}

.rc-mobile-preview-box img {
    cursor: grab;
    pointer-events: auto;
}

.rc-mobile-tool-overlay {
    touch-action: manipulation;
}

/* =========================================================
   ✅ 2026-05-29 수정: 사진찾기 반자동 방식
   - 자동 OCR 실패 시 고객이 사진을 보며 모델명 위치를 맞추고, 앞자리 입력 자동완성으로 보완한다.
   ========================================================= */
.rc-photo-tip-box {
    margin: 0 0 12px;
    padding: 12px 12px;
    border: 1px solid #dbe7f5;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
}

.rc-photo-tip-box strong {
    display: block;
    color: #17345f;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
}

.rc-photo-tip-box span {
    display: block;
    margin-top: 5px;
    color: #5f7087;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}

.rc-photo-tip-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.rc-photo-tip-badges em {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    background: #ffffff;
    color: #315fae;
    border: 1px solid rgba(63, 111, 200, 0.16);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.rc-ocr-guide-box {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 38%;
    height: 30%;
    z-index: 3;
    border: 2px dashed rgba(63, 111, 200, 0.9);
    border-radius: 16px;
    background: rgba(63, 111, 200, 0.055);
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.015);
}

.rc-ocr-guide-box span {
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100vw - 52px);
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(23, 52, 95, 0.92);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.rc-manual-guide-text {
    margin: -2px 0 9px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}

.rc-manual-suggest-list {
    display: grid;
    gap: 7px;
    margin-top: 9px;
}

.rc-manual-suggest-btn {
    width: 100%;
    border: 1px solid #d6e2f3;
    border-radius: 14px;
    background: #ffffff;
    padding: 11px 12px;
    text-align: left;
    cursor: pointer;
}

.rc-manual-suggest-btn strong {
    display: block;
    color: #10233b;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.rc-manual-suggest-btn span {
    display: block;
    margin-top: 4px;
    color: #3f6fc8;
    font-size: 12px;
    font-weight: 800;
}

.rc-manual-suggest-btn:active {
    transform: translateY(1px);
}

.rc-manual-suggest-empty {
    border: 1px dashed #d8e4f3;
    border-radius: 14px;
    background: #f8fbff;
    padding: 11px 12px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

@media (max-width: 520px) {
    .rc-photo-tip-box {
        padding: 11px 10px;
        border-radius: 14px;
    }

    .rc-photo-tip-box strong {
        font-size: 13px;
    }

    .rc-ocr-guide-box {
        left: 8%;
        right: 8%;
        top: 36%;
        height: 30%;
        border-radius: 14px;
    }

    .rc-ocr-guide-box span {
        top: -28px;
        font-size: 10px;
        padding: 0 8px;
    }

    .rc-mobile-manual-row {
        grid-template-columns: minmax(0, 1fr) 112px !important;
    }

    .rc-mobile-manual-row .rc-btn {
        min-width: 0;
        padding: 0 8px;
        font-size: 13px;
        white-space: nowrap;
    }
}


/* =========================================================
   ✅ 2026-05-29 수정: 모델명 한 줄 맞춤 박스 / 확대 배율 보정
   - 모델명은 대부분 한 줄이므로 박스 높이를 줄이고, 사진을 더 크게 확대해서 맞출 수 있게 안내한다.
   - OCR crop은 HTML/JS에서 이 박스 기준으로 처리된다.
   ========================================================= */
.rc-ocr-guide-box {
    left: 18%;
    right: 18%;
    top: 42%;
    height: 16%;
    min-height: 50px;
    border-radius: 12px;
    background: rgba(63, 111, 200, 0.035);
}

.rc-ocr-guide-box span {
    top: -36px;
    min-height: 28px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #1f2d45;
    border: 1px solid rgba(220, 227, 238, 0.95);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 7px 16px rgba(30, 45, 70, 0.14);
}

.rc-ocr-guide-box span b {
    color: #f05a24;
    font-weight: 1000;
}

.rc-photo-tip-box span {
    word-break: keep-all;
}

@media (max-width: 520px) {
    .rc-ocr-guide-box {
        left: 16%;
        right: 16%;
        top: 42%;
        height: 15%;
        min-height: 46px;
        border-radius: 11px;
    }

    .rc-ocr-guide-box span {
        top: -32px;
        max-width: calc(100vw - 54px);
        min-height: 24px;
        padding: 0 9px;
        font-size: 10px;
    }
}


/* =========================================================
   ✅ 2026-05-29 수정: 박스 안내문구 강조 재조정
   - 배경 전체를 주황색으로 칠하지 않고, "확대 하여" 글자만 주황색으로 강조한다.
   - 모바일에서 잘 보이도록 안내문구 폰트를 조금 키운다.
   ========================================================= */
.rc-ocr-guide-box {
    left: 12%;
    right: 12%;
    top: 42%;
    height: 16%;
    min-height: 50px;
    border-radius: 12px;
    background: rgba(63, 111, 200, 0.035);
}

.rc-ocr-guide-box span {
    top: -38px;
    min-height: 30px;
    padding: 0 13px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #172033;
    border: 1px solid rgba(203, 216, 234, 0.95);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 18px rgba(20, 45, 90, 0.12);
}

.rc-ocr-guide-box span b {
    color: #f06423;
    font-weight: 1000;
}

@media (max-width: 520px) {
    .rc-ocr-guide-box {
        left: 11%;
        right: 11%;
        top: 42%;
        height: 15%;
        min-height: 46px;
        border-radius: 11px;
    }

    .rc-ocr-guide-box span {
        top: -36px;
        max-width: calc(100vw - 42px);
        min-height: 28px;
        padding: 0 10px;
        font-size: 12px;
    }
}


/* =========================================================
   ✅ 2026-05-29 수정: 이동 조정용 박스 시인성 보정
   - 사진은 많이 움직일 수 있게 하고, 박스 안쪽은 너무 어둡게 덮지 않는다.
   - 점선과 내부 배경만 약하게 보정해서 모델명 위치를 맞추기 쉽게 한다.
   ========================================================= */
.rc-mobile-preview-box {
    touch-action: none;
}

.rc-mobile-preview-box.is-dragging {
    cursor: grabbing;
}

.rc-ocr-guide-box {
    border-color: rgba(46, 111, 230, 0.9);
    border-width: 2px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 0 0 9999px rgba(255, 255, 255, 0.015),
        0 0 0 1px rgba(255, 255, 255, 0.28);
}

.rc-ocr-guide-box::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 9px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.rc-ocr-guide-box span {
    font-size: 14px;
}

@media (max-width: 520px) {
    .rc-ocr-guide-box span {
        font-size: 12.5px;
    }
}

/* =========================================================
   ✅ 사용자 화면 브랜드별 설정번호 보기
   - 설정번호 찾기 메인 버튼에서 모달로 열어 브랜드/설정번호만 간단히 표시한다.
   - 모바일에서는 많은 정보를 넣지 않고 두 컬럼만 유지한다.
   ========================================================= */
.rc-btn.brand-summary {
    background: #ffffff;
    border: 1px solid #cbd8ea;
    color: #334f82;
}

.rc-brand-setup-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(5px);
}

.rc-brand-setup-modal.is-open {
    display: flex;
}

.rc-brand-setup-modal-box {
    width: min(760px, 100%);
    max-height: min(86vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dbe6f4;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.24);
}

.rc-brand-setup-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 14px;
    border-bottom: 1px solid #e7eef7;
}

.rc-brand-setup-modal-head h2 {
    margin: 0;
    color: #10233b;
    font-size: 24px;
    line-height: 1.3;
}

.rc-brand-setup-modal-head p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.rc-brand-setup-close {
    flex: 0 0 auto;
}

.rc-brand-setup-summary {
    margin: 14px 16px 0;
    border: 1px solid #dbe7f5;
    border-radius: 14px;
    background: #f8fbff;
    padding: 11px 12px;
    color: #3f5f94;
    font-size: 13px;
    font-weight: 900;
}

.rc-brand-setup-list {
    min-height: 0;
    overflow: auto;
    padding: 14px 16px 18px;
}

.rc-brand-setup-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #e4edf8;
    border-radius: 16px;
    background: #ffffff;
}

.rc-brand-setup-table th,
.rc-brand-setup-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #edf2f8;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.55;
}

.rc-brand-setup-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f5f8fc;
    color: #526078;
    font-weight: 900;
}

.rc-brand-setup-table tr:last-child td {
    border-bottom: 0;
}

.rc-brand-setup-table th:first-child,
.rc-brand-setup-table td:first-child {
    width: 118px;
}

.rc-brand-setup-table td strong {
    color: #10233b;
    font-weight: 900;
    word-break: keep-all;
}

.rc-brand-name-cell {
    min-width: 112px;
}

.rc-brand-name-main {
    display: block;
    line-height: 1.35;
}

.rc-brand-alias-text {
    display: block;
    margin-top: 3px;
    color: #98a4b5 !important;
    font-size: 10.5px;
    font-weight: 600 !important;
    line-height: 1.35;
    word-break: keep-all;
}

.rc-brand-setup-code-text {
    display: block;
}

.rc-brand-setup-table td span {
    color: #263753;
    font-weight: 800;
    word-break: break-word;
}

.rc-brand-setup-loading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rc-brand-setup-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 3px solid #dbeafe;
    border-top-color: #3f6fc8;
    animation: rcBrandSetupSpin 0.8s linear infinite;
}

@keyframes rcBrandSetupSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
    .rc-brand-setup-modal {
        padding: 10px;
        align-items: flex-end;
    }

    .rc-brand-setup-modal-box {
        max-height: 88vh;
        border-radius: 20px;
    }

    .rc-brand-setup-modal-head {
        padding: 16px 16px 12px;
    }

    .rc-brand-setup-modal-head h2 {
        font-size: 21px;
    }

    .rc-brand-setup-summary {
        margin: 12px 12px 0;
        font-size: 12px;
    }

    .rc-brand-setup-list {
        padding: 12px;
    }

    .rc-brand-setup-table th,
    .rc-brand-setup-table td {
        padding: 10px 9px;
        font-size: 13px;
    }

    .rc-brand-setup-table th:first-child,
    .rc-brand-setup-table td:first-child {
        width: 112px;
    }

    .rc-brand-alias-text {
        font-size: 10px;
    }
}