@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap");

/* ============================================================
   POFOLOG — CALLING CARD
   랜딩·로그인·앱이 하나의 얼굴로 이어지도록 마지막에 로드되는 단일 레이어.
   컨셉: 포트폴리오 링크 = 나를 건네는 한 장의 명함.
   ============================================================ */

:root{
  --cc-paper:#eeece7;      /* 종이 (앱 바탕) */
  --cc-card:#faf9f6;       /* 카드 */
  --cc-card-2:#ffffff;     /* 입력칸 */
  --cc-ink:#1a1917;        /* 잉크 (제목·주버튼) */
  --cc-ink-2:#4a473f;      /* 본문 */
  --cc-soft:#78746a;       /* 보조 */
  --cc-faint:#a6a196;      /* 플레이스홀더 */
  --cc-emboss:#dcd8cf;     /* 테두리 (눌린 자국) */
  --cc-hair:#e6e2d9;       /* 얇은 선 */
  --cc-blue:#1d3fa8;       /* 액센트 — 아껴 쓴다 */
  --cc-blue-deep:#16337f;
  --cc-r:2px;              /* 종이는 각지다 */
  --cc-serif:"Noto Serif KR", "AppleMyungjo", ui-serif, Georgia, serif;
  --cc-mono:ui-monospace, SFMono-Regular, Menlo, monospace;
  --cc-press:inset 0 1px 2px rgba(26,25,23,.06);
  --cc-lift:0 1px 0 rgba(255,255,255,.7) inset, 0 14px 32px -12px rgba(26,25,23,.24);
}

/* ── 로고: 군더더기 없이 워드마크만 ───────────────────────── */
.logo, .logo-text, h1.logo{
  font-family:var(--cc-serif) !important;
  font-weight:600 !important;
  letter-spacing:.03em !important;
  font-size:1.15rem !important;
  color:var(--cc-ink) !important;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  display:inline-block !important;      /* inline-flex면 ::first-letter가 안 먹는다 */
  text-transform:lowercase !important;   /* POFOLOG → pofolog */
}
.logo::first-letter, .logo-text::first-letter, h1.logo::first-letter{
  text-transform:uppercase !important;   /* → Pofolog */
}
/* 장식(점·괘선) 전부 제거 — 텍스트만 */
.logo-dot, .logo-mark{ display:none !important; }

/* ── 타이포: 제목은 명조 ─────────────────────────────────── */
h1, h2, h3,
.wz-step h2, .welcome-message h2, .modal-content h2,
.auth-title, .login-title, .card-title{
  font-family:var(--cc-serif) !important;
  font-weight:600 !important;          /* 명조는 얇으면 힘이 없다 */
  letter-spacing:-.015em !important;
  word-break:keep-all;
}
/* 라벨·메타는 등폭 활자 */
.eyebrow, .wz-count, .step-n, .badge, .meta{
  font-family:var(--cc-mono) !important;
  letter-spacing:.12em !important;
}

/* ── 형태: 각진 종이 ─────────────────────────────────────── */
.btn, .wz-next, .wz-back, .intake-card, .modal-content, .card,
.wc-chip, .qa-chip, .credit-package, .device-btn,
.domain-input-container, .wz-field input, .wz-field textarea,
.social-btn, .auth-input, input[type=text], input[type=email], input[type=password], input[type=tel]{
  border-radius:var(--cc-r) !important;
}

/* ── 주 버튼 = 잉크 도장 ─────────────────────────────────── */
.btn-primary, .btn-lg, .wz-next, .intake-make,
.auth-submit, .btn-submit, button[type=submit]{
  background:var(--cc-ink) !important;
  color:var(--cc-card) !important;
  border:none !important;
  font-weight:700 !important;
  box-shadow:0 2px 5px rgba(26,25,23,.20) !important;
}
.btn-primary:hover, .wz-next:hover, button[type=submit]:hover{
  filter:brightness(1.15); transform:none !important;
}
/* 보조 버튼 = 빈 종이 */
.btn-ghost, .btn-secondary{
  background:transparent !important;
  border:1px solid var(--cc-emboss) !important;
  color:var(--cc-ink) !important;
  box-shadow:none !important;
}

/* ── 입력칸 = 눌린 자국 ─────────────────────────────────── */
input[type=text], input[type=email], input[type=password], input[type=tel],
textarea, .wz-field input, .wz-field textarea, .auth-input{
  background:var(--cc-card-2) !important;
  border:1px solid var(--cc-emboss) !important;
  box-shadow:var(--cc-press) !important;
  color:var(--cc-ink) !important;
}
input:focus, textarea:focus{
  outline:none !important;
  border-color:var(--cc-blue) !important;
  box-shadow:var(--cc-press), 0 0 0 3px rgba(29,63,168,.12) !important;
}
::placeholder{ color:var(--cc-faint) !important; }

/* ── 카드 = 눌린 종이 ───────────────────────────────────── */
.intake-card, .modal-content, .auth-card, .login-card, .card{
  background:var(--cc-card) !important;
  border:1px solid var(--cc-emboss) !important;
  box-shadow:var(--cc-lift) !important;
}

/* ── 칩 = 종이 조각 ─────────────────────────────────────── */
.wc-chip, .qa-chip{
  background:var(--cc-card-2) !important;
  border:1px solid var(--cc-emboss) !important;
  color:var(--cc-ink-2) !important;
  box-shadow:0 1px 2px rgba(26,25,23,.05) !important;
}

