/* =============================================
   businessDetail.css — Redesigned
   Matches the clean card aesthetic of productList
   ============================================= */

   @import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700;800;900&display=swap');

   :root {
     --blue:       #3182f6;
     --blue-dark:  #1a6ef5;
     --blue-light: #e8f1ff;
     --text-main:  #1a1d24;
     --text-sub:   #4e5968;
     --text-muted: #8b95a1;
     --border:     #e5e8eb;
     --bg:         #f7f8fc;
     --white:      #ffffff;
     --red:        #ff3b30;
     --green:      #2db87a;
     --orange:     #ff9800;
     --radius-sm:  10px;
     --radius-md:  16px;
     --radius-lg:  20px;
     --radius-xl:  28px;
     --shadow-sm:  0 2px 8px rgba(0,0,0,.05);
     --shadow-md:  0 8px 24px rgba(0,0,0,.08);
     --shadow-lg:  0 20px 48px rgba(0,0,0,.10);
     --transition: all .25s cubic-bezier(.4,0,.2,1);
   }
   
   /* ── Reset ─────────────────────────────────── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   body {
     font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
     background: var(--bg);
     color: var(--text-main);
     line-height: 1.6;
     overflow-x: hidden;
   }
   
   /* ── Page wrapper ───────────────────────────── */
   .of-proposal-page { min-height: 100vh; }
   
   /* ══════════════════════════════════════════════
      TOP ACTION BAR
   ══════════════════════════════════════════════ */
   .of-proposal-top-action-bar {
     position: sticky;
     top: 72px;
     z-index: 999;
     background: rgba(255,255,255,.97);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
     padding: 12px 32px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 12px;
     box-shadow: var(--shadow-sm);
   }
   
   .of-proposal-back-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 9px 18px;
     background: var(--white);
     border: 1.5px solid var(--border);
     border-radius: var(--radius-sm);
     color: var(--text-sub);
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     transition: var(--transition);
   }
   .of-proposal-back-btn:hover {
     border-color: var(--blue);
     color: var(--blue);
     transform: translateX(-3px);
     box-shadow: var(--shadow-sm);
   }
   
   .of-proposal-action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
   
   .of-proposal-action-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 9px 16px;
     border: none;
     border-radius: var(--radius-sm);
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
     transition: var(--transition);
     color: var(--white);
     text-decoration: none;
     white-space: nowrap;
   }
   .of-proposal-action-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
   
   .of-proposal-send-btn   { background: var(--green); box-shadow: 0 4px 12px rgba(45,184,122,.25); }
   .of-proposal-copy-btn   { background: #6c757d;      box-shadow: 0 4px 12px rgba(108,117,125,.2); }
   .of-proposal-edit-btn   { background: var(--orange); box-shadow: 0 4px 12px rgba(255,152,0,.25); }
   .of-proposal-delete-btn { background: var(--red);   box-shadow: 0 4px 12px rgba(255,59,48,.25); }
   .of-proposal-pdf-btn    { background: var(--blue);  box-shadow: 0 4px 12px rgba(49,130,246,.3); }
   
   /* ══════════════════════════════════════════════
      HERO HEADER
   ══════════════════════════════════════════════ */
   .hero-header {
     width: 100%;
     background: var(--white);
     border-bottom: 1px solid var(--border);
     padding: 48px 40px 40px;
     position: relative;
     overflow: hidden;
   }
   .hero-header::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, var(--blue-light) 0%, transparent 60%);
     pointer-events: none;
   }
   .hero-content { position: relative; max-width: 1280px; margin: 0 auto;}
   .hero-content h1 {
     font-size: clamp(24px, 4vw, 38px);
     font-weight: 900;
     color: var(--text-main);
     letter-spacing: -.8px;
     line-height: 1.2;
     margin-bottom: 14px;
   }
   .hero-meta { display: flex; align-items: center; gap: 6px; }
   .hero-meta-item {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 13px;
     color: var(--text-muted);
     font-weight: 500;
     background: var(--bg);
     padding: 5px 12px;
     border-radius: 99px;
     border: 1px solid var(--border);
   }
   
   /* ══════════════════════════════════════════════
      LAYOUT WRAPPER
   ══════════════════════════════════════════════ */
   .proposal-layout-wrapper {
     display: grid;
     grid-template-columns: 1fr 320px;
     gap: 28px;
     max-width: 1320px;
     margin: 0 auto;
     padding: 32px 32px 80px;
     align-items: start;
   }
   @media (max-width: 1200px) {
     .proposal-layout-wrapper { grid-template-columns: 1fr 290px; padding: 24px; }
   }
   @media (max-width: 960px) {
     .proposal-layout-wrapper { grid-template-columns: 1fr; padding: 20px 16px; }
   }
   
   /* ══════════════════════════════════════════════
      CONTENT CARDS
   ══════════════════════════════════════════════ */
   .container { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
   
   .content-card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--radius-xl);
     padding: 32px;
     transition: var(--transition);
   }
   .content-card:hover {
     box-shadow: var(--shadow-md);
     border-color: #d0dff7;
   }
   
   .section-title {
     font-size: 20px;
     font-weight: 800;
     color: var(--text-main);
     margin-bottom: 6px;
     letter-spacing: -.4px;
   }
   .section-description {
     font-size: 14px;
     color: var(--text-muted);
     margin-bottom: 24px;
     line-height: 1.6;
   }
   
   /* ── Fade in animation ──────────────────────── */
   .fade-in {
     animation: fadeUp .4s ease both;
   }
   @keyframes fadeUp {
     from { opacity: 0; transform: translateY(16px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   /* ══════════════════════════════════════════════
      DEVICE TABS
   ══════════════════════════════════════════════ */
   .device-tabs {
     display: flex;
     gap: 8px;
     margin-bottom: 20px;
   }
   .device-tab {
     padding: 8px 18px;
     border: 1.5px solid var(--border);
     background: var(--white);
     border-radius: var(--radius-sm);
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
     color: var(--text-sub);
   }
   .device-tab.active {
     background: var(--blue);
     border-color: var(--blue);
     color: var(--white);
     box-shadow: 0 4px 12px rgba(49,130,246,.3);
   }
   .device-tab:not(.active):hover {
     border-color: var(--blue);
     color: var(--blue);
   }
   
   /* ══════════════════════════════════════════════
      AS-IS / TO-BE COMPARISON
   ══════════════════════════════════════════════ */
   .comparison-wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
   }
   @media (max-width: 700px) {
     .comparison-wrapper { grid-template-columns: 1fr; }
   }
   
   .comparison-box {
     border-radius: var(--radius-md);
     overflow: hidden;
     border: 1.5px solid var(--border);
     background: var(--white);
     transition: var(--transition);
   }
   .comparison-box:hover { box-shadow: var(--shadow-md); }
   .comparison-box.before { border-color: #ffd0cc; }
   .comparison-box.after  { border-color: #c5dbff; }
   
   .comparison-label {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 12px 16px;
     font-size: 13px;
     font-weight: 800;
     letter-spacing: .5px;
     text-transform: uppercase;
   }
   .comparison-box.before .comparison-label { background: #fff5f5; color: var(--red); }
   .comparison-box.after  .comparison-label { background: var(--blue-light); color: var(--blue); }
   
   .comparison-image-wrapper {
     overflow: hidden;
     aspect-ratio: 16/10;
     background: var(--bg);
     cursor: pointer;
   }
   .comparison-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform .4s ease;
   }
   .comparison-image-wrapper:hover .comparison-image { transform: scale(1.04); }
   
   .comparison-description {
     padding: 16px;
     font-size: 13px;
     line-height: 1.7;
     color: var(--text-sub);
   }
   .comparison-description ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
   .comparison-description li {
     padding: 10px 12px 10px 36px;
     position: relative;
     background: var(--bg);
     border-radius: 8px;
     font-size: 13px;
   }
   .comparison-description li::before {
     content: '✓';
     position: absolute;
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
     width: 18px;
     height: 18px;
     background: var(--blue);
     color: #fff;
     border-radius: 4px;
     font-size: 10px;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
   }

    .rich-text-content {
      color: var(--text-sub);
      font-size: 14px;
      line-height: 1.8;
    }
    .rich-text-content p { margin-bottom: 12px; }
    .rich-text-content ul, .rich-text-content ol { padding-left: 20px; margin-bottom: 16px; }
    .rich-text-content li { margin-bottom: 6px; }
    .rich-text-content img { max-width: 100%; border-radius: 8px; margin: 12px 0; }

    .empty-desc-list { list-style: none; padding: 0; }
    .empty-desc-list li {
      padding: 12px 16px;
      background: var(--bg);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 13px;
      text-align: center;
      border: 1px dashed var(--border);
    }   
   /* ── Highlight card ─────────────────────────── */
   .highlight-card {
     margin-top: 20px;
     background: linear-gradient(135deg, var(--blue-light), #f0f7ff);
     border: 1px solid #c5dbff;
     border-radius: var(--radius-md);
     padding: 20px 24px;
   }
   .highlight-card h3 {
     font-size: 15px;
     font-weight: 800;
     color: var(--blue-dark);
     margin-bottom: 10px;
   }
   .highlight-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
   .highlight-list li {
     font-size: 13px;
     color: var(--text-sub);
     padding-left: 16px;
     position: relative;
   }
   .highlight-list li::before {
     content: '•';
     position: absolute;
     left: 0;
     color: var(--blue);
     font-weight: 900;
   }
   
   /* ══════════════════════════════════════════════
      INTERACTIVE TABS (직접 비교)
   ══════════════════════════════════════════════ */
   .interactive-tabs { }
   .tab-buttons {
     display: flex;
     gap: 8px;
     margin-bottom: 16px;
   }
   .tab-btn {
     flex: 1;
     padding: 10px 16px;
     border: 1.5px solid var(--border);
     background: var(--white);
     border-radius: var(--radius-sm);
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
     transition: var(--transition);
     color: var(--text-sub);
   }
   .tab-btn.active {
     background: var(--blue);
     border-color: var(--blue);
     color: var(--white);
     box-shadow: 0 4px 12px rgba(49,130,246,.25);
   }
   .tab-btn:not(.active):hover { border-color: var(--blue); color: var(--blue); }
   
   .tab-panel { display: none; }
   .tab-panel.active { display: block; animation: fadeUp .3s ease; }
   .tab-panel img {
     width: 100%;
     border-radius: var(--radius-md);
     border: 1px solid var(--border);
     display: block;
   }
   
   /* ══════════════════════════════════════════════
      STATS GRID (기대 효과)
   ══════════════════════════════════════════════ */
   .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
     gap: 14px;
     margin-bottom: 20px;
   }
   .stat-card {
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 20px 16px;
     text-align: center;
     transition: var(--transition);
   }
   .stat-card:hover {
     background: var(--blue-light);
     border-color: var(--blue);
     transform: translateY(-4px);
     box-shadow: var(--shadow-md);
   }
   .stat-value { font-size: 32px; margin-bottom: 6px; }
   .stat-label { font-size: 12px; font-weight: 700; color: var(--text-sub); }
   
   /* ══════════════════════════════════════════════
      TIMELINE
   ══════════════════════════════════════════════ */
   .timeline-section { padding: 4px 0; }
   .timeline {
     position: relative;
     padding-left: 36px;
     display: flex;
     flex-direction: column;
     gap: 0;
   }
   .timeline::before {
     content: '';
     position: absolute;
     left: 10px;
     top: 12px;
     bottom: 12px;
     width: 2px;
     background: linear-gradient(180deg, var(--blue) 0%, #c5dbff 100%);
     border-radius: 2px;
   }
   .timeline-item { position: relative; padding-bottom: 24px; }
   .timeline-item:last-child { padding-bottom: 0; }
   .timeline-marker {
     position: absolute;
     left: -36px;
     top: 4px;
     width: 20px;
     height: 20px;
     background: var(--white);
     border: 3px solid var(--blue);
     border-radius: 50%;
     box-shadow: 0 0 0 4px var(--blue-light);
     transition: var(--transition);
   }
   .timeline-item:hover .timeline-marker {
     background: var(--blue);
     transform: scale(1.2);
   }
   .timeline-content {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 18px 20px;
     transition: var(--transition);
   }
   .timeline-item:hover .timeline-content {
     border-color: var(--blue);
     box-shadow: var(--shadow-sm);
     transform: translateX(4px);
   }
   .timeline-date {
     display: inline-flex;
     align-items: center;
     padding: 4px 10px;
     background: var(--blue-light);
     color: var(--blue);
     border-radius: 6px;
     font-size: 11px;
     font-weight: 700;
     margin-bottom: 8px;
     letter-spacing: .3px;
   }
   .timeline-content h4 { font-size: 15px; font-weight: 800; color: var(--text-main); margin-bottom: 4px; }
   .timeline-content p  { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
   
   /* ══════════════════════════════════════════════
      CONCLUSION CARD
   ══════════════════════════════════════════════ */
   .conclusion-card {
     background: linear-gradient(135deg, var(--blue) 0%, #5a9aff 100%);
     border-radius: var(--radius-xl);
     padding: 36px 32px;
     text-align: center;
     color: var(--white);
     position: relative;
     overflow: hidden;
   }
   .conclusion-card::before {
     content: '';
     position: absolute;
     inset: 0;
     background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='white' opacity='.08'/%3E%3C/svg%3E");
     background-size: 30px 30px;
   }
   .conclusion-card h3 {
     font-size: 20px;
     font-weight: 900;
     margin-bottom: 10px;
     position: relative;
   }
   .conclusion-card p {
     font-size: 14px;
     opacity: .9;
     line-height: 1.7;
     position: relative;
   }
   
   /* ══════════════════════════════════════════════
      TAGS & SHARE
   ══════════════════════════════════════════════ */
   .tags-wrapper {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 24px;
   }
   .tag {
     display: inline-flex;
     align-items: center;
     padding: 5px 12px;
     background: var(--blue-light);
     color: var(--blue);
     border-radius: 99px;
     font-size: 12px;
     font-weight: 700;
     border: 1px solid #c5dbff;
     transition: var(--transition);
   }
   .tag:hover { background: var(--blue); color: var(--white); }
   
   .share-section { border-top: 1px solid var(--border); padding-top: 20px; }
   .share-title {
     font-size: 14px;
     font-weight: 700;
     color: var(--text-sub);
     margin-bottom: 12px;
   }
   .share-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
   .share-btn {
     padding: 10px 18px;
     background: var(--white);
     border: 1.5px solid var(--border);
     border-radius: var(--radius-sm);
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
     color: var(--text-sub);
   }
   .share-btn:hover {
     border-color: var(--blue);
     color: var(--blue);
     box-shadow: var(--shadow-sm);
     transform: translateY(-2px);
   }
   
   /* ══════════════════════════════════════════════
      RELATED PROPOSALS
   ══════════════════════════════════════════════ */
   .related-section {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--radius-xl);
     padding: 24px;
   }
   .related-title {
     font-size: 16px;
     font-weight: 800;
     color: var(--text-main);
     margin-bottom: 14px;
   }
   .proposal-listlike-card {
     display: block;
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 14px 16px;
     margin-bottom: 10px;
     text-decoration: none;
     transition: var(--transition);
   }
   .proposal-listlike-card:last-child { margin-bottom: 0; }
   .proposal-listlike-card:hover {
     border-color: var(--blue);
     background: var(--blue-light);
     transform: translateX(4px);
   }
   .related-item h4 { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
   .related-item p  { font-size: 12px; color: var(--text-muted); }
   
   /* ══════════════════════════════════════════════
      SIDEBAR
   ══════════════════════════════════════════════ */
   .proposal-sidebar-fixed {
     position: sticky;
     top: calc(72px + 64px + 20px);
   }
   
   .proposal-info-card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--radius-xl);
     padding: 24px;
     display: flex;
     flex-direction: column;
     gap: 20px;
     box-shadow: var(--shadow-sm);
   }
   
   /* Price section */
   .info-price-section {
     text-align: center;
     padding: 20px;
     background: linear-gradient(135deg, #f0f7ff, var(--blue-light));
     border: 1.5px solid #c5dbff;
     border-radius: var(--radius-md);
   }
   .info-label {
     font-size: 11px;
     font-weight: 700;
     color: var(--blue);
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 8px;
   }
   .info-price {
     font-size: 28px;
     font-weight: 900;
     color: var(--blue-dark);
     letter-spacing: -1px;
   }
   .info-note {
     font-size: 11px;
     color: var(--text-muted);
     margin-top: 6px;
   }
   
   /* Info items */
   .info-item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 14px;
     background: var(--bg);
     border-radius: var(--radius-md);
     border: 1px solid var(--border);
     transition: var(--transition);
   }
   .info-item:hover { border-color: var(--blue); background: var(--blue-light); }
   .info-item svg { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
   .info-item-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
   .info-item-value { font-size: 14px; font-weight: 700; color: var(--text-main); }
   
   /* Action buttons */
   .info-actions { display: flex; flex-direction: column; gap: 10px; }
   .info-primary-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     width: 100%;
     padding: 13px;
     background: var(--blue);
     color: var(--white);
     border: none;
     border-radius: var(--radius-sm);
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     transition: var(--transition);
     box-shadow: 0 4px 12px rgba(49,130,246,.3);
   }
   .info-primary-btn:hover {
     background: var(--blue-dark);
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(49,130,246,.35);
   }
   .info-secondary-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     width: 100%;
     padding: 12px;
     background: var(--white);
     color: var(--text-sub);
     border: 1.5px solid var(--border);
     border-radius: var(--radius-sm);
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
   }
   .info-secondary-btn:hover {
     border-color: var(--blue);
     color: var(--blue);
     transform: translateY(-2px);
   }
   
   /* Cert badge */
   .info-cert {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 14px;
     background: #f0faf4;
     border: 1px solid #a7f3d0;
     border-radius: var(--radius-md);
   }
   .info-cert-icon {
     width: 36px;
     height: 36px;
     background: #2db87a;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--white);
     flex-shrink: 0;
   }
   .info-cert-content { display: flex; flex-direction: column; gap: 2px; }
   .info-cert-content strong { font-size: 13px; font-weight: 800; color: #1a4731; }
   .info-cert-content span  { font-size: 11px; color: #2d6b4f; }
   
   /* ══════════════════════════════════════════════
      COMPARISON MODAL
   ══════════════════════════════════════════════ */
   .of-proposal-comparison-modal {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 10000;
   }
   .of-proposal-comparison-modal.active { display: block; }
   
   .of-proposal-modal-backdrop {
     position: absolute;
     inset: 0;
     background: rgba(10,15,30,.7);
     backdrop-filter: blur(12px);
   }
   .of-proposal-modal-container {
     position: relative;
     width: 94%;
     max-width: 1300px;
     height: 88vh;
     margin: 6vh auto;
     background: var(--white);
     border-radius: var(--radius-xl);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     box-shadow: 0 32px 80px rgba(0,0,0,.3);
     animation: fadeUp .3s ease;
   }
   .of-proposal-modal-close {
     position: absolute;
     top: 16px;
     right: 16px;
     width: 40px;
     height: 40px;
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 50%;
     color: var(--text-sub);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 10;
     transition: var(--transition);
   }
   .of-proposal-modal-close:hover {
     background: var(--red);
     color: var(--white);
     border-color: var(--red);
     transform: rotate(90deg);
   }
   .of-proposal-modal-header {
     padding: 20px 28px 16px;
     border-bottom: 1px solid var(--border);
     background: var(--bg);
   }
   .of-proposal-modal-header h2 { font-size: 20px; font-weight: 800; color: var(--text-main); }
   .of-proposal-modal-header p  { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
   .of-proposal-modal-content { flex: 1; overflow-y: auto; padding: 20px 28px; }
   .of-proposal-modal-comparison-grid {
     display: grid;
     grid-template-columns: 1fr 56px 1fr;
     gap: 16px;
     min-height: 100%;
   }
   .of-proposal-modal-panel {
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     overflow: hidden;
     display: flex;
     flex-direction: column;
   }
   .of-proposal-modal-panel-header {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 14px 18px;
     background: var(--white);
     border-bottom: 1px solid var(--border);
   }
   .of-proposal-modal-panel-header h3 { font-size: 16px; font-weight: 800; color: var(--text-main); }
   .of-proposal-modal-badge {
     padding: 4px 10px;
     border-radius: 6px;
     font-size: 10px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: .5px;
   }
   .of-proposal-asis-badge { background: #ffe5e5; color: var(--red); }
   .of-proposal-tobe-badge { background: var(--blue-light); color: var(--blue); }
   .of-proposal-modal-image-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 12px;
     padding: 16px;
   }
   .of-proposal-modal-image-item {
     position: relative;
     aspect-ratio: 16/10;
     border-radius: var(--radius-sm);
     overflow: hidden;
     cursor: pointer;
     transition: var(--transition);
     border: 1px solid var(--border);
   }
   .of-proposal-modal-image-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
   .of-proposal-modal-image-item img  { width: 100%; height: 100%; object-fit: cover; }
   .of-proposal-modal-image-number {
     position: absolute;
     top: 8px; left: 8px;
     width: 24px; height: 24px;
     background: var(--blue);
     color: var(--white);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     font-weight: 700;
     z-index: 2;
   }
   .of-proposal-modal-enlarge-hint {
     position: absolute;
     inset: 0;
     background: rgba(49,130,246,.85);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 6px;
     color: var(--white);
     opacity: 0;
     transition: var(--transition);
     font-size: 12px;
     font-weight: 700;
   }
   .of-proposal-modal-image-item:hover .of-proposal-modal-enlarge-hint { opacity: 1; }
   .of-proposal-modal-panel-content { padding: 16px 18px; flex: 1; overflow-y: auto; }
   .of-proposal-modal-panel-content h4 { font-size: 13px; font-weight: 800; color: var(--text-main); margin-bottom: 10px; }
   .of-proposal-modal-text { font-size: 13px; line-height: 1.7; color: var(--text-sub); }
   .of-proposal-modal-divider { display: flex; align-items: center; justify-content: center; }
   .of-proposal-modal-arrow {
     width: 40px; height: 40px;
     background: var(--blue);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--white);
     box-shadow: 0 4px 16px rgba(49,130,246,.35);
   }
   
   /* ══════════════════════════════════════════════
      ENLARGE MODAL
   ══════════════════════════════════════════════ */
   .of-proposal-enlarge-modal {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 10001;
   }
   .of-proposal-enlarge-modal.active { display: block; }
   .of-proposal-enlarge-backdrop {
     position: absolute;
     inset: 0;
     background: rgba(0,0,0,.92);
     backdrop-filter: blur(24px);
   }
   .of-proposal-enlarge-close {
     position: absolute;
     top: 24px; right: 24px;
     width: 48px; height: 48px;
     background: rgba(255,255,255,.12);
     border: 1.5px solid rgba(255,255,255,.25);
     border-radius: 50%;
     color: var(--white);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 10;
     transition: var(--transition);
   }
   .of-proposal-enlarge-close:hover {
     background: rgba(255,255,255,.2);
     transform: rotate(90deg) scale(1.1);
   }
   .of-proposal-enlarge-container {
     position: absolute;
     top: 50%; left: 50%;
     transform: translate(-50%, -50%);
     max-width: 95%;
     max-height: 92vh;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .of-proposal-enlarge-container img {
     max-width: 100%;
     max-height: 92vh;
     border-radius: var(--radius-md);
     box-shadow: 0 32px 80px rgba(0,0,0,.8);
     animation: zoomIn .35s cubic-bezier(.4,0,.2,1);
   }
   @keyframes zoomIn {
     from { opacity: 0; transform: scale(.9); }
     to   { opacity: 1; transform: scale(1); }
   }
   
   /* ══════════════════════════════════════════════
      COPY TOAST
   ══════════════════════════════════════════════ */
   .of-proposal-copy-toast {
     position: fixed;
     bottom: 28px; right: 28px;
     background: #1a1d24;
     color: var(--white);
     padding: 14px 20px;
     border-radius: var(--radius-sm);
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 600;
     font-size: 14px;
     box-shadow: var(--shadow-lg);
     opacity: 0;
     transform: translateY(16px);
     transition: all .3s ease;
     z-index: 9999;
     pointer-events: none;
   }
   .of-proposal-copy-toast.show { opacity: 1; transform: translateY(0); }
   
   /* ══════════════════════════════════════════════
      ALIMTALK MODAL
   ══════════════════════════════════════════════ */
   #alimtalkModal .modal-dialog { max-width: 920px; }
   #alimtalkModal .modal-content { border-radius: var(--radius-lg); border: 1px solid var(--border); }
   #alimtalkModal .modal-header {
     background: var(--bg);
     border-bottom: 1px solid var(--border);
     border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     padding: 18px 24px;
   }
   #alimtalkModal .modal-title { font-size: 16px; font-weight: 800; color: var(--text-main); }
   #alimtalkModal .modal-body { padding: 20px; }
   #alimtalkModal .modal-footer { border-top: 1px solid var(--border); padding: 14px 20px; }
   
   .checkbox-legend {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     padding: 10px 20px;
     background: var(--bg);
     border-bottom: 1px solid var(--border);
     flex-wrap: wrap;
   }
   .legend-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
   .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sub); }
   
   #alimtalkTabs { border-bottom: 2px solid var(--border); margin-bottom: 16px; }
   #alimtalkTabs .nav-link {
     color: var(--text-muted);
     font-weight: 600;
     font-size: 13px;
     border: none;
     border-bottom: 2px solid transparent;
     margin-bottom: -2px;
     padding: 10px 14px;
     transition: var(--transition);
   }
   #alimtalkTabs .nav-link:hover { color: var(--blue); }
   #alimtalkTabs .nav-link.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 800; }
   #alimtalkTabs .badge { background: var(--border); color: var(--text-sub); }
   #alimtalkTabs .nav-link.active .badge { background: var(--blue); color: var(--white); }
   
   #alimtalk-member-search {
     padding: 10px 14px;
     border: 1.5px solid var(--border);
     border-radius: var(--radius-sm);
     font-size: 13px;
     width: 100%;
     transition: var(--transition);
   }
   #alimtalk-member-search:focus {
     outline: none;
     border-color: var(--blue);
     box-shadow: 0 0 0 3px rgba(49,130,246,.12);
   }
   
   .alimtalk-member-item {
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 12px 14px;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     margin-bottom: 8px;
     background: var(--white);
     transition: var(--transition);
     cursor: pointer;
   }
   .alimtalk-member-item:hover { border-color: var(--blue); background: var(--blue-light); }
   .alimtalk-member-item.selected { background: #e8f1ff; border-color: var(--blue); }
   
   .checkbox-group-wrapper {
     display: flex;
     gap: 12px;
     min-width: 170px;
     padding-right: 14px;
     border-right: 1px solid var(--border);
   }
   .checkbox-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
   .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--blue); }
   .checkbox-item input:disabled { cursor: not-allowed; opacity: .6; }
   .checkbox-label { font-size: 10px; color: var(--text-muted); text-align: center; user-select: none; font-weight: 600; }
   .checkbox-label.adopted { color: var(--green); }
   .checkbox-label.sent    { color: var(--text-muted); }
   
   .member-info { flex: 1; min-width: 0; }
   .member-name     { font-size: 13px; font-weight: 700; color: var(--text-main); margin-bottom: 1px; }
   .member-username { font-size: 11px; color: var(--text-muted); margin-bottom: 1px; }
   .member-url      { font-size: 11px; color: var(--blue); text-decoration: none; }
   .member-url:hover { text-decoration: underline; }
   .member-meta     { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
   .member-meta .signup-date { font-size: 11px; color: var(--text-muted); }
   
   .phone-section { min-width: 180px; display: flex; align-items: center; }
   .phone-view    { display: flex; align-items: center; gap: 8px; width: 100%; }
   .phone-number  { font-size: 13px; color: var(--text-main); font-weight: 600; }
   .edit-phone-btn {
     padding: 4px 10px;
     font-size: 11px;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 6px;
     cursor: pointer;
     transition: var(--transition);
   }
   .edit-phone-btn:hover { border-color: var(--blue); color: var(--blue); }
   .phone-edit { display: flex; flex-direction: column; gap: 6px; width: 100%; }
   .phone-input-new { display: flex; gap: 6px; align-items: center; }
   .phone-input {
     flex: 1;
     padding: 6px 10px;
     border: 1.5px solid var(--border);
     border-radius: 6px;
     font-size: 12px;
     transition: var(--transition);
   }
   .phone-input:focus { outline: none; border-color: var(--blue); }
   .phone-edit-buttons { display: flex; gap: 4px; }
   .save-phone-btn   { padding: 5px 12px; font-size: 11px; background: var(--blue); color: var(--white); border: none; border-radius: 6px; cursor: pointer; font-weight: 700; transition: var(--transition); }
   .save-phone-btn:hover { background: var(--blue-dark); }
   .cancel-phone-btn { padding: 5px 12px; font-size: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--text-sub); transition: var(--transition); }
   .cancel-phone-btn:hover { background: #e5e8eb; }
   
   .consent-badge {
     display: inline-flex;
     align-items: center;
     padding: 2px 7px;
     border-radius: 6px;
     font-size: 10px;
     font-weight: 700;
     border: 1px solid;
   }
   .consent-badge.yes       { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
   .consent-badge.no        { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
   .consent-badge.na        { background: var(--bg);  color: var(--text-sub); border-color: var(--border); }
   .consent-badge.legacy-no { background: #e8eaf6; color: #3949ab; border-color: #c5cae9; }
   
   /* ══════════════════════════════════════════════
      DEMO GUARD
   ══════════════════════════════════════════════ */
   .demo-guard { position: relative; }
   .demo-overlay {
     position: absolute;
     inset: 0;
     background: rgba(255,255,255,.85);
     backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 100;
     border-radius: var(--radius-xl);
   }
   .demo-message { text-align: center; }
   .demo-title { font-size: 48px; font-weight: 900; color: var(--blue); letter-spacing: -2px; margin-bottom: 8px; }
   .demo-sub   { font-size: 16px; font-weight: 600; color: var(--text-sub); }
   
   /* ══════════════════════════════════════════════
      RESPONSIVE
   ══════════════════════════════════════════════ */
   @media (max-width: 768px) {
     .of-proposal-top-action-bar { padding: 10px 16px; top: 60px; }
     .of-proposal-action-btn span { display: none; }
     .hero-header { padding: 28px 20px 24px; }
     .content-card { padding: 20px; }
     .comparison-wrapper { grid-template-columns: 1fr; }
     .stats-grid { grid-template-columns: repeat(2, 1fr); }
     .share-buttons { flex-direction: column; }
     .of-proposal-modal-comparison-grid { grid-template-columns: 1fr; }
     .of-proposal-modal-divider { transform: rotate(90deg); }
   }
   
   /* ══════════════════════════════════════════════
      PRINT
   ══════════════════════════════════════════════ */
   @media print {
     .of-proposal-top-action-bar,
     .of-proposal-comparison-modal,
     .of-proposal-enlarge-modal,
     .of-proposal-copy-toast { display: none !important; }
     body { background: white; }
     .proposal-sidebar-fixed { display: none; }
     .proposal-layout-wrapper { grid-template-columns: 1fr; }
     * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
   }