/* ── 상세페이지 메이커 · Hookable 톤(파스텔 그라데이션) + 누리코리아 버튼 규칙 ── */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Pretendard','Malgun Gothic','맑은 고딕',-apple-system,sans-serif;
  color:#16181d; -webkit-font-smoothing:antialiased; letter-spacing:-.2px;
  min-height:100vh;
  background:
    radial-gradient(900px 480px at 85% 8%, rgba(253,224,235,.55), transparent 60%),
    radial-gradient(800px 520px at 10% 30%, rgba(233,224,254,.5), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fdf5fa 45%, #f7effc 100%);
  background-attachment: fixed;
}

/* GNB */
.gnb { display:flex; align-items:center; gap:6px; padding:8px 28px; background:rgba(255,255,255,.75);
  backdrop-filter:blur(8px); border-bottom:1px solid #f0eaf3; position:sticky; top:0; z-index:50; height:80px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:#16181d; }
.brand img { height:64px; width:auto; display:block; }
.brand-name { font-size:19px; font-weight:900; letter-spacing:-.5px; }
.gnb-burger { display:none; border:none; background:none; color:#16181d; cursor:pointer; padding:6px; }

/* ── 왼쪽 사이드바 (Hookable 스타일) ── */
.side { position:fixed; top:80px; left:0; bottom:0; width:236px; z-index:45;
  background:rgba(255,255,255,.72); backdrop-filter:blur(8px); border-right:1px solid #f0eaf3;
  display:flex; flex-direction:column; padding:12px 10px 16px; transition:width .18s ease; }
.side-burger { display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:none; border-radius:10px; background:none; color:#4b5563; cursor:pointer; margin:2px 0 14px 2px; }
.side-burger:hover { background:#f4f1f7; }
.side-nav { display:flex; flex-direction:column; gap:4px; }
.side-item { display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px;
  border:none; border-radius:11px; background:none; color:#4b5563; font:inherit; font-size:14.5px;
  font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; overflow:hidden; }
.side-item svg { flex:0 0 auto; }
.side-item:hover { background:#f4f1f7; color:#16181d; }
.side-item.on { background:#f1ecf6; color:#16181d; font-weight:800; }
.side-bottom { margin-top:auto; display:flex; flex-direction:column; gap:4px; }
.side-backdrop { display:none; }

/* 접힘 상태: 아이콘 레일 */
body.side-collapsed .side { width:64px; }
body.side-collapsed .side-item span { display:none; }

/* 본문 오프셋 */
.content { margin-left:236px; transition:margin-left .18s ease; }
body.side-collapsed .content { margin-left:64px; }

/* 히어로 */
.create-view { max-width:660px; margin:0 auto; padding:64px 20px 90px; }
.hero-title { font-size:34px; font-weight:900; letter-spacing:-1.2px; line-height:1.32; text-align:center; }
.hero-sub { text-align:center; color:#6b7280; margin-top:12px; font-size:15.5px; }

/* 카드 / 폼 */
.card { background:#fff; border:1px solid #f0eaf3; border-radius:20px;
  box-shadow:0 10px 40px rgba(190,160,210,.12); }
.form-card { margin-top:32px; padding:28px; }

.len-row { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.len-tabs { display:flex; background:#f4f1f7; border-radius:999px; padding:4px; }
.len-tab { border:none; background:transparent; font:inherit; font-size:14px; font-weight:700;
  color:#8b8794; padding:8px 18px; border-radius:999px; cursor:pointer; }
.len-tab.on { background:#fff; color:#16181d; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.len-hint { font-size:13px; color:#9aa0aa; }

.fl { display:block; font-size:14px; font-weight:700; margin:20px 0 8px; }
.fl em { color:#e11d48; font-style:normal; }
.fl .opt { color:#b3b9c2; font-weight:500; font-size:12.5px; }
.fl-row { display:flex; justify-content:space-between; align-items:baseline; margin-top:20px; }
.fl-row .fl { margin:0; }
.cnt { font-size:12.5px; color:#9aa0aa; }

input[type=text], select, textarea { width:100%; font:inherit; font-size:15px; padding:13px 14px;
  border:1px solid #e5e0ea; border-radius:12px; background:#fff; color:#16181d; }
textarea { min-height:120px; resize:vertical; line-height:1.65; margin-top:8px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:#16181d; }
::placeholder { color:#c0c4cc; }

.name-row { display:flex; gap:10px; }
.name-row input { flex:1; }

/* 이미지 업로드 */
.img-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.img-add { width:84px; height:84px; border:1.5px dashed #d9d2e0; border-radius:12px; background:#fdfbfe;
  color:#b3a8c2; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.img-add:hover { border-color:#16181d; color:#16181d; }
.thumb { position:relative; width:84px; height:84px; border-radius:12px; overflow:hidden; border:1px solid #eee6f2; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb button { position:absolute; top:4px; right:4px; width:20px; height:20px; border:none; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; cursor:pointer; font-size:13px; line-height:1; }

.gate { font-size:13px; font-weight:600; margin-top:10px; }
.gate.bad { color:#e11d48; }
.gate.ok { color:#16181d; }

/* 옵션 태그 */
.opt-row { display:flex; gap:10px; }
.opt-row input { flex:1; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tag { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  background:#f4f1f7; border-radius:999px; padding:7px 12px; }
.tag button { border:none; background:none; cursor:pointer; color:#8b8794; font-size:14px; line-height:1; }

/* 색상 — 무지개 파스텔 스와치 (색 미지정 상태) */
.color-row { display:flex; gap:10px; align-items:center; }
.color-swatch { position:relative; width:46px; height:46px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(0,0,0,.06); overflow:hidden; flex:0 0 auto;
  background:
    radial-gradient(circle at 25% 25%, #7cc7ff 0%, rgba(124,199,255,0) 55%),
    radial-gradient(circle at 78% 22%, #ff9ad5 0%, rgba(255,154,213,0) 55%),
    radial-gradient(circle at 22% 80%, #7ef0b2 0%, rgba(126,240,178,0) 55%),
    radial-gradient(circle at 80% 78%, #ffd76e 0%, rgba(255,215,110,0) 58%),
    radial-gradient(circle at 55% 55%, #c9a8ff 0%, rgba(201,168,255,0) 60%),
    #ffffff; }
.color-swatch.set { background:var(--c, #111827); }
.color-swatch input[type=color] { position:absolute; inset:0; opacity:0; cursor:pointer; border:none; padding:0; }
.color-row input[type=text] { width:130px; }
.hint { font-size:12.5px; color:#9aa0aa; margin-top:8px; }

/* 버튼 — 누리코리아 규칙: 검정/흰색, 텍스트만 */
.btn-main { display:block; width:100%; margin-top:28px; padding:16px; border:none; border-radius:12px;
  background:#111827; color:#fff; font:inherit; font-size:16px; font-weight:800; cursor:pointer; }
.btn-main:disabled { background:#d3d0d8; cursor:not-allowed; }
.btn-main.sm { width:auto; margin:0; padding:11px 20px; font-size:14px; }
.btn-sub { padding:11px 16px; border:1px solid #d1d5db; border-radius:12px; background:#fff;
  color:#111827; font:inherit; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; }
.btn-sub:hover { border-color:#111827; }
.err { color:#e11d48; font-size:14px; font-weight:600; margin-top:12px; min-height:20px; }

/* 로딩 */
.loading-view { text-align:center; padding:140px 20px; }
.spinner { width:44px; height:44px; border:4px solid #eee6f2; border-top-color:#111827; border-radius:50%;
  animation:spin .8s linear infinite; margin:0 auto 26px; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-view h2 { font-size:21px; font-weight:800; }
.loading-view .hint { margin-top:10px; }

/* 결과 */
.result-view { max-width:980px; margin:0 auto; padding:28px 20px 90px; }
.result-bar { display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid #f0eaf3; border-radius:16px; padding:14px 16px;
  position:sticky; top:66px; z-index:40; box-shadow:0 6px 24px rgba(190,160,210,.12); }
.result-meta { font-size:13px; color:#9aa0aa; }
.result-actions { display:flex; gap:10px; }
.preview-wrap { margin-top:24px; overflow-x:auto; display:flex; justify-content:center; }
.preview-wrap .page { box-shadow:0 20px 60px rgba(120,90,140,.18); }

/* 푸터 */
.footer { text-align:center; padding:40px 20px 60px; color:#9aa0aa; font-size:13px; line-height:1.8; }
.footer a { color:#6b7280; }

/* 토스트 */
.toast { position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(20px);
  background:#111827; color:#fff; font-size:14px; font-weight:600; padding:12px 20px;
  border-radius:999px; opacity:0; pointer-events:none; transition:.25s; z-index:90; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:900px) {
  /* 모바일: 사이드바 오프캔버스 */
  .gnb-burger { display:flex; }
  .side { transform:translateX(-100%); transition:transform .2s ease; width:236px; background:#fff; }
  body.side-open .side { transform:translateX(0); }
  body.side-collapsed .side { width:236px; }
  body.side-collapsed .side-item span { display:inline; }
  .side-burger { display:none; }
  .content, body.side-collapsed .content { margin-left:0; }
  .side-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:44; }
  body.side-open .side-backdrop { display:block; }
}

@media (max-width:720px) {
  .hero-title { font-size:26px; }
  .form-card { padding:20px; }
  .result-bar { flex-wrap:wrap; }
}