/* ── 소셜 로그인 = 명함 뒷면의 연락처 줄 ─────────────────── */
.social-btn{
  background:var(--cc-card-2) !important;
  border:1px solid var(--cc-emboss) !important;
  color:var(--cc-ink) !important;
  box-shadow:0 1px 2px rgba(26,25,23,.06) !important;
  font-weight:600 !important;
}
.social-btn:hover{ background:#fff !important; border-color:var(--cc-soft) !important; }

/* ── 배경: 종이는 균일하다 (방사형 그라데 제거) ──────────── */
body{ background:var(--cc-paper) !important; color:var(--cc-ink) !important; }
#hero::before, #hero::after, .mock::before{ background:none !important; filter:none !important; }

/* ============================================================
   실제 클래스명에 맞춘 화면별 마감 (login / 앱)
   ============================================================ */

/* ── 로그인 = 명함을 건네받는 자리 ───────────────────────── */
.login-container{
  background:var(--cc-card) !important;
  border:1px solid var(--cc-emboss) !important;
  border-radius:var(--cc-r) !important;
  box-shadow:var(--cc-lift) !important;
}
/* 소셜 버튼: 브랜드색은 유지하되 형태만 명함으로 (각지게 + 얕은 눌림) */
.login-btn{
  border-radius:var(--cc-r) !important;
  box-shadow:0 1px 2px rgba(26,25,23,.10) !important;
  font-weight:600 !important;
  transition:filter .15s, transform .15s !important;
}
.login-btn:hover{ filter:brightness(.97); transform:none !important; }
/* 이메일 로그인만 잉크(우리 색) */
.email-login-btn{
  background:var(--cc-card-2) !important;
  border:1px solid var(--cc-emboss) !important;
  color:var(--cc-ink) !important;
}
.email-login-btn:hover{ background:#fff !important; border-color:var(--cc-soft) !important; }
/* 구분선 = 종이의 접힌 자국 */
.login-divider{ color:var(--cc-faint) !important; font-size:12px !important; }
.login-divider::before, .login-divider::after{ background:var(--cc-hair) !important; }
.admin-link{ color:var(--cc-faint) !important; }
.login-error{ border-radius:var(--cc-r) !important; }

/* ── 앱: 채팅 · 미리보기 · 크레딧 ────────────────────────── */
/* 크레딧 배지 = 명함에 찍힌 도장 */
.credit-display{
  background:var(--cc-card-2) !important;
  border:1px solid var(--cc-emboss) !important;
  border-radius:var(--cc-r) !important;
  box-shadow:0 1px 2px rgba(26,25,23,.06) !important;
  color:var(--cc-ink-2) !important;
}
/* 미리보기 캔버스 = 액자 */
.preview-placeholder h3{ font-family:var(--cc-serif) !important; font-weight:400 !important; }
.device-btn{ border-radius:var(--cc-r) !important; }
.device-btn.active{
  background:var(--cc-card-2) !important; color:var(--cc-ink) !important;
  box-shadow:0 1px 2px rgba(26,25,23,.10) !important;
}
.domain-input-container{
  border-radius:var(--cc-r) !important;
  border:1px solid var(--cc-emboss) !important;
  background:var(--cc-card-2) !important;
}

/* ============================================================
   파랑 절제 — 명함에서 잉크블루는 "한두 곳만".
   나머지 강조는 전부 잉크(검정)로. 파랑은 포커스에만 남긴다.
   ============================================================ */

/* 강조 텍스트: 파랑 → 잉크 */
.wz-intro b, .wz-intro strong,
.credit-display b, .credit-value, .credit-count,
.settings-tab.active, .settings-icon,
.hero-trust b, .trust-dot{
  color:var(--cc-ink) !important;
  background:transparent !important;
}
.trust-dot{ background:var(--cc-ink) !important; }

/* 진행바: 파란 막대 → 잉크 얇은 선 */
.wz-progress{ background:var(--cc-hair) !important; height:3px !important; border-radius:0 !important; }
.wz-progress-bar{ background:var(--cc-ink) !important; border-radius:0 !important; }

/* 단계 카운터 = 등폭 활자, 조용하게 */
.wz-count{ color:var(--cc-faint) !important; }

/* 웰컴 아이콘: 파란 둥근 그라데 → 잉크 인장(각진 사각) */
.wc-icon{
  background:var(--cc-ink) !important;
  border-radius:var(--cc-r) !important;
  box-shadow:0 2px 6px rgba(26,25,23,.20) !important;
  width:52px !important; height:52px !important;
}
.wc-icon svg{ color:var(--cc-card) !important; stroke:var(--cc-card) !important; }

/* 도메인 저장 버튼: 파란 원 → 잉크 각진 버튼 */
.btn-domain-save{
  background:var(--cc-ink) !important;
  color:var(--cc-card) !important;
  border-radius:var(--cc-r) !important;
  box-shadow:0 1px 3px rgba(26,25,23,.18) !important;
  border:none !important;
}
.btn-domain-save svg{ stroke:var(--cc-card) !important; color:var(--cc-card) !important; }

/* 크레딧 항목 = 각진 종이 */
.credit-item{ border-radius:var(--cc-r) !important; border:1px solid var(--cc-emboss) !important;
  background:var(--cc-card-2) !important; }
.credit-label{ color:var(--cc-soft) !important; }

/* 파랑은 오직 여기만 — 포커스와 링크 */
a:not(.btn):not(.logo){ color:var(--cc-blue); }

/* ============================================================
   인테이크 = "모달"이 아니라 "한 장의 종이"
   첫 진입엔 가릴 화면이 없다. 어두운 스크림·블러를 걷어내고
   종이로 채워, 처음부터 이 화면 하나만 있었던 것처럼 만든다.
   ============================================================ */

/* 스크림: 일반적인 사이트 방식 — 뒤가 확실히 보이되 살짝 가라앉힌다.
   단, 원래 코드의 푸른 기(rgba(25,22,45))는 뺀다. 그게 종이색을 죽였다.
   잉크 톤의 중성 그림자 + 약한 블러. */
.intake-overlay{
  background:rgba(26,25,23,.34) !important;      /* 연하게 — 뒤 앱이 잘 보임 */
  -webkit-backdrop-filter:blur(3px) !important;  /* 약한 블러 */
  backdrop-filter:blur(3px) !important;
  align-items:center !important;
  padding:32px 20px !important;
}

/* 카드: 넓은 빈 상자 → 손에 잡히는 한 장 */
.intake-card{
  max-width:460px !important;          /* 680px → 460px */
  border:1px solid var(--cc-emboss) !important;
  border-radius:var(--cc-r) !important;
  background:var(--cc-card) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 18px 40px -16px rgba(26,25,23,.30) !important;  /* 미농지 위에 놓인 한 장 */
}

/* 죽은 여백 제거 (min-height 236px 고정 해제) */
.wz-steps{ min-height:0 !important; padding:20px 26px 4px !important; }

/* 토막 진행바 제거 — 단계는 아래 카운터로 충분하다 */
.wz-progress{ display:none !important; }

/* 안내문: 제목과 경쟁하지 않게 조용히 */
.wz-intro{ padding:16px 26px 0 !important; font-size:.78rem !important; color:var(--cc-soft) !important; }

/* 질문·입력칸 리듬 정리 */
.wz-emoji{ font-size:28px !important; margin-bottom:8px !important; }
.wz-step h2{ font-size:1.24rem !important; margin-bottom:6px !important; }
.wz-sub{ margin-bottom:16px !important; color:var(--cc-soft) !important; }
.wz-input{
  border:1px solid var(--cc-emboss) !important;
  border-radius:var(--cc-r) !important;
  background:var(--cc-card-2) !important;
  box-shadow:var(--cc-press) !important;
  padding:13px 14px !important;
  font-size:1rem !important;
}
.wz-nav{ padding:14px 26px 22px !important; border-top:1px solid var(--cc-hair) !important; }

/* ============================================================
   채팅 = 작업 로그 (의뢰 → 제작 중 → 완료 ✓ → 다음 할 일)
   대화가 아니라 "기록"이다. 로그는 원래 띄엄띄엄하므로
   대화가 적어도 어색하지 않다. 인쇄·명함 정체성과 한 몸.
   ============================================================ */

.chat-panel{ background:var(--cc-card) !important; }
.chat-messages{
  display:flex !important; flex-direction:column !important;
  padding:24px 22px 14px !important;
}
/* 기록은 위에서부터 쌓인다 — 장부·일지가 그렇고, AI 챗(ChatGPT·Claude·제미나이)도 그렇다.
   메신저(카톡)만 아래에 붙인다. 우리는 메신저가 아니다.
   하단은 제안 칩 + 입력창이 마감한다. */
.chat-messages{ justify-content:flex-start !important; }
.welcome-message{ flex:1 1 auto; }   /* 첫 진입(대화 0개)일 때만 가운데를 채운다 */
.message-avatar{ display:none !important; }

/* 한 항목 = 잉크 레일 위의 점 하나 */
.message, .message.pending{
  display:block !important;
  position:relative !important;
  width:100% !important; max-width:none !important;
  margin:0 0 20px !important;
  padding:0 0 0 16px !important;
  border:none !important; background:none !important;
  border-left:2px solid var(--cc-emboss) !important;
}
.message::after{
  content:''; position:absolute; left:-5px; top:6px;
  width:8px; height:8px; border-radius:50%;
  background:var(--cc-emboss);
}
.message.ai.done::after, .message.pending::after{ background:var(--cc-blue); }

/* 상태 라벨 */
/* 한글 라벨에 등폭+넓은 자간은 금물 — 글자가 쪼개져 보인다.
   본문 글꼴 + 좁은 자간으로 또렷하게. */
.message::before{
  content:'포폴로그';
  display:block;
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  color:var(--cc-faint);
  margin-bottom:7px;
}
.message.user::before{ content:'의뢰'; color:var(--cc-ink); }
.message.pending::before{ content:'제작 중'; color:var(--cc-blue); }
.message.ai.done::before{ content:'완료'; color:var(--cc-blue); }

/* 본문 */
.message .message-content{
  display:block !important; width:100% !important; max-width:none !important;
  background:none !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; padding:0 !important;
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif !important;
  font-size:.85rem !important; line-height:1.85 !important;
  color:var(--cc-ink-2) !important; white-space:pre-wrap !important;
}
.message.user .message-content{ color:var(--cc-ink) !important; font-weight:500 !important; }

/* 완료 인장 */
/* 인장은 문장에 붙으면 안 된다 — display:flex 로 줄을 바꿔 독립시킨다.
   한글이므로 자간도 좁게. */
.message.ai.done .message-content::after{
  content:'✓ 사이트 생성 완료';
  display:flex; align-items:center; justify-content:center;
  width:fit-content;
  margin-top:14px;
  font-family:"Pretendard Variable",Pretendard,-apple-system,sans-serif;
  font-size:.7rem; font-weight:600; letter-spacing:0;
  color:var(--cc-blue); border:1px solid var(--cc-blue);
  border-radius:var(--cc-r); padding:5px 10px;
}

/* 제작 중 — 타이핑 점 */
.pend-txt{ color:var(--cc-soft); font-size:.85rem; margin-bottom:10px; }
.typing{
  display:inline-flex; gap:4px; align-items:center;
  border:1px solid var(--cc-emboss); background:var(--cc-card-2);
  border-radius:var(--cc-r); padding:6px 10px;
}
.typing i{ width:4px; height:4px; border-radius:50%; background:var(--cc-soft);
  display:block; animation:pfBlink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s }
.typing i:nth-child(3){ animation-delay:.4s }
@keyframes pfBlink{ 0%,60%,100%{opacity:.25} 30%{opacity:1} }
@media (prefers-reduced-motion:reduce){ .typing i{ animation:none; opacity:.55 } }

/* 다음 할 일 칩 — 공백을 쓸모로 채운다 */
.suggest{ display:flex; flex-wrap:wrap; gap:6px; padding-left:16px; margin:-8px 0 4px; }
.suggest-chip{
  background:var(--cc-card-2); border:1px solid var(--cc-emboss);
  border-radius:var(--cc-r); padding:6px 11px;
  font-family:inherit; font-size:.73rem; font-weight:600; color:var(--cc-ink-2);
  cursor:pointer; box-shadow:0 1px 2px rgba(26,25,23,.04);
  transition:border-color .15s, color .15s;
}
.suggest-chip:hover{ border-color:var(--cc-ink); color:var(--cc-ink); }
.suggest-note{ flex-basis:100%; margin-top:2px; font-size:.68rem; line-height:1.5;
  color:var(--cc-soft,#8d8d95); letter-spacing:-.01em; }

/* 완료 배지 + 공개하기 — 한 줄에 나란히.
   배지는 원래 .message-content::after 였는데, 옆에 버튼을 세우려고
   JS 가 실제 요소로 다시 그린다(has-done-row 가 붙으면 ::after 는 끈다). */
.message.ai.done .message-content.has-done-row::after{ content:none; }
.done-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
.done-badge{
  display:inline-flex; align-items:center;
  font-family:"Pretendard Variable",Pretendard,-apple-system,sans-serif;
  font-size:.7rem; font-weight:600; letter-spacing:0;
  color:var(--cc-blue); border:1px solid var(--cc-blue);
  border-radius:var(--cc-r); padding:5px 10px;
}
.done-publish{
  font-family:inherit; font-size:.72rem; font-weight:800; letter-spacing:-.01em;
  color:#fff; border:none; border-radius:var(--cc-r); padding:6px 14px; cursor:pointer;
  background:linear-gradient(135deg,var(--primary,#16337f),#1d3fa8);
  box-shadow:0 3px 10px rgba(29,63,168,.26);
  transition:filter .15s, transform .15s, box-shadow .15s;
}
.done-publish:hover{ filter:brightness(1.09); transform:translateY(-1px); box-shadow:0 5px 14px rgba(29,63,168,.32); }
.done-publish:active{ transform:none; }

/* 코치마크에 이모지를 안 쓰는 단계에서 빈 자리가 남지 않게 */
#ptour-tip .pt-emoji:empty{ display:none; }

/* 배포 창 안내문 — 커스텀 도메인은 상담으로 받는다 */
.deploy-note{
  display:block; margin-top:4px; padding:12px 14px;
  background:var(--cc-card-2,#faf9f6); border:1px solid var(--cc-emboss,#f0eee8);
  border-radius:var(--cc-r,12px);
}
.deploy-note b{ display:block; font-size:.82rem; font-weight:700; color:var(--cc-ink,#1a1917); margin-bottom:4px; }
.deploy-note span{ display:block; font-size:.78rem; line-height:1.5; color:var(--cc-soft,#78746a); }
@media (prefers-reduced-motion:reduce){ .done-publish{ transition:none; } .done-publish:hover{ transform:none; } }

/* 공개 칩을 눌렀을 때 도메인 입력칸을 잠깐 강조 */
.domain-attn{ animation:pfDomainAttn 1.1s ease-in-out 2; }
@keyframes pfDomainAttn{
  0%,100%{ box-shadow:0 0 0 0 rgba(29,63,168,0); }
  50%    { box-shadow:0 0 0 4px rgba(29,63,168,.28); }
}
@media (prefers-reduced-motion:reduce){ .domain-attn{ animation:none; } }

/* 긴 요청 접기 · 첨부 썸네일 */
.msg-text{ white-space:pre-wrap; }
.msg-text.clamped{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.msg-more{
  margin-top:8px; padding:0; border:none; background:none; cursor:pointer;
  font-family:inherit; font-size:.72rem; font-weight:600; color:var(--cc-soft);
  text-decoration:underline; text-underline-offset:3px;
}
.msg-more:hover{ color:var(--cc-ink); }
.msg-thumbs{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.msg-thumbs img{ width:48px; height:48px; object-fit:cover;
  border-radius:var(--cc-r); border:1px solid var(--cc-emboss); }

/* 입력창 = 종이 / 전송 = 잉크 */
.chat-input-container{ border-top:1px solid var(--cc-hair) !important; background:var(--cc-card) !important; }
.chat-input{
  background:var(--cc-card-2) !important; border:1px solid var(--cc-emboss) !important;
  border-radius:var(--cc-r) !important; box-shadow:var(--cc-press) !important; line-height:1.7 !important;
}
.send-button{
  background:var(--cc-ink) !important; color:var(--cc-card) !important;
  border-radius:var(--cc-r) !important; border:none !important; font-weight:700 !important;
}
.chat-header{ border-bottom:1px solid var(--cc-hair) !important; background:transparent !important; }
.chat-header-title{ font-family:var(--cc-serif) !important; font-weight:600 !important; }
.chat-header-sub{ color:var(--cc-soft) !important; }

/* ============================================================
   [이중 테두리 방지]
   위의 "모든 input" 규칙은 편리하지만, 이미 테두리를 가진 컨테이너
   안에 든 입력칸까지 잡아버린다 → 상자 안에 상자가 생긴다.
   그런 입력칸은 여기서 되돌린다. (테두리는 바깥 상자에만 하나)
   ============================================================ */

/* 도메인: [ mysite | .pofolog.com ] 은 한 덩어리여야 한다 */
.domain-input-container{
  border:1px solid var(--cc-emboss) !important;
  border-radius:var(--cc-r) !important;
  background:var(--cc-card-2) !important;
  box-shadow:var(--cc-press) !important;
}
/* ⚠️ 특이도 주의: input[type=text] 는 (0,1,1) 이라 .domain-input (0,1,0) 보다 세다.
   둘 다 !important 면 특이도 높은 쪽이 이긴다 → 컨테이너를 앞에 붙여 확실히 이긴다. */
.domain-input-container input.domain-input,
.domain-input-container input[type=text].domain-input,
.domain-input-wrapper input[type=text]{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  outline:none !important;
}
.domain-input-container input.domain-input:focus,
.domain-input-container input[type=text].domain-input:focus,
.domain-input-wrapper input[type=text]:focus{
  border:none !important; box-shadow:none !important; outline:none !important;
}
/* 포커스 표시는 바깥 상자가 받는다 */
.domain-input-container:focus-within{
  border-color:var(--cc-blue) !important;
  box-shadow:var(--cc-press), 0 0 0 3px rgba(29,63,168,.12) !important;
}
.domain-suffix{ color:var(--cc-soft) !important; }

/* [실제 마크업] <input type="text" id="subdomain">  — class 가 없다.
   ID(1,0,0) 는 input[type=text](0,1,1) 를 확실히 이긴다. */
#subdomain{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  padding:0 !important;
}
#subdomain:focus{ border:none !important; box-shadow:none !important; outline:none !important; }

/* ============================================================
   헤더 우측 — 상자를 버린다
   크레딧(상태 표시)과 설정(동작 버튼)은 성격이 다르다.
   한 상자에 묶으면 억지스럽다. 마스트헤드처럼 활자와 아이콘만 놓는다.
   클릭 가능함은 '호버할 때만' 드러낸다 — 평소엔 조용하게.
   ============================================================ */

.header-actions{
  display:inline-flex !important;
  align-items:center !important;
  gap:18px !important;              /* 둘은 별개다 — 넉넉히 띄운다 */
  height:auto !important;
  flex:0 0 auto !important;
  width:auto !important;
  max-width:max-content !important;
  margin-left:auto !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* 크레딧 = 활자만. 평소엔 상자 없음 */
.credit-display{
  display:inline-flex !important; align-items:baseline !important; gap:7px !important;
  height:auto !important; padding:5px 9px !important;
  margin:-5px -9px !important;      /* 호버 영역만 넓히고 자리는 그대로 */
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:var(--cc-r) !important;
  box-shadow:none !important;
  transition:background .15s, border-color .15s !important;
}
.credit-display:hover{                /* 누를 수 있음은 호버로만 알린다 */
  background:var(--cc-card-2) !important;
  border-color:var(--cc-emboss) !important;
}
.credit-icon{ display:none !important; }
.credit-text{
  display:inline-flex !important; align-items:baseline !important; gap:6px !important;
  font-family:"Pretendard Variable",Pretendard,-apple-system,sans-serif !important;
  font-size:.7rem !important; font-weight:600 !important;
  color:var(--cc-faint) !important; letter-spacing:0 !important;
}
/* 숫자는 명조 활자 — 로고와 같은 계보 */
#creditCount{
  font-family:var(--cc-serif) !important;
  font-size:1.05rem !important; font-weight:600 !important;
  color:var(--cc-ink) !important;
  font-variant-numeric:tabular-nums;
  line-height:1 !important;
}

/* 설정 = 맨 아이콘. 상자 없음 */
.settings-btn{
  width:30px !important; height:30px !important; padding:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:transparent !important;
  border:none !important;
  border-radius:var(--cc-r) !important;
  box-shadow:none !important;
  transition:background .15s !important;
}
.settings-btn:hover{ background:var(--cc-card-2) !important; }
.settings-icon{
  width:17px !important; height:17px !important;
  color:var(--cc-faint) !important; stroke:var(--cc-faint) !important;
  transition:color .15s, stroke .15s !important;
}
.settings-btn:hover .settings-icon{ color:var(--cc-ink) !important; stroke:var(--cc-ink) !important; }

/* ── 고객센터 연락 버튼: 딱딱한 회색 3개 → 위계 있는 부드러운 버튼 ──
   카톡=가장 빠른 채널이니 브랜드 노랑(플로팅 버튼과 동일 #FEE500).
   전화·이메일=조용한 종이 보조 버튼. 인라인 style 이라 !important. */
#supportTab button[onclick*="kakao"]{
  background:#FEE500 !important;
  color:#191600 !important;
  border:none !important;
  border-radius:10px !important;
  padding:13px 6px !important;
  font-weight:700 !important;
  box-shadow:0 2px 6px -2px rgba(254,229,0,.6) !important;
  transition:filter .15s, transform .15s !important;
}
#supportTab button[onclick*="kakao"]:hover{ filter:brightness(.97); transform:translateY(-1px); }

#supportTab button[onclick*="tel:"],
#supportTab button[onclick*="mailto"]{
  background:#fff !important;
  color:var(--cc-ink,#1a1917) !important;
  border:1px solid var(--cc-emboss,#dcd8cf) !important;
  border-radius:10px !important;
  padding:13px 6px !important;
  font-weight:600 !important;
  box-shadow:0 1px 2px rgba(26,25,23,.05) !important;
  transition:border-color .15s, background .15s, transform .15s !important;
}
#supportTab button[onclick*="tel:"]:hover,
#supportTab button[onclick*="mailto"]:hover{
  border-color:var(--cc-soft,#78746a) !important; background:#faf9f6 !important; transform:translateY(-1px);
}
/* 세 버튼 사이 간격 살짝 넉넉히 */
#supportTab button[onclick*="kakao"],
#supportTab button[onclick*="tel:"],
#supportTab button[onclick*="mailto"]{ font-size:.85rem !important; }

/* ── 설정창 파랑 → 검정 (구조 무변경, 토큰 재정의) ──
   #settingsModal 안에서만 --primary 계열을 잉크로 바꾼다 → 파랑 쓰던 것 전부 검정.
   하드코딩(토큰 아닌) 파랑은 명시적으로 마저 잡는다. */
#settingsModal{
  --primary:#2b2926 !important;
  --primary-deep:#1a1917 !important;
  --primary-soft:#4a473f !important;
}
#settingsModal .package-price{ color:var(--cc-ink) !important; }
#settingsModal .package-badge{ background:#f0eee8 !important; }
#settingsModal .credit-item.total{
  background:var(--cc-tint,#f4f2ec) !important; border:1px solid var(--cc-ink) !important; box-shadow:none !important;
}
#settingsModal .credit-item.total .credit-label,
#settingsModal .credit-item.total .credit-value{ color:var(--cc-ink) !important; }
#settingsModal .settings-tab:hover,
#settingsModal .settings-tab.active{ color:var(--cc-ink) !important; }
#settingsModal .settings-tab.active::after{ background:var(--cc-ink) !important; }
#settingsModal .credit-package:hover{ box-shadow:0 8px 18px -8px rgba(26,25,23,.22) !important; }
#settingsModal .pm-hero{ box-shadow:0 12px 28px -14px rgba(26,25,23,.4) !important; }

/* ── 로그인 카드 상단(워드마크+안내문) 보정 · 2026-07-25 ──────────
   위쪽 .logo 규칙이 워드마크용으로 display:inline-block 을 강제하는 탓에
   로그인 카드에서는 감싸개 <div class="logo"> 가 좌측으로 쏠렸다.
   또 로그인 화면의 워드마크는 마크업상 .logo-mark 라서, 장식 제거 규칙
   (.logo-dot,.logo-mark{display:none})에 워드마크까지 같이 사라져 있었다.
   → 로그인 계열에서만 블록 복구 + 워드마크 되살림(점 장식은 계속 제거). */
.login-container .logo{ display:block !important; text-align:center !important; }
.login-container .logo-mark{
  text-transform:none !important;
  display:inline-block !important;
  font-family:var(--cc-serif) !important;
  font-weight:600 !important;
  letter-spacing:.03em !important;
  font-size:1.3rem !important;
  color:var(--cc-ink) !important;
  margin-bottom:.5rem !important;
}
.login-container .logo-dot{ display:none !important; }

/* ══ 모바일 공통 (2026-07-26) ═══════════════════════════════════
   390px 실기기 계측으로 확인된 것만 고친다. */
@media (max-width:1024px){
  /* ① iOS 자동확대 방지 — 입력 글자가 16px 미만이면 사파리가 포커스 때 화면을
        확대해 버리고 되돌리지 않는다. 이 사이트는 전 폼이 14~15px 이라 로그인·
        전화인증·채팅 어디서 타이핑해도 화면이 튀었다. */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="search"],
  input:not([type]), textarea, select{
    font-size:16px !important;
  }
  /* ② 아이폰 홈 인디케이터 영역만큼 채팅 입력바를 띄운다
        (앱 웹뷰·홈화면 추가에서는 브라우저 툴바가 없어 바로 가린다) */
  .chat-input-container{
    padding-bottom:calc(1.1rem + env(safe-area-inset-bottom)) !important;
  }
}

/* ── 모바일 헤더: 두 줄로 접히던 것 한 줄로 (2026-07-26) ────────────
   style.css 의 @media(max-width:768px) 가 .header-content 를
   grid-template-columns:1fr 로 바꿔 로고와 크레딧이 위아래로 쌓였다.
   화면 위쪽을 크게 낭비하고 좌우가 어긋나 보인다 → 한 줄 flex 로 되돌린다. */
@media (max-width:768px){
  .header-content{
    display:flex !important;
    grid-template-columns:none !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:.6rem !important;
  }
  /* ⚠️ 이 규칙은 "앱 헤더"를 한 줄로 만들려던 것이다. .logo 로 전역에 걸면
        로그인 카드의 <div class="logo">(문구 감싸개)까지 여백이 죽어
        "간편하게 로그인하고…" 와 카카오 버튼이 딱 붙는다(실제로 발생).
        반드시 헤더 안으로 한정할 것. */
  .header-content .logo{ margin-bottom:0 !important; }
  .header-actions{ justify-content:flex-end !important; margin-left:auto !important; }
}
@media (max-width:1024px){
  .app-header{ padding:.7rem 1rem !important; }
}

/* ══ 모바일 채팅 화면 다듬기 (2026-07-26) ══════════════════════════
   PC 는 그대로 두고 480px 이하에서만. 메신저·AI 챗에서 손에 익은 모양으로. */
@media (max-width:1024px){

  /* ① 컴포저를 한 겹으로 — 둥근 컨테이너 안에 테두리 있는 흰 textarea 가
        또 들어가 상자가 이중으로 보였다. */
  .chat-input-container{
    padding:8px 10px 8px 12px !important;
    gap:6px !important;
    align-items:flex-end !important;
  }
  .chat-input{
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:8px 2px !important;
    flex:1 1 auto !important;
    align-self:auto !important;
    /* ② rows=3 고정 높이를 푼다. !important 를 붙이면 스크립트가 넣는
          인라인 height 를 CSS 가 이겨버려 자동 높이가 죽는다(실제로 겪음). */
    height:auto;
    min-height:40px !important;
    max-height:132px !important;
    overflow-y:auto !important;
  }
  /* ③ 버튼을 작게 — 글 쓸 폭을 최대한 내준다(기존엔 209px 뿐이었다) */
  .btn-attach{ width:34px !important; height:34px !important; padding:6px !important; flex:0 0 auto !important; }
  .chat-input-container .btn-primary{
    padding:9px 15px !important; font-size:14px !important;
    border-radius:999px !important; flex:0 0 auto !important;
  }

  /* ④ 시작 화면을 세로 가운데로 — 위에 몰리고 아래가 휑했다 */
  .welcome-message{
    min-height:100% !important; display:flex !important;
    align-items:center !important; justify-content:center !important;
  }

  /* ⑤ 직군 칩 2×2 — 3+1 로 갈라져 어색했다 */
  .wc-chips{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; }
  .wc-chip{ width:100% !important; justify-content:center !important; }

  /* ⑥ 카카오 상담 버튼은 한 단계 더 작게 — 대화 영역에서 시선을 뺏었다 */
  .support-float-btn{ width:40px !important; height:40px !important; }
  .support-float-btn svg{ width:20px !important; height:20px !important; }
}

/* ══ 모바일: 온보딩 마법사를 바텀시트로 (2026-07-26) ═══════════════
   PC 용 가운데 팝업이 그대로 떠서 좌우가 뜨고 위아래가 붕 떠 보였다.
   모바일에서는 아래에서 올라오는 시트가 손에 익은 모양이다. */
@media (max-width:1024px){
  .intake-overlay{
    align-items:flex-end !important;
    padding:0 !important;
  }
  .intake-card{
    width:100% !important;
    max-width:none !important;
    max-height:88vh !important;
    overflow-y:auto !important;
    /* 시트는 위쪽 모서리만 둥글게 — 명함의 각진 느낌은 안쪽 요소가 유지한다 */
    border-radius:12px 12px 0 0 !important;
    padding-bottom:env(safe-area-inset-bottom) !important;
  }
  /* 시트 손잡이 — 아래에서 올라온 판이라는 신호 */
  .intake-card::before{
    content:"";
    display:block;
    width:36px; height:4px;
    margin:9px auto 3px;
    border-radius:99px;
    background:#dcd8cf;
  }
  /* 모달이 떠 있을 때 상담 버튼이 흐린 배경 위에 혼자 선명했다 → 뒤로 보낸다 */
  .support-float-btn{ z-index:900 !important; }
  /* 안내문은 시트에서 자리를 덜 차지하게 */
  .wz-intro{ padding:6px 18px 2px !important; }
}

/* ══ 모바일 미리보기 시트 (2026-07-26) ═══════════════════════════
   .preview-panel 은 @media(max-width:1024px) 에서 display:none 이라
   폰에서는 만든 사이트를 **보지도, 배포하지도** 못했다(배포 버튼이 이 패널 안에 있다).
   평소엔 그대로 숨기고, 버튼으로 열 때만 전체화면 시트로 띄운다. */
@media (max-width:1024px){
  .preview-panel.pf-open{
    display:flex !important;
    position:fixed !important; inset:0 !important;
    z-index:9500 !important;
    flex-direction:column !important;
    background:#faf9f6 !important;
  }
  /* 배포 주소를 입력해야 공개할 수 있으므로 시트에서는 보여준다 */
  .preview-panel.pf-open .domain-input-wrapper{ display:flex !important; }
  .preview-panel.pf-open .preview-toolbar{ flex-wrap:wrap !important; gap:8px !important; padding-top:52px !important; }
}
@media (max-width:1024px){
  /* 시트를 여는 버튼 — 사이트가 만들어졌을 때만 나타난다 */
  #pfViewBtn{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(var(--chat-bar-h, 96px) + 12px);
    z-index:1000; display:none; align-items:center; gap:6px;
    padding:10px 18px; border:none; border-radius:999px;
    background:#1a1917; color:#faf9f6; font-size:14px; font-weight:700;
    box-shadow:0 4px 14px rgba(26,25,23,.28); cursor:pointer;
  }
  #pfViewBtn.on{ display:inline-flex; }
  #pfCloseBtn{
    position:absolute; top:calc(10px + env(safe-area-inset-top)); right:12px;
    z-index:2; padding:8px 14px; border:1px solid #dcd8cf; border-radius:999px;
    background:#faf9f6; color:#1a1917; font-size:14px; font-weight:600; cursor:pointer;
  }
}
@media (min-width:1025px){ #pfViewBtn, #pfCloseBtn{ display:none !important; } }

@media (max-width:1024px){
  /* 시트 안 툴바 정리 — 원래는 데스크톱 한 줄 배치라 폰에서 서로 겹쳤다 */
  .preview-panel.pf-open .preview-toolbar{
    padding:52px 12px 10px !important;
    display:flex !important; flex-wrap:wrap !important;
    justify-content:flex-start !important; align-items:center !important; gap:8px !important;
  }
  .preview-panel.pf-open .domain-hint{ display:none !important; }  /* 안내문은 자리만 먹는다 */
  .preview-panel.pf-open .domain-input-wrapper{ order:2; width:100% !important; }
  .preview-panel.pf-open #deployBtn{ order:3; margin-left:auto !important; }
  .preview-panel.pf-open .preview-frame-container{ padding:8px !important; }
  .preview-panel.pf-open .device-frame{ box-shadow:none !important; }
  .preview-panel.pf-open .device-frame.desktop{ border:1px solid #dcd8cf !important; }
}

@media (max-width:1024px){
  /* 폰에서 폰 모양 목업을 또 씌울 이유가 없다 — 시트에선 미리보기가 화면을 꽉 채운다 */
  .preview-panel.pf-open .preview-content{
    flex:1 1 auto !important; min-height:0 !important;
    align-items:stretch !important; padding:8px !important;
  }
  .preview-panel.pf-open .preview-frame-container{ height:100% !important; }
  .preview-panel.pf-open .device-frame{
    width:100% !important; height:100% !important;
    aspect-ratio:auto !important;
    padding:0 !important; border-radius:10px !important;
    background:#fff !important; border:1px solid #dcd8cf !important;
  }
  .preview-panel.pf-open .device-frame iframe{ border-radius:10px !important; }
  /* 프리뷰 주의 문구는 시트에서 두 줄을 먹어 답답하다 */
  .preview-panel.pf-open .preview-notice span{ font-size:11px !important; line-height:1.4 !important; }
}

@media (max-width:1024px){
  /* 되돌리기/다시실행이 절대배치라 안내문 위에 겹쳐 있었다 — 같은 줄에 나란히 */
  .preview-panel.pf-open .preview-notice{
    display:flex !important; align-items:center !important;
    gap:8px !important; flex-wrap:wrap !important; padding:8px 12px !important;
  }
  .preview-panel.pf-open .notice-undo{ position:static !important; margin-left:auto !important; }
}

/* ══ 모바일 미리보기 시트 — 상단 압축 (2026-07-26) ══════════════════
   컨트롤이 화면 위 40%를 먹고 미리보기가 아래로 밀렸다. 두 줄로 줄인다.
   ※ 이 화면의 "배포"는 #deployBtn(죽은 코드)이 아니라
      도메인 입력칸 + 체크버튼(saveDomain → api/deploy.php)이다. */
@media (max-width:1024px){
  .preview-panel.pf-open .preview-toolbar{
    padding:calc(6px + env(safe-area-inset-top)) 12px 8px !important;
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    align-items:center !important; gap:8px !important;
    border-bottom:1px solid #dcd8cf !important;
  }
  #pfCloseBtn{
    position:static !important; grid-column:1 !important;
    padding:7px 12px !important; font-size:13px !important;
  }
  .preview-panel.pf-open .device-buttons{
    grid-column:2 !important; justify-self:end !important;
    transform:scale(.85); transform-origin:right center;
  }
  .preview-panel.pf-open .domain-input-wrapper{
    grid-column:1 / -1 !important; display:flex !important;
    width:100% !important; gap:6px !important;
  }
  .preview-panel.pf-open .domain-input-container{ flex:1 1 auto !important; min-width:0 !important; }
  /* 체크 버튼이 사실 "공개하기"인데 아이콘만 있어 뭔지 알 수 없었다 */
  .preview-panel.pf-open .btn-domain-save:first-of-type::after{
    content:"공개"; margin-left:5px; font-size:13px; font-weight:700;
  }
  /* 안내문·되돌리기는 폰에서 두 줄을 먹기만 한다 */
  .preview-panel.pf-open .preview-notice{ display:none !important; }
  .preview-panel.pf-open #deployBtn{ display:none !important; }
  /* 미리보기가 주인공 */
  .preview-panel.pf-open .preview-content{ padding:10px !important; }
}

@media (max-width:1024px){
  /* "공개" 글자가 버튼 폭이 좁아 세로로 쪼개졌다 */
  .preview-panel.pf-open .btn-domain-save{
    white-space:nowrap !important;
    width:auto !important; min-width:0 !important;
    flex:0 0 auto !important;
    padding:0 12px !important;
  }
}

/* ══ 모바일 설정창 (2026-07-26) ═════════════════════════════════
   탭 4개(내 정보·크레딧·고객센터·프리미엄)가 444px 라 390px 화면에서
   마지막 탭이 잘렸다. 가로 스크롤은 되지만 잘린 탭은 "없는 것"처럼 보인다.
   여백만 줄이면 네 개가 한눈에 들어온다.
   ※ .settings-tab 은 #settingsModal 특이도로 눌러야 기존 규칙을 이긴다. */
@media (max-width:1024px){
  #settingsModal .settings-tabs{ gap:0 !important; }
  #settingsModal .settings-tab{
    padding-left:9px !important; padding-right:9px !important;
    font-size:13px !important; letter-spacing:-.02em !important;
  }
}

@media (max-width:1024px){
  /* 진짜 원인은 여백이 아니라 각 탭의 min-width:120px (4개면 480px) 였다.
     폰에서는 폭을 균등 분배해 네 탭이 한 줄에 들어오게 한다. */
  #settingsModal .settings-tab{
    min-width:0 !important;
    flex:1 1 0 !important;
    padding-left:6px !important; padding-right:6px !important;
    font-size:12.5px !important;
    white-space:nowrap !important;
  }
  #settingsModal .settings-tabs{ padding-left:6px !important; padding-right:6px !important; }
}

@media (max-width:1024px){
  /* 마지막 탭("프리미엄 서비스")이 탭 폭을 넘어 옆으로 새어 나왔다.
     글자를 조금 더 줄이고, 그래도 넘치면 말줄임으로 깔끔하게 끊는다. */
  #settingsModal .settings-tabs{ padding-left:2px !important; padding-right:2px !important; }
  #settingsModal .settings-tab{
    font-size:12px !important; padding-left:4px !important; padding-right:4px !important;
    overflow:hidden !important; text-overflow:ellipsis !important;
  }
}

@media (max-width:1024px){
  /* 마지막 탭이 딱 4px 넘쳐 말줄임이 떴다 — 자간만 좁혀 전부 보이게 */
  #settingsModal .settings-tab{ letter-spacing:-0.045em !important; }
}

/* 약관·개인정보 페이지의 워드마크(.brand)는 <a> 라서
   위쪽 링크 색 규칙(a:not(.btn):not(.logo))에 걸려 파랗게 나왔다.
   로고는 다른 화면과 같이 잉크 검정이어야 한다. */
.brand{ color:var(--cc-ink) !important; }

@media (max-width:1024px){
  /* 좁은 화면에서 버튼 글자가 세로로 쪼개지던 것 (초기/화) */
  .btn-danger, .btn-domain-save, .btn-secondary{ white-space:nowrap !important; }
}

/* ══ 모바일 미리보기 시트 재배치 (2026-07-27) ═══════════════════════
   여는 목적은 "내 사이트 보기"인데 도메인 입력·기기전환이 위를 차지해
   정작 결과물이 아래로 밀렸다. 앱에서 흔한 3단 구조로 바꾼다.
     [얇은 헤더]  →  [미리보기 = 화면 대부분]  →  [하단 액션 바(공개)]
   하단 액션은 엄지로 닿는 자리이기도 하다. */
@media (max-width:1024px){
  .preview-panel.pf-open{ flex-direction:column !important; }

  #pfSheetHead{
    order:1; display:flex; align-items:center; gap:10px;
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
    background:#faf9f6; border-bottom:1px solid #dcd8cf;
    flex:0 0 auto;
  }
  #pfSheetHead .pf-title{
    font-family:"Noto Serif KR",AppleMyungjo,ui-serif,Georgia,serif;
    font-size:15px; font-weight:600; color:#1a1917; letter-spacing:.02em;
  }
  #pfSheetHead .device-buttons{
    margin-left:auto; transform:scale(.8); transform-origin:right center;
  }
  #pfCloseBtn{
    position:static !important; padding:6px 12px !important; font-size:13px !important;
    flex:0 0 auto !important;
  }

  /* 미리보기가 주인공 — 여백 없이 화면을 채운다 */
  .preview-panel.pf-open .preview-content{
    order:2 !important; flex:1 1 auto !important; min-height:0 !important;
    padding:0 !important; align-items:stretch !important;
  }
  .preview-panel.pf-open .device-frame{ border:none !important; border-radius:0 !important; }
  .preview-panel.pf-open .device-frame iframe{ border-radius:0 !important; }

  /* 공개(배포)는 하단 고정 액션 바로 */
  .preview-panel.pf-open .preview-toolbar{
    order:3 !important;
    border-top:1px solid #dcd8cf !important; border-bottom:none !important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    display:flex !important; flex-wrap:nowrap !important; gap:8px !important;
    background:#faf9f6 !important; flex:0 0 auto !important;
  }
  .preview-panel.pf-open .domain-input-wrapper{ width:auto !important; flex:1 1 auto !important; }
}

@media (max-width:1024px){
  /* 제목이 좁은 공간에 눌려 "내/사/이/트" 로 쪼개졌다 */
  #pfSheetHead .pf-title{ white-space:nowrap !important; flex:0 0 auto !important; }
  #pfSheetHead .device-buttons{ flex:0 1 auto !important; min-width:0 !important; }
  #pfCloseBtn{ white-space:nowrap !important; }
}

@media (max-width:1024px){
  /* 헤더에 "PC·태블릿·모바일" 글자까지 둘 폭이 없어 잘렸다.
     아이콘만 남긴다(font-size:0 이면 텍스트 노드만 사라지고 svg 는 그대로). */
  #pfSheetHead .device-buttons{ transform:none !important; }
  #pfSheetHead .device-btn{
    font-size:0 !important;
    padding:7px 9px !important;
    min-width:0 !important; gap:0 !important;
  }
  #pfSheetHead .device-btn svg{ width:16px !important; height:16px !important; }
}

@media (max-width:1024px){
  /* 닫기는 우측 상단이 관습이다(카카오·토스·인스타 등 국내 앱 + iOS 전체화면 모달).
     헤더 순서: 제목 → 기기전환 → 닫기 */
  #pfSheetHead .pf-title{ order:1 !important; }
  #pfSheetHead .device-buttons{ order:2 !important; margin-left:auto !important; }
  #pfCloseBtn{ order:3 !important; margin-left:8px !important; }
}

@media (max-width:1024px){
  /* iOS 내비게이션 바처럼 제목은 화면 정가운데.
     좌우 항목 개수와 무관하게 중앙을 잡으려면 absolute 가 안전하다. */
  #pfSheetHead{ position:relative !important; }
  #pfSheetHead .pf-title{
    position:absolute !important;
    left:50% !important; transform:translateX(-50%) !important;
    order:0 !important; pointer-events:none;
  }
  #pfSheetHead .device-buttons{ order:2 !important; margin-left:auto !important; }
  #pfCloseBtn{
    order:3 !important; margin-left:8px !important;
    padding:6px 10px !important; font-size:15px !important; line-height:1 !important;
  }
}

