/* ============================================================
   에디터 공용 UI 스타일 — website/editor/(Unfold Love)와
   website/editor-simple/(Still Memory) 양쪽이 함께 로드한다.
   두 폴더 모두 레포 루트 기준 깊이가 같아(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%; overflow:hidden;}
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;
  min-height:0;
}

/* GNB는 assets/gnb.css + assets/gnb.js 공용 파일이 전담한다 — 이 파일엔 두지 않는다 */
.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}

.btn-save{
  font-family:inherit; font-size:13px; font-weight:500; color:#fff !important; background:#111;
  border:none; border-radius:4px; 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:4px;}
.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(Still Memory) 양쪽에서 공용으로 사용 */
.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; overflow:hidden; display:grid; grid-template-columns:280px 1fr 520px;}
@media (max-width:1080px){ .workspace{grid-template-columns:240px 1fr 450px;} }

/* 좌측 내비 — GNB(.wrap)와 동일한 리듬으로 여백을 맞춤 */
.side-nav{border-right:1px solid rgba(0,0,0,.08); padding:28px 16px; overflow-y:auto; scrollbar-width:none; display:flex; flex-direction:column; min-height:0;}
.side-nav::-webkit-scrollbar{display:none;}
.side-nav a{
  display:block; font-size:14px; color:#444; text-decoration:none;
  padding:10px 12px; border-radius:4px; 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; overflow-anchor:none;
}
.phone-viewport{position:relative; overflow:hidden; flex-shrink:0; overflow-anchor:none;}
.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;
  border-radius:10px; overflow-anchor:none;
}
.phone-scale iframe{width:390px; height:760px; border:0; display:block; background:#fff; overflow-anchor:none;}
.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)}}
/* 이미지 업로드/처리 중 오버레이 (여러 장 처리 시 멈춘 것처럼 보이지 않게) */
.um-busy{position:fixed; inset:0; z-index:9998; display:none; align-items:center; justify-content:center; background:rgba(20,20,24,.42); backdrop-filter:blur(2px);}
.um-busy.show{display:flex;}
.um-busy .um-busy-card{background:#fff; border-radius:14px; padding:22px 26px; display:flex; flex-direction:column; align-items:center; gap:12px; box-shadow:0 20px 60px rgba(0,0,0,.25); min-width:180px;}
.um-busy .um-busy-spin{width:30px; height:30px; border:3px solid #e6e6e6; border-top-color:#111; border-radius:50%; animation:previewSpin .7s linear infinite;}
.um-busy .um-busy-msg{font-size:14px; color:#333; font-weight:500; text-align:center;}
.preview-tools{display:flex; flex-direction:column; gap:8px; flex:0 0 76px;}
.preview-tools.is-hidden{display:none;} /* 공유 설정 탭에서는 카카오톡·링크 공유 미리보기가 항상 보이므로 새로고침/새 창 버튼이 쓸모없어 숨긴다 */
.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:4px; padding:10px 8px;
  cursor:pointer; text-decoration:none; text-align:center; white-space:nowrap;
}
.preview-tools button:hover, .preview-tools a:hover{background:#f2f2f2;}
.preview-tools button.is-active{background:#111; color:#fff; border-color:#111;}
.preview-tools button.is-active:hover{background:#111;}

/* 카카오톡·링크 공유 미리보기 — 프리뷰 폰(phone-scale) 위에 덮이는 목업 화면. "공유 설정" 탭이
   활성화되면 자동으로 뜬다(수동 토글 버튼 없음). phone-scale의 scale(transform) 안에 들어있어
   실제 폰 프리뷰와 같은 비율로 축소된다. 카카오톡 공유 카드 + 일반 링크(URL) 공유 카드를 위아래로
   나란히 보여준다 — 피그마(node 253:89)와 동일한 구성 */
.kakao-mock-overlay{
  position:absolute; inset:0; z-index:4; display:none; flex-direction:column;
  background:#a6c2d3;
}
.kakao-mock-overlay.is-visible{display:flex;}
.kakao-mock-topbar{
  flex:0 0 auto; height:60px; display:flex; align-items:center; gap:10px;
  padding:0 18px;
}
.kakao-mock-back{width:9px; height:16px; flex-shrink:0;}
.kakao-mock-name{flex:1; text-align:center; font-size:15px; font-weight:600; color:#111;}
.kakao-mock-menu{width:18px; height:14px; flex-shrink:0;}
.kakao-mock-chat{
  flex:1; overflow-y:auto; padding:6px 16px 56px; display:flex; flex-direction:column; gap:26px;
  scrollbar-width:none; -ms-overflow-style:none; /* 세로 스크롤은 유지하되 스크롤바는 안 보이게 */
  scroll-behavior:smooth;
}
.kakao-mock-chat::-webkit-scrollbar{display:none;}
.kakao-mock-group{display:flex; align-items:flex-start; gap:9px;}
.kakao-mock-avatar{width:42px; height:42px; border-radius:11px; object-fit:cover; flex-shrink:0;}
.kakao-mock-group-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:9px;}
.kakao-mock-label{font-size:14.5px; color:#111;}
/* 카드 비율·구성은 피그마(node 253:89, 275×510 카카오톡 카드 · 275×232 링크 카드)와 동일 —
   카카오톡 카드는 이미지 3:4에 가까운 세로형에 "자세히보기·위치보기" 2버튼 + 하단 워터마크,
   링크 카드는 이미지가 더 납작하고 버튼 대신 도메인 링크 한 줄만 보여준다 */
.kakao-mock-card{background:#feffff; border-radius:13px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.12);}
.kakao-mock-img{width:100%; aspect-ratio:275/364; background:#efefef; overflow:hidden;}
.kakao-mock-card-link .kakao-mock-img{aspect-ratio:275/133;}
.kakao-mock-img img{width:100%; height:100%; object-fit:cover; display:block;}
.kakao-mock-body{padding:10px 4px 6px 10px; display:flex; flex-direction:column; gap:7px;}
.kakao-mock-title{
  font-size:13.8px; font-weight:400; color:#000; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.kakao-mock-desc{
  font-size:13px; color:#767676; line-height:1.5; white-space:pre-line;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.kakao-mock-actions{display:flex; gap:4px; padding:4px 13px 0;}
.kakao-mock-btn{
  flex:1; min-width:0; border:0; border-radius:6px;
  background:#efefef; padding:10px 0; font:inherit; font-size:13.8px; color:#000; cursor:default;
}
.kakao-mock-watermark{display:flex; align-items:center; gap:4px; padding:8px 13px 10px;}
.kakao-mock-watermark img{width:17px; height:17px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.kakao-mock-watermark span{font-size:11px; color:#797979;}
.kakao-mock-linkurl{padding:6px 13px 10px; font-size:13px; color:#0074e3; text-decoration:underline;}

/* 우측 편집 패널 */
.edit-col{border-left:1px solid rgba(0,0,0,.08); overflow:hidden; padding:0 24px; display:flex; flex-direction:column; min-height:0;}
/* overflow-anchor:none — 아코디언(.acc-body)이 WAAPI로 매 프레임 높이를 바꾸는 동안, 브라우저의
   스크롤 앵커링이 그 변화를 보정하려고 매 프레임 scrollTop을 다시 계산해 이 패널이 계속
   아래로 밀리는 것처럼 보이는 버그가 있었다(2026-08-18, "우측 패널 섹션 펼치면 스크롤 폭주").
   이 패널의 스크롤 위치는 클릭 핸들러가 직접 관리하므로 브라우저 자동 보정을 꺼둔다. */
.edit-scroll{flex:1; min-height:0; overflow-y:auto; overflow-anchor:none; scrollbar-width:none; padding:24px 0 22px;}
.edit-scroll::-webkit-scrollbar{display:none;}

/* 우측 패널 상단 탭 — 여러 섹션 그룹을 탭으로 나눠 보여줄 때 공용으로 쓰는 밑줄(라인) 탭.
   하단 경계선 위에 활성 탭만 굵은 밑줄로 표시. 탭 전환에 따른 실제 섹션 숨김(.panel-hidden 조건)은
   에디터마다 달라(예: 모바일 위저드가 있는 에디터는 위저드가 꺼져 있을 때만 숨김) 각 페이지에서 정의한다. */
.panel-tabs{display:flex; gap:22px; flex-shrink:0; margin:20px 0 0; border-bottom:1px solid rgba(0,0,0,.1);}
.panel-tab{
  flex:none; padding:0 2px 13px; border:none; border-bottom:2px solid transparent;
  background:none; color:#999; font:inherit; font-size:14px; font-weight:500; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.panel-tab:hover{color:#111;}
.panel-tab.active{color:#111; font-weight:700; border-bottom-color:#111;}
details.acc-section{
  border:1px solid rgba(0,0,0,.13); border-radius:4px; 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:4px;
  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;}
.field-note-tight{margin-top:-10px;} /* 바로 위 필드(textarea 등)에 딱 붙는 보조 설명 — share-field-group의 18px gap을 줄여줌 */
.field-note-spaced{margin-top:8px;} /* field-row 안에 textarea와 같이 있는 보조 설명 — 위 두 요소는 자체 gap이 없어 그냥 붙으므로 별도로 띄워줌 */
.sub-heading{font-size:15px; font-weight:600; color:#111; margin-top:12px;}
/* 공유 설정(일반 링크·카카오톡) 필드 묶음 — acc-body의 flex-column gap을 그룹 내부에서도 유지 */
.share-field-group{display:flex; flex-direction:column; gap:18px;}

/* 사진 업로드 */
.photo-preview{
  width:120px; aspect-ratio:257/400; border-radius:4px; 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:4px; 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:4px;
  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:4px;}
.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;
}
.toggle-label{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:20px; margin:0; cursor:pointer;
  font-size:14px; color:#444; line-height:1.45;
}
.toggle-label input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.toggle-ui{
  position:relative; flex:0 0 auto; width:44px; height:24px; border-radius:999px;
  background:#d9d9d9; transition:background .18s ease;
}
.toggle-ui::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .18s ease;
}
.toggle-label input:checked + .toggle-ui{background:#111;}
.toggle-label input:checked + .toggle-ui::after{transform:translateX(20px);}
.toggle-label input:focus-visible + .toggle-ui{outline:2px solid #111; outline-offset:3px;}
.toggle-label:has(input:disabled){opacity:.4; cursor:default;}
.editor-info-box{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:0; padding:12px 14px; border-radius:4px;
  background:#f7f7f7; border:1px solid #e5e5e5;
  font-size:12px; line-height:1.6; color:#555; word-break:keep-all;
}
.editor-info-box[hidden]{display:none;}
.editor-info-box a{
  display:inline-flex; align-items:center; gap:2px; flex:none; color:#111;
  font-size:12px; font-weight:600; text-decoration:none; white-space:nowrap;
}
.editor-info-box a svg{width:12px; height:12px; stroke-width:1.3;}
.editor-info-box a:hover{text-decoration:underline;}

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

/* ============================================================
   드래그 핸들(⠿) 안내 툴팁 — 콘텐츠 섹션을 처음 보는 사용자에게
   "끌어서 순서를 바꿀 수 있다"는 걸 1회 안내. X로 닫으면 다시 뜨지 않는다
   (assets/editor-shared.js의 initDragOrderHint가 DOM을 주입).
   ============================================================ */
.drag-hint-tip{
  position:fixed; z-index:150; display:flex; align-items:flex-start; gap:8px;
  max-width:230px; background:rgba(20,20,20,.96); color:#fff; font-size:12.5px; line-height:1.5;
  padding:10px 10px 10px 14px; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.24);
}
.drag-hint-tip::before{
  content:""; position:absolute; top:-5px; left:var(--tip-arrow-x, 20px);
  width:9px; height:9px; background:rgba(20,20,20,.96); transform:translateX(-50%) rotate(45deg);
}
/* 아래쪽에 놓을 자리가 없어 핸들 위로 뒤집었을 때 — 화살표도 아래쪽 모서리로 이동 */
.drag-hint-tip.drag-hint-tip--flip::before{ top:auto; bottom:-5px; }
.drag-hint-tip span{padding-top:1px;}
.drag-hint-close{
  flex-shrink:0; width:18px; height:18px; margin:-2px -2px 0 0; border:none; background:none;
  color:rgba(255,255,255,.55); font-size:16px; line-height:1; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.drag-hint-close:hover{color:#fff;}
@media (max-width:760px){ .drag-hint-tip{display:none !important;} }

/* ============================================================
   청첩장 주소 설정 모달 — "저장하기" 첫 클릭 시 1회 노출
   (assets/editor-shared.js의 openInviteUrlModal이 DOM을 주입)
   ============================================================ */
.url-modal-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(20,20,24,.55); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.url-modal-overlay.open{display:flex;}
.url-modal{
  background:#fff; width:min(440px,100%); padding:36px 32px 32px; position:relative; border-radius:20px;
}
.url-modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px;}
.url-modal-title{font-size:18px; font-weight:700; color:var(--ink);}
.url-modal-close{
  width:32px; height:32px; border:none; background:rgba(0,0,0,.06); cursor:pointer;
  font-size:15px; line-height:32px; text-align:center; border-radius:50%; color:#333; padding:0;
}
.url-modal-close:hover{background:rgba(0,0,0,.12);}
/* 「이어서 편집할까요?」·「마이페이지에서 이어서 편집할 수 있어요」 — 아래 회색 안내 박스와
   붙어 보이던 걸 떼어놓는다(2026-08-27). */
.url-modal-q{margin-bottom:16px;}
.url-modal-notice{
  font-size:12.5px; line-height:1.6; color:var(--ink); text-align:center;
  background:#f7f7f7; border-radius:4px; padding:12px 14px; margin-bottom:24px;
}
/* 저장 완료 안내 — 7일 경고를 같은 회색 박스 안에 넣을 때 위쪽만 살짝 띄운다. */
.url-modal-notice .url-done-note{margin:10px 0 0;}
.url-field{
  display:flex; align-items:center; border:1.5px solid #ddd; padding:0 4px; border-radius:4px;
  transition:.15s;
}
.url-field:focus-within{border-color:var(--ink);}
.url-prefix{flex-shrink:0; font-size:14.5px; color:#999; padding:14px 0 14px 12px; white-space:nowrap;}
.url-input{
  flex:1; min-width:0; border:none; outline:none; background:none;
  font:inherit; font-size:14.5px; color:var(--ink); padding:14px 12px 14px 2px;
}
.url-input::placeholder{color:#bbb;}
.url-hint{display:flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; color:#999;}
.url-hint::before{content:""; width:5px; height:5px; border-radius:50%; background:#ccc; flex-shrink:0;}
.url-submit{
  width:100%; height:52px; margin-top:24px; border:none; cursor:not-allowed; border-radius:4px;
  font:inherit; font-size:15px; font-weight:600; color:#fff; background:#ccc;
  transition:.15s;
}
.url-submit.is-ready{cursor:pointer; background:#111;}

/* 「이어서 편집할까요?」 두 갈래 버튼 — 「네」가 기본(검정), 새로 만들기는 만들던 내용을
   지우는 쪽이라 테두리 버튼으로 한 발 물러서 있다. 높이·모서리는 .url-submit과 같게 맞춘다.
   글자 수가 크게 달라서(「네」 / 「아니요, 새로 만들게요」) 폭을 1:1로 두면 긴 쪽이 줄바꿈된다. */
.url-choice{display:flex; gap:8px; margin-top:24px;}
.url-choice button{
  height:52px; border-radius:4px; font:inherit; font-size:15px; font-weight:600;
  cursor:pointer; transition:.15s; white-space:nowrap;
}
.url-choice-yes{flex:1; border:none; color:#fff; background:#111;}
.url-choice-no{flex:1.9; border:1.5px solid #ddd; background:#fff; color:var(--ink);}
.url-choice-no:hover{border-color:var(--ink);}
@media (max-width:400px){
  .url-choice{flex-direction:column-reverse;}   /* 좁으면 세로로 쌓고 기본값(네)을 아래에 둔다 */
  .url-choice-yes, .url-choice-no{flex:none; width:100%;}
}

/* 저장 완료 모달(editor-shared.js의 openInviteDoneModal) — 링크 아이콘 + 주소, 눌러서 복사.
   입력창처럼 보이던 것을 걷어냈다(2026-08-26): 주소는 고칠 수 없는 값이라 input 모양이
   "여기서 고칠 수 있다"는 잘못된 신호를 줬다. 이제 줄 전체가 복사 버튼이다. */
.url-done-link{
  display:flex; align-items:center; gap:9px; width:100%; padding:6px 2px; border:none; background:none;
  cursor:pointer; font:inherit; font-size:15px; color:var(--ink); text-align:left; transition:.15s;
}
.url-done-icon{width:17px; height:17px; flex-shrink:0; color:#aaa; transition:.15s;}
.url-done-text{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:#ddd;
  transition:.15s;
}
.url-done-link:hover .url-done-icon{color:var(--ink);}
.url-done-link:hover .url-done-text{text-decoration-color:var(--ink);}
.url-done-flag{
  flex-shrink:0; font-size:11.5px; font-weight:700; color:#e2622a; letter-spacing:.02em;
  opacity:0; transition:.15s;
}
.url-done-link.is-copied .url-done-flag{opacity:1;}
.url-done-link.is-copied .url-done-icon{color:#e2622a;}
.url-done-note{margin-top:10px; font-size:12.5px; color:#999; line-height:1.6;}

/* 주소 만드는 중 — 입력 모달이 닫혔다 완료 모달로 다시 열리지 않고, 같은 팝업 안에서
   폼 → 로딩 → 완료 순으로 내용만 바뀐다(2026-08-21). 스피너는 um-busy-spin과 같은 패턴. */
.url-loading{display:flex; flex-direction:column; align-items:center; gap:16px; padding:20px 0 8px;}
.url-loading-spin{width:30px; height:30px; border:3px solid #e6e6e6; border-top-color:#111; border-radius:50%; animation:previewSpin .7s linear infinite;}
.url-loading p{font-size:13.5px; color:#666;}

/* 7일 뒤 링크가 사라진다는 경고 — 놓치기 쉬운 내용이라 일부만 강조색으로 뺀다 */
.url-warn-text{color:#e2622a; font-weight:700;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ============================================================
   모바일 에디터 (≤760px)
   3단(내비·프리뷰·편집) 레이아웃은 좁은 화면에서 성립하지 않는다.
   모바일에서는 "정보 입력"만 화면에 두고, 디자인 확인은 하단 CTA의
   [미리보기]로 전체화면 오버레이를 띄워서 본다.
   ============================================================ */
@media (max-width:760px){
  html,body{height:auto; min-height:100%; overflow:visible;}
  html.mobile-preview-first-root,
  html.mobile-preview-first-root body.mobile-preview-first:not(.mode-picker){
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
    overscroll-behavior:none;
  }
  /* 행 높이를 명시하지 않으면 암시적 행끼리 공간을 반씩 나눠 가져서 탭 줄이 화면 절반을 먹는다 */
  .workspace{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr);}
  .side-nav{
    grid-row:1; border-right:none; border-bottom:1px solid rgba(0,0,0,.08);
    flex-direction:row; align-items:center; gap:6px;
    padding:10px 14px; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .side-nav::-webkit-scrollbar{display:none;}
  /* JS가 채우는 섹션 링크 묶음 — 그대로 두면 이 div가 flex 아이템 하나로 잡혀 링크가 세로로 쌓인다 */
  .side-nav #navSections{display:contents;}
  .side-step{font-size:11px; font-weight:700; color:#111;}
  .side-nav a{
    flex:0 0 auto; margin-bottom:0; padding:8px 14px; white-space:nowrap;
    border:1px solid rgba(0,0,0,.12); border-radius:999px; font-size:13px;
  }
  .side-nav a.active{border-color:#111;}
  .side-step{flex:0 0 auto; white-space:nowrap; margin:0 4px 0 0;}
  .side-back{flex:0 0 auto; white-space:nowrap;}

  .edit-col{border-left:none; padding:0 16px;}
  /* 하단 고정 CTA 바에 가려지지 않도록 스크롤 영역 아래를 비워둔다 */
  .edit-scroll{padding:18px 0 calc(84px + env(safe-area-inset-bottom));}

  /* 프리뷰는 평소엔 숨기고, [미리보기]를 눌렀을 때만 전체화면으로 */
  .preview-col{
    position:fixed; inset:0; z-index:120; display:none;
    flex-direction:column; gap:12px; padding:14px 14px 20px;
    background:var(--paper);
  }
  body.preview-open{overflow:hidden;}
  body.preview-open .preview-col{display:flex;}
  .preview-tools{flex:0 0 auto; flex-direction:row; justify-content:center; flex-wrap:wrap;}
  .preview-tools button, .preview-tools a{padding:10px 14px;}

  /* 하단 고정 액션 바 — [미리보기] + [저장하기] */
  .save-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:110; margin:0;
    display:flex; align-items:center; gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(20,20,20,.08);
  }
  .save-cta .btn-save{flex:1 1 auto; height:48px;}
  .save-cta .demo-back{flex-basis:100%; margin-top:0;}
  .btn-preview{
    flex:0 0 auto; height:48px; padding:0 18px; border-radius:4px;
    font-family:inherit; font-size:15px; font-weight:600; color:#111;
    background:#fff; border:1px solid rgba(0,0,0,.22); cursor:pointer;
  }
  .btn-preview:active{transform:scale(.97);}
  /* 프리뷰 오버레이 닫기 */
  .preview-close{
    flex:0 0 auto; align-self:flex-end;
    width:40px; height:40px; border:1px solid rgba(0,0,0,.18); background:#fff;
    font-size:16px; line-height:1; color:#111; cursor:pointer;
  }
}
/* 데스크톱에서는 모바일 전용 버튼을 감춘다 */
.btn-preview, .preview-close{display:none;}
@media (max-width:760px){ .btn-preview{display:block;} .preview-close{display:block;} }

/* ---- 반복 인라인 스타일 유틸리티 (editor-simple 등에서 공용) ---- */
.mt-16{margin-top:16px;}
.mt-18{margin-top:18px;}
.photo-preview-sm{width:90px;}
.photo-preview-share-kakao{width:120px; aspect-ratio:3/4;}
.photo-preview-share-link{width:min(100%, 260px); aspect-ratio:1200/630;}
.upload-btn-plain{border:none; cursor:pointer;}
.upload-btn-remove{display:none; border:none; cursor:pointer; margin-top:8px;}
.upload-btn-block-center{display:block; margin-top:8px; text-align:center;}

/* ============================================================
   모바일 스텝 위저드 (≤760px, body.mw-on)
   좁은 화면에서 모든 편집 섹션을 한 화면에 쌓아두면 끝이 안 보인다.
   섹션 하나 = 페이지 하나로 쪼개고, 상단에 진행도(n/N·바·단계 원)를,
   하단 고정 바에 [이전][다음]을 둔다. 마지막 단계에서만 [저장하기]가 뜬다.
   활성화는 각 에디터의 JS가 body에 .mw-on을 붙일 때만 — 붙지 않은
   에디터는 기존 동작 그대로다.
   ============================================================ */
.mw-head, .mw-nav-btn{display:none;}
@media (max-width:760px){
  body.mw-on .side-nav{display:none;}

  body.mw-on .mw-head{
    display:block; flex-shrink:0; margin:0 -16px; padding:14px 0 12px;
    background:var(--paper); border-bottom:1px solid rgba(0,0,0,.08);
  }
  .mw-progress-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; padding:0 16px;}
  .mw-count{font-size:14.5px; font-weight:700; color:#111;}
  .mw-label{font-size:13px; color:#9a9ea8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .mw-bar{height:6px; border-radius:999px; background:#ecedf1; overflow:hidden; margin:0 16px;}
  .mw-bar-fill{height:100%; width:0; border-radius:999px; background:#111; transition:width .25s ease;}
  .mw-dots{
    /* 칩 줄은 좌우 여백 없이 화면 끝까지 채워서 스크롤한다(카드 여백과 구분) */
    display:flex; align-items:center; gap:8px; margin-top:12px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .mw-dots::-webkit-scrollbar{display:none;}
  .mw-dot{
    flex:0 0 auto; height:32px; min-width:32px; border-radius:999px; padding:0 12px;
    border:1.5px solid #dcdee4; background:#fff; color:#b4b8c0; white-space:nowrap;
    font:inherit; font-size:13px; font-weight:600; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .mw-dot.is-done{background:#111; border-color:#111; color:#fff;}
  .mw-dot.is-current{border-color:#111; color:#111;}

  /* 현재 단계의 섹션만 보여준다 */
  body.mw-on .edit-scroll > .mw-off{display:none;}
  /* 페이지가 곧 섹션이므로 접기/펼치기 테두리를 걷어내고 제목만 남긴다.
     summary/acc-body 자체의 흰 배경·둥근 모서리·좌우 안쪽 패딩도 걷어내서
     "카드 안의 카드"처럼 보이지 않게 하고, edit-col의 좌우 패딩까지 내용이 꽉 차게 한다. */
  body.mw-on .edit-scroll > details.acc-section{border:none; border-radius:0; overflow:visible; padding-top:4px;}
  body.mw-on .edit-scroll > details.acc-section > summary{cursor:default; padding-left:0; padding-right:0; background:none;}
  body.mw-on .edit-scroll > details.acc-section > summary .acc-chevron{display:none;}
  body.mw-on .edit-scroll > details.acc-section > summary .drag-handle{display:none;}
  body.mw-on .edit-scroll > details.acc-section > .acc-body{padding-left:0; padding-right:0; background:none;}

  /* 하단 바 — [이전][다음], 마지막 단계에서만 [저장하기] */
  body.mw-on .mw-nav-btn{
    display:block; flex:1 1 0; height:48px; border-radius:4px;
    font-family:inherit; font-size:15px; font-weight:600; cursor:pointer;
  }
  body.mw-on .mw-prev{flex:0 0 auto; padding:0 16px; background:#fff; color:#111; border:1px solid rgba(0,0,0,.22);}
  body.mw-on .mw-next{background:#111; color:#fff; border:none;}
  body.mw-on .mw-nav-btn:disabled{opacity:.35; cursor:default;}
  body.mw-on .mw-nav-btn.mw-off{display:none;}
  body.mw-on .save-cta .btn-save.mw-off{display:none;}
}

/* ============================================================
   안내사항(자유 입력) 섹션 — "+ 안내사항 섹션 추가" 버튼과 내용 블록(제목/본문/이미지) 편집 UI.
   Unfold Love(website/editor)·Still Memory(website/editor-simple) 두 에디터가 동일하게 쓴다.
   ============================================================ */
.section-add{
  width:100%; height:48px; margin-bottom:14px; border-radius:4px;
  border:1px dashed rgba(0,0,0,.3); background:#fafafa; color:#333;
  font:inherit; font-size:14px; cursor:pointer;
}
.section-add:hover{border-color:#111; background:#f2f2f2;}
.notice-remove{
  align-self:flex-start; height:36px; padding:0 14px; border-radius:4px;
  border:1px solid rgba(0,0,0,.16); background:#fff; color:#c33;
  font:inherit; font-size:13px; cursor:pointer;
}
.notice-remove:hover{border-color:#c33;}
.notice-remove:disabled{opacity:.35; cursor:default; color:#999;}
.notice-image-control{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.notice-image-preview{
  width:150px; aspect-ratio:3/2; overflow:hidden; border-radius:4px;
  background:#ececec; flex-shrink:0;
}
.notice-image-preview img{width:100%; height:100%; object-fit:cover; display:none;}
.notice-image-preview.has-image img{display:block;}
.notice-image-actions{display:flex; flex-direction:column; gap:8px;}
.notice-items{display:flex; flex-direction:column; gap:18px;}
.notice-item{padding-top:16px; border-top:1px solid rgba(0,0,0,.08);}
.notice-item:first-child{padding-top:0; border-top:none;}
.notice-item-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.notice-item-label{font-size:12.5px; font-weight:700; color:#111;}
.notice-item-remove{
  border:none; background:none; color:#c33; font:inherit; font-size:12.5px; cursor:pointer; padding:2px 4px;
}
.notice-item-remove:hover{text-decoration:underline;}
.notice-add-item{
  width:100%; height:40px; margin-top:2px; border-radius:4px;
  border:1px dashed rgba(0,0,0,.25); background:#fafafa; color:#333;
  font:inherit; font-size:13px; cursor:pointer;
}
.notice-add-item:hover{border-color:#111; background:#f2f2f2;}