/* ============================================================
   에디터 공용 UI 스타일 — website/editor/(Unfold Love)와
   website/editor-simple/(Simple Studio) 양쪽이 함께 로드한다.
   두 폴더 모두 레포 루트 기준 깊이가 같아(website/xxx/) 동일한
   상대경로(../../assets/editor-shared.css)로 참조할 수 있다.

   여기 있는 규칙은 "그 에디터가 어떤 청첩장을 편집하든 공통으로
   쓰이는 뼈대·톤"만 다룬다 — GNB, 3단 워크스페이스, 아코디언,
   폼 필드, 사진 업로드, 토스트, 프리뷰 폰목업.
   반대로 봉투 디자인·갤러리·계좌카드 편집처럼 청첩장별로
   다른 기능에 딸린 스타일은 각 에디터 파일의 <style>에 그대로 둔다.

   테마는 그레이스케일(뉴트럴, 파란 기 없음)로 통일 — Unfold Love
   에디터가 먼저 정한 최신 방향이며, 두 에디터가 같은 시스템을
   쓰도록 여기서 표준으로 삼는다.
   ============================================================ */

:root{
  --ink:#111111; --ink-soft:#555555; --ink-light:#9a9a9a; --paper:#fdfcfa;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
html{scrollbar-gutter:stable;} /* STEP 전환 시 창 스크롤바 유무로 sticky GNB가 좌우로 흔들리는 것 방지 */
body{
  font-family:'Pretendard',-apple-system,sans-serif; color:var(--ink);
  background:var(--paper); display:flex; flex-direction:column;
}

/* ---- 상단 바 (website/index.html GNB와 동일한 디자인) ---- */
nav.gnb{
  flex-shrink:0; position:sticky; top:0; z-index:50;
  background:rgba(253,252,250,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:68px;}
.logo{display:inline-flex; align-items:center; width:176px; height:34px; text-decoration:none;}
.logo img{display:block; width:100%; height:auto;}
.nav-right{display:flex; gap:26px; align-items:center;}
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a{font-size:14px; font-weight:400; color:#111; text-decoration:none;}
.nav-links a:hover,.nav-links a.active{color:#000;}
.nav-links a.active{font-weight:700;}
.nav-cta{font-size:13px; font-weight:500; color:#fff !important; background:#111; padding:9px 18px; border-radius:99px;}
.wrap.nav-in{max-width:1200px;} /* GNB만 좌우 마진 축소 */
.nav-toggle{display:none; width:34px; height:34px; border:none; background:none; padding:0; position:relative; cursor:pointer;}
.nav-toggle span{position:absolute; left:6px; right:6px; height:2px; background:var(--ink); border-radius:2px; transition:.25s;}
.nav-toggle span:nth-child(1){top:11px;}
.nav-toggle span:nth-child(2){top:17px;}
.nav-toggle span:nth-child(3){top:23px;}
.nav-toggle.open span:nth-child(1){top:17px; transform:rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){top:17px; transform:rotate(-45deg);}
@media (max-width:640px){
  .logo{width:148px;}
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); border-bottom:1px solid rgba(0,0,0,.08);
    max-height:0; overflow:hidden; padding:0 24px; transition:max-height .25s ease, padding .25s ease;
  }
  .nav-links.open{max-height:280px; padding:10px 24px 20px;}
  .nav-links a{display:block; width:100%; padding:12px 0; font-size:15px; border-bottom:1px solid rgba(0,0,0,.06);}
}
.btn-save{
  font-family:inherit; font-size:13px; font-weight:500; color:#fff !important; background:#111;
  border:none; border-radius:0; padding:9px 18px; cursor:pointer;
}
.btn-save:active{transform:scale(.97);}
/* 저장 CTA — 우측 편집 패널 하단 고정(스크롤 영역 밖) */
.save-cta{
  flex-shrink:0; margin:0 -24px; padding:14px 24px 20px;
  background:var(--paper); border-top:1px solid rgba(0,0,0,.08);
}
.save-cta .btn-save{width:100%; height:50px; font-size:15px; border-radius:0;}
.save-cta .demo-back{display:none; margin-top:10px; text-align:center;}
body.is-demo-mode .save-cta .demo-back{display:block;}
.save-cta .demo-back a{display:inline-block; font-size:13px; color:#111; text-decoration:underline; font-weight:600;}
.demo-banner a.demo-back-link{color:#fff; font-weight:700; text-decoration:underline; white-space:nowrap; margin-left:4px;}
.file-banner{
  display:none; background:#fff3cd; color:#7a5c00; font-size:12px; text-align:center;
  padding:6px 12px; border-bottom:1px solid #f0dca0;
}
body.is-file .file-banner{display:block;}

/* 공급자 어드민 모청(데모) 편집 모드(?mode=demo) 배너 — website/editor(Unfold Love)와
   website/editor-simple(Simple Studio) 양쪽에서 공용으로 사용 */
.demo-banner{display:none; background:#111; color:#fff; font-size:12.5px; text-align:center; padding:7px 12px; line-height:1.6;}
body.is-demo-mode .demo-banner{display:block;}

/* ---- 3단 레이아웃 ---- */
.workspace{flex:1; min-height:0; display:grid; grid-template-columns:220px 1fr 480px;}
@media (max-width:1080px){ .workspace{grid-template-columns:190px 1fr 410px;} }

/* 좌측 내비 — GNB(.wrap)와 동일한 리듬으로 여백을 맞춤 */
.side-nav{border-right:1px solid rgba(0,0,0,.08); padding:28px 16px; overflow-y:auto; display:flex; flex-direction:column; min-height:0;}
.side-nav a{
  display:block; font-size:14px; color:#444; text-decoration:none;
  padding:10px 12px; border-radius:0; margin-bottom:2px; font-weight:400;
}
.side-nav a:hover{background:#f2f2f2; color:#000;}
.side-nav a.active{background:#111; color:#fff; font-weight:600;}

/* 가운데 프리뷰 — 실제 모바일 기기 픽셀(390x760)로 렌더링한 뒤 화면에 맞춰 통째로 축소.
   iframe 폭 자체를 좁게 잡으면 청첩장 CSS의 vw 기반 폰트가 작은 화면 기준으로 다시 계산돼
   비율이 깨지므로, 실제 기기 크기를 유지한 채 transform:scale로만 줄인다. */
.preview-col{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:24px 16px; overflow:hidden;
}
.phone-viewport{position:relative; overflow:hidden; flex-shrink:0;}
.phone-scale{
  position:relative; width:390px; height:760px; transform-origin:top left;
  box-shadow:0 20px 50px rgba(0,0,0,.18); background:#fff; overflow:hidden;
}
.phone-scale iframe{width:390px; height:760px; border:0; display:block; background:#fff;}
.phone-scale iframe.preview-fading{position:absolute; inset:0; opacity:0; transition:opacity .22s ease;}
.phone-scale iframe.preview-fading.is-visible{opacity:1;}
.preview-loading{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.72); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.preview-loading.is-visible{opacity:1;}
.preview-spinner{
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(0,0,0,.12); border-top-color:rgba(0,0,0,.55);
  animation:previewSpin .7s linear infinite;
}
@keyframes previewSpin{to{transform:rotate(360deg)}}
.preview-tools{display:flex; flex-direction:column; gap:8px; flex:0 0 76px;}
.preview-tools button, .preview-tools a{
  font-family:inherit; font-size:12.5px; color:#111; background:#fff;
  border:1px solid rgba(0,0,0,.18); border-radius:0; padding:10px 8px;
  cursor:pointer; text-decoration:none; text-align:center; white-space:nowrap;
}
.preview-tools button:hover, .preview-tools a:hover{background:#f2f2f2;}

/* 우측 편집 패널 */
.edit-col{border-left:1px solid rgba(0,0,0,.08); overflow:hidden; padding:0 24px; display:flex; flex-direction:column; min-height:0;}
.edit-scroll{flex:1; min-height:0; overflow-y:auto; padding:24px 0 22px;}
details.acc-section{
  border:1px solid rgba(0,0,0,.13); border-radius:0; margin-bottom:14px; overflow:hidden;
  scroll-margin-top:16px; /* 좌측 메뉴로 앵커 이동 시 상단 여백 확보 */
}
details.acc-section > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; font-size:17px; font-weight:600; color:#111; background:#fff; /* Pretendard SemiBold */
}
details.acc-section > summary::-webkit-details-marker{display:none;}
.acc-chevron{display:inline-flex; align-items:center; transition:transform .25s; color:#999;}
.acc-chevron svg{width:14px; height:8px; display:block;}
details[open] .acc-chevron{transform:rotate(180deg);}
.acc-body{padding:8px 18px 24px; display:flex; flex-direction:column; gap:18px; background:#fff;}
.field-row label{display:block; font-size:15px; color:#444; margin:10px 0 14px; font-weight:400;}
.field-divided{border-top:1px solid #ececec; padding-top:18px;}
.field-row input[type=text], .field-row input[type=date], .field-row input[type=time], .field-row textarea{
  width:100%; background:#f7f7f7; border:1px solid #e0e0e0; border-radius:0;
  padding:10px 12px; font-family:inherit; font-size:14.5px; color:#111; outline:none;
}
.field-row input:focus, .field-row textarea:focus{border-color:#111;}
.field-row textarea{min-height:88px; resize:vertical; line-height:1.6;}
.field-pair{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.field-note{font-size:12px; color:#8a8a8a; line-height:1.6; word-break:keep-all; overflow-wrap:break-word;}
.sub-heading{font-size:15px; font-weight:600; color:#111; margin-top:12px;}

/* 사진 업로드 */
.photo-preview{
  width:120px; aspect-ratio:257/400; border-radius:0; overflow:hidden;
  background:#ececec; display:flex; align-items:center; justify-content:center;
  margin:0 auto;
}
.photo-preview img{width:100%; height:100%; object-fit:cover; display:block;}
.upload-btn{
  display:inline-block; font-size:13px; color:#111; background:#efefef;
  border-radius:0; padding:8px 16px; cursor:pointer; text-align:center;
}
.upload-btn input{display:none;}
/* .field-row label{...}은 안의 모든 label에 걸리는 범용 규칙이라(예: 소개글 라벨 등),
   upload-btn이 .field-row 안에 중첩되면 font-size·color·margin이 덮어써져
   대표사진의 upload-btn과 다르게 보임 — 같은 룩을 유지하도록 다시 명시 */
.field-row .upload-btn{display:inline-block; font-size:13px; color:#111; font-weight:400; margin:0;}

/* 색상 피커·체크박스·라디오 — 범용 폼 컨트롤 (에디터 어디서든 재사용) */
.field-row input[type=color]{
  width:100%; height:40px; border:1px solid #e0e0e0; border-radius:0;
  padding:0; background:none; cursor:pointer;
}
.field-row input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
.field-row input[type=color]::-webkit-color-swatch{border:none; border-radius:0;}
.field-row input[type=color]:disabled{opacity:.4; cursor:default;}
.check-label, .field-row label.check-label{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:13px; color:#444; margin-bottom:8px; line-height:1;
}
.radio-row{display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:8px;}
.radio-row + .field-note{margin-top:-4px;} /* 라디오 바로 아래 설명은 딱 붙게 */
.radio-row .check-label{margin-bottom:0;}
.check-label input[type=checkbox], .check-label input[type=radio]{ /* 써클 체크·라디오 */
  appearance:none; -webkit-appearance:none; margin:0;
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid #c9c9c9; background:#fff;
  display:inline-grid; place-content:center; cursor:pointer; transition:.15s;
}
.check-label input:hover{border-color:#999;}
.check-label input:checked{background:#111; border-color:#111;}
.check-label input[type=checkbox]:checked::after{
  content:""; width:9px; height:5px; margin-top:-2px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.check-label input[type=radio]:checked::after{
  content:""; width:8px; height:8px; border-radius:50%; background:#fff;
}

.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(10px);
  background:rgba(0,0,0,.92); color:#fff; font-size:13px;
  padding:10px 20px; border-radius:0; opacity:0; pointer-events:none;
  transition:.3s; z-index:99;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}