@media (max-width:1024px){
  /* 기기전환이 하단 액션 바로 돌아왔다 — 도메인·공개와 한 줄에 담기게 */
  .preview-panel.pf-open .preview-toolbar .device-buttons{
    order:0 !important; margin:0 !important; transform:none !important; flex:0 0 auto !important;
  }
  .preview-panel.pf-open .preview-toolbar .device-btn{
    font-size:0 !important; padding:7px 8px !important; min-width:0 !important;
  }
  .preview-panel.pf-open .preview-toolbar .device-btn svg{ width:15px !important; height:15px !important; }
  .preview-panel.pf-open .domain-input-container{ min-width:0 !important; }
  /* 헤더는 제목(가운데) + 닫기(우측) 만 */
  #pfSheetHead{ min-height:44px; }
}

@media (max-width:1024px){
  /* 제목이 absolute 라 flow 에서 빠지자 닫기가 왼쪽으로 붙었다 → 오른쪽으로 밀어준다 */
  #pfCloseBtn{ margin-left:auto !important; }

  /* 하단 바: 기기전환 + 도메인 + 공개 + 복사 가 한 줄에 들어가도록 폭 배분 */
  .preview-panel.pf-open .preview-toolbar{ align-items:center !important; }
  .preview-panel.pf-open .domain-input-wrapper{ flex:1 1 auto !important; min-width:0 !important; }
  .preview-panel.pf-open .domain-input-container{ flex:1 1 auto !important; min-width:0 !important; }
  .preview-panel.pf-open .domain-input{ min-width:0 !important; flex:1 1 auto !important; font-size:16px !important; }
  .preview-panel.pf-open .domain-suffix{ flex:0 0 auto !important; font-size:11px !important; }
  .preview-panel.pf-open .btn-domain-save{ padding:0 10px !important; }
  .preview-panel.pf-open .btn-domain-save:first-of-type::after{ font-size:12px !important; margin-left:4px !important; }
}

