/* 편집 모드 기본 스타일 - 아트데코 골드 */
    body.edit-mode .editable {
      position: relative;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* hero 내부 절대 위치 요소들은 position: absolute 유지 (relative로 바뀌면 flex 아이템이 되어 레이아웃 깨짐) */
    body.edit-mode .hero-bg.editable,
    body.edit-mode .hero-overlay.editable {
      position: absolute !important;
    }

    /* 갤러리 카드는 coverflow 3D 레이아웃 유지 */
    body.edit-mode .gallery-card.editable {
      position: absolute !important;
      transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
    }

    /* 호버 효과 - 아트데코 골드 강조 */
    body.edit-mode .editable:hover {
      outline: 2px solid #d4a574 !important;
      outline-offset: 6px;
      background: rgba(212, 165, 116, 0.05) !important;
    }

    /* 모든 텍스트 요소 호버 시 편집 가능 표시 (아직 .editable 아닌 요소도) */
    body.edit-mode h1:hover, body.edit-mode h2:hover, body.edit-mode h3:hover, body.edit-mode h4:hover,
    body.edit-mode p:hover, body.edit-mode span:hover, body.edit-mode a:hover,
    body.edit-mode li:hover, body.edit-mode blockquote:hover, body.edit-mode label:hover {
      outline: 2px dashed rgba(212, 165, 116, 0.6) !important;
      outline-offset: 4px;
      cursor: pointer;
    }
    body.edit-mode nav *:hover, body.edit-mode .navbar *:hover,
    body.edit-mode .edit-mode-bar *:hover, body.edit-mode .font-toolbar *:hover,
    body.edit-mode .edit-popup *:hover, body.edit-mode .modal *:hover {
      outline: none !important;
      cursor: default;
    }

    /* 호버 시 편집 힌트 라벨 */
    body.edit-mode .editable:hover::before {
      content: '';
      position: absolute;
      inset: -6px;
      border: 2px dashed rgba(212, 165, 116, 0.4);
      pointer-events: none;
      animation: editPulse 2s ease-in-out infinite;
    }

    @keyframes editPulse {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 0.7; }
    }

    body.edit-mode .editable:hover::after {
      content: attr(data-edit-label);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 8px;
      background: linear-gradient(135deg, #292524 0%, #44403c 100%);
      color: #d4a574;
      padding: 5px 10px;
      font-family: var(--heading-font);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      white-space: nowrap;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      z-index: 100000;
      pointer-events: none;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      border: 1px solid #d4a574;
      border-radius: 4px;
    }

    /* navbar 항목 - 라벨이 아래로 표시 */
    body.edit-mode .nav-link.editable:hover::after {
      bottom: auto;
      top: 100%;
      margin-top: 8px;
      margin-bottom: 0;
    }

    /* 인라인 편집 요소 - 텍스트 커서 */
    body.edit-mode .editable[data-edit-type="text"]:hover {
      cursor: text;
    }

    /* 모달 편집 요소 - 포인터 커서 */
    body.edit-mode .editable[data-edit-type="popup"]:hover,
    body.edit-mode .editable[data-edit-type="image"]:hover {
      cursor: pointer;
    }

    /* 편집 중 상태 - 아트데코 */
    body.edit-mode .editable.editing {
      outline: 3px solid #b8956a !important;
      outline-offset: 6px;
      background: rgba(255, 255, 255, 0.98) !important;
      box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.2), 0 8px 30px rgba(0,0,0,0.15);
    }

    body.edit-mode .editable.editing::before {
      display: none !important;
    }

    body.edit-mode .editable.editing::after {
      display: none !important;
    }

    /* 편집 중 커서 - 텍스트가 보이도록 gradient 효과 제거 */
    body.edit-mode .editable[contenteditable="true"] {
      min-height: 1.2em;
      padding: 8px 12px;
      border-radius: 8px;
      /* gradient text 효과 제거하여 텍스트 보이게 */
      -webkit-text-fill-color: #1F2937 !important;
      background: rgba(255, 255, 255, 0.98) !important;
      background-clip: border-box !important;
      -webkit-background-clip: border-box !important;
      color: #1F2937 !important;
      caret-color: #059669;
    }

    /* section-title 편집 시 특별 처리 */
    body.edit-mode .section-title.editing,
    body.edit-mode .section-title[contenteditable="true"] {
      background: rgba(255, 255, 255, 0.98) !important;
      -webkit-text-fill-color: #1F2937 !important;
      color: #1F2937 !important;
      animation: none !important;
    }

    /* hero-title, hero-subtitle 편집 시 */
    body.edit-mode .hero-title.editing,
    body.edit-mode .hero-title[contenteditable="true"],
    body.edit-mode .hero-subtitle.editing,
    body.edit-mode .hero-subtitle[contenteditable="true"] {
      background: rgba(255, 255, 255, 0.98) !important;
      -webkit-text-fill-color: #1F2937 !important;
      color: #1F2937 !important;
      text-shadow: none !important;
    }

    /* 편집 완료 토스트 알림 - 아트데코 */
    .edit-toast {
      position: fixed;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #292524 0%, #44403c 100%);
      color: #d4a574;
      padding: 16px 32px;
      font-family: var(--heading-font);
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      z-index: 100000;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
      border: 1px solid #d4a574;
      animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), toastSlideOut 0.3s ease 2.2s forwards;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .edit-toast::before {
      content: '◆';
      font-size: 10px;
      color: #d4a574;
    }

    @keyframes toastSlideIn {
      from {
        opacity: 0;
        transform: translateX(-50%) translateY(30px) scale(0.9);
      }
      to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
      }
    }

    @keyframes toastSlideOut {
      from { opacity: 1; transform: translateX(-50%) translateY(0); }
      to { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    }

    /* 편집 모드 상태바 - 작은 플로팅 버튼 (오른쪽 하단) */
    .edit-mode-bar {
      position: fixed;
      bottom: 20px;
      right: 20px;
      top: auto;
      left: auto;
      background: linear-gradient(135deg, #292524 0%, #44403c 100%);
      color: #d4a574;
      padding: 8px 14px;
      font-family: var(--heading-font);
      font-size: 11px;
      letter-spacing: 0.08em;
      z-index: 100001;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      border: 1px solid #d4a574;
      border-radius: 20px;
      opacity: 0.9;
      transition: opacity 0.3s;
    }

    .edit-mode-bar:hover {
      opacity: 1;
    }

    .edit-mode-bar::before {
      display: none;
    }

    .edit-mode-bar .edit-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      background: none;
      transform: none;
      font-size: 12px;
    }

    .edit-mode-bar .edit-title {
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-size: 10px;
    }

    .edit-mode-bar .edit-hint {
      display: none; /* 힌트 숨김 - 공간 절약 */
      opacity: 0.8;
      font-size: 10px;
      padding-left: 8px;
      border-left: 1px solid rgba(212, 165, 116, 0.4);
      font-family: var(--body-font);
      letter-spacing: 0.05em;
    }

    /* ===== 갤러리 편집 버튼 ===== */
    body.edit-mode .gallery-delete-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 28px;
      height: 28px;
      background: rgba(239, 68, 68, 0.9);
      color: white;
      border: none;
      border-radius: 50%;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      z-index: 100;
      opacity: 0;
      transform: scale(0.8);
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    body.edit-mode .gallery-card:hover .gallery-delete-btn {
      opacity: 1;
      transform: scale(1);
    }
    body.edit-mode .gallery-delete-btn:hover {
      background: #dc2626;
      transform: scale(1.1);
    }

    /* 편집 모드에서 갤러리 래퍼에 여백 추가 */
    body.edit-mode .circular-gallery-wrapper {
      margin-bottom: 80px;
      overflow: visible;
    }

    body.edit-mode .gallery-add-btn {
      position: absolute;
      bottom: -60px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      background: linear-gradient(135deg, #d4a574 0%, #b8956a 100%);
      color: white;
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 30px;
      font-family: var(--heading-font);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(212, 165, 116, 0.5);
      transition: all 0.3s ease;
      z-index: 100;
    }
    body.edit-mode .gallery-add-btn:hover {
      transform: translateX(-50%) translateY(-3px);
      box-shadow: 0 10px 30px rgba(212, 165, 116, 0.6);
      background: linear-gradient(135deg, #e0b584 0%, #c8a67a 100%);
    }
    body.edit-mode .gallery-add-btn span:first-child {
      font-size: 18px;
      font-weight: bold;
    }

    /* ===== 아트데코 편집 팝업 오버레이 ===== */
    .edit-popup-overlay {
      position: fixed;
      inset: 0;
      background: rgba(41, 37, 36, 0.85);
      backdrop-filter: blur(8px);
      z-index: 100002;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .edit-popup-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    /* 아트데코 편집 팝업 카드 */
    .edit-popup {
      position: relative;
      background: linear-gradient(135deg, #FAF9F6 0%, #F5F3EE 100%);
      border: 2px solid #d4a574;
      padding: 32px;
      width: 92%;
      max-width: 420px;
      max-height: 85vh;
      overflow-y: auto;
      transform: scale(0.9) translateY(30px);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 25px 80px rgba(0,0,0,0.4),
                  inset 0 1px 0 rgba(255,255,255,0.8);
    }

    /* 아트데코 코너 장식 */
    .edit-popup::before,
    .edit-popup::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border-color: #d4a574;
      border-style: solid;
    }
    .edit-popup::before {
      top: 8px;
      left: 8px;
      border-width: 2px 0 0 2px;
    }
    .edit-popup::after {
      bottom: 8px;
      right: 8px;
      border-width: 0 2px 2px 0;
    }

    .edit-popup-overlay.active .edit-popup {
      transform: scale(1) translateY(0);
    }

    .edit-popup h3 {
      font-family: var(--heading-font);
      font-size: 1.4rem;
      font-weight: 400;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 24px;
      color: #292524;
      display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 16px;
      border-bottom: 1px solid #d4a574;
      text-align: center;
      justify-content: center;
    }

    .edit-popup h3 .popup-icon {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, #d4a574 0%, #b8956a 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      transform: rotate(45deg);
    }
    .edit-popup h3 .popup-icon::before {
      transform: rotate(-45deg);
    }

    .edit-popup-field {
      margin-bottom: 20px;
    }

    .edit-popup-field label {
      display: block;
      font-family: var(--heading-font);
      font-size: 0.85rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #57534e;
      margin-bottom: 8px;
    }

    .edit-popup-field input,
    .edit-popup-field textarea {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid #d6d3d1;
      background: #ffffff;
      font-family: var(--body-font);
      font-size: 15px;
      color: #292524;
      transition: all 0.3s ease;
    }

    .edit-popup-field input:focus,
    .edit-popup-field textarea:focus {
      outline: none;
      border-color: #d4a574;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.15);
    }

    .edit-popup-field input::placeholder,
    .edit-popup-field textarea::placeholder {
      color: #a8a29e;
      font-style: italic;
    }

    .edit-popup-field textarea {
      min-height: 100px;
      resize: vertical;
      line-height: 1.6;
    }

    /* 이미지 미리보기 - 아트데코 */
    .edit-popup-preview {
      position: relative;
      margin-bottom: 20px;
      border: 2px solid #d4a574;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .edit-popup-preview::before {
      content: '◆';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      color: #d4a574;
      background: #FAF9F6;
      padding: 0 8px;
      z-index: 1;
    }

    .edit-popup-preview img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      display: block;
    }

    /* 이미지 변경 버튼 */
    .image-change-btn {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 20px;
      background: linear-gradient(135deg, rgba(212, 165, 116, 0.95) 0%, rgba(184, 149, 106, 0.95) 100%);
      color: white;
      border: 1px solid rgba(255,255,255,0.3);
      font-family: var(--heading-font);
      font-size: 0.85rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
      backdrop-filter: blur(4px);
    }
    .image-change-btn:hover {
      background: linear-gradient(135deg, rgba(184, 149, 106, 0.98) 0%, rgba(160, 120, 80, 0.98) 100%);
      transform: translateX(-50%) translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    }

    /* 버튼 영역 - 아트데코 */
    .edit-popup-buttons {
      display: flex;
      gap: 12px;
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid #d4a574;
      position: relative;
    }
    .edit-popup-buttons::before {
      content: '◆';
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      color: #d4a574;
      background: #FAF9F6;
      padding: 0 10px;
    }

    .edit-popup-btn {
      flex: 1;
      padding: 14px 20px;
      font-family: var(--heading-font);
      font-size: 0.9rem;
      font-weight: 400;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid #d4a574;
    }

    .edit-popup-btn.primary {
      background: linear-gradient(135deg, #d4a574 0%, #b8956a 100%);
      color: white;
      box-shadow: 0 4px 15px rgba(212, 165, 116, 0.35);
    }

    .edit-popup-btn.primary:hover {
      background: linear-gradient(135deg, #b8956a 0%, #a07850 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(212, 165, 116, 0.45);
    }

    .edit-popup-btn.primary:active {
      transform: translateY(0);
    }

    .edit-popup-btn.secondary {
      background: transparent;
      color: #57534e;
      border-color: #d6d3d1;
    }

    .edit-popup-btn.secondary:hover {
      background: rgba(212, 165, 116, 0.1);
      border-color: #d4a574;
      color: #292524;
    }

    /* 이미지 업로드 영역 - 아트데코 */
    .edit-image-upload {
      border: 2px dashed #d4a574;
      padding: 28px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      background: rgba(212, 165, 116, 0.05);
      position: relative;
    }
    .edit-image-upload::before,
    .edit-image-upload::after {
      content: '';
      position: absolute;
      width: 12px;
      height: 12px;
      border-color: #d4a574;
      border-style: solid;
    }
    .edit-image-upload::before {
      top: 4px;
      left: 4px;
      border-width: 1px 0 0 1px;
    }
    .edit-image-upload::after {
      bottom: 4px;
      right: 4px;
      border-width: 0 1px 1px 0;
    }

    .edit-image-upload:hover {
      border-color: #b8956a;
      background: rgba(212, 165, 116, 0.1);
      transform: scale(1.01);
    }

    .edit-image-upload .upload-icon {
      font-size: 32px;
      margin-bottom: 10px;
      opacity: 0.7;
    }

    .edit-image-upload p {
      margin: 0;
      font-family: var(--body-font);
      font-size: 13px;
      color: #57534e;
    }

    .edit-image-upload p strong {
      color: #3B82F6;
    }

    /* 편집 모드일 때 - 상단 여백 없음 (편집바가 하단에 있으므로) */
    body.edit-mode .navbar {
      top: 0;
    }

    body.edit-mode .hero {
      margin-top: 0;
    }

    /* 편집 가능 요소 호버 효과 - 아트데코 */
    body.edit-mode .service-card.editable:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(212, 165, 116, 0.25);
    }

    /* 갤러리 카드 호버 - transform 제외 */
    body.edit-mode .gallery-card.editable:hover {
      box-shadow: 0 8px 30px rgba(212, 165, 116, 0.25);
    }

    /* 접근성 및 포커스 - 아트데코 */
    body.edit-mode .editable:focus-visible {
      outline: 3px solid #d4a574;
      outline-offset: 4px;
    }

    /* 스크롤바 커스텀 (팝업) - 아트데코 */
    .edit-popup::-webkit-scrollbar {
      width: 6px;
    }

    .edit-popup::-webkit-scrollbar-track {
      background: #f5f3ee;
    }

    .edit-popup::-webkit-scrollbar-thumb {
      background: #d4a574;
      border-radius: 0;
    }

    .edit-popup::-webkit-scrollbar-thumb:hover {
      background: #b8956a;
    }

    /* 모바일 최적화 */
    @media (max-width: 768px) {
      .edit-mode-bar {
        padding: 10px 16px;
        font-size: 12px;
      }

      .edit-popup {
        width: 95%;
        padding: 20px;
        max-height: 90vh;
      }

      body.edit-mode .editable:hover::after {
        font-size: 11px;
        padding: 5px 10px;
      }

      /* 모바일: 폰트 툴바를 하단에 고정 */
      .font-toolbar {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding: 10px 12px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
      }
      .font-toolbar::before {
        display: none;
      }
      .font-toolbar.below::before {
        display: none;
      }
      .font-toolbar-close {
        top: -12px;
        right: 12px;
      }
      .font-toolbar select.font-select {
        width: 110px;
        font-size: 11px;
      }
      .font-toolbar select.font-weight-select {
        width: 90px;
        font-size: 11px;
      }
      .font-toolbar input[type="number"] {
        width: 45px;
      }
    }

    /* ===== 플로팅 폰트 툴바 ===== */
    .font-toolbar {
      position: fixed;
      z-index: 999999;
      display: none;
      background: linear-gradient(135deg, #faf7f2 0%, #f5f0e8 100%);
      border: 2px solid #d4a574;
      box-shadow: 0 8px 32px rgba(0,0,0,0.25);
      padding: 8px 12px;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      max-width: 420px;
      transform: translateX(-50%);
    }
    .font-toolbar.active {
      display: flex;
    }
    .font-toolbar::before {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #d4a574;
    }
    .font-toolbar select,
    .font-toolbar input[type="number"] {
      padding: 6px 8px;
      border: 1px solid #d6d3d1;
      background: white;
      font-family: var(--body-font);
      font-size: 12px;
      border-radius: 0;
      cursor: pointer;
    }
    .font-toolbar select:focus,
    .font-toolbar input:focus {
      outline: none;
      border-color: #d4a574;
    }
    .font-toolbar select.font-select {
      width: 140px;
    }
    .font-toolbar select.font-weight-select {
      width: 120px;
      padding: 4px 6px;
      border: 1px solid #d6d3d1;
      background: white;
      font-size: 12px;
      cursor: pointer;
    }
    .font-toolbar input[type="number"] {
      width: 55px;
    }
    .font-toolbar input[type="color"] {
      width: 32px;
      height: 28px;
      padding: 2px;
      border: 1px solid #d6d3d1;
      cursor: pointer;
    }
    .font-toolbar-btn {
      padding: 6px 10px;
      background: transparent;
      border: 1px solid #d6d3d1;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s;
      min-width: 32px;
    }
    .font-toolbar-btn:hover {
      background: #d4a574;
      border-color: #d4a574;
      color: white;
    }
    .font-toolbar-btn.active {
      background: #b8956a;
      border-color: #b8956a;
      color: white;
    }
    .font-toolbar-divider {
      width: 1px;
      height: 24px;
      background: #d6d3d1;
      margin: 0 4px;
    }
    .font-toolbar-close {
      position: absolute;
      top: -10px;
      right: -10px;
      width: 24px;
      height: 24px;
      background: #292524;
      border: 2px solid #d4a574;
      color: #d4a574;
      border-radius: 50%;
      cursor: pointer;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .font-toolbar-close:hover {
      background: #d4a574;
      color: white;
    }
    /* 툴바가 아래에 위치할 때 */
    .font-toolbar.below::before {
      bottom: auto;
      top: -8px;
      border-top: none;
      border-bottom: 8px solid #d4a574;
    }
    /* 폰트 미리보기 */
    .font-select option {
      padding: 8px;
    }