/* ===== 골드 색상 변수 ===== */
        :root {
            --gold-light:  #D4A84B;
            --gold-mid:    #B8902A;
            --gold-base:   #C5A86E;
            --gold-dark:   #8B6210;
            --gold-shine:  #D4A84B;

            /* 버튼용 — 차분한 단색 골드 (눈 피로 없음) */
            --gold-metal: #B8902A;

            /* 구분선/라인용 수평 페이드 — 유지 */
            --gold-metal-h: linear-gradient(
                90deg,
                transparent 0%,
                #C5A86E 20%,
                #D4A84B 50%,
                #C5A86E 80%,
                transparent 100%
            );
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        /* 🔒 전체 페이지 드래그(블록 지정) 및 선택 방지 효과 추가 */
        body { 
            background-color: #FCFAF6; 
            font-family: 'Noto Sans KR', sans-serif; 
            color: #2c2c2c; 
            font-weight: 400; 
            overflow-x: hidden; 
            padding-top: 0; 
            transition: padding 0.3s; 
            
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none;    /* Firefox */
            -ms-user-select: none;     /* IE/Edge */
            user-select: none;         /* 표준 */
        }

        /* 📸 이미지/로고 사진이 마우스로 집혀서 끌려 나오는 현상 원천 차단 */
        img, svg, a {
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
            user-drag: none;
        }
        
        /* 📝 예외 처리: 사용자가 글을 입력해야 하는 input, textarea는 드래그 및 커서 선택이 가능해야 합니다 */
        input, textarea, [contenteditable="true"] {
            -webkit-user-select: text !important;
            -moz-user-select: text !important;
            -ms-user-select: text !important;
            user-select: text !important;
        }

        /* 🔓 관리자 전용 프로그램 등록+ 플로팅 버튼 */
        #prog-register-fab {
            display: none;
            position: fixed;
            bottom: 100px;
            right: 30px;
            z-index: 9980;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }
        #prog-register-fab .fab-bubble {
            background: #1a1a1a;
            color: #C5A86E;
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 20px;
            white-space: nowrap;
            opacity: 0;
            transform: translateY(4px);
            transition: all 0.2s;
            pointer-events: none;
            border: 1px solid rgba(197,168,110,0.3);
        }
        #prog-register-fab:hover .fab-bubble { opacity: 1; transform: translateY(0); }
        #prog-register-fab .fab-btn {
            width: 56px; height: 56px;
            background: var(--gold-metal);
            border: none; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(197,168,110,0.4);
            transition: transform 0.2s, box-shadow 0.2s;
            font-size: 13px; font-weight: 700; color: #fff;
            flex-direction: column; gap: 1px;
            line-height: 1;
        }
        #prog-register-fab .fab-btn:hover { transform: scale(1.1); box-shadow: 0 10px 28px rgba(197,168,110,0.5); }
        #prog-register-fab .fab-btn .fab-icon { font-size: 20px; }
        #prog-register-fab .fab-btn .fab-text { font-size: 10px; letter-spacing: 0.5px; }

        /* 관리자 모드 + 프로그램 뷰에서만 표시 */
        body.admin-mode #prog-register-fab { display: flex; }

        /* 프로그램 등록 슬라이드 패널 */
        #prog-register-panel {
            display: none;
            position: fixed;
            top: 0; right: 0;
            width: 420px; max-width: 95vw;
            height: 100vh;
            background: #fff;
            z-index: 10030;
            box-shadow: -10px 0 40px rgba(0,0,0,0.15);
            flex-direction: column;
            overflow-y: auto;
            transform: translateX(100%);
            transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
            border-radius: 12px 0 0 12px;
        }
        #prog-register-panel.open {
            display: flex;
            transform: translateX(0);
        }
        .prog-panel-header {
            background: #1a1a1a;
            padding: 22px 24px;
            display: flex; align-items: center; justify-content: space-between;
            flex-shrink: 0;
        }
        .prog-panel-header h3 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 18px; color: #C5A86E; letter-spacing: 1px;
        }
        .prog-panel-close {
            background: transparent; border: 1px solid #444; color: #aaa;
            width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
            font-size: 16px; display: flex; align-items: center; justify-content: center;
            transition: all 0.2s;
        }
        .prog-panel-close:hover { border-color: #C5A86E; color: #C5A86E; }
        .prog-panel-body { padding: 28px 24px; flex: 1; display: flex; flex-direction: column; gap: 16px; }
        .prog-panel-group { display: flex; flex-direction: column; gap: 6px; }
        .prog-panel-group label { font-size: 11.5px; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
        .prog-panel-ctrl {
            width: 100%; padding: 11px 13px;
            border: 1px solid #e2dbcd; background: #fdfdfb;
            font-size: 13.5px; color: #333; outline: none;
            font-family: inherit; transition: border 0.2s; border-radius: 4px;
        }
        .prog-panel-ctrl:focus { border-color: #C5A86E; background: #fff; box-shadow: 0 0 0 3px rgba(197,168,110,0.1); }
        textarea.prog-panel-ctrl { min-height: 100px; resize: vertical; line-height: 1.6; }
        .btn-prog-panel-submit {
            margin-top: 8px; width: 100%; padding: 14px;
            background: var(--gold-metal);
            color: #fff; border: none; font-size: 14px; font-weight: 700;
            cursor: pointer; letter-spacing: 0.5px;
            transition: all 0.25s; border-radius: 4px;
        }
        .btn-prog-panel-submit:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(197,168,110,0.35); }
        .prog-panel-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,0.3); z-index: 10029;
            backdrop-filter: blur(2px);
        }
        body.admin-mode,
        body.admin-mode * {
            -webkit-user-select: text !important;
            -moz-user-select: text !important;
            -ms-user-select: text !important;
            user-select: text !important;
        }
        body.admin-mode img,
        body.admin-mode svg,
        body.admin-mode a {
            -webkit-user-drag: auto !important;
            user-drag: auto !important;
        }
        
        /* 🔧 관리자 제어 상단 바 — 컴팩트 2줄 레이아웃 */
        #admin-control-bar {
            display: none; position: fixed; top: 0; left: 0; width: 100%;
            background: #141414;
            padding: 0 24px;
            z-index: 9999;
            height: 54px;
            flex-direction: row;
            align-items: center;
            gap: 0;
            box-shadow: 0 2px 16px rgba(0,0,0,0.5);
            font-size: 13px;
            flex-wrap: nowrap;
        }

        /* 왼쪽: 타이틀 */
        .admin-bar-left {
            display: flex; align-items: center; gap: 10px;
            flex-shrink: 0; padding-right: 16px;
            border-right: 1px solid #2a2a2a;
            height: 100%;
        }
        .admin-bar-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 15px; color: #C5A86E; letter-spacing: 0.5px;
            white-space: nowrap; font-weight: 600;
        }

        /* 가운데: 폰트 컨트롤 */
        .admin-bar-center {
            display: flex; align-items: center; gap: 8px;
            flex: 1; padding: 0 16px; overflow-x: auto;
            scrollbar-width: none;
        }
        .admin-bar-center::-webkit-scrollbar { display: none; }

        .admin-bar-label {
            font-size: 12px; color: #666; font-weight: 600;
            letter-spacing: 0.3px; white-space: nowrap; flex-shrink: 0;
        }
        .admin-bar-sep { width: 1px; height: 22px; background: #2a2a2a; flex-shrink: 0; margin: 0 6px; }

        .admin-select {
            padding: 0 10px; border: 1px solid #2e2e2e; background: #1e1e1e;
            color: #ddd; border-radius: 4px; font-size: 13px; cursor: pointer;
            width: 170px; height: 32px; flex-shrink: 0;
        }
        .admin-select:focus { outline: none; border-color: #C5A86E; }

        .current-font-tag {
            background: #1e1e1e; border: 1px solid #333;
            color: #C5A86E; padding: 0 10px; border-radius: 4px;
            font-size: 12px; white-space: nowrap; height: 32px;
            display: flex; align-items: center; flex-shrink: 0;
        }

        .font-size-ctrl { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
        .font-size-ctrl button {
            width: 28px; height: 28px; border: 1px solid #2e2e2e; background: #1e1e1e;
            color: #bbb; border-radius: 4px; cursor: pointer; font-size: 15px; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.15s; line-height: 1; flex-shrink: 0;
        }
        .font-size-ctrl button:hover { border-color: #C5A86E; color: #C5A86E; }
        .font-size-display {
            min-width: 40px; text-align: center; font-size: 13px; color: #ddd;
            background: #1e1e1e; border: 1px solid #2e2e2e; border-radius: 4px;
            height: 28px; display: flex; align-items: center; justify-content: center;
            font-weight: 700; flex-shrink: 0;
        }

        .font-weight-group { display: flex; gap: 3px; flex-shrink: 0; }
        .btn-fw {
            padding: 0 11px; border: 1px solid #2e2e2e; background: #1e1e1e;
            color: #888; border-radius: 4px; cursor: pointer; font-size: 12px;
            transition: all 0.15s; white-space: nowrap; height: 28px;
            display: flex; align-items: center;
        }
        .btn-fw:hover, .btn-fw.active { border-color: #C5A86E; color: #C5A86E; background: #251f10; }
        .btn-fw.active { font-weight: 700; }

        /* 오른쪽: 액션 버튼들 */
        .admin-bar-right {
            display: flex; align-items: center; gap: 6px;
            flex-shrink: 0; padding-left: 16px;
            border-left: 1px solid #2a2a2a;
            height: 100%;
        }

        .admin-btn {
            padding: 0 14px; border: 1px solid transparent; border-radius: 4px;
            cursor: pointer; font-weight: 600; font-size: 13px;
            transition: all 0.18s; white-space: nowrap;
            height: 32px; display: flex; align-items: center; gap: 5px;
            flex-shrink: 0;
        }
        .btn-apply-sel { background: #251f10; color: #C5A86E; border-color: #3a2e10; }
        .btn-apply-sel:hover { background: var(--gold-metal); color: #fff; border-color: #C5A86E; }
        .btn-apply-sel.pulse { animation: selPulse 0.4s ease; }
        @keyframes selPulse { 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }
        .btn-admin-panel { background: #222; color: #ccc; border-color: #2e2e2e; }
        .btn-admin-panel:hover { border-color: #C5A86E; color: #C5A86E; }
        .btn-save { background: var(--gold-metal); color: #fff; border-color: transparent; }
        .btn-save:hover { opacity: 0.88; }
        /* 색상 피커 */
        .bar-color-input {
            width: 28px; height: 28px; border: 1px solid #2e2e2e;
            border-radius: 30px; cursor: pointer; padding: 2px;
            background: #1e1e1e; flex-shrink: 0;
        }
        .bar-color-input::-webkit-color-swatch-wrapper { padding: 0; }
        .bar-color-input::-webkit-color-swatch { border: none; border-radius: 3px; }
        .color-picker-wrap { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
        .color-presets { display: flex; gap: 3px; align-items: center; }
        .cp-dot {
            width: 16px; height: 16px; border-radius: 50%;
            cursor: pointer; display: inline-flex; align-items: center;
            justify-content: center; font-size: 9px; color: #888;
            transition: transform 0.15s; flex-shrink: 0;
        }
        .cp-dot:hover { transform: scale(1.25); }
        .btn-undo:hover { border-color: #C5A86E; color: #C5A86E; }
        .btn-undo:disabled { color: #444 !important; border-color: #222 !important; cursor: not-allowed; }
        .btn-redo { background: #222; color: #bbb; border-color: #2e2e2e; font-size: 15px; padding: 0 12px; }
        .btn-redo:hover { border-color: #C5A86E; color: #C5A86E; }
        .btn-redo:disabled { color: #444 !important; border-color: #222 !important; cursor: not-allowed; }
        .btn-toggle-mode:hover { background: #f0f0f0; }
        .btn-toggle-mode.edit-on { background: #C5A86E !important; color: #fff !important; border-color: #B39446 !important; box-shadow: 0 0 0 2px rgba(197,168,110,0.35); }
        .btn-reset { background: #222; color: #888; border-color: #2e2e2e; }
        .btn-reset:hover { border-color: #f87171; color: #f87171; }

        /* 🔒 프리미엄 로그인 모달창 스킨 */
        #login-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
        .login-box { background: #fff; padding: 40px; border-radius: 16px; width: 400px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); border: 1px solid rgba(197, 168, 110, 0.2); }
        .login-box h3 { font-family: 'Noto Serif KR', serif; font-size: 24px; font-weight: 400; color: #222; text-align: center; margin-bottom: 25px; letter-spacing: 1px; }
        .login-form { display: flex; flex-direction: column; gap: 16px; }
        .login-group { display: flex; flex-direction: column; gap: 6px; }
        .login-group label { font-size: 12.5px; color: #444; font-weight: 500; }
        .login-group input { width: 100%; padding: 11px 14px; border: 1px solid #e2dbcd; background-color: #fdfdfb; border-radius: 6px; font-size: 14px; outline: none; transition: all 0.2s; color: #333; }
        .login-group input:focus { border-color: #C5A86E; background-color: #fff; box-shadow: 0 0 6px rgba(197,168,110,0.15); }
        .login-remember { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 13px; color: #666; cursor: pointer; user-select: none; }
        .login-remember input[type="checkbox"] { width: 15px; height: 15px; accent-color: #B8902A; cursor: pointer; }
        body.dark-mode .login-remember { color: #a09080; }
        .login-box .modal-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
        .btn-login-submit { width: 100%; padding: 13px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; background: #B8902A; color: #fff; box-shadow: 0 4px 12px rgba(197,168,110,0.2); }
        .btn-login-cancel { width: 100%; padding: 11px; border: none; border-radius: 6px; cursor: pointer; font-size: 13.5px; background: #eee; color: #666; }
        
        /* 🔗 로그인창 하단 회원가입 링크 구역 */
        .login-footer-links { text-align: center; margin-top: 20px; padding-top: 15px; border-top: 1px dashed #f1ede4; font-size: 13px; color: #666; }
        .link-to-signup { color: #C5A86E; font-weight: 500; text-decoration: underline; margin-left: 6px; cursor: pointer; }
        .link-to-signup:hover { color: #B39446; }

        /* 👤 프리미엄 회원가입 모달창 스킨 */
        #signup-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10001; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
        .signup-box { background: #fff; padding: 40px; border-radius: 16px; width: 460px; box-shadow: 0 15px 40px rgba(197, 168, 110, 0.15); border: 1px solid rgba(197, 168, 110, 0.2); }
        .signup-box h3 { font-family: 'Noto Serif KR', serif; font-size: 24px; font-weight: 400; color: #222; text-align: center; margin-bottom: 8px; }
        .signup-box p.sub { font-size: 13px; color: #888; text-align: center; margin-bottom: 25px; }
        .signup-form { display: flex; flex-direction: column; gap: 16px; max-height: 400px; overflow-y: auto; padding-right: 5px; }
        .signup-form::-webkit-scrollbar { width: 4px; }
        .signup-form::-webkit-scrollbar-thumb { background: #e2dbcd; border-radius: 2px; }
        .signup-group { display: flex; flex-direction: column; gap: 6px; }
        .signup-group label { font-size: 12.5px; color: #444; font-weight: 500; }
        .signup-group input { width: 100%; padding: 11px 14px; border: 1px solid #e2dbcd; background-color: #fdfdfb; border-radius: 6px; font-size: 14px; outline: none; transition: all 0.2s; color: #333; }
        .signup-group input:focus { border-color: #C5A86E; background-color: #fff; box-shadow: 0 0 6px rgba(197,168,110,0.15); }
        .signup-box .modal-btns { display: flex; gap: 10px; margin-top: 25px; }
        .signup-box button { flex: 1; padding: 13px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; }
        .btn-signup-submit { background: #B8902A; color: #fff; box-shadow: 0 4px 12px rgba(197,168,110,0.2); }
        .btn-signup-cancel { background: #eee; color: #666; }

        /* 🖼️ 이미지 변경 통합 팝업 모달 스킨 */
        #image-upload-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10005; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
        .img-modal-box { background: #fff; padding: 35px; border-radius: 14px; width: 480px; box-shadow: 0 12px 35px rgba(0,0,0,0.15); border: 1px solid #C5A86E; }
        .img-modal-box h4 { font-family: 'Noto Serif KR', serif; font-size: 19px; color: #222; margin-bottom: 20px; text-align: center; }
        .img-tab-wrapper { display: flex; border-bottom: 1px solid #eee; margin-bottom: 20px; }
        .img-tab-btn { flex: 1; padding: 10px; border: none; background: transparent; cursor: pointer; font-size: 13.5px; color: #888; font-weight: 500; text-align: center; transition: all 0.2s; }
        .img-tab-btn.active-tab { color: #C5A86E; border-bottom: 2px solid #C5A86E; font-weight: 700; }
        .img-tab-content { display: none; }
        .img-tab-content.active-content { display: block; }
        .img-modal-input-file { width: 100%; padding: 12px; border: 2px dashed #e2dbcd; border-radius: 6px; background: #fdfdfb; cursor: pointer; font-size: 13px; }
        .img-modal-input-file:hover { border-color: #C5A86E; }
        .img-modal-btns { display: flex; gap: 10px; margin-top: 25px; }
        .img-modal-btns button { flex: 1; padding: 12px; border: none; border-radius: 6px; cursor: pointer; font-size: 13.5px; font-weight: 500; }
        .btn-img-confirm { background: var(--gold-metal); color: #fff; }
        .btn-img-confirm:hover { background: #9E7A20; }
        .btn-img-cancel { background: #eee; color: #666; }

        /* 드래그앤드롭 존 */
        .drop-zone {
            width: 100%;
            min-height: 160px;
            border: 2px dashed #e2dbcd;
            border-radius: 10px;
            background: #fdfdfb;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }
        .drop-zone:hover, .drop-zone.dragover { border-color: #C5A86E; background: #fdf8ee; }
        .drop-zone .dz-icon { font-size: 36px; line-height: 1; }
        .drop-zone .dz-text { font-size: 14px; color: #888; text-align: center; line-height: 1.6; }
        .drop-zone .dz-text strong { color: #C5A86E; }
        .drop-zone .dz-subtext { font-size: 12px; color: #bbb; }
        .drop-zone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
        .drop-zone-preview {
            width: 100%;
            height: 160px;
            object-fit: contain;
            border-radius: 8px;
            display: none;
        }
        .dz-preview-wrap { 
            position: relative; 
            width: 100%; 
            display: none; 
            flex-direction: column; 
            align-items: center; 
            gap: 10px;
        }
        .dz-remove-btn {
            font-size: 12px; color: #f87171; background: none; border: 1px solid #fca5a5;
            border-radius: 4px; padding: 4px 12px; cursor: pointer; transition: all 0.2s;
        }
        .dz-remove-btn:hover { background: #fee2e2; }

        /* ===== 카카오 실시간 문의 고정 버튼 ===== */
        #kakao-float-btn {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 9990;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
        }
        .kakao-bubble {
            background: #3C1E1E;
            color: #fff;
            font-size: 11.5px;
            padding: 5px 10px;
            border-radius: 20px;
            white-space: nowrap;
            opacity: 0;
            transform: translateY(6px);
            transition: all 0.25s ease;
            pointer-events: none;
        }
        #kakao-float-btn:hover .kakao-bubble { opacity: 1; transform: translateY(0); }
        .kakao-circle {
            width: 58px;
            height: 58px;
            background: #FEE500;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(0,0,0,0.18);
            transition: transform 0.2s, box-shadow 0.2s;
            text-decoration: none;
        }
        .kakao-circle:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(0,0,0,0.22); }
        .kakao-circle svg { width: 32px; height: 32px; }

        /* ===== 메인 CTA 버튼 2개 ===== */
        .hero-cta-btns {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-top: 38px;
            align-items: flex-start;
        }
        .btn-cta-primary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 24px; min-width: 220px; width: auto; justify-content: center;
            background: var(--gold-metal);
            color: #fff;
            font-size: 13.5px;
            font-weight: 600;
            letter-spacing: 0.5px;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
            box-shadow: 0 4px 16px rgba(197,168,110,0.35);
        }
        .btn-cta-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(197,168,110,0.45); }
        .btn-cta-secondary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 13px 26px;
            background: transparent;
            color: #C5A86E;
            font-size: 13.5px;
            font-weight: 600;
            letter-spacing: 0.5px;
            border: 1.5px solid #C5A86E;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
        }
        .btn-cta-secondary:hover { background: var(--gold-metal); color: #fff; transform: translateY(-3px); }

        /* ===== 크리에이터 지원 뷰 ===== */
        .apply-container { width: 100%; max-width: 780px; margin: 0 auto; padding: 60px 20px 80px; }
        .apply-header { text-align: center; margin-bottom: 50px; }
        .apply-header .sub-tag { font-family: 'Cormorant Garamond', serif; font-size: 14px; color: #C5A86E; letter-spacing: 2px; font-weight: 600; display: block; margin-bottom: 10px; }
        .apply-header h2 { font-family: 'Noto Serif KR', serif; font-size: 34px; color: #222; font-weight: 400; }
        .apply-header p { font-size: 15px; color: #555; margin-top: 14px; line-height: 1.7; word-break: keep-all; }
        
        .apply-form-card {
            background: #fff;
            border: 1px solid rgba(197,168,110,0.25);
            border-radius: 16px;
            padding: 50px 45px;
            box-shadow: 0 10px 40px rgba(197,168,110,0.07);
        }
        .apply-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .apply-form-full { grid-column: 1 / -1; }
        .apply-group { display: flex; flex-direction: column; gap: 7px; }
        .apply-group label { font-size: 12.5px; color: #444; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; }
        .apply-group label .req { color: #C5A86E; margin-left: 2px; }
        .apply-control {
            width: 100%;
            padding: 13px 15px;
            border: 1px solid #e2dbcd;
            background: #fdfdfb;
            border-radius: 7px;
            font-size: 14px;
            color: #333;
            outline: none;
            transition: all 0.2s;
            font-family: 'Noto Sans KR', sans-serif;
        }
        .apply-control:focus { border-color: #C5A86E; background: #fff; box-shadow: 0 0 0 3px rgba(197,168,110,0.12); }
        select.apply-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23C5A86E'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 15px; padding-right: 40px; cursor: pointer; }
        textarea.apply-control { min-height: 130px; resize: vertical; line-height: 1.65; }
        
        .apply-agree-box { margin: 22px 0; padding: 18px 20px; background: #faf7f0; border-radius: 8px; border: 1px solid #f0e8d0; }
        .apply-agree-box label { font-size: 13.5px; color: #444; cursor: pointer; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
        .apply-agree-box input[type="checkbox"] { accent-color: #C5A86E; width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
        
        .btn-apply-submit {
            width: 100%;
            padding: 16px;
            background: var(--gold-metal);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 16px rgba(197,168,110,0.3);
            transition: all 0.3s;
            margin-top: 8px;
        }
        .btn-apply-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(197,168,110,0.4); }
        
        .apply-success-layer { display: none; text-align: center; padding: 50px 20px; flex-direction: column; align-items: center; gap: 16px; animation: fadeIn 0.4s forwards; }
        .apply-success-layer .check-circle { width: 64px; height: 64px; background: var(--gold-metal); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; margin: 0 auto; }
        .apply-success-layer h3 { font-family: 'Noto Serif KR', serif; font-size: 22px; color: #222; font-weight: 400; }
        .apply-success-layer p { font-size: 14.5px; color: #555; line-height: 1.7; word-break: keep-all; }

        /* ===== 관리자 탭 (지원자 목록 등) ===== */
        .admin-panel-view { display: none; position: fixed; inset: 0; background: #f5f3ee; z-index: 10000; overflow-y: auto; }
        .admin-panel-header {
            background: #1a1a1a;
            color: #fff;
            padding: 18px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .admin-panel-header h2 { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: #C5A86E; letter-spacing: 1px; }
        .btn-close-admin { background: transparent; border: 1px solid #555; color: #aaa; padding: 7px 18px; border-radius: 4px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
        .btn-close-admin:hover { border-color: #C5A86E; color: #C5A86E; }
        
        .admin-panel-body { max-width: 1200px; margin: 0 auto; padding: 30px 30px 60px; }
        
        .admin-tabs { display: flex; gap: 4px; margin-bottom: 30px; border-bottom: 2px solid #e8e2d6; }
        .admin-tab-btn { padding: 10px 24px; border: none; background: transparent; font-size: 14px; color: #888; font-weight: 500; cursor: pointer; position: relative; bottom: -2px; border-bottom: 2px solid transparent; transition: all 0.2s; }
        .admin-tab-btn.active { color: #C5A86E; border-bottom: 2px solid #C5A86E; font-weight: 700; }
        .admin-tab-content { display: none; }
        .admin-tab-content.active { display: block; }
        
        /* 지원자 테이블 */
        .applicant-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
        .applicant-table th { background: #faf7f0; padding: 13px 16px; font-size: 12.5px; color: #555; font-weight: 600; text-align: left; border-bottom: 1px solid #f0e8d0; letter-spacing: 0.3px; }
        .applicant-table td { padding: 14px 16px; font-size: 14px; color: #333; border-bottom: 1px solid #f5f1e8; vertical-align: middle; }
        .applicant-table tr:hover td { background: #fdfbf6; }
        .applicant-table tr:last-child td { border-bottom: none; }
        
        .status-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
        .status-new { background: #fef3c7; color: #b45309; }
        .status-review { background: #dbeafe; color: #1d4ed8; }
        .status-pass { background: #d1fae5; color: #065f46; }
        .status-fail { background: #fee2e2; color: #991b1b; }
        
        .status-select { padding: 5px 8px; border: 1px solid #e2dbcd; border-radius: 4px; font-size: 12.5px; background: #fff; cursor: pointer; outline: none; }
        .status-select:focus { border-color: #C5A86E; }
        
        .memo-input { width: 100%; padding: 6px 10px; border: 1px solid #e2dbcd; border-radius: 4px; font-size: 13px; background: #fdfdfb; outline: none; color: #333; }
        .memo-input:focus { border-color: #C5A86E; }
        
        .btn-detail { background: transparent; border: 1px solid #C5A86E; color: #C5A86E; padding: 5px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
        .btn-detail:hover { background: var(--gold-metal); color: #fff; }
        .btn-del { background: transparent; border: 1px solid #eee; color: #bbb; padding: 5px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s; margin-left: 4px; }
        .btn-del:hover { border-color: #f87171; color: #f87171; }
        
        .admin-empty { padding: 60px; text-align: center; color: #aaa; font-size: 14.5px; background: #fff; border-radius: 10px; }
        .admin-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 28px; }
        .stat-card { background: #fff; border-radius: 10px; padding: 22px 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); border-left: 3px solid #C5A86E; }
        .stat-card .stat-num { font-family: 'Cormorant Garamond', serif; font-size: 36px; color: #C5A86E; font-weight: 600; }
        .stat-card .stat-label { font-size: 13px; color: #888; margin-top: 4px; }
        
        /* 지원자 상세 모달 */
        #applicant-detail-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 10010; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
        .detail-box { background: #fff; border-radius: 16px; width: 560px; max-height: 80vh; overflow-y: auto; padding: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.18); }
        .detail-box h3 { font-family: 'Noto Serif KR', serif; font-size: 20px; color: #222; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid #f0e8d0; }
        .detail-row { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
        .detail-row .d-label { font-size: 12px; color: #888; font-weight: 600; min-width: 80px; text-transform: uppercase; padding-top: 2px; }
        .detail-row .d-val { font-size: 14.5px; color: #222; flex: 1; line-height: 1.6; word-break: break-all; }
        .btn-close-detail { width: 100%; margin-top: 24px; padding: 12px; border: 1px solid #e2dbcd; background: #f5f5f5; border-radius: 6px; cursor: pointer; font-size: 13.5px; color: #555; }

        /* 회원 관리 탭 */
        .member-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
        .member-table th { background: #faf7f0; padding: 13px 16px; font-size: 12.5px; color: #555; font-weight: 600; text-align: left; border-bottom: 1px solid #f0e8d0; }
        .member-table td { padding: 13px 16px; font-size: 13.5px; color: #333; border-bottom: 1px solid #f5f1e8; }
        .member-table tr:last-child td { border-bottom: none; }
        .member-role { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; }
        .role-admin { background: #fef3c7; color: #92400e; }
        .role-user { background: #e0e7ff; color: #3730a3; }

        /* 상단 제어바에 관리자 패널 버튼 추가 공간 */
        .btn-admin-panel { background: var(--gold-metal); color: #fff; padding: 6px 14px; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; transition: background 0.2s; }
        .btn-admin-panel:hover { background: #9E7A20; }

        /* 상단 네비게이션 GNB */
        header { display: flex; justify-content: space-between; align-items: center; padding: 0 6%; height: 72px; background-color: #FCFAF6; position: relative; z-index: 10; }
        .logo-link { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
        .logo-emblem { height: 50px; width: auto; object-fit: contain; flex-shrink: 0; display: block; }
        .logo-area {
            display: flex; align-items: center;
            font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
            font-size: 32px; font-weight: 600; letter-spacing: 2px;
            cursor: pointer;
            color: #C5A86E;
            background: linear-gradient(
                105deg,
                #C5A86E 0%,
                #C5A86E 100%
            );
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: #C5A86E;
            transition:
                letter-spacing 0.45s cubic-bezier(0.22,1,0.36,1),
                background 0.45s ease,
                filter 0.45s ease;
        }
        .logo-link:hover .logo-area {
            letter-spacing: 4.5px;
            background: linear-gradient(
                105deg,
                #7A5A1A 0%,
                #B8902A 18%,
                #D4A84B 32%,
                #F5E4A0 48%,
                #FFE680 52%,
                #F2D675 56%,
                #D4A84B 70%,
                #C8952A 84%,
                #7A5A1A 100%
            );
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 8px rgba(212,168,75,0.45));
            background-size: 200% auto;
            animation: logoShine 4.5s linear infinite;
        }
        @keyframes logoShine {
            0%   { background-position: 200% center; }
            100% { background-position: 0% center; }
        }
        body.admin-mode .logo-area {
            -webkit-text-fill-color: #C5A86E !important;
            background: none !important;
        }
        
        .header-right { display: flex; align-items: center; gap: 0; height: 100%; }
        nav ul { display: flex; list-style: none; gap: 0; align-items: center; height: 100%; }
        nav ul li { margin-left: 0; display: flex; align-items: center; height: 100%; }
        
        /* 마우스 가까이 대면(Hover) 부드럽게 글씨 크기가 커지는 인터랙션 추가 */
        nav ul li a { text-decoration: none; color: #555; font-size: 13.5px; position: relative; padding: 0 13px; height: 100%; display: inline-flex; align-items: center; justify-content: center; transition: color 0.22s ease, background 0.22s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1), font-weight 0s; font-weight: 400; white-space: nowrap; }
        nav ul li a:hover { color: #B8902A; background: rgba(197,168,110,0.09); transform: scale(1.06); font-weight: 500; }
        nav ul li a.active { color: #B8902A; font-weight: 600; }
        nav ul li a.active::after { content: ''; position: absolute; bottom: 4px; left: 13px; right: 13px; height: 2px; background: var(--gold-metal); border-radius: 1px; }
        
        .header-btns { display: flex; align-items: center; gap: 10px; margin-left: 18px; flex-shrink: 0; }
        
        /* 프리미엄 로그인 단일 통합 버튼 스타일 */
        .btn-login-trigger { background: #B8902A; border: none; color: #fff; padding: 0 28px; height: 42px; border-radius: 24px; font-size: 13.5px; cursor: pointer; font-weight: 600; transition: all 0.25s; box-shadow: 0 3px 12px rgba(197,168,110,0.25); letter-spacing: 0.3px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
        .btn-login-trigger:hover { opacity: 1; background: #9E7A20; transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 24px rgba(197,168,110,0.45); }
        /* ===== 유저 드롭다운 ===== */
        .auth-btn-wrap { position: relative; display: inline-block; }
        .user-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 220px;
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06);
            border: 0.5px solid rgba(197,168,110,0.25);
            z-index: 99999;
            overflow: hidden;
            animation: udFadeIn 0.18s ease;
        }
        .user-dropdown.open { display: block; }
        @keyframes udFadeIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
        .ud-profile { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; }
        .ud-avatar {
            width: 38px; height: 38px; border-radius: 50%;
            background: linear-gradient(135deg, #B8902A, #D4A84B);
            color: #fff; font-size: 15px; font-weight: 600;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; font-family: 'Cormorant Garamond', serif;
        }
        .ud-name { font-size: 14px; font-weight: 600; color: #1a1a1a; line-height: 1.3; }
        .ud-id { font-size: 11px; color: #999; margin-top: 1px; }
        .ud-grade {
            display: inline-block; margin-top: 4px; font-size: 10px;
            padding: 2px 8px; border-radius: 20px;
            background: #fef3c7; color: #92400e; font-weight: 500;
        }
        .ud-divider { height: 1px; background: rgba(197,168,110,0.15); margin: 0 12px; }
        .ud-item {
            display: flex; align-items: center; gap: 9px; width: 100%;
            padding: 10px 16px; background: none; border: none;
            font-size: 13px; color: #333; cursor: pointer; text-align: left;
            transition: background 0.15s;
        }
        .ud-item:hover { background: rgba(197,168,110,0.08); }
        .ud-item-icon { font-size: 14px; width: 18px; text-align: center; }
        .ud-logout { color: #c0392b; font-size: 13px; margin-bottom: 4px; }
        .ud-logout:hover { background: rgba(192,57,43,0.06); }
        body.dark-mode .user-dropdown {
            background: #1e1a15; border-color: rgba(197,168,110,0.2);
            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
        }
        body.dark-mode .ud-name { color: #e8ddd0; }
        body.dark-mode .ud-id { color: #7a7060; }
        body.dark-mode .ud-grade { background: rgba(184,144,42,0.2); color: #D4A84B; }
        body.dark-mode .ud-divider { background: rgba(197,168,110,0.12); }
        body.dark-mode .ud-item { color: #c8bfb0; }
        body.dark-mode .ud-item:hover { background: rgba(197,168,110,0.1); }
        body.dark-mode .ud-logout { color: #e57373; }

        /* 헤더 경계선 금장 라인 */
        .luxury-gold-divider {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(to right,
                transparent 0%,
                #8B6210 10%,
                #C8952A 25%,
                #F2D675 45%,
                #FFE680 50%,
                #F2D675 55%,
                #C8952A 75%,
                #8B6210 90%,
                transparent 100%
            );
            z-index: 15;
        }

        /* 화면 전환 콘텐츠 기본 뼈대 */
        .page-view { display: none; opacity: 0; transition: opacity 0.25s ease; }
        .page-view.active-view { display: block; opacity: 1; }

        /* 🏠 [1. HOME VIEW] 메인 비주얼 영역 */
        .hero-container { position: relative; width: 100%; height: 650px; padding: 0 10%; display: flex; align-items: center; justify-content: space-between; overflow: hidden; background-color: #FCFAF6; }
        .hero-bg-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #eae5db; }
        .hero-bg-wrapper .base-model-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.92); z-index: 1; pointer-events: none; }
        /* 배경 영상의 브라우저 기본 컨트롤(화면 속 화면 등) 숨김 */
        #main-hero-img::-webkit-media-controls,
        #main-hero-img::-webkit-media-controls-panel,
        #main-hero-img::-webkit-media-controls-enclosure,
        #main-hero-img::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none !important; }
        /* 히어로 하단 페이드 (라이트: 크림, 다크: 자동으로 dark-mode가 override) */
        .hero-bottom-fade {
            position: absolute; bottom: 0; left: 0; width: 100%; height: 140px;
            background: linear-gradient(to bottom, transparent, #FCFAF6);
            z-index: 4; pointer-events: none;
        }
        body.dark-mode .hero-bottom-fade { display: none !important; }

        .natural-glow-window { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: hidden; }
        .natural-glow-overlay { position: absolute; top: -150%; left: -150%; width: 350%; height: 350%; mix-blend-mode: overlay; opacity: 0; transform: translate(-35%, 35%); background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255,246,210,0.45) 47%, rgba(255,255,255,0.85) 50%, rgba(255,246,210,0.45) 53%, rgba(255,255,255,0) 60%); }
        .hero-container.is-active-glow .natural-glow-overlay { animation: reverseDiagonalSunlight 6.0s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
        @keyframes reverseDiagonalSunlight { 0% { transform: translate(-35%, 35%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(35%, -35%); opacity: 0; } }

        .hero-content { max-width: 48%; z-index: 5; position: relative; display: flex; flex-direction: column; align-items: flex-start; }
        .brand-title { font-family: 'Cormorant Garamond', serif; font-size: 38px; color: #C5A86E; font-weight: 400; margin-bottom: 15px; word-break: break-all; letter-spacing: 2px; }
        .brand-slogan { font-family: 'Noto Serif KR', serif; font-size: 54px; font-weight: 300; color: #1a1a1a; line-height: 1.45; margin-bottom: 30px; word-break: keep-all; white-space: normal; letter-spacing: -0.5px; }
        .brand-description { font-size: 15.5px; color: #3c3c3c; font-weight: 400; line-height: 1.85; word-break: keep-all; white-space: normal; }
        .btn-view-more { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 220px; width: auto; padding: 14px 24px; border: 1.5px solid #C5A86E; background: transparent; color: #C5A86E; font-size: 13.5px; letter-spacing: 0.5px; text-decoration: none; transition: all 0.28s; font-weight: 600; border-radius: 30px; }
        .btn-view-more:hover { background: #B8902A; color: #fff; border-color: #B8902A; transform: translateY(-4px) scale(1.04); box-shadow: 0 12px 32px rgba(197,168,110,0.5); }
        
        .hero-image-area { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 450px; height: 450px; z-index: 5; display: flex; justify-content: flex-end; align-items: center; padding-right: 2%; }
        .right-emblem { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; cursor: default; }
        .right-emblem img {
            width: 100%; height: 100%; object-fit: contain;
            pointer-events: none;
            filter: contrast(1.15) saturate(1.3) brightness(1.05);
            transition: filter 0.4s ease;
        }
        .right-emblem:hover img {
            filter: contrast(1.2) saturate(1.5) brightness(1.1);
        }
        .sparkle-particle { position: absolute; pointer-events: none; background: radial-gradient(circle, rgba(255,252,235,0.92) 0%, rgba(220,185,110,0.4) 50%, rgba(255,255,255,0) 100%); border-radius: 50%; z-index: 4; filter: blur(1.0px); animation: slowGlitterRise 2.6s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
        @keyframes slowGlitterRise { 0% { transform: translate(0, 0) scale(0.35); opacity: 0; } 18% { opacity: 0.88; } 65% { opacity: 0.45; } 100% { transform: translate(var(--mx), var(--my)) scale(var(--size)); opacity: 0; } }

        /* 하단 카드 섹션 레이아웃 */
        .section-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 50px 10% 60px 10%; background-color: #FCFAF6; }
        .card { 
            border-radius: 12px; 
            padding: 35px 24px; 
            height: 260px;
            min-width: 0;
            display: flex; 
            flex-direction: column; 
            justify-content: flex-start;
            position: relative; 
            overflow: hidden;
            cursor: pointer;
            /* 그라디언트 금장 테두리 */
            background:
                linear-gradient(#ffffff, #ffffff) padding-box,
                linear-gradient(145deg,
                    rgba(212,168,75,0.55) 0%,
                    rgba(244,220,138,0.25) 30%,
                    rgba(197,168,110,0.18) 50%,
                    rgba(244,220,138,0.25) 70%,
                    rgba(184,144,42,0.55) 100%
                ) border-box;
            border: 1px solid transparent;
            box-shadow:
                0 4px 24px rgba(0,0,0,0.04),
                0 1px 0 rgba(212,168,75,0.08) inset;
            transition:
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.4s ease;
        }
        .card:hover {
            transform: translateY(-8px) scale(1.02);
            background:
                linear-gradient(#ffffff, #ffffff) padding-box,
                linear-gradient(145deg,
                    rgba(212,168,75,0.9) 0%,
                    rgba(244,212,130,0.55) 30%,
                    rgba(255,236,160,0.7) 50%,
                    rgba(244,212,130,0.55) 70%,
                    rgba(184,144,42,0.9) 100%
                ) border-box;
            border: 1px solid transparent;
            box-shadow:
                0 16px 40px rgba(197,168,110,0.18),
                0 0 0 1px rgba(212,168,75,0.12) inset;
        }
        /* 관리자 모드: 카드 hover 효과 제거 + 클릭 차단 + 커서 텍스트 */
        body.admin-mode .card {
            cursor: text !important;
            pointer-events: none;
            transform: none !important;
            box-shadow: 0 4px 24px rgba(0,0,0,0.04) !important;
        }
        /* 관리자 모드: 카드 안 텍스트/버튼은 pointer-events 다시 허용 */
        body.admin-mode .card .card-text-box,
        body.admin-mode .card .admin-img-changer {
            pointer-events: auto;
        }
        /* 관리자 모드: 텍스트가 이미지 위로 확실히 오도록 */
        body.admin-mode .card-text-box {
            z-index: 20 !important;
            position: relative;
        }
        /* 관리자 모드: 카드 이미지 어둡게 처리해서 텍스트 가독성 향상 */
        body.admin-mode .card-img-box {
            opacity: 0.25;
        }
        .card-text-box { width: 52%; z-index: 5; position: relative; flex-shrink: 0; }
        .card-category { font-family: 'Cormorant Garamond', serif; font-size: 13px; color: #C5A86E; letter-spacing: 1.5px; font-weight: 600; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .card-title { font-size: 18px; color: #222; font-weight: 500; margin-bottom: 14px; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .card-line { width: 18px; height: 1px; background: var(--gold-metal-h); margin-bottom: 18px; flex-shrink: 0; }
        .card-desc { font-size: 13.5px; color: #4a4a4a; font-weight: 400; line-height: 1.6; word-break: keep-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
        .card-img-box { position: absolute; right: 0; bottom: 0; width: 55%; height: 100%; z-index: 1; display: flex; align-items: flex-end; -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); pointer-events: none; transition: opacity 0.3s; }
        .card-img-box img { width: 100%; height: 100%; object-fit: cover; }
        .card-arrow { position: absolute; right: 20px; bottom: 20px; width: 36px; height: 36px; border: none; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; color: #555; box-shadow: 0 3px 10px rgba(0,0,0,0.08); z-index: 6; }

        /* 🗺️ [2. ABOUT US VIEW] 프리미엄 소개 및 D3 Map 레이아웃 */
        .about-container { width: 100%; min-height: 750px; padding: 60px 10%; display: flex; align-items: center; justify-content: space-between; background-color: #FCFAF6; }
        .about-text-side { width: 45%; display: flex; flex-direction: column; gap: 24px; }
        .about-main-signal { font-family: 'Noto Serif KR', serif; font-size: 32px; font-weight: 400; color: #1a1a1a; line-height: 1.45; word-break: keep-all; }
        .about-text-side .gold-accent-line { width: 45px; height: 2px; background: var(--gold-metal-h); margin: 5px 0; }
        .about-sub-description { font-size: 16px; color: #3c3c3c; line-height: 2.0; font-weight: 400; word-break: keep-all; display: flex; flex-direction: column; gap: 20px; }
        .about-map-side { width: 50%; display: flex; justify-content: center; align-items: center; }
        #map-container {
            position: relative;
            width: 100%;
            max-width: 550px;
            height: 620px;
            background-color: #ffffff; 
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 45px rgba(163, 137, 87, 0.15), 0 0 2px rgba(163, 137, 87, 0.3);
            border: 1px solid rgba(163, 137, 87, 0.35);
        }
        #mapCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }

        /* 💼 [3. SERVICES VIEW] 핵심 서비스 레이아웃 */
        .services-container { width: 100%; padding: 80px 10%; background-color: #FCFAF6; }
        .services-header { text-align: center; margin-bottom: 60px; }
        .services-header h2 { font-family: 'Cormorant Garamond', serif; font-size: 45px; color: #C5A86E; font-weight: 500; letter-spacing: 2px; }
        .services-header p { font-size: 16px; color: #4a4a4a; margin-top: 10px; font-weight: 400; }
        .services-sub-title { font-family: 'Noto Serif KR', serif; font-size: 26px; color: #222; font-weight: 400; margin-bottom: 30px; position: relative; padding-bottom: 12px; }
        .services-sub-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 35px; height: 2px; background: var(--gold-metal); }
        .what-we-do-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 24px; margin-bottom: 90px; }
        .service-main-card {
            background:
                linear-gradient(#fff, #fff) padding-box,
                linear-gradient(145deg,
                    rgba(212,168,75,0.55) 0%,
                    rgba(244,220,138,0.2) 35%,
                    rgba(197,168,110,0.15) 50%,
                    rgba(244,220,138,0.2) 65%,
                    rgba(184,144,42,0.55) 100%
                ) border-box;
            border: 1px solid transparent;
            padding: 26px 26px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.01);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .service-main-card:hover {
            transform: translateY(-3px);
            background:
                linear-gradient(#fff, #fff) padding-box,
                linear-gradient(145deg,
                    rgba(212,168,75,0.9) 0%,
                    rgba(244,212,130,0.5) 35%,
                    rgba(255,236,160,0.65) 50%,
                    rgba(244,212,130,0.5) 65%,
                    rgba(184,144,42,0.9) 100%
                ) border-box;
            border: 1px solid transparent;
            box-shadow: 0 10px 30px rgba(197,168,110,0.13);
        }
        .service-main-card .num { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: #C5A86E; font-weight: 600; }
        .service-main-card h3 { font-size: 22px; color: #222; font-weight: 500; }
        .service-main-card p { font-size: 14.5px; color: #4a4a4a; font-weight: 400; line-height: 1.7; word-break: keep-all; }

        .studio-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 40px; }
        .studio-photo-box {
            height: 320px;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            background:
                linear-gradient(#eee, #eee) padding-box,
                linear-gradient(145deg,
                    rgba(212,168,75,0.55) 0%,
                    rgba(244,220,138,0.2) 35%,
                    rgba(197,168,110,0.15) 50%,
                    rgba(244,220,138,0.2) 65%,
                    rgba(184,144,42,0.55) 100%
                ) border-box;
            border: 1px solid transparent;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }
        .studio-photo-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
        .studio-photo-box:hover img { transform: scale(1.03); }
        .studio-photo-box:hover {
            background:
                linear-gradient(#eee, #eee) padding-box,
                linear-gradient(145deg,
                    rgba(212,168,75,0.9) 0%,
                    rgba(244,212,130,0.5) 35%,
                    rgba(255,236,160,0.65) 50%,
                    rgba(244,212,130,0.5) 65%,
                    rgba(184,144,42,0.9) 100%
                ) border-box;
            border: 1px solid transparent;
            box-shadow: 0 10px 30px rgba(197,168,110,0.15);
        }
        .studio-photo-info { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.6)); padding: 25px; color: #fff; }
        .studio-photo-info span { font-size: 13px; color: #C5A86E; font-weight: 500; }
        .studio-photo-info h4 { font-size: 18px; margin-top: 4px; font-weight: 400; letter-spacing: -0.3px; }

        .support-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
        .support-list-card {
            background:
                linear-gradient(#fff, #fff) padding-box,
                linear-gradient(145deg,
                    rgba(212,168,75,0.45) 0%,
                    rgba(244,220,138,0.15) 35%,
                    rgba(197,168,110,0.1) 50%,
                    rgba(244,220,138,0.15) 65%,
                    rgba(184,144,42,0.45) 100%
                ) border-box;
            border: 1px solid transparent;
            border-radius: 10px;
            padding: 25px 30px;
            display: flex;
            align-items: flex-start;
            gap: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.008);
            transition: all 0.3s ease;
        }
        .support-list-card:hover {
            background:
                linear-gradient(#fff, #fff) padding-box,
                linear-gradient(145deg,
                    rgba(212,168,75,0.85) 0%,
                    rgba(244,212,130,0.45) 35%,
                    rgba(255,236,160,0.6) 50%,
                    rgba(244,212,130,0.45) 65%,
                    rgba(184,144,42,0.85) 100%
                ) border-box;
            border: 1px solid transparent;
            box-shadow: 0 6px 20px rgba(197,168,110,0.1);
            transform: translateY(-2px);
        }
        .support-list-card .sub-num { font-family: 'Cormorant Garamond', serif; font-size: 15px; color: #C5A86E; font-weight: 600; margin-top: 3px; }
        .support-list-card .info-text h4 { font-size: 16px; color: #222; font-weight: 500; margin-bottom: 6px; }
        .support-list-card .info-text p { font-size: 14px; color: #4a4a4a; font-weight: 400; line-height: 1.65; word-break: keep-all; }

        /* 📋 [4. Q&A VIEW] 간편 문의 게시판 레이아웃 */
        .qa-container { width: 100%; max-width: 900px; margin: 0 auto; padding: 60px 20px 80px 20px; background-color: #FCFAF6; }
        .qa-header { text-align: center; margin-bottom: 40px; }
        .qa-header .sub-tag { font-family: 'Cormorant Garamond', serif; font-size: 14px; color: #C5A86E; letter-spacing: 2px; font-weight: 600; }
        .qa-header h2 { font-family: 'Noto Serif KR', serif; font-size: 32px; color: #222; font-weight: 400; margin-top: 5px; }
        .qa-header p { font-size: 14.5px; color: #4a4a4a; font-weight: 400; margin-top: 12px; line-height: 1.6; word-break: keep-all; }
        .qa-action-bar { display: flex; justify-content: flex-end; margin-bottom: 20px; }
        .btn-write-qa {
            background: transparent; color: #C5A86E;
            border: 1.5px solid #C5A86E;
            padding: 12px 26px; font-size: 12px; font-weight: 600;
            cursor: pointer; border-radius: 30px;
            display: inline-flex; align-items: center; gap: 10px;
            font-family: 'Cormorant Garamond', 'Noto Sans KR', serif;
            letter-spacing: 0.18em; text-transform: uppercase;
            transition: all 0.28s ease;
        }
        .btn-write-qa:hover {
            background: #B8902A; color: #fff; border-color: #B8902A;
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(197,168,110,0.4);
        }
        .qa-write-box { display: none; background: #fff; border: 1px solid rgba(197, 168, 110, 0.25); border-radius: 8px; padding: 30px; margin-bottom: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.015); }
        .form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
        .form-group-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .form-group label { font-size: 13px; color: #444; font-weight: 500; }
        .form-group input[type="text"], .form-group input[type="password"], .form-group input[type="email"], .form-group textarea { width: 100%; padding: 12px; border: 1px solid #e2dbcd; background-color: #fdfdfb; border-radius: 4px; font-size: 14px; outline: none; transition: border 0.2s; color: #333; }
        .form-group input:focus, .form-group textarea:focus { border-color: #C5A86E; background-color: #fff; }
        .checkbox-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #555; cursor: pointer; margin-bottom: 5px; }
        .checkbox-label input { accent-color: #C5A86E; width: 16px; height: 16px; }
        .form-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
        .btn-qa-submit { background: var(--gold-metal); color: #fff; border: none; padding: 10px 24px; border-radius: 4px; cursor: pointer; font-size: 13.5px; font-weight: 500; }
        .btn-qa-cancel { background: #eee; color: #666; border: none; padding: 10px 24px; border-radius: 4px; cursor: pointer; font-size: 13.5px; }
        .qa-list { background: #fff; border: 1px solid rgba(0,0,0,0.04); border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.01); overflow: hidden; }
        .qa-empty { padding: 60px 20px; text-align: center; color: #888; font-size: 14.5px; background: #fff; }
        .qa-item { border-bottom: 1px solid #f1ede4; transition: background 0.2s; }
        .qa-item:last-child { border-bottom: none; }
        .qa-row { padding: 18px 25px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
        .qa-row:hover { background-color: #FAF8F2; }
        .qa-left { display: flex; align-items: center; gap: 15px; }
        .qa-status { font-size: 12px; padding: 3px 8px; border-radius: 3px; background: #f0f0f0; color: #555; font-weight: 500; }
        .qa-status.secret { background: #fdf6ec; color: #e6a23c; }
        .qa-title { font-size: 14.5px; color: #333; font-weight: 400; }
        .qa-title.is-secret { color: #888; }
        .qa-right { display: flex; align-items: center; gap: 20px; font-size: 13px; color: #888; }
        .qa-name { color: #333; font-weight: 500; }
        .qa-content-body { display: none; padding: 22px 25px; background-color: #FCFAF7; border-top: 1px dashed #eadecc; line-height: 1.7; font-size: 14.5px; color: #3c3c3c; font-weight: 400; word-break: break-all; }
        .qa-content-body strong { display: block; margin-bottom: 6px; color: #C5A86E; font-size: 12px; letter-spacing: 0.5px; font-weight: 500; }

        /* ✉️ [5. CONTACT US VIEW] 제휴&BJ 문의안내 콘텐츠 구역 */
        .contact-container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 60px 20px 80px 20px; }
        .contact-wrapper { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; }
        .contact-info-side { display: flex; flex-direction: column; justify-content: space-between; }
        .contact-intro h1 { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 500; color: #C5A86E; line-height: 1.2; margin-bottom: 12px; }
        .contact-intro h2 { font-family: 'Noto Serif KR', serif; font-size: 24px; font-weight: 400; color: #222; margin-bottom: 24px; letter-spacing: -0.5px; }
        .contact-intro p { font-size: 15px; color: #3c3c3c; font-weight: 400; line-height: 1.8; word-break: keep-all; }
        .contact-info-list { margin-top: 40px; border-top: 1px solid rgba(197, 168, 110, 0.15); padding-top: 30px; }
        .contact-info-item { margin-bottom: 24px; }
        .contact-info-item .label { font-size: 11.5px; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
        .contact-info-item .value { font-size: 15px; color: #222; font-weight: 400; line-height: 1.5; }
        .contact-form-side { background: #fff; border: 1px solid rgba(197, 168, 110, 0.25); border-radius: 16px; padding: 40px; box-shadow: 0 10px 30px rgba(197, 168, 110, 0.04); }
        .contact-form-side .form-group { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
        .contact-form-side label { font-size: 13px; color: #444; font-weight: 500; }
        .contact-form-side .form-control { width: 100%; background-color: #fdfdfb; border: 1px solid #e2dbcd; border-radius: 8px; padding: 14px 16px; font-size: 14px; color: #333; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; }
        .contact-form-side .form-control:focus { border-color: #C5A86E; background-color: #fff; box-shadow: 0 0 8px rgba(197, 168, 110, 0.25); }
        select.form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23C5A86E'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; padding-right: 45px; }
        textarea.form-control { resize: vertical; min-height: 120px; line-height: 1.6; }
        
        .btn-submit-message { width: 100%; background: #B8902A; color: #ffffff; border: none; border-radius: 8px; padding: 16px; font-size: 14.5px; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s; box-shadow: 0 4px 15px rgba(197, 168, 110, 0.2); }
        .btn-submit-message:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(197, 168, 110, 0.35); opacity: 0.95; }
        .btn-submit-message:active { transform: translateY(0); }
        
        .contact-success-layer { display: none; text-align: center; padding: 40px 10px; flex-direction: column; align-items: center; justify-content: center; gap: 15px; animation: fadeIn 0.4s ease forwards; }
        .contact-success-layer h3 { font-family: 'Noto Serif KR', serif; font-size: 20px; color: #222; font-weight: 400; }
        .contact-success-layer p { font-size: 14px; color: #4a4a4a; font-weight: 400; line-height: 1.6; word-break: keep-all; }
        .btn-success-ok { background: #222; color: #fff; border: none; padding: 10px 24px; border-radius: 4px; cursor: pointer; font-size: 13px; margin-top: 10px; transition: background 0.2s; }
        .btn-success-ok:hover { background: var(--gold-metal); }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* 📋 프리미엄 푸터(Footer) 스타일 */
        .site-footer { background-color: #F6F4EE; border-top: 1px solid rgba(197, 168, 110, 0.2); padding: 30px 10% 25px 10%; font-size: 13.5px; color: #4a4a4a; letter-spacing: -0.2px; }
        .footer-container { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 20px; }
        .footer-info-block { flex: 0 1 55%; display: flex; flex-direction: column; gap: 8px; }
        .footer-brand { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: #C5A86E; letter-spacing: 1.5px; }
        .footer-company-details { display: flex; align-items: center; flex-wrap: wrap; gap: 0; line-height: 1.5; color: #555; font-weight: 400; }
        .footer-company-details span { display: inline-flex; align-items: center; }
        .footer-company-details span strong { color: #333; font-weight: 500; margin-right: 6px; }
        .footer-company-details .divider { width: 1px; height: 11px; background-color: #DDD8CD; margin: 0 14px; }
        
        .footer-nav-block { flex: 0 0 35%; display: flex; justify-content: flex-end; gap: 50px; }
        .footer-nav-group { display: flex; flex-direction: column; gap: 8px; }
        .footer-nav-group h5 { color: #222; font-size: 13.5px; font-weight: 500; margin-bottom: 2px; letter-spacing: 0.5px; }
        .footer-nav-group a { text-decoration: none; color: #555; font-size: 13px; transition: color 0.2s ease; }
        .footer-nav-group a:hover { color: #C5A86E; }
        
        .footer-divider-line { width: 100%; height: 1px; background-color: rgba(197, 168, 110, 0.12); margin-bottom: 15px; }
        .footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #888; font-family: 'Cormorant Garamond', sans-serif; letter-spacing: 0.3px; }

        /* ===== 프로그램 뷰 — 메인 디자인 통일 ===== */
        .programs-container { width:100%; max-width:1100px; margin:0 auto; padding:70px 40px 90px; }
        .programs-header { margin-bottom:56px; }
        .programs-header .sub-tag { font-family:'Cormorant Garamond',serif; font-size:13px; color:#C5A86E; letter-spacing:3px; font-weight:600; display:block; margin-bottom:14px; text-transform:uppercase; }
        .programs-header h2 { font-family:'Noto Serif KR',serif; font-size:38px; color:#1a1a1a; font-weight:300; letter-spacing:-0.5px; line-height:1.2; }
        .programs-header h2 strong { font-weight:600; }
        .programs-header .header-line { width:40px; height:2px; background:var(--gold-metal-h); margin:18px 0; }
        .programs-header p { font-size:15px; color:#666; line-height:1.75; word-break:keep-all; }
        .programs-lock-banner { display:none; background:#f5f0e6; border:1px solid rgba(197,168,110,0.35); padding:56px 40px; text-align:center; margin-bottom:48px; position:relative; overflow:hidden; border-radius:12px; }
        .programs-lock-banner .lock-icon { font-size:44px; margin-bottom:18px; display:block; }
        .programs-lock-banner h3 { font-family:'Cormorant Garamond',serif; font-size:28px; color:#1a1a1a; font-weight:400; letter-spacing:0.5px; margin-bottom:14px; }
        .programs-lock-banner p { font-size:15px; color:#666; line-height:1.8; margin-bottom:32px; word-break:keep-all; }
        .lock-banner-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
        .btn-lock-login { padding:14px 36px; background:var(--gold-metal); color:#fff; border:none; font-size:13.5px; font-weight:600; cursor:pointer; letter-spacing:0.5px; transition:all 0.3s cubic-bezier(0.16,1,0.3,1); box-shadow:0 4px 16px rgba(197,168,110,0.3); }
        .btn-lock-login:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(197,168,110,0.45); }
        .btn-lock-signup { padding:13px 34px; background:transparent; color:#C5A86E; border:1px solid rgba(197,168,110,0.6); font-size:13.5px; font-weight:600; cursor:pointer; letter-spacing:0.5px; transition:all 0.3s; }
        .btn-lock-signup:hover { border-color:#C5A86E; background:rgba(197,168,110,0.08); }
        .programs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(197,168,110,0.1); border:1px solid rgba(197,168,110,0.12); }
        @media(max-width:1000px){ .programs-grid{grid-template-columns:repeat(3,1fr);} }
        @media(max-width:700px){ .programs-grid{grid-template-columns:repeat(2,1fr);} }
        @media(max-width:420px){ .programs-grid{grid-template-columns:1fr;} }
        .prog-card { background:#fff; cursor:pointer; position:relative; transition:all 0.3s cubic-bezier(0.16,1,0.3,1); overflow:hidden; border-radius:0; }
        .prog-card:hover { background:#fdfaf4; }
        .prog-card:hover .prog-card-title { color:#C5A86E; }
        .prog-card:hover .prog-card-arrow-line { width:22px; }
        .prog-card-thumb { width:100%; height:100px; background:linear-gradient(135deg,#1a1510,#2d2218); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
        .prog-card-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
        .prog-card:hover .prog-card-thumb img { transform:scale(1.04); }
        .prog-card-thumb .thumb-placeholder { font-size:26px; opacity:0.3; }
        .prog-card-thumb .prog-badge { position:absolute; top:0; left:0; background:rgba(197,168,110,0.95); color:#fff; font-size:9.5px; font-weight:700; padding:4px 10px; letter-spacing:1px; text-transform:uppercase; }
        .prog-card-body { padding:8px 12px 6px; border-bottom:1px solid #f5f0e8; }
        .prog-card-num { font-family:'Cormorant Garamond',serif; font-size:11px; color:#C5A86E; letter-spacing:1px; font-weight:600; margin-bottom:6px; display:block; }
        .prog-card-title { font-family:'Noto Serif KR',serif; font-size:12px; color:#1a1a1a; font-weight:400; margin-bottom:6px; transition:color 0.2s; line-height:1.4; }
        .prog-card-desc { font-size:11.5px; color:#777; line-height:1.6; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .prog-card-footer { display:flex; align-items:center; justify-content:space-between; padding:7px 12px; }
        .prog-card-version { font-size:10.5px; color:#bbb; letter-spacing:0.3px; }
        .prog-card-cta { display:flex; align-items:center; gap:6px; font-size:10.5px; color:#C5A86E; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
        .prog-card-arrow-line { display:inline-block; width:12px; height:1px; background:#C5A86E; transition:width 0.3s ease; vertical-align:middle; }
        .prog-card-lock { position:absolute; inset:0; background:rgba(250,248,244,0.88); backdrop-filter:blur(3px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
        .prog-card-lock .lock-msg { font-size:11px; color:#aaa; font-weight:500; letter-spacing:0.3px; }
        #prog-detail-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:10020; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
        .prog-detail-box { background:#fff; width:640px; max-width:95vw; max-height:90vh; overflow-y:auto; box-shadow:0 30px 80px rgba(0,0,0,0.28); border-radius:12px; }
        .prog-detail-thumb { width:100%; height:230px; background:linear-gradient(135deg,#111,#2a1f12); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; border-radius:12px 12px 0 0; }
        .prog-detail-thumb img { width:100%; height:100%; object-fit:cover; display:none; }
        .prog-detail-thumb .thumb-placeholder { font-size:64px; opacity:0.25; }
        .prog-detail-thumb .thumb-badge { position:absolute; top:0; left:0; background:#C5A86E; color:#fff; font-size:11px; font-weight:700; padding:6px 16px; letter-spacing:1px; text-transform:uppercase; border-radius:12px 0 6px 0; }
        .prog-detail-body { padding:36px 40px 40px; }
        .prog-detail-category { font-family:'Cormorant Garamond',serif; font-size:12px; color:#C5A86E; letter-spacing:2px; font-weight:600; margin-bottom:10px; text-transform:uppercase; }
        .prog-detail-title { font-family:'Noto Serif KR',serif; font-size:26px; color:#1a1a1a; font-weight:400; margin-bottom:8px; line-height:1.3; }
        .prog-detail-version { font-size:13px; color:#bbb; margin-bottom:24px; }
        .prog-detail-meta { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-bottom:28px; border:1px solid #f0e8d0; }
        .prog-meta-item { padding:14px 16px; border-right:1px solid #f0e8d0; }
        .prog-meta-item:last-child { border-right:none; }
        .prog-meta-item .meta-label { font-size:10.5px; color:#bbb; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:5px; }
        .prog-meta-item .meta-val { font-size:13.5px; color:#333; font-weight:500; }
        .prog-detail-divider { width:100%; height:1px; background:var(--gold-metal-h); margin-bottom:24px; }
        .prog-detail-desc { font-size:14.5px; color:#444; line-height:1.9; word-break:keep-all; white-space:pre-wrap; margin-bottom:32px; }
        .prog-detail-actions { display:flex; gap:10px; }
        .btn-prog-download { flex:1; padding:16px; background:var(--gold-metal); color:#fff; border:none; font-size:14px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:all 0.3s cubic-bezier(0.16,1,0.3,1); box-shadow:0 4px 18px rgba(197,168,110,0.3); text-decoration:none; letter-spacing:0.5px; }
        .btn-prog-download:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(197,168,110,0.45); }
        .btn-prog-download.no-link { background:#f0ede6; color:#bbb; box-shadow:none; cursor:not-allowed; pointer-events:none; }
        .btn-prog-close { padding:15px 24px; background:#f5f5f3; color:#777; border:none; font-size:13.5px; font-weight:500; cursor:pointer; transition:background 0.2s; letter-spacing:0.3px; }
        .btn-prog-close:hover { background:#eeece8; color:#444; }
        .prog-upload-card { background:#fff; border:1px solid rgba(197,168,110,0.18); padding:28px 28px 22px; margin-bottom:24px; box-shadow:0 2px 12px rgba(0,0,0,0.03); border-radius:10px; }
        .prog-upload-card h4 { font-family:'Noto Serif KR',serif; font-size:16px; color:#222; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid #f0e8d0; }
        .prog-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
        .prog-form-full { grid-column:1/-1; }
        .prog-form-group { display:flex; flex-direction:column; gap:6px; }
        .prog-form-group label { font-size:11.5px; color:#555; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
        .prog-ctrl { width:100%; padding:10px 13px; border:1px solid #e2dbcd; background:#fdfdfb; font-size:13.5px; color:#333; outline:none; font-family:inherit; transition:border 0.2s; border-radius:6px; }
        .prog-ctrl:focus { border-color:#C5A86E; background:#fff; }
        textarea.prog-ctrl { min-height:90px; resize:vertical; line-height:1.6; }
        .btn-prog-register { margin-top:16px; padding:11px 28px; background:var(--gold-metal); color:#fff; border:none; font-size:13px; font-weight:600; cursor:pointer; letter-spacing:0.5px; transition:all 0.2s; border-radius:6px; }
        .btn-prog-register:hover { opacity:0.9; transform:translateY(-1px); }
        .prog-admin-list { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
        .prog-admin-row { background:#fff; border:1px solid #f0ebe0; padding:14px 18px; display:flex; align-items:center; gap:16px; border-radius:8px; }
        .prog-admin-icon { width:50px; height:50px; background:#f5f0e6; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:22px; overflow:hidden; border-radius:6px; }
        .prog-admin-icon img { width:100%; height:100%; object-fit:cover; }
        .prog-admin-info { flex:1; }
        .prog-admin-info .pai-title { font-size:14.5px; font-weight:600; color:#222; }
        .prog-admin-info .pai-meta { font-size:12px; color:#999; margin-top:3px; }
        .btn-prog-del { background:transparent; border:1px solid #fca5a5; color:#f87171; padding:6px 14px; font-size:12px; cursor:pointer; transition:all 0.2s; }
        .btn-prog-del:hover { background:#fee2e2; }

        /* 프로그램 패널 파일 드래그앤드롭 */
        .pp-drop-zone {
            width: 100%; min-height: 90px;
            border: 2px dashed #e2dbcd; border-radius: 6px;
            background: #fdfdfb; display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 6px; cursor: pointer; transition: all 0.2s;
            position: relative; overflow: hidden; padding: 14px;
        }
        .pp-drop-zone:hover, .pp-drop-zone.dragover { border-color: #C5A86E; background: #fdf8ee; }
        .pp-drop-zone .pp-dz-icon { font-size: 24px; opacity: 0.6; }
        .pp-drop-zone .pp-dz-text { font-size: 12.5px; color: #888; text-align: center; line-height: 1.5; }
        .pp-drop-zone .pp-dz-text strong { color: #C5A86E; }
        .pp-drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
        .pp-file-preview { display: none; align-items: center; gap: 10px; padding: 10px 12px; background: #faf7f0; border: 1px solid #f0e8d0; border-radius: 6px; width: 100%; }
        .pp-file-preview .pp-file-name { font-size: 12.5px; color: #333; flex: 1; word-break: break-all; }
        .pp-file-preview .pp-file-size { font-size: 11px; color: #aaa; white-space: nowrap; }
        .pp-file-remove { background: none; border: none; color: #f87171; cursor: pointer; font-size: 14px; padding: 0 4px; }
        .pp-thumb-preview { width: 100%; height: 80px; object-fit: cover; border-radius: 4px; display: none; margin-top: 6px; border: 1px solid #f0e8d0; }

        /* 프로그램 등록 탭 스위처 */
        .pf-tab-bar { display: flex; border-bottom: 1px solid #ede6d8; margin-bottom: 10px; }
        .pf-tab-btn {
            padding: 7px 16px; border: none; background: transparent;
            font-size: 12px; color: #999; font-weight: 600; cursor: pointer;
            border-bottom: 2px solid transparent; margin-bottom: -1px;
            transition: all 0.18s; letter-spacing: 0.3px;
        }
        .pf-tab-btn.on { color: #C5A86E; border-bottom-color: #C5A86E; }
        .pf-tab-pane { display: none; }
        .pf-tab-pane.on { display: block; }
        .pf-size-hint { font-size: 11px; color: #bbb; margin-top: 5px; }
        .pf-size-warn { color: #f59e0b; font-weight: 600; }

        /* ===== 2. 다크모드 ===== */
        .btn-darkmode {
            background: transparent; border: 1.5px solid #e2dbcd;
            width: 42px; height: 42px; border-radius: 50%;
            cursor: pointer; font-size: 18px;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s; flex-shrink: 0;
        }
        .btn-darkmode:hover { border-color: #C5A86E; transform: scale(1.18) rotate(15deg); box-shadow: 0 4px 16px rgba(197,168,110,0.3); }

        /* ===================================================
           다크모드 — 따뜻한 팔레트 전면 재작성
           배경 계층:  #16130f(페이지) → #1e1a15(카드) → #252018(중첩)
           텍스트:     #e8ddd0(주) → #a09080(보조) → #6a5e52(약)
           골드 강조:  #C5A86E (브랜드 색 유지)
        =================================================== */

        body.dark-mode {
            background-color: #16130f !important;
            color: #e8ddd0 !important;
        }

        /* ── 헤더 / 네비 ── */
        body.dark-mode header {
            background-color: #1e1a15 !important;
            border-bottom: 1px solid #2e2820 !important;
        }
        body.dark-mode .luxury-gold-divider {
            opacity: 0.4 !important;
        }
        body.dark-mode nav ul li a { color: #a09080 !important; }
        body.dark-mode nav ul li a:hover,
        body.dark-mode nav ul li a.active { color: #e8ddd0 !important; }
        body.dark-mode .logo-area { color: #C5A86E !important; }
        body.dark-mode .btn-login-trigger {
            background: #2a2318 !important;
            color: #C5A86E !important;
            border: 1px solid #3a3025 !important;
        }
        body.dark-mode #mypageBtn {
            background: #2a2318 !important;
            color: #a09080 !important;
        }

        /* ── 페이지 뷰 전체 ── */
        body.dark-mode .page-view { background-color: #16130f !important; }
        body.dark-mode section,
        body.dark-mode .hero-container,
        body.dark-mode .about-container,
        body.dark-mode .services-container,
        body.dark-mode .qa-container,
        body.dark-mode .contact-container,
        body.dark-mode .programs-container,
        body.dark-mode .apply-container,
        body.dark-mode .section-cards {
            background-color: #16130f !important;
        }

        /* ── 텍스트 전역 ── */
        body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
        body.dark-mode h4, body.dark-mode h5 { color: #e8ddd0 !important; }
        body.dark-mode p { color: #a09080 !important; }
        body.dark-mode .brand-slogan,
        body.dark-mode .about-main-signal,
        body.dark-mode .services-header h2 { color: #e8ddd0 !important; }
        body.dark-mode .brand-description,
        body.dark-mode .about-sub-description,
        body.dark-mode .services-header p { color: #a09080 !important; }

        /* ── 홈 카드 4개 ── */
        body.dark-mode .card {
            background-color: #1e1a15 !important;
            border-color: #2e2820 !important;
            box-shadow: none !important;
        }
        body.dark-mode .card-title { color: #e8ddd0 !important; }
        body.dark-mode .card-desc { color: #a09080 !important; }
        body.dark-mode .card-category { color: #C5A86E !important; }

        /* ── 서비스 뷰 ── */
        body.dark-mode .service-main-card,
        body.dark-mode .services-main-card {
            background:
                linear-gradient(#1e1a14, #1e1a14) padding-box,
                linear-gradient(145deg,
                    rgba(212,168,75,0.4) 0%,
                    rgba(197,168,110,0.12) 40%,
                    rgba(197,168,110,0.12) 60%,
                    rgba(184,144,42,0.4) 100%
                ) border-box !important;
            border: 1px solid transparent !important;
            box-shadow: none !important;
        }
        body.dark-mode .service-main-card h3 { color: #e8ddd0 !important; }
        body.dark-mode .service-main-card p { color: #a09080 !important; }
        body.dark-mode .services-sub-title { color: #e8ddd0 !important; }
        body.dark-mode .studio-photo-box {
            background:
                linear-gradient(#1e1a14, #1e1a14) padding-box,
                linear-gradient(145deg,
                    rgba(212,168,75,0.4) 0%,
                    rgba(197,168,110,0.12) 40%,
                    rgba(197,168,110,0.12) 60%,
                    rgba(184,144,42,0.4) 100%
                ) border-box !important;
            border: 1px solid transparent !important;
        }
        body.dark-mode .support-list-card {
            background:
                linear-gradient(#1e1a14, #1e1a14) padding-box,
                linear-gradient(145deg,
                    rgba(212,168,75,0.4) 0%,
                    rgba(197,168,110,0.12) 40%,
                    rgba(197,168,110,0.12) 60%,
                    rgba(184,144,42,0.4) 100%
                ) border-box !important;
            border: 1px solid transparent !important;
            box-shadow: none !important;
        }
        body.dark-mode .support-list-card .info-text h4 { color: #e8ddd0 !important; }
        body.dark-mode .support-list-card .info-text p { color: #a09080 !important; }

        /* ── Q&A ── */
        body.dark-mode .qa-list { background: #1e1a15 !important; border-color: #2e2820 !important; }
        body.dark-mode .qa-item { background: transparent !important; border-bottom-color: #2e2820 !important; }
        body.dark-mode .qa-row:hover { background-color: #252018 !important; }
        body.dark-mode .qa-title { color: #e8ddd0 !important; }
        body.dark-mode .qa-name { color: #c8bdb0 !important; }
        body.dark-mode .qa-right { color: #6a5e52 !important; }
        body.dark-mode .qa-content-body {
            background-color: #252018 !important;
            border-color: #2e2820 !important;
            color: #c8bdb0 !important;
        }
        body.dark-mode .qa-write-box {
            background-color: #1e1a15 !important;
            border-color: #2e2820 !important;
        }
        body.dark-mode .qa-answer-box { background: #2a2318 !important; border-color: #3a3025 !important; }
        body.dark-mode .qa-admin-reply-form textarea {
            background: #252018 !important; border-color: #3a3025 !important; color: #e8ddd0 !important;
        }

        /* ── 문의 폼 (Contact) ── */
        body.dark-mode .contact-form-side {
            background-color: #1e1a15 !important;
            border-color: #2e2820 !important;
            box-shadow: none !important;
        }
        body.dark-mode .contact-form-side label { color: #a09080 !important; }
        body.dark-mode .contact-intro h1 { color: #C5A86E !important; }
        body.dark-mode .contact-intro h2 { color: #e8ddd0 !important; }
        body.dark-mode .contact-info-item .label { color: #6a5e52 !important; }
        body.dark-mode .contact-info-item .value { color: #c8bdb0 !important; }

        /* ── 입력 폼 공통 ── */
        body.dark-mode input[type="text"],
        body.dark-mode input[type="email"],
        body.dark-mode input[type="password"],
        body.dark-mode textarea,
        body.dark-mode select,
        body.dark-mode .form-control,
        body.dark-mode .apply-control,
        body.dark-mode .prog-ctrl,
        body.dark-mode .prog-panel-ctrl,
        body.dark-mode .notice-ctrl,
        body.dark-mode .admin-select,
        body.dark-mode .status-select,
        body.dark-mode .memo-input {
            background-color: #252018 !important;
            border-color: #3a3025 !important;
            color: #e8ddd0 !important;
        }
        body.dark-mode input::placeholder,
        body.dark-mode textarea::placeholder { color: #6a5e52 !important; }
        body.dark-mode .form-group label { color: #a09080 !important; }

        /* ── 프로그램 뷰 ── */
        body.dark-mode .programs-lock-banner {
            background: #1e1a15 !important;
            border-color: #3a3025 !important;
        }
        body.dark-mode .programs-lock-banner h3 { color: #e8ddd0 !important; }
        body.dark-mode .programs-lock-banner p { color: #a09080 !important; }
        body.dark-mode .prog-card {
            background-color: #1e1a15 !important;
            border-color: #2e2820 !important;
        }
        body.dark-mode .prog-card:hover { background-color: #252018 !important; }
        body.dark-mode .prog-card-title { color: #e8ddd0 !important; }
        body.dark-mode .prog-card-desc { color: #a09080 !important; }
        body.dark-mode .prog-card-body { border-bottom-color: #2e2820 !important; }
        body.dark-mode .prog-card-version { color: #6a5e52 !important; }
        body.dark-mode .prog-card-lock { background: rgba(22,19,15,0.92) !important; }
        body.dark-mode .prog-detail-box {
            background-color: #1e1a15 !important;
            border: 1px solid #2e2820 !important;
        }
        body.dark-mode .prog-detail-category { color: #C5A86E !important; }
        body.dark-mode .prog-detail-title { color: #e8ddd0 !important; }
        body.dark-mode .prog-detail-version { color: #6a5e52 !important; }
        body.dark-mode .meta-label { color: #6a5e52 !important; }
        body.dark-mode .meta-val { color: #c8bdb0 !important; }
        body.dark-mode .prog-detail-desc { color: #a09080 !important; }
        body.dark-mode .prog-detail-divider { opacity: 0.3 !important; }

        /* ── 지원 폼 ── */
        body.dark-mode .apply-form-card {
            background-color: #1e1a15 !important;
            border-color: #2e2820 !important;
            box-shadow: none !important;
        }
        body.dark-mode .apply-group label { color: #a09080 !important; }
        body.dark-mode .apply-agree-box { color: #a09080 !important; }

        /* ── 로그인 / 회원가입 모달 ── */
        body.dark-mode .login-box,
        body.dark-mode .signup-box {
            background-color: #1e1a15 !important;
            border-color: #2e2820 !important;
        }
        body.dark-mode .login-box h3,
        body.dark-mode .signup-box h3 { color: #e8ddd0 !important; }
        body.dark-mode .login-group label,
        body.dark-mode .signup-group label { color: #a09080 !important; }
        body.dark-mode .login-footer-links { color: #6a5e52 !important; border-top-color: #2e2820 !important; }
        body.dark-mode .btn-login-cancel,
        body.dark-mode .btn-signup-cancel { background: #2a2318 !important; color: #a09080 !important; }

        /* ── 마이페이지 ── */
        body.dark-mode #mypage-modal { background: rgba(0,0,0,0.75) !important; }
        body.dark-mode .mypage-box {
            background-color: #1e1a15 !important;
            border-color: #2e2820 !important;
        }
        body.dark-mode .mp-header { background: #252018 !important; border-bottom-color: #2e2820 !important; }
        body.dark-mode .mp-name { color: #e8ddd0 !important; }
        body.dark-mode .mp-id { color: #6a5e52 !important; }
        body.dark-mode .mp-tabs { border-bottom-color: #2e2820 !important; }
        body.dark-mode .mp-tab-btn { color: #6a5e52 !!important; }
        body.dark-mode .mp-info-row { border-bottom-color: #2e2820 !important; }
        body.dark-mode .mp-info-label { color: #6a5e52 !important; }
        body.dark-mode .mp-info-val { color: #c8bdb0 !important; }
        body.dark-mode .mp-download-status { background: #252018 !important; border-color: #2e2820 !important; }

        /* ── 관리자 패널 ── */
        body.dark-mode .admin-panel-view { background: #16130f !important; }
        body.dark-mode .admin-panel-header { background: #1e1a15 !important; border-bottom: 1px solid #2e2820 !important; }
        body.dark-mode .admin-panel-body { background: transparent !important; }
        body.dark-mode .admin-tabs { border-bottom-color: #2e2820 !important; }
        body.dark-mode .admin-tab-btn { color: #6a5e52 !important; }
        body.dark-mode .admin-tab-btn.active { color: #C5A86E !important; border-bottom-color: #C5A86E !important; }
        body.dark-mode .stat-card { background: #1e1a15 !important; border-left-color: #C5A86E !important; }
        body.dark-mode .stat-label { color: #6a5e52 !important; }
        body.dark-mode .applicant-table,
        body.dark-mode .member-table { background: #1e1a15 !important; }
        body.dark-mode .applicant-table th,
        body.dark-mode .member-table th { background: #252018 !important; color: #a09080 !important; border-bottom-color: #2e2820 !important; }
        body.dark-mode .applicant-table td,
        body.dark-mode .member-table td { color: #c8bdb0 !important; border-bottom-color: #2e2820 !important; }
        body.dark-mode .applicant-table tr:hover td,
        body.dark-mode .member-table tr:hover td { background: #252018 !important; }
        body.dark-mode .admin-empty { background: #1e1a15 !important; color: #6a5e52 !important; }
        body.dark-mode .prog-upload-card,
        body.dark-mode .notice-admin-form { background: #1e1a15 !important; border-color: #2e2820 !important; }
        body.dark-mode .prog-upload-card h4,
        body.dark-mode .notice-admin-form h4 { color: #e8ddd0 !important; border-bottom-color: #2e2820 !important; }
        body.dark-mode .prog-admin-row { background: #1e1a15 !important; border-color: #2e2820 !important; }
        body.dark-mode .prog-admin-icon { background: #252018 !important; }
        body.dark-mode .pai-title { color: #e8ddd0 !important; }
        body.dark-mode .pai-meta { color: #6a5e52 !important; }

        /* ── 푸터 ── */
        body.dark-mode .site-footer { background: #0e0c09 !important; border-top-color: #2e2820 !important; color: #6a5e52 !important; }
        body.dark-mode .footer-brand { color: #C5A86E !important; }
        body.dark-mode .footer-company-details,
        body.dark-mode .footer-desc { color: #6a5e52 !important; }
        body.dark-mode .footer-company-details span strong { color: #a09080 !important; }
        body.dark-mode .footer-company-details .divider { background-color: #2e2820 !important; }
        body.dark-mode .footer-nav-group h5 { color: #c8bdb0 !important; }
        body.dark-mode .footer-nav-group a { color: #6a5e52 !important; }
        body.dark-mode .footer-nav-group a:hover { color: #C5A86E !important; }
        body.dark-mode .footer-divider-line { background-color: #2e2820 !important; }
        body.dark-mode .footer-bottom { color: #4a3e34 !important; }

        /* ── 홈 히어로 ── */
        body.dark-mode .hero-container { background-color: #16130f !important; }
        body.dark-mode .hero-bg-wrapper { background-color: #1e1a15 !important; }
        body.dark-mode .hero-bg-wrapper .base-model-img { filter: brightness(0.92) !important; }
        body.dark-mode .brand-title { color: #C5A86E !important; }
        body.dark-mode .brand-slogan { color: #e8ddd0 !important; }
        body.dark-mode .brand-description { color: #a09080 !important; }
        body.dark-mode .btn-view-more { color: #C5A86E !important; border-color: #C5A86E !important; border-radius: 30px !important; }
        body.dark-mode .btn-view-more:hover { background: #B8902A !important; color: #fff !important; border-color: #B8902A !important; }
        body.dark-mode .btn-cta-primary { background: #2a2318 !important; color: #C5A86E !important; border-color: #3a3025 !important; }

        /* ── 홈 카드 섹션 배경 자연스럽게 ── */
        body.dark-mode .section-cards { background-color: #16130f !important; }
        body.dark-mode .card {
            background:
                linear-gradient(#1e1a14, #1e1a14) padding-box,
                linear-gradient(145deg,
                    rgba(212,168,75,0.45) 0%,
                    rgba(197,168,110,0.15) 40%,
                    rgba(197,168,110,0.15) 60%,
                    rgba(184,144,42,0.45) 100%
                ) border-box !important;
            border: 1px solid transparent !important;
            box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important;
        }
        body.dark-mode .card:hover {
            background:
                linear-gradient(#1e1a14, #1e1a14) padding-box,
                linear-gradient(145deg,
                    rgba(212,168,75,0.8) 0%,
                    rgba(244,212,130,0.4) 40%,
                    rgba(244,212,130,0.4) 60%,
                    rgba(184,144,42,0.8) 100%
                ) border-box !important;
            box-shadow: 0 16px 40px rgba(212,168,75,0.15) !important;
        }
        body.dark-mode .card { background-color: #1e1a15 !important; border-color: #2e2820 !important; box-shadow: none !important; }
        body.dark-mode .card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.4) !important; border-color: #C5A86E !important; }
        body.dark-mode .card-category { color: #C5A86E !important; }
        body.dark-mode .card-title { color: #e8ddd0 !important; }
        body.dark-mode .card-desc { color: #a09080 !important; }
        body.dark-mode .card-arrow { background: #252018 !important; color: #C5A86E !important; }
        body.dark-mode .card-img-box { opacity: 0.55 !important; }

        /* ── About 지도 ── */
        body.dark-mode .about-container { background-color: #16130f !important; }
        body.dark-mode #map-container { background-color: #1e1a15 !important; border-color: #3a3025 !important; box-shadow: none !important; }

        /* ── 각종 텍스트 보조 ── */
        body.dark-mode .sub-tag { color: #C5A86E !important; }
        body.dark-mode .contact-info-list { border-top-color: #2e2820 !important; }
        body.dark-mode .qa-header h2 { color: #e8ddd0 !important; }
        body.dark-mode .qa-header p { color: #a09080 !important; }
        body.dark-mode .qa-header .sub-tag { color: #C5A86E !important; }
        body.dark-mode .qa-action-bar .btn-write-qa { background: transparent !important; border-color: #C5A86E !important; color: #C5A86E !important; }
        body.dark-mode .qa-action-bar .btn-write-qa:hover { background: #C5A86E !important; color: #1a1a1a !important; border-color: #C5A86E !important; }
        body.dark-mode .qa-status { background: #252018 !important; color: #a09080 !important; }
        body.dark-mode .checkbox-label { color: #a09080 !important; }
        body.dark-mode .form-group-row label { color: #a09080 !important; }
        body.dark-mode .btn-qa-cancel { background: #252018 !important; color: #a09080 !important; }
        body.dark-mode .programs-header h2 { color: #e8ddd0 !important; }
        body.dark-mode .programs-header p { color: #a09080 !important; }
        body.dark-mode .programs-header .sub-tag { color: #C5A86E !important; }

        /* ── 이미지 모달 ── */
        body.dark-mode .img-modal-box { background: #1e1a15 !important; border-color: #3a3025 !important; }
        body.dark-mode .img-modal-box h4 { color: #e8ddd0 !important; }
        body.dark-mode .img-tab-btn { color: #6a5e52 !important; background: transparent !important; }
        body.dark-mode .img-tab-btn.active-tab { color: #C5A86E !important; border-bottom-color: #C5A86E !important; }
        body.dark-mode .btn-img-cancel { background: #252018 !important; color: #a09080 !important; }
        body.dark-mode .drop-zone { background: #252018 !important; border-color: #3a3025 !important; }
        body.dark-mode .drop-zone .dz-text { color: #6a5e52 !important; }

        /* ── 공지 모달 ── */
        body.dark-mode .notice-box { background: #1e1a15 !important; }
        body.dark-mode .notice-body { background: #1e1a15 !important; }
        body.dark-mode .notice-title-disp { color: #e8ddd0 !important; }
        body.dark-mode .notice-content-disp { color: #a09080 !important; }
        body.dark-mode .notice-footer { border-top-color: #2e2820 !important; }
        body.dark-mode .notice-footer label { color: #6a5e52 !important; }

        /* ── 다크모드 버튼 ── */
        body.dark-mode .btn-darkmode { border-color: #3a3025 !important; color: #a09080 !important; background: transparent !important; }

        /* ===== 3. 다운로드 카운터 ===== */
        .dl-count-badge {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 11.5px; color: #aaa; margin-top: 4px;
        }
        .dl-count-badge span { color: #C5A86E; font-weight: 700; }

        /* ===== 4. 공지사항 팝업 ===== */
        #notice-modal {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,0.65); z-index: 10050;
            align-items: center; justify-content: center;
            backdrop-filter: blur(4px);
        }
        .notice-box {
            background: #fff; width: 500px; max-width: 92vw;
            border-radius: 14px; overflow: hidden;
            box-shadow: 0 24px 64px rgba(0,0,0,0.25);
        }
        .notice-header {
            background: linear-gradient(135deg, #1a1a1a, #2d2218);
            padding: 20px 28px; display: flex; align-items: center; justify-content: space-between;
        }
        .notice-header h3 { font-family:'Cormorant Garamond',serif; font-size:20px; color:#C5A86E; letter-spacing:1px; }
        .notice-header .notice-close { background:transparent; border:none; color:#666; font-size:20px; cursor:pointer; }
        .notice-header .notice-close:hover { color:#fff; }
        .notice-body { padding: 28px; }
        .notice-title-disp { font-family:'Noto Serif KR',serif; font-size:18px; color:#222; font-weight:400; margin-bottom:14px; }
        .notice-content-disp { font-size:14.5px; color:#444; line-height:1.85; white-space:pre-wrap; word-break:keep-all; }
        .notice-footer { padding: 16px 28px; border-top:1px solid #f5f0e8; display:flex; align-items:center; justify-content:space-between; }
        .notice-footer label { font-size:13px; color:#888; cursor:pointer; display:flex; align-items:center; gap:6px; }
        .notice-footer label input { accent-color:#C5A86E; }
        .btn-notice-close { padding:10px 28px; background:var(--gold-metal); color:#fff; border:none; border-radius:6px; font-size:13.5px; font-weight:600; cursor:pointer; }

        /* 관리자 공지 편집 폼 */
        .notice-admin-form { background:#fff; border:1px solid rgba(197,168,110,0.18); padding:24px; margin-bottom:20px; border-radius:8px; }
        .notice-admin-form h4 { font-family:'Noto Serif KR',serif; font-size:16px; color:#222; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid #f0e8d0; }
        .notice-toggle-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
        .notice-toggle-row label { font-size:13.5px; color:#444; font-weight:600; display:flex; align-items:center; gap:8px; cursor:pointer; }
        .notice-toggle-row input[type="checkbox"] { width:18px; height:18px; accent-color:#C5A86E; cursor:pointer; }
        .notice-ctrl { width:100%; padding:10px 13px; border:1px solid #e2dbcd; background:#fdfdfb; border-radius:5px; font-size:13.5px; color:#333; outline:none; font-family:inherit; transition:border 0.2s; margin-bottom:10px; }
        .notice-ctrl:focus { border-color:#C5A86E; }
        textarea.notice-ctrl { min-height:100px; resize:vertical; line-height:1.6; }
        .btn-notice-save { padding:10px 24px; background:var(--gold-metal); color:#fff; border:none; border-radius:5px; font-size:13px; font-weight:600; cursor:pointer; }

        /* ===== 5. 지원자 알림 뱃지 ===== */
        .notif-badge {
            display: inline-flex; align-items: center; justify-content: center;
            width: 18px; height: 18px; background: #ef4444;
            border-radius: 50%; font-size: 11px; color: #fff;
            font-weight: 700; margin-left: 4px; vertical-align: middle;
            animation: badgePulse 1.5s ease infinite;
        }
        @keyframes badgePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

        /* ===== 6. Q&A 관리자 답변 ===== */
        .qa-answer-by {
            display: inline-block;
            margin-left: 8px;
            font-size: 11px;
            font-weight: 400;
            color: #B8902A;
            opacity: 0.85;
            font-family: 'Cormorant Garamond', serif;
            letter-spacing: 0.3px;
        }
        .qa-answer-box {
            margin-top: 12px; padding: 16px 20px;
            background: linear-gradient(135deg,#faf7f0,#fdf8ee);
            border-left: 3px solid #C5A86E; border-radius: 0 6px 6px 0;
        }
        .qa-answer-box .qa-answer-label {
            font-size: 11.5px; color: #C5A86E; font-weight: 700;
            letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px;
        }
        .qa-answer-box .qa-answer-text { font-size:14px; color:#333; line-height:1.75; white-space:pre-wrap; }
        .qa-answer-box .qa-answer-date { font-size:11.5px; color:#bbb; margin-top:6px; }

        .qa-admin-reply-form { margin-top:14px; display:none; }
        .qa-admin-reply-form textarea { width:100%; padding:10px 13px; border:1px solid #e2dbcd; border-radius:5px; font-size:13.5px; color:#333; outline:none; font-family:inherit; resize:vertical; min-height:80px; line-height:1.6; }
        .qa-admin-reply-form textarea:focus { border-color:#C5A86E; }
        .qa-admin-reply-btns { display:flex; gap:8px; margin-top:8px; }
        .btn-qa-reply-submit { padding:8px 20px; background:var(--gold-metal); color:#fff; border:none; border-radius:4px; font-size:13px; font-weight:600; cursor:pointer; }
        .btn-qa-reply-cancel { padding:8px 16px; background:#f5f5f3; color:#666; border:none; border-radius:4px; font-size:13px; cursor:pointer; }
        .btn-qa-admin-reply {
            display: none;
            margin-top: 12px;
            padding: 7px 18px;
            background: var(--gold-metal);
            border: none;
            color: #fff;
            border-radius: 4px;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }
        .btn-qa-admin-reply:hover { background: #9a7820; }
        body.admin-auth .btn-qa-admin-reply { display: inline-block; }
        /* ===== 마이페이지 ===== */
        #mypage-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:10015; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
        .mypage-box { background:#fff; width:680px; max-width:96vw; max-height:92vh; overflow:hidden; box-shadow:0 28px 70px rgba(0,0,0,0.25); border-radius:18px; display:flex; flex-direction:column; }
        .mypage-header { background:linear-gradient(135deg,#111,#2d2218); padding:22px 24px 0; border-radius:18px 18px 0 0; flex-shrink:0; position:relative; }
        .mypage-header .mp-close { position:absolute; top:14px; right:18px; background:transparent; border:none; color:#666; font-size:20px; cursor:pointer; }
        .mypage-header .mp-close:hover { color:#fff; }
        .mp-header-top { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
        .mypage-avatar { width:52px; height:52px; border-radius:50%; background:var(--gold-metal); display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; font-weight:700; font-family:'Cormorant Garamond',serif; flex-shrink:0; }
        .mp-header-info { flex:1; }
        .mypage-name { font-family:'Noto Serif KR',serif; font-size:17px; color:#fff; font-weight:400; }
        .mypage-id-txt { font-size:12px; color:#777; margin-top:2px; }
        .grade-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700; margin-top:6px; }
        .grade-basic  { background:rgba(255,255,255,0.08); color:#888; border:1px solid #333; }
        .grade-member { background:rgba(197,168,110,0.15); color:#C5A86E; border:1px solid rgba(197,168,110,0.4); }
        .grade-partner{ background:rgba(100,180,255,0.12); color:#7ac4ff; border:1px solid rgba(100,180,255,0.35); }
        .mp-tabs { display:flex; border-bottom:1px solid #2a2a2a; }
        .mp-tab-btn { flex:1; padding:11px 8px; border:none; background:transparent; color:#666; font-size:13px; font-weight:500; cursor:pointer; border-bottom:2px solid transparent; transition:all 0.2s; }
        .mp-tab-btn:hover { color:#C5A86E; }
        .mp-tab-btn.active { color:#C5A86E; border-bottom-color:#C5A86E; font-weight:700; }
        .mypage-body { flex:1; overflow-y:auto; }
        .mp-tab-content { display:none; padding:22px 24px 26px; }
        .mp-tab-content.active { display:block; }
        .mp-section { margin-bottom:22px; }
        .mp-section-title { font-size:11px; color:#aaa; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #f5f0e8; }
        .mp-info-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #faf7f2; }
        .mp-info-row:last-child { border-bottom:none; }
        .mp-info-label { font-size:13.5px; color:#888; }
        .mp-info-val { font-size:13.5px; color:#222; font-weight:500; }
        .mp-edit-form { display:none; margin-top:14px; background:#faf7f2; border-radius:10px; padding:16px; }
        .mp-edit-form.open { display:block; }
        .mp-edit-group { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
        .mp-edit-group label { font-size:11px; color:#888; font-weight:600; text-transform:uppercase; }
        .mp-edit-input { padding:9px 12px; border:1px solid #e2dbcd; border-radius:6px; font-size:13.5px; color:#333; outline:none; font-family:inherit; background:#fff; transition:border 0.2s; }
        .mp-edit-input:focus { border-color:#C5A86E; }
        .mp-edit-btns { display:flex; gap:8px; margin-top:4px; }
        .btn-mp-edit-save { padding:9px 22px; background:var(--gold-metal); color:#fff; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; }
        .btn-mp-edit-cancel { padding:9px 18px; background:#f0ede8; color:#666; border:none; border-radius:6px; font-size:13px; cursor:pointer; }
        .btn-mp-edit-open { padding:6px 14px; background:transparent; border:1px solid #e2dbcd; color:#888; border-radius:6px; font-size:12px; cursor:pointer; transition:all 0.2s; }
        .btn-mp-edit-open:hover { border-color:#C5A86E; color:#C5A86E; }
        .mp-pw-form { display:none; margin-top:14px; background:#faf7f2; border-radius:10px; padding:16px; }
        .mp-pw-form.open { display:block; }
        .mp-download-status { padding:16px 18px; border-radius:10px; display:flex; align-items:center; gap:14px; }
        .mp-dl-locked  { background:#faf7f2; border:1px solid #f0ebe0; }
        .mp-dl-unlocked{ background:#f0faf4; border:1px solid #b7dfc7; }
        .mp-dl-icon { font-size:26px; }
        .mp-dl-text .dl-title { font-size:14px; font-weight:600; color:#222; margin-bottom:4px; }
        .mp-dl-text .dl-desc  { font-size:13px; color:#888; line-height:1.5; word-break:keep-all; }
        .btn-mp-upgrade { width:100%; margin-top:12px; padding:12px; background:var(--gold-metal); color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.2s; }
        .btn-mp-upgrade:hover { opacity:0.9; }
        .btn-mp-upgrade:disabled { background:#e0ddd6; color:#aaa; cursor:not-allowed; }
        .mp-activity-card { border:1px solid #f0ebe0; border-radius:10px; padding:14px 16px; margin-bottom:10px; background:#fff; }
        .mp-activity-card .ac-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
        .mp-activity-card .ac-title { font-size:14px; font-weight:600; color:#222; }
        .mp-activity-card .ac-date { font-size:12px; color:#bbb; }
        .mp-activity-card .ac-desc { font-size:13px; color:#888; line-height:1.5; }
        .mp-activity-card .ac-status { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; margin-top:8px; }
        .ac-new     { background:#fef3c7; color:#b45309; }
        .ac-review  { background:#dbeafe; color:#1d4ed8; }
        .ac-pass    { background:#d1fae5; color:#065f46; }
        .ac-fail    { background:#fee2e2; color:#991b1b; }
        .ac-answered{ background:#ede9fe; color:#5b21b6; }
        .ac-waiting { background:#f3f4f6; color:#6b7280; }
        .mp-empty-state { text-align:center; padding:36px 20px; color:#bbb; font-size:14px; }
        .mp-empty-state .empty-icon { font-size:36px; margin-bottom:10px; display:block; }
        .btn-mp-logout { width:100%; padding:12px; background:#f5f5f3; border:none; border-radius:8px; font-size:14px; color:#666; cursor:pointer; font-weight:500; transition:background 0.2s; margin-top:8px; }
        .btn-mp-logout:hover { background:#eee; }
        .grade-select { padding:4px 8px; border:1px solid #e2dbcd; border-radius:4px; font-size:12.5px; background:#fff; cursor:pointer; outline:none; }
        .grade-select:focus { border-color:#C5A86E; }
        .gtag-basic  { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; background:#f5f5f5; color:#999; }
        .gtag-member { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; background:#fef3c7; color:#b45309; }
        .gtag-partner{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; background:#dbeafe; color:#1d4ed8; }
        .gtag-admin  { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; background:#fce7f3; color:#9d174d; }

        /* ===== 관리자 인라인 텍스트 스타일 팝업 툴바 ===== */
        #admin-text-toolbar {
            display: none;
            position: fixed;
            z-index: 99999;
            background: #111;
            border: 1px solid #333;
            border-radius: 8px;
            padding: 6px 10px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.5);
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
            pointer-events: auto;
        }
        #admin-text-toolbar::before {
            content: '';
            position: absolute;
            top: -6px; left: 50%; transform: translateX(-50%);
            border: 6px solid transparent;
            border-bottom-color: #333;
            border-top: none;
        }
        .tb-select {
            padding: 3px 6px; background: #1e1e1e; border: 1px solid #333;
            color: #eee; border-radius: 4px; font-size: 12px; cursor: pointer;
            width: 130px; height: 26px;
        }
        .tb-select:focus { outline: none; border-color: #C5A86E; }
        .tb-size-ctrl { display: flex; align-items: center; gap: 3px; }
        .tb-size-ctrl button {
            width: 22px; height: 22px; background: #1e1e1e; border: 1px solid #333;
            color: #bbb; border-radius: 3px; cursor: pointer; font-size: 13px;
            font-weight: 700; display: flex; align-items: center; justify-content: center;
            transition: all 0.15s;
        }
        .tb-size-ctrl button:hover { border-color: #C5A86E; color: #C5A86E; }
        .tb-size-val {
            min-width: 32px; text-align: center; font-size: 12px; color: #ddd;
            background: #1e1e1e; border: 1px solid #333; border-radius: 3px;
            height: 22px; display: flex; align-items: center; justify-content: center;
            font-weight: 600;
        }
        .tb-fw-group { display: flex; gap: 2px; }
        .tb-fw-btn {
            padding: 0 8px; height: 22px; background: #1e1e1e; border: 1px solid #333;
            color: #888; border-radius: 3px; cursor: pointer; font-size: 11px;
            transition: all 0.15s; display: flex; align-items: center;
        }
        .tb-fw-btn:hover, .tb-fw-btn.on { border-color: #C5A86E; color: #C5A86E; background: #251f10; }
        .tb-fw-btn.on { font-weight: 700; }
        .tb-sep { width: 1px; height: 18px; background: #333; flex-shrink: 0; margin: 0 2px; }
        .tb-apply-btn {
            padding: 0 12px; height: 26px;
            background: var(--gold-metal);
            color: #fff; border: none; border-radius: 4px;
            cursor: pointer; font-size: 12px; font-weight: 700;
            transition: all 0.15s; white-space: nowrap;
        }
        .tb-apply-btn:hover { opacity: 0.88; transform: scale(1.03); }
        .tb-close-btn {
            width: 20px; height: 20px; background: transparent; border: none;
            color: #555; cursor: pointer; font-size: 14px; border-radius: 3px;
            display: flex; align-items: center; justify-content: center;
            transition: color 0.15s;
        }
        .tb-close-btn:hover { color: #f87171; }

        /* 🛠️ 관리자 모드 가시화 스타일 */
        body.admin-mode .editable { background-color: rgba(197, 168, 110, 0.15); border: 1px dashed #C5A86E; }
        .admin-img-changer { display: none; position: absolute; top: 12px; right: 12px; z-index: 10; background: rgba(197, 168, 110, 0.75); color: #fff; border: none; padding: 6px 12px; font-size: 11px; border-radius: 4px; cursor: pointer; transition: background 0.2s; }
        .admin-img-changer:hover { background: rgba(197, 168, 110, 0.9); }
        body.admin-mode .admin-img-changer { display: block; }

        /* 반응형 디자인 대응 */
        @media (max-width: 1200px) {
            header { padding: 0 5%; height: 72px; }
            .hero-container { flex-direction: column; height: auto; padding: 60px 5%; justify-content: center; }
            .hero-content { max-width: 100%; align-items: center; text-align: center; margin-bottom: 40px; }
            .hero-image-area { position: relative; right: auto; top: auto; transform: none; width: 100%; max-width: 420px; display: flex; justify-content: center; padding-right: 0; }
            .section-cards { grid-template-columns: repeat(2, 1fr); padding: 50px 5% 60px 5%; }
            .about-container { flex-direction: column; gap: 50px; padding: 60px 5%; }
            .about-text-side { width: 100%; text-align: center; align-items: center; }
            .about-map-side { width: 100%; }
            #map-container { height: 550px; }
            .what-we-do-grid, .studio-gallery, .support-features-grid { grid-template-columns: 1fr; }
            .footer-container { flex-direction: column; gap: 35px; }
            .footer-info-block, .footer-nav-block { flex: 1 1 100%; width: 100%; }
            .footer-nav-block { justify-content: flex-start; gap: 60px; }
            .contact-wrapper { grid-template-columns: 1fr; gap: 40px; }
            .contact-info-side { gap: 30px; }
        }
        @media (max-width: 840px) {

        @media (max-width: 640px) {
            .brand-slogan { font-size: 38px; }
            .section-cards { grid-template-columns: 1fr; }
            #map-container { height: 450px; }
            .footer-company-details { flex-direction: column; align-items: flex-start; }
            .footer-company-details .divider { display: none; }
            .footer-company-details span { display: block; margin-bottom: 5px; word-break: keep-all; }
            .footer-company-details span strong { white-space: nowrap; }
            .footer-nav-block { gap: 40px; }
            .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
            .form-group-row { grid-template-columns: 1fr; gap: 0; }
            .login-box, .signup-box { width: 92%; padding: 25px 20px; }
        }
        } /* ← 닫히지 않았던 @media (max-width: 840px) 블록 종료. 이 아래 규칙들이 전체 화면폭에 정상 적용되도록 복구 */

/* ═══════════════════════════════════════════════════
   DS COMPANY — 추가 스타일 (최종)
═══════════════════════════════════════════════════ */

/* 토스트 */
.ds-toast { position:fixed; bottom:max(32px,calc(env(safe-area-inset-bottom)+16px)); left:50%; transform:translateX(-50%) translateY(20px); padding:12px 24px; border-radius:8px; font-size:14px; font-family:'Noto Sans KR',sans-serif; font-weight:500; color:#fff; z-index:99999; opacity:0; transition:opacity .3s ease,transform .3s ease; pointer-events:none; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.18); }
.ds-toast.ds-toast-show { opacity:1; transform:translateX(-50%) translateY(0); }
.ds-toast-success { background:#2d7a4f; }
.ds-toast-error   { background:#b53232; }
.ds-toast-info    { background:#2a5a8c; }

/* 로딩 오버레이 */

/* 백업 바 */
.backup-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 18px; background:#faf7f0; border:1px solid rgba(197,168,110,.25); border-radius:10px; margin-bottom:20px; }
.btn-backup-export,.btn-backup-import { padding:9px 18px; border-radius:7px; font-size:13px; font-weight:500; cursor:pointer; transition:opacity .2s; white-space:nowrap; font-family:'Noto Sans KR',sans-serif; }
.btn-backup-export { background:#B8902A; color:#fff; border:none; }
.btn-backup-import { background:#fff; color:#333; border:1px solid rgba(197,168,110,.4); display:inline-flex; align-items:center; }
.btn-backup-export:hover,.btn-backup-import:hover { opacity:.82; }
.backup-hint { font-size:12px; color:#888; margin-left:auto; }

/* 차트 */
.admin-chart-area { display:none; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.chart-block { flex:1; min-width:220px; background:#faf7f0; border:1px solid rgba(197,168,110,.2); border-radius:10px; padding:16px 18px; }
.chart-title { font-size:12px; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; }
.chart-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.chart-bar-label { font-size:12px; color:#555; min-width:46px; }
.chart-bar-track { flex:1; height:7px; background:rgba(197,168,110,.12); border-radius:4px; overflow:hidden; }
.chart-bar-fill { height:100%; border-radius:4px; transition:width .5s ease; }
.chart-bar-count { font-size:12px; color:#888; min-width:24px; text-align:right; }
.chart-total { font-size:11px; color:#bbb; text-align:right; margin-top:8px; border-top:1px solid rgba(197,168,110,.15); padding-top:6px; }

/* 프로그램 검색 — 스타일 정의는 파일 끝(미디어쿼리 바깥)에 있음 */

/* 활동 로그 */
.log-action-badge { display:inline-block; padding:2px 9px; border-radius:4px; background:rgba(197,168,110,.13); color:#7a5c10; font-size:12px; font-weight:500; }
.log-filter-bar { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.log-filter-select { padding:9px 12px; border-radius:7px; font-size:13px; border:1px solid rgba(197,168,110,.35); background:#fff; color:#333; cursor:pointer; outline:none; font-family:'Noto Sans KR',sans-serif; min-width:130px; }
.log-filter-select:focus { border-color:#C5A86E; }

/* 정렬 헤더 */
.sortable-th { cursor:pointer; user-select:none; white-space:nowrap; }
.sortable-th:hover { color:#C5A86E; }
.sort-icon { font-size:11px; color:#aaa; margin-left:3px; }

/* PW초기화 버튼 */
.btn-pw-reset { padding:4px 9px; background:none; border:1px solid rgba(197,168,110,.4); border-radius:4px; cursor:pointer; font-size:13px; transition:all .18s; }
.btn-pw-reset:hover { background:rgba(197,168,110,.15); }

/* 탈퇴 버튼 */
.btn-withdraw { padding:9px 20px; background:none; border:1px solid #d9534f; border-radius:7px; color:#d9534f; font-size:13px; font-weight:500; cursor:pointer; transition:all .18s; font-family:'Noto Sans KR',sans-serif; }
.btn-withdraw:hover { background:#d9534f; color:#fff; }

/* 개인정보/약관 페이지 */
.legal-wrap { min-height:100vh; padding:80px 20px 60px; background:#FCFAF6; display:flex; justify-content:center; }
.legal-inner { max-width:720px; width:100%; }
.legal-h1 { font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:600; color:#1a1a1a; margin-bottom:6px; letter-spacing:1px; }
.legal-date { font-size:13px; color:#aaa; margin-bottom:36px; }
.legal-body h2 { font-size:15px; font-weight:600; color:#2c2c2c; margin:28px 0 10px; border-left:3px solid #C5A86E; padding-left:10px; }
.legal-body p { font-size:14px; line-height:1.8; color:#444; margin-bottom:12px; }
.legal-body ul { padding-left:20px; margin-bottom:12px; }
.legal-body ul li { font-size:14px; line-height:1.8; color:#444; margin-bottom:4px; }
.btn-legal-back { margin-top:40px; padding:10px 24px; background:none; border:1px solid rgba(197,168,110,.5); border-radius:6px; color:#888; font-size:13px; cursor:pointer; transition:all .2s; font-family:'Noto Sans KR',sans-serif; }
.btn-legal-back:hover { color:#C5A86E; border-color:#C5A86E; }

/* 햄버거 */
.hamburger-btn { display:none !important; flex-direction:column; justify-content:space-between; width:28px; height:20px; background:none; border:none; cursor:pointer; padding:0; z-index:1001; position:relative; flex-shrink:0; }
.hamburger-btn span { display:block; width:100%; height:2px; background:#C5A86E; border-radius:2px; transition:all .3s ease; transform-origin:center; }
.hamburger-btn.active span:nth-child(1) { transform:translateY(9px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity:0; }
.hamburger-btn.active span:nth-child(3) { transform:translateY(-9px) rotate(-45deg); }
.nav-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:999; }
/* 메뉴 열렸을 때만 헤더(슬라이드 nav 포함)를 오버레이(999) 위로 올려 항목이 탭되게 함 */
body.mobile-nav-open header { z-index: 1001 !important; }
.nav-overlay.active { display:block; }

/* safe-area */
.site-header { padding-top:max(0px,env(safe-area-inset-top)); }
/* #main-nav 하단 safe-area 패딩은 모바일 슬라이드 메뉴 전용 → 아래 @media (max-width:768px)에서 적용. 데스크탑에선 nav가 헤더와 세로 중앙정렬되어야 하므로 여기서 제거함 */

/* 다크모드 추가 */
body.dark-mode .backup-bar { background:#1e1e1e; }
body.dark-mode .btn-backup-import { background:#2a2a2a; color:#ccc; }
body.dark-mode .legal-wrap { background:#111; }
body.dark-mode .legal-body p,body.dark-mode .legal-body li { color:#bbb; }
body.dark-mode .chart-block { background:#1a1a1a; border-color:rgba(197,168,110,.15); }
body.dark-mode .log-filter-select { background:#2a2a2a; color:#ddd; border-color:rgba(197,168,110,.3); }

/* 모바일 */
@media (max-width:480px) {
    .btn-login-submit,.btn-signup-submit { width:100%; }
    .btn-backup-export,.btn-backup-import { width:100%; justify-content:center; }
    .pager-btn { padding:7px 16px; font-size:11px; }
    .pager-info { font-size:11px; }
    .prog-cat-btns { gap:6px; justify-content:flex-start; }
    .cat-btn { padding:8px 16px !important; font-size:10.5px !important; letter-spacing:0.12em; }
    .search-input-wrap { padding: 0 14px 0 40px; }
    .search-input-wrap::before { left: 14px; width: 14px; height: 14px; }
    .prog-search-input, .qa-search-input { padding: 12px 0; font-size: 12px; }
    .btn-write-qa { padding: 10px 20px; font-size: 11px; }
}

        /* ===== 데스크탑 헤더 네비 재정의 ===== */
        @media (min-width: 769px) {
            #main-nav {
                position: static !important;
                width: auto !important;
                background: transparent !important;
                padding-top: 0 !important;
                box-shadow: none !important;
                overflow: visible !important;
                right: auto !important;
                transition: none !important;
            }
            #main-nav ul {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 4px !important;
                padding: 0 !important;
                list-style: none !important;
                margin: 0 !important;
            }
            #main-nav ul li { width: auto !important; }
            #main-nav ul li a.nav-item {
                align-items: center !important;
                justify-content: center !important;
                min-width: 132px !important;   /* 메뉴 버튼 폭 통일 (가장 긴 Partnership 기준) */
                padding: 10px 20px !important;
                font-size: 15px !important;
                font-family: 'Noto Sans KR', sans-serif !important;
                font-weight: 600 !important;
                color: #2a2a2a !important;
                letter-spacing: 0.4px !important;
                text-decoration: none !important;
                border-bottom: none !important;
                border-radius: 8px !important;
                transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
                transform: translateY(0) scale(1) !important;
                transform-origin: center !important;
                white-space: nowrap !important;
                background: transparent !important;
            }
            #main-nav ul li a.nav-item:hover {
                color: #B8902A !important;
                background: rgba(197,168,110,0.12) !important;
                transform: translateY(-2px) scale(1.12) !important;
                font-weight: 700 !important;
                text-shadow: 0 1px 0 rgba(184,144,42,0.1) !important;
                box-shadow: 0 6px 16px rgba(197,168,110,0.18) !important;
            }
            #main-nav ul li a.nav-item.active {
                color: #B8902A !important;
                font-weight: 700 !important;
                background: rgba(197,168,110,0.14) !important;
            }
        }


        /* ═══ 헤더 수직 정렬 최종 ═══ */
        body.dark-mode nav ul li a { color: #c0b8ad !important; }
        body.dark-mode nav ul li a:hover,
        body.dark-mode nav ul li a.active { color: #C5A86E !important; background: rgba(197,168,110,0.1) !important; }

        /* 데스크탑 nav(#main-nav ...)는 specificity가 높아 위 규칙을 무시하므로, 동일 셀렉터로 다크모드 색상 재지정 */
        body.dark-mode #main-nav ul li a.nav-item { color: #d4c9b4 !important; }
        body.dark-mode #main-nav ul li a.nav-item:hover,
        body.dark-mode #main-nav ul li a.nav-item.active { color: #D4A84B !important; background: rgba(197,168,110,0.18) !important; }

        @media (max-width: 768px) {
            .hamburger-btn { display: flex !important; }
            /* 모바일 헤더 비율 정리 — 로고 축소·줄바꿈 방지, 버튼이 화면 밖으로 안 나가게 */
            header { padding: 0 14px !important; }
            .logo-link { gap: 7px !important; }
            .logo-emblem { height: 34px !important; }
            .logo-area { font-size: 19px !important; letter-spacing: 0.5px !important; white-space: nowrap !important; }
            .header-right { gap: 8px !important; }
            .header-btns { gap: 6px !important; }
            .btn-darkmode { width: 36px !important; height: 36px !important; }
            .header-btns .btn-login-trigger { padding: 0 13px !important; height: 36px !important; font-size: 12px !important; }
            #main-nav {
                position: fixed; top: 0; right: -280px; bottom: 0; width: 260px;
                background: #1a1a1a; z-index: 1000; transition: right .3s ease;
                padding-top: 70px; padding-bottom: max(20px, env(safe-area-inset-bottom)); box-shadow: -4px 0 20px rgba(0,0,0,.3); overflow-y: auto;
            }
            #main-nav.nav-open { right: 0; }
            #main-nav ul { flex-direction: column !important; align-items: stretch !important; height: auto !important; gap: 0 !important; padding: 0 !important; }
            #main-nav ul li { height: auto !important; display: block !important; }
            #main-nav ul li a { display: block; height: auto !important; padding: 16px 24px !important; font-size: 15px !important; border-radius: 0 !important; border-bottom: 1px solid rgba(197,168,110,.1) !important; color: #e0e0e0 !important; }
            #main-nav ul li a[style*="display:none"], #main-nav ul li a[style*="display: none"] { display: none !important; }
            #main-nav ul li a:hover, #main-nav ul li a.active { background: rgba(197,168,110,.1) !important; color: #C5A86E !important; }
            .nav-overlay.active { display: block; }
            /* 모바일: 메인 영상은 상단 블록, 텍스트(슬로건~지원버튼)는 영상 아래로 분리 */
            .hero-container { flex-direction: column !important; height: auto !important; padding: 0 !important; overflow: visible !important; justify-content: flex-start !important; }
            .hero-bg-wrapper { position: relative !important; height: 300px !important; }
            .natural-glow-window, .hero-bottom-fade { display: none !important; }
            .hero-content { position: relative; z-index: 5; max-width: 100% !important; align-items: center; text-align: center; padding: 32px 20px 40px !important; margin-bottom: 0 !important; background: #FCFAF6; }
            body.dark-mode .hero-content { background: #16130f; }
            /* 모바일 다크모드: 설명 글자가 관리자 인라인 검정색이라 어두운 배경에서 안 보임 → 밝게 강제 */
            body.dark-mode .brand-description, body.dark-mode .brand-description span { color: #c4b7a8 !important; }
            .hero-image-area { display: none !important; }
            .brand-slogan { margin-bottom: 22px !important; }
            .brand-slogan, .brand-slogan span { font-size: 25px !important; line-height: 1.4 !important; }
            /* 크리에이터 지원 폼: 모바일에선 1단으로 펼쳐 입력칸 폭 확보 + placeholder 글자 축소로 잘림 방지 */
            .apply-form-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
            .apply-control::placeholder { font-size: 12.5px; opacity: 0.75; }
            /* Service 탭 Creator Support 카드(1~10): 모바일에서 컴팩트 + 높이 통일 */
            .support-features-grid { gap: 10px !important; }
            .support-list-card { padding: 14px 16px !important; gap: 12px !important; align-items: center !important; min-height: 86px; }
            .support-list-card .sub-num { margin-top: 0 !important; font-size: 14px !important; }
            .support-list-card .info-text h4 { font-size: 14.5px !important; margin-bottom: 3px !important; }
            .support-list-card .info-text p { font-size: 12.5px !important; line-height: 1.5 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
            /* 제휴(Partnership)·Q&A 폼: placeholder 잘림 방지 + 입력칸 폭 확보 */
            .form-group-row { grid-template-columns: 1fr !important; gap: 14px !important; }
            .contact-form-side { padding: 22px 18px !important; }
            .qa-write-box { padding: 20px 16px !important; }
            .contact-form-side .form-control::placeholder,
            .form-group input::placeholder,
            .form-group textarea::placeholder { font-size: 12.5px; opacity: 0.75; }
            input, textarea, select { font-size: 16px !important; }
            .ds-toast { white-space: normal; width: 88vw; text-align: center; }
            .admin-tabs { overflow-x: auto; white-space: nowrap; display: flex; padding-bottom: 4px; }
            .admin-tab-btn { white-space: nowrap; flex-shrink: 0; }
            .admin-stats { grid-template-columns: repeat(2,1fr) !important; }
            .admin-chart-area { flex-direction: column; }
            .chart-block { min-width: 100%; }
            #applicant-table, #member-table, #log-table { display: block; overflow-x: auto; }
            .programs-grid { grid-template-columns: repeat(2,1fr) !important; }
            .mypage-box { width: 96vw !important; max-height: 90vh; overflow-y: auto; }
            .login-box, .signup-box { width: 95vw !important; padding: 24px 18px !important; }
            .backup-bar { flex-direction: column; align-items: stretch; }
            .backup-hint { margin-left: 0; }
            .log-filter-bar { flex-direction: column; align-items: stretch; }
            .log-filter-select { width: 100%; }
            #pw-reset-modal .login-box { width: 92vw !important; }
        }
        @media (max-width: 480px) {
            .btn-login-trigger { padding: 0 18px !important; font-size: 12.5px !important; }
            .pager-btn { padding: 6px 12px; font-size: 12px; }
            .pager-info { font-size: 11px; }
        }

        /* ===== 자동저장 상태 표시 ===== */
        .auto-save-status {
            display: inline-flex;
            align-items: center;
            font-size: 12px;
            font-weight: 500;
            padding: 4px 10px;
            border-radius: 20px;
            transition: all 0.3s;
            font-family: 'Noto Sans KR', sans-serif;
            white-space: nowrap;
        }
        .auto-save-status.saved {
            color: #2d7a4f;
            background: rgba(45,122,79,0.1);
        }
        .auto-save-status.pending {
            color: #B8902A;
            background: rgba(184,144,42,0.1);
        }
        .auto-save-status.saving {
            color: #2a5a8c;
            background: rgba(42,90,140,0.1);
            animation: pulse-save 1s ease infinite;
        }
        @keyframes pulse-save {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* ═══ Q&A 비밀글·수정·삭제 ═══ */

        /* 비밀글 잠금 메시지 */
        .qa-locked-msg {
            padding: 18px 16px;
            text-align: center;
            color: #aaa;
            font-size: 13px;
            font-style: italic;
            letter-spacing: 0.03em;
            background: rgba(197,168,110,0.04);
            border-radius: 6px;
        }

        /* 액션 버튼 래퍼 */
        .qa-right { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
        .qa-action-btns { display:flex; gap:4px; align-items:center; }
        .btn-qa-action {
            background: none; border: 1px solid transparent;
            border-radius: 6px; padding: 3px 6px;
            font-size: 13px; cursor: pointer; line-height: 1;
            opacity: 0.65; transition: opacity 0.15s, background 0.15s, border-color 0.15s;
        }
        .btn-qa-action:hover { opacity: 1; }
        .btn-qa-edit:hover   { background: rgba(197,168,110,0.15); border-color: rgba(197,168,110,0.4); }
        .btn-qa-delete:hover { background: rgba(220,53,69,0.12);   border-color: rgba(220,53,69,0.35); }
        .btn-qa-adm { opacity: 0.4; }
        .btn-qa-adm:hover    { opacity: 1; background: rgba(220,53,69,0.18); border-color: rgba(220,53,69,0.5); }

        /* 인라인 수정 폼 */
        .qa-edit-form {
            padding: 14px 18px;
            background: #faf8f3;
            border-top: 1px solid rgba(197,168,110,0.18);
        }
        .qa-edit-row {
            display: flex; gap: 10px; align-items: center; margin-bottom: 10px;
        }
        .qa-edit-input {
            flex: 1; padding: 8px 12px;
            border: 1px solid #ddd5c0; border-radius: 6px;
            font-size: 13px; font-family: inherit;
            background: #fff; color: #333; outline: none;
        }
        .qa-edit-input:focus { border-color: #C5A86E; }
        .qa-edit-textarea {
            width: 100%; padding: 9px 12px;
            border: 1px solid #ddd5c0; border-radius: 6px;
            font-size: 13px; font-family: inherit;
            background: #fff; color: #333;
            resize: vertical; outline: none; box-sizing: border-box;
        }
        .qa-edit-textarea:focus { border-color: #C5A86E; }
        .qa-edit-btns { display:flex; gap:8px; margin-top:10px; justify-content:flex-end; }
        .btn-qa-edit-save {
            padding: 7px 20px; background: #B8902A; color: #fff;
            border: none; border-radius: 6px; font-size: 13px;
            font-weight: 600; cursor: pointer; transition: background 0.18s;
        }
        .btn-qa-edit-save:hover { background: #9a7820; }
        .btn-qa-edit-cancel {
            padding: 7px 16px; background: #eee; color: #555;
            border: none; border-radius: 6px; font-size: 13px;
            cursor: pointer; transition: background 0.18s;
        }
        .btn-qa-edit-cancel:hover { background: #ddd; }

        /* 관리자: 비밀글도 내용 표시 가능 표시 */
        body.admin-auth .qa-title.is-secret { color: #B8902A; }
        body.admin-auth .qa-status.secret { background: #fef3c7; color: #92400e; }
        .qa-admin-reply-wrap { margin-top: 12px; border-top: 1px solid #f0ece3; padding-top: 12px; }
        .mp-header-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
        }
        .mp-quick-logout {
            background: transparent;
            border: 1px solid rgba(197,168,110,0.4);
            color: #C5A86E;
            font-size: 12px;
            padding: 5px 14px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .mp-quick-logout:hover { background: #C5A86E; color: #fff; }
/* ═══════════════════════════════════════════════════
   검색창·카테고리·페이지네이션 리디자인 (전역, 미디어쿼리 바깥)
═══════════════════════════════════════════════════ */

.prog-search-area { max-width: 860px !important; margin: 0 auto 32px !important; padding: 0 20px !important; }

.search-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(255,255,255,0.6) !important;
    border: 1.5px solid rgba(197,168,110,0.35) !important;
    border-radius: 30px !important;
    padding: 0 18px 0 46px !important;
    transition: all 0.28s ease !important;
    box-shadow: 0 2px 8px rgba(197,168,110,0.04) !important;
}
.search-input-wrap::before {
    content: '' !important; position: absolute !important; left: 18px !important; top: 50% !important;
    width: 16px !important; height: 16px !important; transform: translateY(-50%) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A86E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-size: contain !important; background-repeat: no-repeat !important;
    opacity: 0.65 !important; transition: opacity 0.25s !important;
}
.search-input-wrap:focus-within {
    border-color: #B8902A !important;
    box-shadow: 0 4px 18px rgba(197,168,110,0.18) !important;
    background: #fff !important;
}
.search-input-wrap:focus-within::before { opacity: 1 !important; }

.prog-search-input,
.qa-search-input {
    all: unset;
    display: block !important;
    width: 100% !important;
    padding: 14px 0 !important;
    font-size: 13px !important;
    font-family: 'Cormorant Garamond', 'Noto Sans KR', serif !important;
    color: #2c2c2c !important;
    letter-spacing: 0.12em !important;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
}
.prog-search-input::placeholder,
.qa-search-input::placeholder {
    color: #b8a07a !important;
    font-size: 12px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}

.search-clear-btn {
    position: static !important;
    flex-shrink: 0 !important;
    background: rgba(197,168,110,0.12) !important;
    border: none !important;
    color: #8a6f3a !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important; height: 24px !important;
    border-radius: 50% !important;
    transition: all 0.2s !important;
}
.search-clear-btn:hover {
    background: #B8902A !important;
    color: #fff !important;
    transform: rotate(90deg) !important;
}

.prog-cat-btns {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 22px !important;
    padding: 4px 0 !important;
    justify-content: center !important;
    border-bottom: none !important;
}
.cat-btn {
    all: unset;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    font-size: 11.5px !important;
    border: 1.5px solid rgba(197,168,110,0.45) !important;
    border-radius: 30px !important;
    color: #8a6f3a !important;
    cursor: pointer !important;
    transition: all 0.28s ease !important;
    font-family: 'Cormorant Garamond', 'Noto Sans KR', serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    box-sizing: border-box !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}
.cat-btn:hover {
    color: #fff !important;
    background: #B8902A !important;
    border-color: #B8902A !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(197,168,110,0.35) !important;
}
.cat-btn.active {
    color: #fff !important;
    background: #B8902A !important;
    border-color: #B8902A !important;
    box-shadow: 0 4px 14px rgba(184,144,42,0.3) !important;
}

/* Q&A 페이지네이션 */
.qa-pager {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 24px 0 8px !important;
}
.pager-btn {
    padding: 9px 22px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    border: 1.5px solid rgba(197,168,110,0.45) !important;
    background: transparent !important;
    color: #8a6f3a !important;
    cursor: pointer !important;
    transition: all 0.25s !important;
    font-family: 'Cormorant Garamond', 'Noto Sans KR', serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}
.pager-btn:hover:not(:disabled) {
    background: #B8902A !important;
    color: #fff !important;
    border-color: #B8902A !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(197,168,110,0.3) !important;
}
.pager-btn:disabled { opacity: 0.3 !important; cursor: not-allowed !important; }
.pager-info {
    font-size: 12px !important;
    color: #8a6f3a !important;
    font-family: 'Cormorant Garamond', serif !important;
    letter-spacing: 0.1em !important;
}

/* Q&A 작성 버튼 */
.btn-write-qa {
    background: transparent !important;
    color: #C5A86E !important;
    border: 1.5px solid #C5A86E !important;
    padding: 12px 26px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-radius: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Cormorant Garamond', 'Noto Sans KR', serif !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    transition: all 0.28s ease !important;
}
.btn-write-qa:hover {
    background: #B8902A !important;
    color: #fff !important;
    border-color: #B8902A !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(197,168,110,0.4) !important;
}

/* 다크모드 */
body.dark-mode .search-input-wrap {
    background: rgba(30,30,30,0.6) !important;
    border-color: rgba(197,168,110,0.3) !important;
}
body.dark-mode .search-input-wrap:focus-within {
    background: rgba(20,20,20,0.9) !important;
    border-color: #C5A86E !important;
}
body.dark-mode .prog-search-input,
body.dark-mode .qa-search-input { color: #e0e0e0 !important; }
body.dark-mode .search-clear-btn {
    background: rgba(197,168,110,0.2) !important;
    color: #C5A86E !important;
}
body.dark-mode .cat-btn {
    color: #C5A86E !important;
    border-color: rgba(197,168,110,0.4) !important;
    background: transparent !important;
}
body.dark-mode .cat-btn:hover,
body.dark-mode .cat-btn.active {
    color: #1a1a1a !important;
    background: #C5A86E !important;
    border-color: #C5A86E !important;
}
body.dark-mode .pager-btn {
    color: #C5A86E !important;
    border-color: rgba(197,168,110,0.4) !important;
    background: transparent !important;
}
body.dark-mode .pager-btn:hover:not(:disabled) {
    background: #C5A86E !important;
    color: #1a1a1a !important;
    border-color: #C5A86E !important;
}
body.dark-mode .pager-info { color: #C5A86E !important; }
body.dark-mode .btn-write-qa {
    background: transparent !important;
    border-color: #C5A86E !important;
    color: #C5A86E !important;
}
body.dark-mode .btn-write-qa:hover {
    background: #C5A86E !important;
    color: #1a1a1a !important;
    border-color: #C5A86E !important;
}

/* 모바일 */
@media (max-width: 480px) {
    .search-input-wrap { padding: 0 14px 0 40px !important; }
    .search-input-wrap::before { left: 14px !important; width: 14px !important; height: 14px !important; }
    .prog-search-input, .qa-search-input { padding: 12px 0 !important; font-size: 12px !important; }
    .cat-btn { padding: 8px 16px !important; font-size: 10.5px !important; letter-spacing: 0.12em !important; }
    .prog-cat-btns { gap: 6px !important; justify-content: flex-start !important; }
    .btn-write-qa { padding: 10px 20px !important; font-size: 11px !important; }
    .pager-btn { padding: 7px 16px !important; font-size: 11px !important; }
}

/* ═══════════════════════════════════════════════════
   프로그램 카드 상태 배지 (비로그인 — 로그인 후 다운로드)
═══════════════════════════════════════════════════ */
.prog-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    background: rgba(197,168,110,0.12) !important;
    color: #8a6f3a !important;
    border: 1px solid rgba(197,168,110,0.3) !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
}
.prog-status-badge .status-icon { font-size: 10px !important; }
.prog-status-badge-ok {
    background: rgba(184,144,42,0.15) !important;
    color: #5e4a16 !important;
    border-color: rgba(184,144,42,0.4) !important;
}
body.dark-mode .prog-status-badge {
    background: rgba(197,168,110,0.15) !important;
    color: #C5A86E !important;
    border-color: rgba(197,168,110,0.3) !important;
}
body.dark-mode .prog-status-badge-ok {
    background: rgba(197,168,110,0.25) !important;
    color: #e8d5a8 !important;
}

/* ═══════════════════════════════════════════════════
   관리자 대시보드 — 통계 카드 + 차트 통합
═══════════════════════════════════════════════════ */
.admin-dashboard { margin-bottom: 28px; }
.dash-metrics {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
}
.dash-metric-card {
    background: #fff !important;
    border: 1px solid rgba(197,168,110,0.18) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
    transition: all 0.25s ease !important;
}
.dash-metric-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(197,168,110,0.15) !important;
    border-color: rgba(197,168,110,0.35) !important;
}
.dash-metric-label {
    font-size: 11.5px !important;
    color: #999 !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 6px !important;
}
.dash-metric-num {
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    font-family: 'Cormorant Garamond', 'Noto Sans KR', serif !important;
    line-height: 1.1 !important;
}
.dash-metric-num-accent { color: #B8902A !important; }

/* 차트 영역 깔끔하게 */
.admin-chart-area {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
}
.chart-block {
    background: #fff !important;
    border: 1px solid rgba(197,168,110,0.15) !important;
    border-radius: 14px !important;
    padding: 20px 22px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
}
.chart-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(197,168,110,0.18) !important;
    letter-spacing: 0.02em !important;
}
.chart-bar-row {
    display: grid !important;
    grid-template-columns: 60px 1fr 28px !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    font-size: 12.5px !important;
}
.chart-bar-label { color: #555 !important; font-weight: 500 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.chart-bar-track { background: #f5f0e8 !important; border-radius: 8px !important; height: 8px !important; overflow: hidden !important; }
.chart-bar-fill { height: 100% !important; border-radius: 8px !important; transition: width 0.4s ease !important; min-width: 2px !important; }
.chart-bar-count { font-weight: 600 !important; color: #333 !important; text-align: right !important; font-size: 12px !important; }
.chart-total {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px dashed rgba(197,168,110,0.25) !important;
    font-size: 11.5px !important;
    color: #999 !important;
    text-align: right !important;
}

/* 모바일 */
@media (max-width: 768px) {
    .dash-metrics { grid-template-columns: repeat(2, 1fr) !important; }
    .admin-chart-area { grid-template-columns: 1fr !important; }
    .dash-metric-num { font-size: 24px !important; }
}

/* 다크모드 */
body.dark-mode .dash-metric-card,
body.dark-mode .chart-block {
    background: #1e1a15 !important;
    border-color: rgba(197,168,110,0.2) !important;
}
body.dark-mode .dash-metric-label { color: #a09080 !important; }
body.dark-mode .dash-metric-num { color: #e8ddd0 !important; }
body.dark-mode .chart-title { color: #e8ddd0 !important; border-bottom-color: rgba(197,168,110,0.2) !important; }
body.dark-mode .chart-bar-label { color: #a09080 !important; }
body.dark-mode .chart-bar-track { background: #252018 !important; }
body.dark-mode .chart-bar-count { color: #e8ddd0 !important; }
body.dark-mode .chart-total { color: #a09080 !important; }

/* ═══════════════════════════════════════════════════
   문의 내역 — 뱃지 + 상세 모달
═══════════════════════════════════════════════════ */
.inq-badge {
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}
.inq-badge-secret { background: rgba(192,57,43,0.12) !important; color: #a83228 !important; }
.inq-badge-public { background: rgba(74,124,89,0.12) !important; color: #3b6d11 !important; }
.inq-badge-done { background: rgba(74,124,89,0.15) !important; color: #2d5e0e !important; }
.inq-badge-pending { background: rgba(197,168,110,0.18) !important; color: #8a6f3a !important; }
.inq-title-cell {
    font-weight: 500 !important;
    max-width: 280px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.btn-inq-view {
    padding: 6px 14px !important;
    border-radius: 18px !important;
    border: 1.5px solid #C5A86E !important;
    background: transparent !important;
    color: #8a6f3a !important;
    font-size: 11.5px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}
.btn-inq-view:hover { background: #B8902A !important; color: #fff !important; border-color: #B8902A !important; }

/* 문의 상세 모달 */
.inq-modal-wrap {
    display: none !important;
    position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    z-index: 100000 !important;
    align-items: center !important; justify-content: center !important;
    padding: 20px !important;
    backdrop-filter: blur(4px) !important;
}
.inq-modal-wrap.open { display: flex !important; }
.inq-modal-box {
    background: #fff !important;
    border-radius: 16px !important;
    max-width: 720px !important; width: 100% !important;
    max-height: 88vh !important;
    overflow: hidden !important;
    display: flex !important; flex-direction: column !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
}
.inq-modal-head {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 20px 26px !important;
    border-bottom: 1px solid rgba(197,168,110,0.2) !important;
    background: #fbf5e6 !important;
}
.inq-modal-head h3 { margin: 0 !important; font-size: 18px !important; font-weight: 600 !important; color: #1a1a1a !important; }
.inq-modal-close {
    width: 32px !important; height: 32px !important; border-radius: 50% !important;
    border: none !important; background: rgba(0,0,0,0.06) !important;
    color: #666 !important; cursor: pointer !important; font-size: 14px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: all 0.2s !important;
}
.inq-modal-close:hover { background: #B8902A !important; color: #fff !important; transform: rotate(90deg) !important; }
.inq-modal-body { padding: 26px !important; overflow-y: auto !important; flex: 1 !important; }

.inq-detail-header { margin-bottom: 18px !important; padding-bottom: 16px !important; border-bottom: 1px solid #f0e8d4 !important; }
.inq-detail-title { font-size: 19px !important; font-weight: 600 !important; color: #1a1a1a !important; margin-bottom: 10px !important; line-height: 1.4 !important; }
.inq-detail-meta { display: flex !important; gap: 16px !important; flex-wrap: wrap !important; font-size: 12.5px !important; color: #666 !important; align-items: center !important; }
.inq-detail-meta strong { color: #999 !important; font-weight: 500 !important; margin-right: 4px !important; }
.inq-detail-content {
    background: #faf8f3 !important;
    padding: 20px 22px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #333 !important;
    margin-bottom: 18px !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

.inq-answer-box {
    background: rgba(197,168,110,0.06) !important;
    border: 1px solid rgba(197,168,110,0.25) !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    margin-bottom: 18px !important;
}
.inq-answer-empty { background: #fbfafa !important; border-style: dashed !important; }
.inq-answer-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 10px !important; flex-wrap: wrap !important; gap: 8px !important; }
.inq-answer-label { font-size: 13px !important; font-weight: 600 !important; color: #8a6f3a !important; }
.inq-answer-meta { font-size: 11.5px !important; color: #999 !important; }
.inq-answer-text { font-size: 13.5px !important; line-height: 1.65 !important; color: #333 !important; padding: 10px 0 !important; }
.inq-answer-textarea {
    width: 100% !important;
    min-height: 100px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(197,168,110,0.3) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}
.inq-answer-textarea:focus { outline: none !important; border-color: #B8902A !important; }
.inq-answer-actions { display: flex !important; gap: 8px !important; justify-content: flex-end !important; margin-top: 10px !important; flex-wrap: wrap !important; }

.btn-inq-action {
    padding: 8px 18px !important;
    border-radius: 20px !important;
    border: 1.5px solid #ddd !important;
    background: transparent !important;
    color: #555 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    font-family: inherit !important;
}
.btn-inq-action:hover { background: #f5f5f5 !important; }
.btn-inq-action-primary { background: #B8902A !important; color: #fff !important; border-color: #B8902A !important; }
.btn-inq-action-primary:hover { background: #9d7820 !important; }
.btn-inq-action-danger { color: #c0392b !important; border-color: rgba(192,57,43,0.4) !important; }
.btn-inq-action-danger:hover { background: rgba(192,57,43,0.08) !important; }

.inq-detail-footer { display: flex !important; justify-content: space-between !important; gap: 10px !important; padding-top: 16px !important; border-top: 1px solid #f0e8d4 !important; flex-wrap: wrap !important; }

body.dark-mode .inq-modal-box { background: #1e1a15 !important; }
body.dark-mode .inq-modal-head { background: #252018 !important; border-bottom-color: rgba(197,168,110,0.2) !important; }
body.dark-mode .inq-modal-head h3 { color: #e8ddd0 !important; }
body.dark-mode .inq-modal-close { background: rgba(255,255,255,0.08) !important; color: #a09080 !important; }
body.dark-mode .inq-detail-title { color: #e8ddd0 !important; }
body.dark-mode .inq-detail-meta { color: #a09080 !important; }
body.dark-mode .inq-detail-content { background: #16130f !important; color: #d0c4b3 !important; }
body.dark-mode .inq-answer-text { color: #d0c4b3 !important; }
body.dark-mode .inq-answer-textarea { background: #252018 !important; color: #e8ddd0 !important; border-color: rgba(197,168,110,0.3) !important; }

/* ═══════════════════════════════════════════════════
   활동 로그 — 삭제 버튼
═══════════════════════════════════════════════════ */
.btn-log-clear-all {
    padding: 9px 18px !important;
    border-radius: 22px !important;
    border: 1.5px solid rgba(192,57,43,0.4) !important;
    background: transparent !important;
    color: #c0392b !important;
    font-size: 12px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}
.btn-log-clear-all:hover { background: #c0392b !important; color: #fff !important; border-color: #c0392b !important; }
.btn-log-delete {
    width: 26px !important; height: 26px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(192,57,43,0.3) !important;
    background: transparent !important;
    color: #c0392b !important;
    font-size: 11px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}
.btn-log-delete:hover { background: #c0392b !important; color: #fff !important; transform: scale(1.1) !important; }

body.dark-mode .btn-log-clear-all { color: #e88c80 !important; border-color: rgba(232,140,128,0.4) !important; }
body.dark-mode .btn-log-clear-all:hover { background: #c0392b !important; color: #fff !important; }
body.dark-mode .btn-log-delete { color: #e88c80 !important; border-color: rgba(232,140,128,0.3) !important; }

/* ===== 데스크탑 줌 시 레이아웃 잠금 =====
   Ctrl+휠 줌 시 viewport가 작아진 것으로 인식돼 반응형 미디어 쿼리가 발동하면서 글자가 그림을 덮거나 카드가 재배치되는 현상 방지.
   마우스 환경(pointer:fine)에서만 최소 너비를 잠가서 줌 인 시 모바일 레이아웃이 아닌 가로 스크롤이 발생하도록 함. 터치 기기는 영향 없음. */
@media (pointer: fine) and (min-width: 1024px) {
    html, body {
        min-width: 1280px;
        overflow-x: auto;
    }
}