@media (max-width:1024px){
  /* 기기전환은 헤더 왼쪽 (가운데 제목과 안 겹치게 auto 마진 금지) */
  #pfSheetHead .device-buttons{ order:0 !important; margin:0 !important; flex:0 0 auto !important; }
  #pfSheetHead .device-btn{ font-size:0 !important; padding:7px 8px !important; }
  #pfSheetHead .device-btn svg{ width:15px !important; height:15px !important; }
  /* 하단 바는 주소 입력이 주인공 */
  .preview-panel.pf-open .preview-toolbar .device-buttons{ display:none !important; }
  .preview-panel.pf-open .domain-input{ font-size:16px !important; }
  .preview-panel.pf-open .domain-suffix{ font-size:12px !important; }
}

/* ══ 모바일 공개(배포) 흐름 (2026-07-27) ══════════════════════════
   하단에 주소 입력칸이 늘 떠 있으면 "아직 안 할 일"이 계속 시야에 남는다.
   버튼 하나 → 주소 시트 → 완료(열기·복사·공유) 로 바꾼다. */
@media (max-width:1024px){
  /* 원래의 주소 입력줄은 감춘다(값은 그대로 쓰므로 지우지 않는다) */
  .preview-panel.pf-open .domain-input-wrapper{ display:none !important; }

  #pfPublishBtn{
    flex:1 1 auto; width:100%;
    padding:14px 18px; border:none; border-radius:2px;
    background:#1a1917; color:#faf9f6;
    font-size:15px; font-weight:700; letter-spacing:-.01em;
    box-shadow:0 2px 5px rgba(26,25,23,.20); cursor:pointer;
  }
  #pfPublishBtn[data-state="published"]{
    background:#faf9f6; color:#1a1917; border:1px solid #1a1917; box-shadow:none;
  }

  #pfPubOverlay{
    position:fixed; inset:0; z-index:9600; display:none;
    background:rgba(26,25,23,.42); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    align-items:flex-end;
  }
  #pfPubOverlay.on{ display:flex; }
  #pfPubSheet{
    width:100%; background:#faf9f6; border-radius:12px 12px 0 0;
    padding:0 20px calc(22px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 30px rgba(26,25,23,.22);
    animation:pfUp .22s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes pfUp{ from{ transform:translateY(14px); opacity:.6 } to{ transform:none; opacity:1 } }
  .pf-grip{ width:36px; height:4px; border-radius:99px; background:#dcd8cf; margin:9px auto 14px; }
  #pfPubSheet h3{
    margin:0 0 6px; font-size:19px; font-weight:600; color:#1a1917;
    font-family:"Noto Serif KR",AppleMyungjo,ui-serif,Georgia,serif; letter-spacing:.01em;
  }
  #pfPubSheet .pf-sub{ margin:0 0 16px; font-size:13.5px; color:#78746a; line-height:1.6; }
  .pf-addr{
    display:flex; align-items:center; gap:6px;
    border:1px solid #dcd8cf; border-radius:2px; background:#fff;
    padding:0 12px; height:52px;
  }
  .pf-addr input{
    flex:1 1 auto; min-width:0; border:none; outline:none; background:transparent;
    font-size:16px; color:#1a1917;
  }
  .pf-addr .pf-suffix{ flex:0 0 auto; font-size:13px; color:#78746a; }
  .pf-hint{ margin:8px 0 18px; font-size:12.5px; color:#a6a196; line-height:1.5; }
  .pf-hint.bad{ color:#dc2626; }
  .pf-primary{
    width:100%; padding:15px; border:none; border-radius:2px;
    background:#1a1917; color:#faf9f6; font-size:15px; font-weight:700; cursor:pointer;
  }
  .pf-primary:disabled{ opacity:.55; }
  .pf-row2{ display:flex; gap:8px; margin-top:10px; }
  .pf-ghost{
    flex:1 1 0; padding:13px; border:1px solid #dcd8cf; border-radius:2px;
    background:#faf9f6; color:#1a1917; font-size:14px; font-weight:600; cursor:pointer;
  }
  .pf-text{
    display:block; width:100%; margin-top:14px; padding:6px;
    border:none; background:none; color:#78746a; font-size:13px;
    text-decoration:underline; cursor:pointer;
  }
  .pf-done-mark{
    display:inline-block; margin-bottom:10px; padding:5px 11px;
    border:1px solid #1d3fa8; border-radius:2px;
    color:#1d3fa8; font-size:11.5px; font-weight:700; letter-spacing:.08em;
  }
  .pf-url{
    margin:0 0 18px; font-size:16px; color:#1a1917; font-weight:600; word-break:break-all;
  }
}
@media (min-width:1025px){ #pfPublishBtn, #pfPubOverlay{ display:none !important; } }

@media (max-width:1024px){
  /* 하단 액션 바 = [수정하러 가기(보조)] [공개하러 가기(주)] */
  .preview-panel.pf-open .preview-toolbar{ gap:8px !important; }
  #pfEditBtn{
    flex:1 1 0; padding:14px 10px; border:1px solid #dcd8cf; border-radius:2px;
    background:#faf9f6; color:#1a1917; font-size:14.5px; font-weight:600;
    white-space:nowrap; cursor:pointer;
  }
  #pfPublishBtn{ flex:1.2 1 0 !important; width:auto !important; white-space:nowrap; }
}
@media (min-width:1025px){ #pfEditBtn{ display:none !important; } }

@media (max-width:1024px){
  /* 기기 전환은 폰에서 실제로 아무 변화도 만들지 못하므로 감춘다
     (헤더/하단 어디에 있든 노출 금지) */
  .preview-panel.pf-open .device-buttons{ display:none !important; }
  /* 헤더는 [제목(가운데)] + [닫기(우)] 만 남는다 */
  #pfSheetHead{ justify-content:flex-end !important; }
}

/* ── 모바일 시트 기기 전환 (2026-07-27) ──────────────────────────
   세 버튼(PC·태블릿·모바일)을 헤더 왼쪽에 아이콘만으로. 제목은 가운데, 닫기는 오른쪽. */
@media (max-width:1024px){
  .preview-panel.pf-open .preview-content{ position:relative !important; overflow:hidden !important; }
  /* 앞서 감췄던 기기 전환을 다시 보이게 (이제는 실제로 동작한다) */
  #pfSheetHead .device-buttons{
    display:inline-flex !important; order:0 !important; margin:0 !important;
    flex:0 0 auto !important; transform:none !important;
  }
  #pfSheetHead .device-btn{
    font-size:0 !important;          /* 글자만 죽이고 아이콘만 남긴다 */
    padding:7px 8px !important; min-width:0 !important; gap:0 !important;
  }
  #pfSheetHead .device-btn svg{ width:15px !important; height:15px !important; }
  #pfSheetHead{ justify-content:flex-start !important; }
}

/* ── 시트 닫기 버튼: 정원 + 정중앙 정렬 (2026-07-27) ─────────────
   기존엔 padding 으로 크기를 만들어 33×29 타원이 됐고 display:block 이라
   ✕ 글리프가 글자 흐름대로 놓여 가운데서 어긋났다. */
@media (max-width:1024px){
  #pfCloseBtn{
    width:32px !important; height:32px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important; justify-content:center !important;
    border-radius:50% !important;
    font-size:14px !important; line-height:1 !important;
    flex:0 0 auto !important;
  }
}

/* ── 시트 첫 진입 안내 (2026-07-27) ──────────────────────────── */
@media (max-width:1024px){
  #pfTour{
    position:absolute; inset:0; z-index:20; display:none;
    align-items:center; justify-content:center; padding:22px;
    background:rgba(26,25,23,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  }
  #pfTour.on{ display:flex; }
  #pfTourCard{
    width:100%; background:#faf9f6; border:1px solid #dcd8cf; border-radius:2px;
    padding:22px 20px 18px; box-shadow:0 14px 40px rgba(26,25,23,.28);
  }
  #pfTourCard h4{
    margin:0 0 4px; font-size:17px; font-weight:600; color:#1a1917;
    font-family:"Noto Serif KR",AppleMyungjo,ui-serif,Georgia,serif; letter-spacing:.01em;
  }
  #pfTourCard .pf-t-sub{ margin:0 0 14px; font-size:13px; color:#78746a; }
  #pfTourCard ul{ margin:0 0 16px; padding:0; list-style:none; }
  #pfTourCard li{
    display:flex; gap:9px; align-items:flex-start;
    padding:9px 0; border-top:1px solid #e7e3da; font-size:13.5px; color:#1a1917; line-height:1.55;
  }
  #pfTourCard li:first-child{ border-top:none; }
  #pfTourCard li b{ font-weight:700; }
  #pfTourCard .pf-t-ico{ flex:0 0 auto; font-size:15px; line-height:1.4; }
  #pfTourDone{
    width:100%; padding:13px; border:none; border-radius:2px;
    background:#1a1917; color:#faf9f6; font-size:14.5px; font-weight:700; cursor:pointer;
  }
}

