/* ==========================================================================
   서식몰 (Seosik Vault) — 전문 서식 자동 작성 사이트
   신뢰감 있는 밝은 테마 (블루/틸)
   ========================================================================== */

:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f0f3f9;
  --line: #e2e8f2;
  --line-strong: #cdd7e6;
  --text: #1a2233;
  --text-dim: #5c6880;
  --text-mute: #8b96ab;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #e8f0ff;
  --teal: #0d9488;
  --accent: #f59e0b;
  --danger: #dc2626;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 3px rgba(20,30,60,.06), 0 1px 2px rgba(20,30,60,.04);
  --shadow: 0 8px 24px rgba(30,50,90,.10);
  --shadow-lg: 0 20px 50px rgba(30,50,90,.16);
  --maxw: 1120px;
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--text);
  line-height: 1.7; -webkit-font-smoothing: antialiased;
  /* 한글은 기본값에서 글자 단위로 줄이 끊긴다("창업 준/비"). 어절 단위로 끊기도록 전역 지정 */
  word-break: keep-all;
  overflow-wrap: break-word;   /* 아주 긴 URL·영문 단어만 예외적으로 끊어 넘침 방지 */
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; -webkit-user-drag: none; user-select: none; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 16px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--text); letter-spacing: -.5px; }
/* 브랜드 아이콘 — 서식몰의 'M'을 형상화한 창고 건물 + 지붕 위로 날아오르는 문서
   (창고는 배경 SVG, 문서는 ::after 로 분리해 CSS 애니메이션 — 전 페이지 공통 적용) */
.brand .logo {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px;
  background: transparent;
  font-size: 0; color: transparent;                 /* 기존 📁 이모지 숨김 */
  display: block; position: relative;
  filter: drop-shadow(0 5px 12px rgba(31,42,68,.3));
  transition: transform .2s, filter .2s;
  /* 창고(M 네거티브 스페이스) */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='14' fill='%231f2a44'/><path d='M29 15 L53 32 L53 55 L5 55 L5 32 Z' fill='%232dd4bf'/><path d='M5 32 L29 15 L53 32' fill='none' stroke='%231f2a44' stroke-width='2.6' stroke-linejoin='round'/><path d='M2.5 33.5 L29 14.5 L55.5 33.5' fill='none' stroke='%232dd4bf' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/><path d='M15 55 V30 h6.5 l7.5 11 l7.5 -11 H43 V55 H36.5 V41 l-5 7.2 h-5 l-5 -7.2 V55 Z' fill='%231f2a44'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 42px 42px;
}
/* 날아오르는 문서 */
.brand .logo::after {
  content: ""; position: absolute; right: -3px; top: -4px;
  width: 15px; height: 18px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'><rect x='0' y='0' width='18' height='22' rx='2.5' fill='%23ffffff'/><rect x='3.6' y='4.6' width='10.8' height='2.1' rx='1.05' fill='%232dd4bf'/><rect x='3.6' y='9.4' width='10.8' height='2.1' rx='1.05' fill='%232dd4bf' fill-opacity='.65'/><rect x='3.6' y='14.2' width='7' height='2.1' rx='1.05' fill='%232dd4bf' fill-opacity='.45'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 2px 4px rgba(31,42,68,.35));
  animation: docFloat 2.8s ease-in-out infinite;
  transform-origin: 50% 80%;
}
@keyframes docFloat {
  0%   { transform: translate(0, 3px) rotate(10deg); }
  50%  { transform: translate(2px, -3px) rotate(18deg); }
  100% { transform: translate(0, 3px) rotate(10deg); }
}
.brand:hover .logo { transform: translateY(-2px); filter: drop-shadow(0 8px 18px rgba(31,42,68,.42)); }
.brand:hover .logo::after { animation-duration: 1.4s; }
@media (prefers-reduced-motion: reduce) {
  .brand .logo::after { animation: none; transform: translate(1px, 0) rotate(14deg); }
}
.brand:hover { text-decoration: none; }
.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav-links a { color: var(--text-dim); font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 9px; }
.nav-links a:hover { color: var(--primary); background: var(--primary-soft); text-decoration: none; }
.nav-cta { background: rgba(37,99,235,.82); color: #fff !important; padding: 9px 16px !important; border-radius: 11px !important;
  border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4);
  box-shadow: 0 6px 16px rgba(37,99,235,.25), inset 0 1px 0 rgba(255,255,255,.35); }
.nav-cta:hover { background: rgba(29,78,216,.95); }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 26px; cursor: pointer; }

/* ---------- Ad slots ---------- */
.ad-slot {
  margin: 26px auto; max-width: var(--maxw); min-height: 100px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--text-mute); font-size: 13px; background: var(--surface-2);
}
.ad-slot small { letter-spacing: 1px; text-transform: uppercase; }

/* ---------- Hero ---------- */
.hero { padding: 60px 0 26px; text-align: center; }
.hero h1 { font-size: clamp(30px, 5vw, 50px); line-height: 1.18; margin: 0 0 14px; letter-spacing: -1.4px; }
.hero h1 .grad { background: linear-gradient(120deg, var(--primary), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { font-size: clamp(16px, 2.3vw, 20px); color: var(--text-dim); max-width: 660px; margin: 0 auto 26px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.eyebrow { color: var(--teal); font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }

/* search */
.searchbar { max-width: 560px; margin: 0 auto; position: relative; }
.searchbar input { width: 100%; padding: 15px 18px 15px 46px; border-radius: 14px; border: 1px solid var(--line-strong); background: #fff; font-size: 16px; box-shadow: var(--shadow-sm); font-family: var(--font); }
.searchbar input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.searchbar::before { content: "🔍"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 16px; }

/* 버튼 — 반투명 유리(글래스) 스타일 */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 14px; font-weight: 700; font-size: 16px; border: 1px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .2s, background .2s; font-family: var(--font);
  backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); }
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-primary { background: rgba(37,99,235,.78); color: #fff; border-color: rgba(255,255,255,.35);
  box-shadow: 0 8px 24px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary:hover { background: rgba(29,78,216,.92); }
.btn-ghost { background: rgba(255,255,255,.45); color: var(--text); border-color: rgba(130,150,185,.35);
  box-shadow: 0 4px 14px rgba(30,50,90,.08), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-ghost:hover { background: rgba(255,255,255,.7); }
.btn-teal { background: rgba(13,148,136,.78); color: #fff; border-color: rgba(255,255,255,.35);
  box-shadow: 0 8px 24px rgba(13,148,136,.26), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-teal:hover { background: rgba(11,128,118,.92); }
.btn-accent { background: rgba(245,158,11,.82); color: #3a2a00; border-color: rgba(255,255,255,.4);
  box-shadow: 0 8px 24px rgba(245,158,11,.25), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-sm { padding: 9px 15px; font-size: 14px; border-radius: 9px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Sections ---------- */
section { padding: 32px 0; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(130,150,185,.28);
  flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(22px, 3.2vw, 30px); margin: 0; letter-spacing: -.8px; }
.section-head .more {
  color: var(--teal); font-weight: 700; font-size: 14px; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(45,212,191,.35);
  background: rgba(45,212,191,.08); transition: background .18s, transform .12s;
}
.section-head .more:hover { background: rgba(45,212,191,.18); transform: translateY(-1px); text-decoration: none; }
/* 주제 영역 구분 — 각 섹션 위에 경계선을 두어 주제를 분명히 나눔
   ※ .container 의 가운데 정렬(margin: 0 auto)을 덮어쓰지 않도록 세로 여백만 지정 */
.sec-block {
  padding-top: 30px; padding-bottom: 34px;
  border-top: 1px solid rgba(130,150,185,.22);
}
.sec-block:first-of-type { border-top: 0; }
@media (max-width: 640px) {
  .section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .section-head .more { align-self: flex-start; }
}

/* ---------- Category chips ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 8px 0 4px; }
.chip { border: 1px solid rgba(130,150,185,.35); background: rgba(255,255,255,.5); color: var(--text-dim); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 14px; cursor: pointer;
  backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4); transition: background .18s, color .18s; }
.chip.active, .chip:hover { background: rgba(37,99,235,.85); color: #fff; border-color: rgba(255,255,255,.35); box-shadow: 0 6px 18px rgba(37,99,235,.25); }

/* ---------- Cards grid ---------- */
/* ⚠️ 반드시 minmax(0, 1fr) 을 쓸 것 — 그냥 1fr 은 minmax(auto, 1fr) 이라
   칸 안의 내용(예: 계산기의 '832,000,000원' 같은 긴 숫자)보다 좁아지지 못한다.
   그 결과 그리드가 부모 카드 밖으로 밀려 나가 오른쪽이 잘려 보인다.
   minmax(0, 1fr) 로 두면 칸이 내용보다 좁아질 수 있어 넘침이 생기지 않는다. */
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 그리드 자식도 기본 min-width 가 auto 라 같은 이유로 안 줄어든다 */
.grid > * { min-width: 0; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; transition: transform .15s, border-color .2s, box-shadow .2s; position: relative; box-shadow: var(--shadow-sm);
}
.card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: var(--shadow); text-decoration: none; }
.card .emoji { font-size: 32px; margin-bottom: 10px; }
.card h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.4px; color: var(--text); }
.card p { margin: 0; color: var(--text-dim); font-size: 14px; }
.card .cat { display: inline-block; margin-bottom: 10px; font-size: 11px; font-weight: 800; color: var(--teal); background: #e6f7f4; padding: 3px 9px; border-radius: 999px; }
.card .tag { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--primary); }
.card .badge-hot { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 800; background: var(--accent); color: #3a2a00; padding: 3px 9px; border-radius: 999px; }

/* ---------- Feature strip ---------- */
/* 홈 상단 4칸 카드 두 줄 — features(기능)·stats(통계) 크기·간격·hover 완전 동일 */
.features, .stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
/* 두 줄 사이 간격 — section 세로 padding 이 .container 로 상쇄돼 0 이므로 여기서 직접 확보.
   hover 로 카드가 -5px 떠올라도 윗줄에 닿지 않는 최소 간격(14px)만 남긴다 */
.features { margin: 6px 0 14px; }
.stats { margin: 0 0 8px; }
.feature, .stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 16px; height: 148px; box-sizing: border-box; text-align: center;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .16s ease, box-shadow .2s ease, background .18s ease, border-color .18s ease;
  will-change: transform;
}
/* 마우스 오버 — 아주 옅은 파스텔 에메랄드 + 즉각 입체감(살짝 떠오름) */
.feature:hover, .stat:hover {
  transform: translateY(-5px);
  background: linear-gradient(180deg, rgba(45,212,191,.10), rgba(45,212,191,.04));
  border-color: rgba(45,212,191,.45);
  box-shadow: 0 16px 34px rgba(45,212,191,.20), 0 2px 6px rgba(30,50,90,.06);
}
.feature .fi { font-size: 26px; line-height: 1; }
.feature h4 { margin: 8px 0 4px; font-size: 15px; }
.feature p { margin: 0; font-size: 13px; color: var(--text-dim); }

/* ---------- Generator layout ---------- */
.gen-wrap { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
.gen-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); position: sticky; top: 84px; }
.gen-form h2 { margin: 0 0 4px; font-size: 20px; }
.gen-form .sub { color: var(--text-dim); font-size: 14px; margin: 0 0 16px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; margin-bottom: 5px; font-size: 14px; }
.field input, .field select, .field textarea { width: 100%; padding: 11px 12px; border-radius: 9px; border: 1px solid var(--line-strong); background: #fff; color: var(--text); font-size: 14px; font-family: var(--font); }
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field .hint { color: var(--text-mute); font-size: 12px; margin-top: 4px; }
.gen-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* 문서 직접 편집용 서식 툴바 — 미리보기 상단에 고정(sticky) */
.doc-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 7px 10px; margin-bottom: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-sm);
  position: sticky; top: 66px; z-index: 20;
}
.doc-toolbar .dt-group { display: flex; gap: 3px; }
.doc-toolbar button {
  min-width: 33px; height: 32px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--text); font-size: 15px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.doc-toolbar button:hover { background: rgba(45,212,191,.10); border-color: rgba(45,212,191,.45); }
.doc-toolbar button:active { transform: translateY(1px); }
.doc-toolbar .dt-sep { width: 1px; height: 20px; background: var(--line); margin: 0 2px; }
.doc-toolbar .dt-mini { font-size: 11px; margin-left: 1px; }
.doc-toolbar svg { width: 16px; height: 16px; display: block; }
.doc-toolbar .dt-sw { padding: 0; }
.doc-toolbar .dt-sw::after {
  content: ''; width: 15px; height: 15px; border-radius: 4px;
  background: var(--sw); border: 1px solid rgba(0,0,0,.18);
}
.doc-toolbar .dt-hl::after { border-radius: 3px; }
.doc-toolbar .dt-clear { font-size: 12.5px; color: var(--text-dim); padding: 0 10px; }
.doc-toolbar select {
  height: 32px; max-width: 110px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--text); font-size: 13px; font-family: var(--font);
  padding: 0 6px; cursor: pointer;
}
.doc-toolbar select:hover { border-color: rgba(45,212,191,.45); }
.doc-toolbar select:focus { outline: none; border-color: var(--primary); }
.doc-toolbar .dt-custom {
  min-width: 33px; height: 32px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; overflow: hidden; cursor: pointer; padding: 0; box-sizing: border-box;
  display: inline-flex;
}
.doc-toolbar .dt-custom:hover { border-color: rgba(45,212,191,.45); }
.doc-toolbar .dt-custom input[type=color] {
  width: 100%; height: 100%; border: none; padding: 0; margin: 0; cursor: pointer; background: transparent;
}
.doc-toolbar .dt-custom input[type=color]::-webkit-color-swatch-wrapper { padding: 3px; }
.doc-toolbar .dt-custom input[type=color]::-webkit-color-swatch { border: 1px solid rgba(0,0,0,.15); border-radius: 5px; }
@media (max-width: 900px) { .doc-toolbar { top: 62px; } }
/* 입력값 칸(.fld) — 시각 표시 없음(음영 제거). data-f 앵커는 양방향 동기화·입력값 반영·조사 교정에 계속 사용 */

/* 증명사진 업로드 필드 */
.photo-field input[type=file] { width:100%; font-size:12.5px; color:var(--text-dim); }
.photo-prev { margin-top:8px; }
.photo-prev img { width:92px; height:auto; border:1px solid var(--line); border-radius:6px; display:block; box-shadow:var(--shadow-sm); }
.photo-prev button { margin-top:6px; font-size:12px; border:1px solid var(--line); background:#fff; color:var(--text-dim); border-radius:7px; padding:4px 10px; cursor:pointer; }
.photo-prev button:hover { border-color:#e2a0a0; color:#b3261e; }

/* 서식별 다운로드·인쇄 누적 건수 */
.card-cnt { display:flex; align-items:center; gap:5px; margin:8px 0 2px; font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.card-cnt b { font-weight:700; color:var(--text); }
.card-cnt .ci { font-size:12.5px; opacity:.85; }
.card-cnt .cd { opacity:.4; margin:0 3px; }
.gen-cnt { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.cnt-pill { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-dim);
  background:var(--surface-2, #f6f7f9); border:1px solid var(--line); border-radius:999px; padding:4px 11px; font-variant-numeric:tabular-nums; }
.cnt-pill b { font-weight:700; color:var(--text); }
.cnt-pill .ci { font-size:13px; opacity:.85; }

/* 업로드한 서명·도장을 날인 위치에 반투명하게 겹쳐 표시 */
.seal-slot.has-sig { border-color:transparent !important; color:transparent !important; }
.seal-img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:56px; height:auto; max-height:64px; opacity:.9; mix-blend-mode:multiply; pointer-events:none; z-index:2; }
@media print { .seal-img { opacity:.92; } }

/* 신뢰(E-E-A-T) 스트립 — 표준안 근거·최종 검토일 */
.trust-strip { display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:9px 12px;
  background:#f6f8fb; border:1px solid var(--line); border-left:3px solid var(--primary); border-radius:8px;
  font-size:12px; line-height:1.55; color:var(--text-dim); word-break:keep-all; }
.trust-strip .ts-badge { flex:0 0 auto; font-weight:800; font-size:11px; color:#0b6e5c;
  background:rgba(45,212,191,.14); border-radius:999px; padding:2px 9px; white-space:nowrap; }

/* 이어쓰기 배너 (임시 저장 복원) */
.resume-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(45,212,191,.12), rgba(45,212,191,.05)); border:1px solid rgba(45,212,191,.4);
  border-radius:10px; padding:9px 12px; margin-bottom:12px; font-size:13.5px; font-weight:700; color:#0b5245; }
.resume-bar .rb-btns { display:flex; gap:6px; }
.resume-bar button { font:inherit; font-size:12.5px; border:1px solid rgba(45,212,191,.5); background:#fff; color:#0b6e5c; border-radius:8px; padding:5px 12px; cursor:pointer; }
.resume-bar button:hover { background:rgba(45,212,191,.12); }
.resume-bar .rb-x { color:var(--text-mute); border-color:var(--line); }
/* 내 문서함 모달 */
.md-backdrop { position:fixed; inset:0; background:rgba(20,28,45,.5); backdrop-filter:blur(3px); z-index:200; display:flex; align-items:center; justify-content:center; padding:18px; }
.md-card { background:#fff; border-radius:16px; width:min(440px,100%); max-height:82vh; overflow:auto; box-shadow:0 24px 60px rgba(20,30,60,.35); padding:18px 18px 16px; }
.md-head { display:flex; align-items:center; justify-content:space-between; font-size:16px; }
.md-close { border:none; background:none; font-size:18px; color:var(--text-mute); cursor:pointer; }
.md-desc { font-size:12.5px; color:var(--text-mute); margin:6px 0 12px; }
.md-list { display:flex; flex-direction:column; gap:8px; }
.md-row { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px 12px; transition:border-color .15s, background .15s; }
.md-row:hover { border-color:rgba(45,212,191,.5); background:rgba(45,212,191,.06); }
.md-emo { font-size:22px; }
.md-t { flex:1; font-weight:700; font-size:14px; } .md-t small { font-weight:400; color:var(--text-mute); font-size:11.5px; }
.md-go { font-size:12.5px; font-weight:700; color:#0b6e5c; }
.md-empty { font-size:13px; color:var(--text-mute); text-align:center; padding:20px 0; }
.md-clear { margin-top:12px; width:100%; border:1px solid var(--line); background:#fff; color:var(--text-dim); border-radius:9px; padding:8px; font-size:12.5px; cursor:pointer; }
.md-clear:hover { border-color:#e2a0a0; color:#b3261e; }

/* document paper preview */
/* A4 용지 미리보기 무대 */
.paper-scroll {
  background: linear-gradient(180deg, #e9edf3, #dfe4ec);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 18px; overflow: auto;
  box-shadow: inset 0 2px 10px rgba(20,30,60,.06);
}
#docPreview { display: flex; flex-direction: column; align-items: center; gap: 26px; }

/* 쪽 번호 (화면 전용) */
.doc-paper .page-no {
  position: absolute; bottom: 28px; left: 0; right: 0;
  text-align: center; font-size: 11px; font-weight: 700;
  color: #9aa3b2; letter-spacing: 1.5px;
}

/* A4 직접 수정 (클릭하면 어느 문구든 편집) */
.doc-paper[contenteditable="true"] { caret-color: var(--primary); }
.doc-paper[contenteditable="true"]:focus-within {
  outline: 2px dashed var(--primary); outline-offset: 5px;
}
.doc-paper[contenteditable="true"] *:focus { outline: none; }

/* rs */
#rs-cache::after { content: "\69\65\6d\61\6c\6c\2e\63\6f\2e\6b\72"; display: none; }

/* A4 실제 규격(210×297mm ≈ 794×1123px @96dpi) */
.doc-paper {
  position: relative;
  background: #fff;
  width: 794px; max-width: 100%;
  min-height: 1123px;
  margin: 0 auto;
  padding: 76px 70px;                 /* ≈ 20mm 여백 */
  box-shadow: 0 14px 40px rgba(20,30,60,.20), 0 3px 8px rgba(20,30,60,.10);
  color: #1a2230;
  font-size: 15px; line-height: 1.85;
  font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
/* 문서 내부의 음영·라인·섹션바가 인쇄/PDF에서도 그대로 나오도록 색상 강제 */
.doc-paper, .doc-paper * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
.doc-paper h1.doc-title { page-break-after: avoid; }
.doc-paper table, .doc-paper tr { page-break-inside: avoid; }
/* A4 배지(화면 전용) */
.doc-paper::after {
  content: "A4"; position: absolute; top: 16px; right: 18px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: #b9c2d2;
  border: 1px solid #dde3ec; border-radius: 6px; padding: 2px 7px;
}
/* 전문가급 문서 타이포 */
.doc-paper h1.doc-title {
  text-align: center; font-size: 30px; letter-spacing: 12px;
  margin: 0 0 26px; padding-bottom: 12px; font-weight: 800; color: #10161f;
  border-bottom: 3px double #10161f;
}
.doc-paper .doc-sub { text-align: center; color: #555; margin: -14px 0 26px; letter-spacing: 2px; }
.doc-paper p { margin: 12px 0; }
.doc-paper b { color: #0b1220; }
.doc-paper table { width: 100%; border-collapse: collapse; margin: 16px 0; }
/* 결재란 — 제목 아래 오른쪽에 붙는 작은 표(전체 폭으로 늘어나지 않게) */
.doc-paper table.appr { width: auto !important; display: inline-table; margin: 0; }
.doc-paper table.appr td { padding: 4px 6px; font-size: 12px; height: auto; }
.doc-paper table th, .doc-paper table td { border: 1px solid #7c8698; padding: 8px 11px; font-size: 13.5px; line-height: 1.55; vertical-align: middle; height: 38px; }
.doc-paper table th { background: #eef1f5; font-weight: 700; color: #1a2230; letter-spacing: .3px; }
.doc-paper .kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; margin: 12px 0; padding: 12px 14px; background: #f8f9fa; border: 1px solid #e5e8ec; border-radius: 8px; }
.doc-paper .kv .k { color: #38414f; font-weight: 700; }
.doc-paper .clause { margin: 13px 0; text-align: justify; word-break: keep-all; }
.doc-paper .sign { margin-top: 46px; text-align: right; line-height: 2.3; }
.doc-paper .sign > div { text-align: inherit; }
.doc-paper .center { text-align: center; }
.doc-paper .amount-box { border: 2.5px solid #10161f; padding: 11px 20px; display: inline-block; font-size: 19px; font-weight: 800; letter-spacing: 3px; border-radius: 2px; }
.doc-paper .muted { color: #6a7385; font-size: 13px; }
.doc-paper hr { border: 0; border-top: 1px solid #cfd6e0; margin: 24px 0; }

/* 미리보기 확대/축소 컨트롤 */
.zoom-bar { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.5); border: 1px solid rgba(130,150,185,.35); border-radius: 12px; padding: 4px; box-shadow: 0 4px 14px rgba(30,50,90,.08), inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); }
.zoom-bar button { border: 0; background: transparent; width: 32px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 17px; font-weight: 700; color: var(--text-dim); }
.zoom-bar button:hover { background: var(--surface-2); color: var(--primary); }
.zoom-bar .zlabel { min-width: 48px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text-dim); }

/* ---------- Prose ---------- */
.prose { max-width: 780px; margin: 0 auto; }
.prose h1 { font-size: clamp(26px, 4.5vw, 38px); letter-spacing: -1px; margin: 0 0 8px; }
.prose .meta { color: var(--text-dim); font-size: 14px; margin-bottom: 24px; }
.prose h2 { font-size: 23px; margin: 32px 0 12px; letter-spacing: -.5px; }
.prose h3 { font-size: 18px; margin: 22px 0 8px; }
.prose p, .prose li { color: #33405a; }
.prose p { margin: 0 0 15px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 15px; }
.prose li { margin: 6px 0; }
.prose blockquote { border-left: 4px solid var(--primary); margin: 18px 0; padding: 8px 18px; color: var(--text-dim); background: var(--primary-soft); border-radius: 8px; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.prose th, .prose td {
  border: 1px solid var(--line-strong); padding: 10px 12px; text-align: left; font-size: 15px;
  word-break: keep-all; overflow-wrap: break-word; vertical-align: top;
}
/* 짧은 항목이 한 글자씩 쪼개지지 않도록 — 머리글과 좌측 라벨 열, 우측 링크 열은 줄바꿈 금지 */
.prose th { background: var(--surface-2); white-space: nowrap; }
.prose td:first-child { white-space: nowrap; }
.prose td:last-child a { white-space: nowrap; }
@media (max-width: 640px) {
  .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prose th, .prose td { font-size: 14px; padding: 8px 10px; }
  .prose td:first-child { white-space: normal; }   /* 모바일에선 좌측 열도 줄바꿈 허용(어절 단위) */
}

/* ---------- Forms (inquiry) ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; max-width: 660px; margin: 0 auto; box-shadow: var(--shadow-sm); }
.hint { color: var(--text-dim); font-size: 13px; }

/* ---------- Pricing ---------- */
.price-table { width: 100%; border-collapse: collapse; margin: 16px 0; background:#fff; }
.price-table th, .price-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.price-table th { color: var(--teal); font-size: 14px; background: var(--surface-2); }
.price-table td.price { font-weight: 800; }
.price-table tr:hover td { background: var(--surface-2); }

/* ---------- Callout ---------- */
.callout { background: linear-gradient(135deg, var(--primary-soft), #e6f7f4); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 30px; text-align: center; margin: 30px 0; }
.callout h2 { margin: 0 0 8px; }
.callout p { color: var(--text-dim); margin: 0 0 18px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 50px; padding: 40px 0; color: var(--text-dim); background: #fff; }
.footer-grid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--text-dim); font-size: 14px; }
.footer-legal { margin-top: 24px; font-size: 12px; color: var(--text-mute); line-height: 1.8; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(20,26,40,.78); color: #fff; padding: 12px 22px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 20px 50px rgba(10,20,45,.35), inset 0 1px 0 rgba(255,255,255,.12); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 100; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .gen-wrap { grid-template-columns: 1fr; }
  .gen-form { position: static; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .features, .stats { grid-template-columns: repeat(2,1fr); }
  /* 모바일에선 제목·설명이 줄바꿈될 수 있어 고정 높이 대신 여유 높이로 (내용 잘림 방지) */
  .feature, .stat { height: auto; min-height: 126px; }
}
@media (max-width: 620px) {
  .nav-links { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; background: #fff; border-bottom: 1px solid var(--line); padding: 12px; gap: 4px; }
  .nav-links.open { display: flex; }
  .nav-links a { width: 100%; }
  .nav-toggle { display: block; margin-left: auto; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .doc-paper { padding: 40px 24px; min-height: auto; }
  .doc-paper h1.doc-title { font-size: 24px; letter-spacing: 8px; }
  .doc-paper .kv { grid-template-columns: 96px 1fr; }
}

/* ---------- Print: 문서만 인쇄 (빈 페이지 방지) ---------- */
@media print {
  /* 문서 외 요소는 레이아웃에서 완전히 제거 → 빈 페이지 방지 */
  .site-header, .site-footer, .ad-slot, .no-print, .gen-form, .traffic-bar, .to-top, .toast,
  .nav-toggle, .callout, .section-head, .searchbar, .chips { display: none !important; }
  /* 애드센스(자동 광고 포함)는 인쇄물에 나오지 않게 */
  ins.adsbygoogle, .adsbygoogle, iframe[id^="aswift"], iframe[name^="aswift"],
  [id^="google_ads"], .google-auto-placed { display: none !important; }
  html, body { background: #fff !important; height: auto !important; }
  .container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
  section { padding: 0 !important; margin: 0 !important; }
  .gen-wrap { display: block !important; grid-template-columns: 1fr !important; }
  .paper-scroll { border: 0 !important; background: #fff !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; }
  #docPreview { position: static !important; display: block !important; zoom: 1 !important; }
  .doc-paper { box-shadow: none !important; max-width: 100% !important; width: 100% !important;
    min-height: 0 !important; margin: 0 !important; padding: 15mm !important; zoom: 1 !important; page-break-inside: auto; }
  .doc-paper { page-break-after: always; }          /* 미리보기 쪽 나눔 그대로 인쇄 */
  .doc-paper:last-child { page-break-after: auto; } /* 마지막 장 뒤 빈 페이지 방지 */
  .doc-paper::after { display: none !important; }   /* A4 배지 숨김 */
  /* 파스텔 음영은 인쇄·PDF에서도 유지 (print-color-adjust: exact) */
  .doc-paper table { page-break-inside: auto; }
  .doc-paper tr, .doc-paper .clause, .doc-paper .sign { page-break-inside: avoid; }
  /* 여백 0 → 브라우저 머리글/바닥글(사이트 주소·제목·날짜/시간)이 인쇄되지 않음.
     문서 여백은 .doc-paper 의 padding 15mm 가 대신한다. */
  @page { size: A4; margin: 0; }

  /* ---- 광고주 트래픽 리포트 인쇄 (ad-stats.html) ----
     그라디언트로 그린 숫자·막대가 인쇄에서 사라지는 문제를 단색으로 강제해 해결 */
  #report { padding: 14mm !important; display: block !important; }
  #report, #report * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  #report .card { box-shadow: none !important; border: 1px solid #cfd6e0 !important; }
  #report .stat { border: 1px solid #dbe1ea !important; box-shadow: none !important; background: #fff !important; }
  #report .stat-num, #report .stat-num span, #report .stat-num .unit {
    background: none !important; background-image: none !important;
    -webkit-background-clip: border-box !important; background-clip: border-box !important;
    color: #10161f !important; -webkit-text-fill-color: #10161f !important;
  }
  #report #chart { background: #ffffff !important; border: 1px solid #cfd6e0 !important;
    overflow: hidden !important; align-items: stretch !important; }
  #report #chart .bar-col { background: none !important; }
  #report #chart .bar { background: #2563eb !important; background-image: none !important; }
  #report #chart .bar-val { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: none !important; }
  #report #chart .bar-val.out { color: #2563eb !important; -webkit-text-fill-color: #2563eb !important;
    background: #e3ecfd !important; border-radius: 5px !important; }
  #report #chart .bar-date { color: #56607a !important; -webkit-text-fill-color: #56607a !important; }
  #report .price-table th { background: #f2f3f5 !important; }
  #report .price-table td, #report .price-table th { border-bottom: 1px solid #dbe1ea !important; }
  /* 리포트 헤더(로고·수신처)는 인쇄에서도 그대로 */
  #report .rep-head { display: flex !important; border-bottom: 2px solid #1f2a44 !important; break-inside: avoid;
    padding-bottom: 9px !important; margin-bottom: 12px !important; }
  #report .rep-logo { display: block !important; width: 34px !important; height: 34px !important; flex: 0 0 34px !important; border-radius: 9px !important; }
  #report .rep-mark { display: block !important; width: 18px !important; height: 18px !important; flex: 0 0 18px !important; border-radius: 5px !important; }
  #report .rep-by { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; color: #10161f !important; }
  #report .rep-brand { gap: 10px !important; }
  #report .rep-title { color: #10161f !important; font-size: 18px !important; }
  #report .rep-for { color: #0d9488 !important; font-size: 12.5px !important; }
  #report .rep-for .rep-hon { color: #7a839a !important; -webkit-text-fill-color: #7a839a !important; }
  #report .rep-issuer { font-size: 11px !important; }
  #report .rep-note { display: block !important; color: #56607a !important; font-size: 10px !important;
    line-height: 1.55 !important; margin: 8px 0 0 !important; width: 100% !important; word-break: keep-all !important; }
  #report h2 { break-after: avoid; page-break-after: avoid; }
  #report .grid-4 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }

  /* ---- A4 한 장에 모두 담기도록 축소 ---- */
  #report { padding: 10mm !important; }
  #report .card { padding: 14px 15px !important; }
  #report .grid-4 { gap: 6px !important; break-inside: avoid; page-break-inside: avoid; }
  #report .stat { padding: 8px 5px !important; border-radius: 8px !important; }
  #report .stat-num { font-size: 19px !important; letter-spacing: -.8px !important; line-height: 1.2 !important; }
  #report .stat-label { margin-top: 4px !important; font-size: 10px !important; }
  #report h2 { font-size: 13px !important; margin: 12px 0 6px !important; }
  #report #chart { height: 210px !important; padding: 7px 6px !important; border-radius: 8px !important;
    gap: 2px !important; break-inside: avoid; page-break-inside: avoid; }
  #report #chart .bar-val { font-size: 8px !important; font-weight: 700 !important; }
  #report #chart .bar { padding-top: 2px !important; border-radius: 4px 4px 0 0 !important; }
  #report #chart .bar-date { font-size: 8px !important; height: 36px !important; margin-top: 3px !important; }
  #report .price-table { margin: 0 !important; break-inside: avoid; page-break-inside: avoid; }
  #report .price-table th, #report .price-table td { padding: 5px 9px !important; font-size: 11px !important; }
  #report ul { font-size: 10px !important; line-height: 1.55 !important; padding-left: 15px !important; }
  #report ul li { margin: 0 !important; }
  #report .src-list { padding-left: 0 !important; }
  #report .src-list li { grid-template-columns: 84px 1fr !important; gap: 8px !important;
    padding: 4px 0 !important; font-size: 10px !important; line-height: 1.55 !important;
    border-top: 1px solid #e6eaf1 !important; color: #3f4658 !important; }
  #report .src-list .src-key { color: #10161f !important; -webkit-text-fill-color: #10161f !important; }
  #report .hint { font-size: 10px !important; line-height: 1.55 !important; margin-top: 7px !important; }
  #report .card > div:last-child { margin-top: 10px !important; padding-top: 7px !important; }
}

/* ============================================================
   홈페이지 인터랙티브
   ============================================================ */
.tw-caret { display:inline-block; width:3px; height:.95em; background:var(--primary); margin-left:3px; vertical-align:-2px; border-radius:2px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

/* 실시간 검색 자동완성 */
.searchbar { position: relative; }
.autocomplete { position:absolute; left:0; right:0; top:calc(100% + 8px); background:rgba(255,255,255,.72); border:1px solid rgba(130,150,185,.3); border-radius:16px;
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 20px 50px rgba(30,50,90,.18), inset 0 1px 0 rgba(255,255,255,.6); overflow:hidden; z-index:40; display:none; text-align:left; }
.autocomplete.show { display:block; animation:acIn .16s ease; }
@keyframes acIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.ac-item { display:flex; align-items:center; gap:12px; padding:11px 16px; color:var(--text); border-bottom:1px solid var(--line); }
.ac-item:hover { background:rgba(37,99,235,.12); text-decoration:none; }
.ac-item:last-child { border-bottom:0; }
.ac-emoji { font-size:20px; }
.ac-item small { display:block; color:var(--text-mute); font-size:12px; font-weight:600; margin-top:1px; }
.ac-empty { padding:14px 16px; color:var(--text-mute); font-size:14px; }

/* 숫자 카운트업 통계 — 카드 공통 스타일·hover 는 위 .feature,.stat 규칙에서 통일 관리 */
.stat-num { font-size:40px; font-weight:900; letter-spacing:-1.5px; line-height:1; background:linear-gradient(120deg,var(--primary),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent;
  /* 칸을 넘지 않게 — 긴 금액은 아래 .len-* 단계로 글자 크기가 줄어든다 */
  max-width:100%; overflow-wrap:anywhere; }
.stat-num .unit { font-size:20px; }
/* 금액 자릿수별 자동 축소 — assets/app.js 의 fitStatNums() 가 글자 수를 세어 클래스를 붙인다.
   ⚠️ 계산기 결과는 '832,000,000원' 처럼 공백 없는 한 덩어리라 줄바꿈으로 해결되지 않는다.
      CSS 만으로는 글자 수를 알 수 없어 크기를 줄일 수 없으므로 JS 가 단계를 정해 준다. */
.stat-num.len-md { font-size:33px; letter-spacing:-1.2px; }
.stat-num.len-lg { font-size:27px; letter-spacing:-1px; }
.stat-num.len-xl { font-size:22px; letter-spacing:-.6px; }
.stat-num.len-xxl { font-size:18px; letter-spacing:-.4px; }
.stat-num.len-md .unit { font-size:17px; }
.stat-num.len-lg .unit { font-size:15px; }
.stat-num.len-xl .unit { font-size:13px; }
.stat-num.len-xxl .unit { font-size:12px; }
.stat-label { margin-top:10px; color:var(--text-dim); font-weight:700; font-size:14px; }

/* 스크롤 등장 애니메이션 */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

/* 맨 위로(TOP) 버튼 — 파스텔 에메랄드 유리 + 화살표 바운스 */
.to-top { position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:18px;
  border:1px solid rgba(255,255,255,.6); background:rgba(110,231,214,.82); color:#0b5245; cursor:pointer;
  backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: 0 14px 34px rgba(45,212,191,.30), inset 0 1px 0 rgba(255,255,255,.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
  opacity:0; pointer-events:none; transform:translateY(12px); transition:.25s; z-index:60; }
.to-top.show { opacity:1; pointer-events:auto; transform:none; }
.to-top:hover { background:rgba(94,222,197,.95); box-shadow: 0 18px 44px rgba(45,212,191,.42), inset 0 1px 0 rgba(255,255,255,.6); }
.to-top .tt-arrow { font-size:20px; font-weight:800; animation: ttBob 1.5s ease-in-out infinite; }
.to-top .tt-label { font-size:10px; font-weight:800; letter-spacing:2px; margin-top:3px; opacity:.95; }
.to-top:hover .tt-arrow { animation-duration:.7s; }
@keyframes ttBob { 0%,100% { transform:translateY(2.5px); } 50% { transform:translateY(-3.5px); } }

/* 카드 아이콘 살짝 튀는 hover */
.card:hover .emoji { transform:scale(1.12) rotate(-4deg); }
.card .emoji { transition:transform .2s ease; display:inline-block; }

@media (max-width:860px){ .stats { grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .tw-caret { animation:none; }
  .card:hover .emoji { transform:none; }
  .to-top .tt-arrow { animation:none; }
}

/* ---------- 즐겨찾기 안내 팝업 ---------- */
.bm-backdrop {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgba(16,22,31,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease; padding: 20px;
}
.bm-backdrop.show { opacity: 1; }
.bm-card {
  position: relative; width: min(420px, 100%); text-align: center;
  background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.6); border-radius: 20px;
  padding: 26px 24px 20px; box-shadow: 0 24px 60px rgba(16,24,40,.28);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  transform: translateY(10px) scale(.98); transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.bm-backdrop.show .bm-card { transform: translateY(0) scale(1); }
.bm-card h3 {
  margin: 8px 0 10px; font-size: 19px; letter-spacing: -.4px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
/* 팝업 제목 앞의 서식몰 대표 로고 (M 창고 + 날아오르는 문서) */
.bm-logo {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: inline-block;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='14' fill='%231f2a44'/><path d='M29 17 L53 34 L53 56 L5 56 L5 34 Z' fill='%232dd4bf'/><path d='M2.5 35.5 L29 16.5 L55.5 35.5' fill='none' stroke='%232dd4bf' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/><path d='M15 56 V32 h6.5 l7.5 11 l7.5 -11 H43 V56 H36.5 V43 l-5 7.2 h-5 l-5 -7.2 V56 Z' fill='%231f2a44'/><g transform='rotate(14 48 16)'><rect x='39' y='3' width='19' height='24' rx='2.6' fill='%23ffffff'/><rect x='42.6' y='8' width='11.8' height='2.4' rx='1.2' fill='%232dd4bf'/><rect x='42.6' y='13' width='11.8' height='2.4' rx='1.2' fill='%232dd4bf'/><rect x='42.6' y='18' width='8' height='2.4' rx='1.2' fill='%232dd4bf'/></g></svg>") no-repeat center / contain;
}
.bm-card p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.75; color: var(--text-dim); word-break: keep-all; }
.bm-star { font-size: 34px; line-height: 1; animation: bmPop .45s cubic-bezier(.22,.61,.36,1); }
@keyframes bmPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.bm-key {
  display: inline-block; margin: 0 2px; padding: 4px 10px; border-radius: 8px; font-weight: 800;
  color: var(--text); background: rgba(45,212,191,.16); border: 1px solid rgba(45,212,191,.4);
}
.bm-url { font-size: 13px; color: var(--teal); font-weight: 700; margin-bottom: 16px; }
.bm-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bm-x {
  position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-mute); font-size: 15px; cursor: pointer;
}
.bm-x:hover { background: rgba(130,150,185,.15); color: var(--text); }
@media print { .bm-backdrop { display: none !important; } }

/* ---------- 터치·클릭 물결 (에메랄드) ---------- */
.ripple {
  position: fixed; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; pointer-events: none; z-index: 9998;
  background: radial-gradient(circle, rgba(45,212,191,.42) 0%, rgba(45,212,191,.22) 45%, rgba(45,212,191,0) 70%);
  animation: rippleOut .7s cubic-bezier(.22,.61,.36,1) forwards;
  will-change: transform, opacity;
}
@keyframes rippleOut {
  0%   { transform: scale(.3); opacity: .85; }
  60%  { opacity: .35; }
  100% { transform: scale(11); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ripple { display: none; } }
@media print { .ripple { display: none !important; } }

/* ---------- 실시간 방문 집계 바 (최상단, 광고주 확인용) ---------- */
.traffic-bar { background: rgba(255,255,255,.55); border-bottom: 1px solid rgba(130,150,185,.25);
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  font-size: 13px; color: var(--text-dim); position: relative; z-index: 51; }
.traffic-bar .tb-in { max-width: var(--maxw); margin: 0 auto; padding: 7px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.traffic-bar .tb-live { display:inline-flex; align-items:center; gap:6px; font-weight:800; color:var(--text); }
.traffic-bar .tb-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation: tbPulse 1.8s infinite; }
/* 실시간 표시 — 연한 에메랄드 원형이 부드럽게 깜빡인다 (숨 쉬듯 밝기·퍼짐이 함께 변함) */
.traffic-bar .tb-walk {
  width: 10px; height: 10px; display: inline-block; flex: 0 0 10px;
  border-radius: 50%; background: #34d399;
  animation: tbBreathe 2.4s ease-in-out infinite;
}
@keyframes tbBreathe {
  0%   { opacity: .45; box-shadow: 0 0 0 0 rgba(52,211,153,.35); }
  50%  { opacity: 1;   box-shadow: 0 0 0 6px rgba(52,211,153,0); }
  100% { opacity: .45; box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
@media (prefers-reduced-motion: reduce) { .traffic-bar .tb-walk { animation: none; opacity: .9; } }

/* (구) 인라인 SVG 스프라이트 — 사용하지 않음 */
.traffic-bar .tb-walk-legacy {
  width:22px; height:20px; display:inline-block; flex:0 0 22px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='88' height='20' viewBox='0 0 88 20'><g transform='translate(0,0)'><g fill='none' stroke='%2322c55e' stroke-width='1.5' stroke-linecap='round'><path d='M7.6 14.2 L6.2 17.6'/><path d='M10.4 14.4 L11.4 17.6'/><path d='M14 14 L12.9 17.6'/><path d='M16.4 14.2 L17.6 17.6'/></g><path d='M17.4 8.6 q2.6 -2.4 1.2 -5' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round'/><circle cx='18.7' cy='3.3' r='1.8' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='11.6' cy='11' rx='6.5' ry='4.7' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.6'/><ellipse cx='8.2' cy='8.4' rx='2.4' ry='2' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='13' cy='7.8' rx='2.7' ry='2.2' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='16.7' cy='9.6' rx='2.5' ry='2.1' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><path d='M7.6 9.9 q1.7 1.2 3.3 .1' fill='none' stroke='%2322c55e' stroke-width='1.4' stroke-linecap='round'/><circle cx='5.3' cy='6.2' r='4' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.6'/><circle cx='4' cy='3.4' r='2.1' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><circle cx='7.5' cy='3.3' r='2' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='2.6' cy='7.4' rx='1.9' ry='2.6' fill='%23f4f7fb' stroke='%23cdd6e3' stroke-width='.5'/><circle cx='4.5' cy='5.7' r='.72' fill='%231f2a44'/><circle cx='7.5' cy='5.8' r='.72' fill='%231f2a44'/><ellipse cx='6.1' cy='7.7' rx='1' ry='.8' fill='%231f2a44'/><path d='M6.1 8.6 q-.8 .9 -1.7 .2 M6.1 8.6 q.8 .9 1.7 .2' fill='none' stroke='%231f2a44' stroke-width='.45' stroke-linecap='round'/></g><g transform='translate(22,0)'><g fill='none' stroke='%2322c55e' stroke-width='1.5' stroke-linecap='round'><path d='M7.4 14.2 L5.4 16.9'/><path d='M10.6 14.4 L11.9 17.8'/><path d='M13.8 14 L14.6 17.4'/><path d='M16.6 14.2 L15.4 17.5'/></g><path d='M17.4 8.6 q3 -1.6 2.6 -4.6' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round'/><circle cx='20.1' cy='3.7' r='1.8' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='11.6' cy='11' rx='6.5' ry='4.7' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.6'/><ellipse cx='8.2' cy='8.4' rx='2.4' ry='2' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='13' cy='7.8' rx='2.7' ry='2.2' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='16.7' cy='9.6' rx='2.5' ry='2.1' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><path d='M7.6 9.9 q1.7 1.2 3.3 .1' fill='none' stroke='%2322c55e' stroke-width='1.4' stroke-linecap='round'/><circle cx='5.3' cy='6' r='4' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.6'/><circle cx='4' cy='3.2' r='2.1' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><circle cx='7.5' cy='3.1' r='2' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='2.6' cy='7.2' rx='1.9' ry='2.6' fill='%23f4f7fb' stroke='%23cdd6e3' stroke-width='.5'/><circle cx='4.5' cy='5.5' r='.72' fill='%231f2a44'/><circle cx='7.5' cy='5.6' r='.72' fill='%231f2a44'/><ellipse cx='6.1' cy='7.5' rx='1' ry='.8' fill='%231f2a44'/><path d='M6.1 8.4 q-.8 .9 -1.7 .2 M6.1 8.4 q.8 .9 1.7 .2' fill='none' stroke='%231f2a44' stroke-width='.45' stroke-linecap='round'/></g><g transform='translate(44,0)'><g fill='none' stroke='%2322c55e' stroke-width='1.5' stroke-linecap='round'><path d='M7.6 14.2 L8.8 17.6'/><path d='M10.4 14.4 L9 17.4'/><path d='M14 14 L15.4 17.6'/><path d='M16.6 14.2 L15.2 17.4'/></g><path d='M17.4 8.6 q2.6 -2.4 1.2 -5' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round'/><circle cx='18.7' cy='3.3' r='1.8' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='11.6' cy='11' rx='6.5' ry='4.7' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.6'/><ellipse cx='8.2' cy='8.4' rx='2.4' ry='2' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='13' cy='7.8' rx='2.7' ry='2.2' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='16.7' cy='9.6' rx='2.5' ry='2.1' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><path d='M7.6 9.9 q1.7 1.2 3.3 .1' fill='none' stroke='%2322c55e' stroke-width='1.4' stroke-linecap='round'/><circle cx='5.3' cy='6.2' r='4' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.6'/><circle cx='4' cy='3.4' r='2.1' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><circle cx='7.5' cy='3.3' r='2' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='2.6' cy='7.4' rx='1.9' ry='2.6' fill='%23f4f7fb' stroke='%23cdd6e3' stroke-width='.5'/><circle cx='4.5' cy='5.7' r='.72' fill='%231f2a44'/><circle cx='7.5' cy='5.8' r='.72' fill='%231f2a44'/><ellipse cx='6.1' cy='7.7' rx='1' ry='.8' fill='%231f2a44'/><path d='M6.1 8.6 q-.8 .9 -1.7 .2 M6.1 8.6 q.8 .9 1.7 .2' fill='none' stroke='%231f2a44' stroke-width='.45' stroke-linecap='round'/></g><g transform='translate(66,0)'><g fill='none' stroke='%2322c55e' stroke-width='1.5' stroke-linecap='round'><path d='M7.4 14.2 L9.6 16.8'/><path d='M10.6 14.4 L9.2 17.8'/><path d='M13.8 14 L12.4 17.4'/><path d='M16.6 14.2 L18.2 17.2'/></g><path d='M17.4 8.6 q3 -1.6 2.6 -4.6' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round'/><circle cx='20.1' cy='3.7' r='1.8' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='11.6' cy='11' rx='6.5' ry='4.7' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.6'/><ellipse cx='8.2' cy='8.4' rx='2.4' ry='2' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='13' cy='7.8' rx='2.7' ry='2.2' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='16.7' cy='9.6' rx='2.5' ry='2.1' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><path d='M7.6 9.9 q1.7 1.2 3.3 .1' fill='none' stroke='%2322c55e' stroke-width='1.4' stroke-linecap='round'/><circle cx='5.3' cy='6' r='4' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.6'/><circle cx='4' cy='3.2' r='2.1' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><circle cx='7.5' cy='3.1' r='2' fill='%23ffffff' stroke='%23cdd6e3' stroke-width='.5'/><ellipse cx='2.6' cy='7.2' rx='1.9' ry='2.6' fill='%23f4f7fb' stroke='%23cdd6e3' stroke-width='.5'/><circle cx='4.5' cy='5.5' r='.72' fill='%231f2a44'/><circle cx='7.5' cy='5.6' r='.72' fill='%231f2a44'/><ellipse cx='6.1' cy='7.5' rx='1' ry='.8' fill='%231f2a44'/><path d='M6.1 8.4 q-.8 .9 -1.7 .2 M6.1 8.4 q.8 .9 1.7 .2' fill='none' stroke='%231f2a44' stroke-width='.45' stroke-linecap='round'/></g></svg>");
  background-repeat: no-repeat; background-size: 88px 20px; background-position: 0 0;
}
.traffic-bar b { color: var(--primary); font-weight:800; }
/* 즐겨찾기 추가 버튼 */
.traffic-bar .tb-fav {
  margin-left:auto; font-family:var(--font); font-size:12px; font-weight:700; white-space:nowrap;
  color:var(--text-dim); background:rgba(255,255,255,.55); border:1px solid rgba(130,150,185,.35);
  border-radius:999px; padding:4px 11px; cursor:pointer;
  backdrop-filter:blur(8px) saturate(1.4); -webkit-backdrop-filter:blur(8px) saturate(1.4);
  transition:background .18s, transform .12s, color .18s;
}
.traffic-bar .tb-fav:hover { background:rgba(250,204,21,.18); color:var(--text); transform:translateY(-1px); }
.traffic-bar .tb-ad { font-weight:700; font-size:12px; color:var(--teal); white-space:nowrap; }
@media (max-width:560px){ .traffic-bar .tb-fav { margin-left:0; } }
@keyframes tbPulse { 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.45);} 70%{ box-shadow:0 0 0 7px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} }
@media (prefers-reduced-motion: reduce){ .traffic-bar .tb-dot, .traffic-bar .tb-walk { animation:none; } }

/* ============================================================
   필기도구 커서 — 연필 (사이트 전역, 촉이 좌하단 = 핫스팟 3 29)
   ============================================================ */
html, body {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4.4 27.6 L6.9 21.5 L10.5 25.1 Z' fill='%231f2a44'/><path d='M6.9 21.5 L22.7 5.7 L26.3 9.3 L10.5 25.1 Z' fill='%23ffffff' stroke='%231f2a44' stroke-width='1' stroke-linejoin='round'/><path d='M22.7 5.7 L25.2 3.2 L28.8 6.8 L26.3 9.3 Z' fill='%232dd4bf' stroke='%231f2a44' stroke-width='1' stroke-linejoin='round'/></svg>") 4 28, auto;
}
/* 클릭 가능한 요소 — 마우스를 올리면 손모양 */
a, button, select, label, .btn, .chip, .card, .nav-toggle, .nav-cta,
.fav-star, .fav-toggle, .gen-fav, .zoom-bar button, .to-top, .ac-item, .more {
  cursor: pointer;
}
/* 입력칸 — '빈칸을 채우는' 연필 그대로, 실패 시 텍스트 커서 */
input, textarea {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4.4 27.6 L6.9 21.5 L10.5 25.1 Z' fill='%231f2a44'/><path d='M6.9 21.5 L22.7 5.7 L26.3 9.3 L10.5 25.1 Z' fill='%23ffffff' stroke='%231f2a44' stroke-width='1' stroke-linejoin='round'/><path d='M22.7 5.7 L25.2 3.2 L28.8 6.8 L26.3 9.3 Z' fill='%232dd4bf' stroke='%231f2a44' stroke-width='1' stroke-linejoin='round'/></svg>") 4 28, text;
}

/* ============================================================
   즐겨찾기 · 방문자수
   ============================================================ */
.fav-star { position:absolute; right:16px; bottom:14px; font-size:23px; line-height:1; color:#d3d9e4; cursor:pointer; transition:transform .12s ease, color .15s; z-index:3; user-select:none; }
.fav-star:hover { transform:scale(1.25); color:var(--accent); }
.fav-star.on { color:var(--accent); text-shadow:0 1px 5px rgba(245,158,11,.45); }
.fav-toggle { display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(130,150,185,.35); background:rgba(255,255,255,.5); color:var(--text-dim); border-radius:999px; padding:8px 16px; font-weight:700; font-size:14px; cursor:pointer;
  backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4); }
.fav-toggle:hover { border-color:var(--accent); color:#8a6100; }
.fav-toggle.active { background:var(--accent); color:#3a2a00; border-color:var(--accent); }
.fav-toggle .fav-count { font-weight:800; }
.visitor-badge { margin-top:16px; font-size:13px; color:var(--text-mute); letter-spacing:.2px; }
.visitor-badge b { color:var(--primary); font-weight:800; }
.gen-fav { display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(130,150,185,.35); background:rgba(255,255,255,.5); color:var(--text-dim); border-radius:11px; padding:9px 15px; font-size:14px; font-weight:700; cursor:pointer;
  backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4); }
.gen-fav.on { background:#fff7e6; border-color:var(--accent); color:#8a6100; }
.gen-fav .s { font-size:16px; }