@media (max-width:1024px){
  /* 로그인 카드: 안내 문구와 첫 버튼 사이 숨 쉴 틈 */
  .login-container .logo{ margin-bottom:26px !important; }
}

/* ── 모달이 열렸을 때 떠 있는 버튼 숨김 (2026-07-27) ──────────────
   .modal 의 z-index 가 1000 인데 #pfViewBtn 도 1000 이라 나중에 그려진 버튼이
   설정창 위로 올라왔다. 뒤로 보내고, 모달 중에는 아예 감춘다. */
@media (max-width:1024px){
  #pfViewBtn{ z-index:900 !important; }
  body.pf-modal-open #pfViewBtn,
  body.pf-modal-open .support-float-btn{ display:none !important; }
}

/* ══ PC 레이아웃 정돈 (2026-07-27) ═══════════════════════════════
   ① 채팅을 왼쪽으로 — 같은 부류의 도구(Canvas·Artifacts·v0·Bolt)는 모두
      "대화 왼쪽 / 결과 오른쪽"이다. 원래 안내문도 "왼쪽 채팅에서…"였다.
      order 만 바꾸면 채팅이 60% 트랙을 차지하므로 트랙 비율도 함께 뒤집는다.
   ② 되돌리기 버튼이 absolute 라 툴바에서 떨어져 떠 있던 것 → 툴바 안으로
   ③ 로고가 정중앙이라 헤더 왼쪽이 비어 있던 것 → 왼쪽 정렬 */
/* PC 레이아웃은 전부 원래대로 되돌림(2026-07-27, 사용자 요청):
   좌우 배치·로고 정중앙·되돌리기 버튼 떠 있는 상태 모두 손대지 않는다. */

@media (min-width:1025px){
  /* 채팅이 오른쪽이므로 상담 버튼은 좌하단이 안 겹친다(원래 자리 유지). */
}