@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
* { box-sizing: border-box; }
:root {
  --cm: #F97316;
  --cm-light: #FFF7ED;
  --cm-hover: #EA6B10;
  --cm-dark: #2D2D2D;
  --cm-g50: #F9FAFB;
  --cm-g100: #F3F4F6;
  --cm-g200: #E5E7EB;
  --cm-g300: #D1D5DB;
  --cm-g400: #9CA3AF;
  --cm-g500: #6B7280;
  --cm-g600: #4B5563;
  --cm-border: #E5E7EB;
  --sidebar-w: 200px;
}

/* ── 기본 ── */
body { font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; overflow-x:hidden; color:var(--cm-dark); }
h1,h2,h3,h4,h5,h6 { font-weight:700; }
a { text-decoration:none; color:inherit; }
textarea { resize:vertical; }

/* ── 헤더 ── */
.cm-header { position:sticky; top:0; z-index:1030; background:#fff; border-bottom:1px solid var(--cm-border); }
.cm-logo { font-size:1.25rem; font-weight:800; color:var(--cm); white-space:nowrap; }
.cm-nav-link { font-size:.9375rem; font-weight:500; color:var(--cm-g600); padding:.5rem .75rem; border-radius:.375rem; transition:color .2s; white-space:nowrap; }
.cm-nav-link:hover { color:var(--cm); }
.cm-nav-link.active { color:var(--cm); font-weight:700; border-bottom:0.2em solid var(--cm); padding-bottom:.25rem; border-radius:0; }
.btn-cm-login { background:transparent; color:var(--cm); border:0.094em solid var(--cm); border-radius:2rem; font-size:.875rem; font-weight:600; padding:.375rem 1.25rem; transition:all .2s; white-space:nowrap; }
.btn-cm-login:hover { background:var(--cm); color:#fff; }

/* ── 버튼 ── */
.btn-cm { display:inline-block; background:var(--cm); color:#fff; border:none; border-radius:.5rem; font-weight:600; padding:.625rem 1.5rem; transition:background .2s; text-align:center; cursor:pointer; }
.btn-cm:hover { background:var(--cm-hover); color:#fff; }
.btn-cm.btn-sm { padding:.25rem .75rem; font-size:.875rem; border-radius:.375rem; }
.btn-cm.btn-lg { padding:.75rem 2rem; font-size:1.125rem; border-radius:.625rem; }
.btn-cm-outline { display:inline-block; background:#fff; color:var(--cm); border:0.125em solid var(--cm); border-radius:.5rem; font-weight:600; padding:.5625rem 1.5rem; transition:all .2s; text-align:center; cursor:pointer; }
.btn-cm-outline:hover { background:var(--cm); color:#fff; }
.btn-cm-outline.btn-sm { padding:.2rem .75rem; font-size:.875rem; border-radius:.375rem; }
.btn-cm-outline.btn-lg { padding:.7rem 2rem; font-size:1.125rem; border-radius:.625rem; }

/* ── 푸터 ── */
.cm-footer { background:var(--cm-dark); color:#ccc; padding:3rem 0 2rem; font-size:.875rem; }
.cm-footer-title { color:var(--cm); font-weight:700; font-size:1rem; margin-bottom:1rem; }
.cm-footer a { color:#aaa; transition:color .2s; }
.cm-footer a:hover { color:#fff; }
.cm-footer-bottom { border-top:1px solid #444; margin-top:2rem; padding-top:1.5rem; color:#888; font-size:.8125rem; text-align:center; }

/* ── 사이드바 ── */
.cm-sidebar { width:var(--sidebar-w); height:100vh; background:var(--cm-g50); border-right:1px solid var(--cm-border); position:fixed; top:0; left:0; z-index:1020; padding:1.5rem 0; overflow-y:auto; transition:transform .3s; }
.cm-sidebar-link { display:flex; align-items:center; gap:.5rem; padding:.625rem 1.25rem; font-size:.9375rem; color:var(--cm-g600); transition:all .15s; border-left:3px solid transparent; }
.cm-sidebar-link:hover { color:var(--cm); background:var(--cm-light); }
.cm-sidebar-link.active { color:var(--cm); font-weight:700; background:var(--cm-light); border-left-color:var(--cm); }
.cm-sidebar-user { padding:.75rem 1.25rem; color:var(--cm); font-weight:600; font-size:.875rem; border-top:1px solid var(--cm-border); margin-top:1rem; }
.cm-main-sb { margin-left:var(--sidebar-w); min-height:100vh; padding:2rem; background:var(--cm-g100); box-sizing:border-box; }
.cm-sidebar-toggle { display:none; position:fixed; top:10px; left:8px; z-index:1025; background:var(--cm); color:#fff; border:none; border-radius:.375rem; width:2em; height:2em; font-size:.875rem; cursor:pointer; }

/* ── 스텝 위자드 ── */
.cm-steps { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:2rem; }
.cm-step-item { display:flex; flex-direction:column; align-items:center; }
.cm-step-circle { width:2.5rem; height:2.5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; background:var(--cm-g300); color:#fff; transition:all .3s; flex-shrink:0; }
.cm-step-circle.active { background:var(--cm); }
.cm-step-circle.done { background:var(--cm-g400); cursor:pointer; }
.cm-step-label { font-size:.8125rem; color:var(--cm-g400); margin-top:.375rem; text-align:center; font-weight:500; white-space:nowrap; }
.cm-step-label.active { color:var(--cm); font-weight:700; }
.cm-step-line { flex:1; height:2px; background:var(--cm-g300); min-width:2.5em; max-width:7.5em; margin:0 .5rem 1.5rem; }
.cm-step-line.done { background:var(--cm); }

/* ── 공통 카드 ── */
.cm-card { background:#fff; border-radius:.75rem; border:1px solid var(--cm-border); padding:1.5rem; }
.cm-select-card { border:0.125em solid var(--cm-border); border-radius:.75rem; padding:1.25rem; text-align:center; cursor:pointer; transition:all .2s; position:relative; background:#fff; min-height:6.25em; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cm-select-card:hover { border-color:var(--cm); }
.cm-select-card.selected { border-color:var(--cm); background:var(--cm-light); }
.cm-select-check { position:absolute; top:.5rem; right:.5rem; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--cm); color:#fff; display:none; align-items:center; justify-content:center; font-size:.75rem; }
.cm-select-card.selected .cm-select-check { display:flex; }

/* ── 섹션 공통 ── */
.cm-section-sm { font-size:.875rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--cm); margin-bottom:.5rem; }
.cm-section-title { font-size:1.75rem; font-weight:800; }
.cm-section-title-lg { font-size:2.25rem; font-weight:900; }

/* ── 홈: 히어로 ── */
.cm-hero-gradient { background:linear-gradient(135deg, #FFE3DA 0%, #FFD788 100%); padding:4rem 0 3rem; }
.cm-hero-badge-pill { display:inline-block; background:#fff; color:var(--cm); font-size:.8rem; font-weight:700; padding:.4rem .9rem; border-radius:2rem; margin-bottom:1rem; }
.cm-hero-title-lg { font-size:2.5rem; font-weight:900; line-height:1.25; color:#1a1a1a; }
.cm-hero-cards-wrap { display:flex; flex-direction:column; gap:1rem; align-items:flex-end; }
.cm-hero-card-item { background:#fff; border-radius:.75rem; padding:.75rem 1rem; box-shadow:0 4px 16px rgba(0,0,0,.10); font-size:.8125rem; max-width:280px; width:90%; }
.cm-hero-card-item.offset { margin-right:2.5rem; }
.cm-hero-badge-sm { display:inline-block; padding:.125rem .5rem; border-radius:.25rem; font-size:.6875rem; font-weight:600; margin-bottom:.375rem; }
/* 히어로 뱃지 색상 */
.cm-badge-insta  { background:#E0F2FE; color:#0284C7; }
.cm-badge-blog   { background:#DCFCE7; color:#16A34A; }
.cm-badge-tiktok { background:#FEF3C7; color:#D97706; }

/* ── 홈: 해결 배너 ── */
.cm-resolve-banner { background:var(--cm); border-radius:1.25rem; padding:3.5rem 2rem; color:#fff; text-align:center; position:relative; overflow:hidden; }
.cm-resolve-banner::before { content:''; position:absolute; width:12.5rem; height:12.5rem; border-radius:50%; background:rgba(255,255,255,.12); left:-3.75rem; top:-3.75rem; }
.cm-resolve-banner::after  { content:''; position:absolute; width:12.5rem; height:12.5rem; border-radius:50%; background:rgba(255,255,255,.12); right:-3.75rem; bottom:-3.75rem; }
.cm-resolve-sparkle { font-weight:700; margin-bottom:.5rem; position:relative; z-index:1; opacity:.9; }
.cm-resolve-title { font-size:1.75rem; font-weight:900; margin-bottom:.5rem; position:relative; z-index:1; }
.cm-resolve-desc { margin-bottom:0; position:relative; z-index:1; opacity:.9; }

/* ── 홈: 이런분들(다크) ── */
.cm-for-you-dark { background:#1e2235; padding:5rem 0; }
.cm-for-card { background:rgba(255,255,255,.07); border-radius:1rem; padding:1.5rem 1rem; text-align:center; transition:background .2s; }
.cm-for-card:hover { background:rgba(255,255,255,.13); }
.cm-for-card-title { color:#fff; font-weight:700; margin-bottom:.5rem; }
.cm-for-card-text { color:#aaa; font-size:.875rem; }

/* ── 홈: 하단 CTA ── */
.cm-start-teal { background:linear-gradient(135deg, #00b09b 0%, #20b2aa 100%); padding:5rem 0; color:#fff; text-align:center; }
.cm-start-title { font-size:2.25rem; font-weight:900; margin-bottom:.75rem; }
.cm-start-sub { opacity:.9; font-size:1rem; margin-bottom:1.5rem; }
.cm-start-note { font-size:.875rem; opacity:.75; margin-top:.75rem; }
.cm-start-btn { color:var(--cm) !important; }

/* ── 소개 페이지 ── */
.cm-intro-hero { background:var(--cm-g100); padding:5rem 0; text-align:center; }
.cm-intro-step-card { background:#fff; border-radius:1rem; padding:2rem 1.5rem; height:100%; border:1px solid var(--cm-border); text-align:left; transition:box-shadow .2s; }
.cm-intro-step-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.08); }
.cm-intro-num { font-size:4rem; font-weight:900; color:var(--cm-g200); line-height:1; margin-bottom:.5rem; }

/* ── 요금제 페이지 ── */
.cm-pricing-hero { background:var(--cm-g100); padding:5rem 0 3rem; text-align:center; }
.cm-price-card { border:0.094em solid var(--cm-border); border-radius:1rem; padding:2rem 1.5rem; background:#fff; text-align:center; transition:transform .2s, box-shadow .2s, border-color .2s; height:100%; display:flex; flex-direction:column; position:relative; }
.cm-price-card:hover,
.cm-price-card.featured { border-color:var(--cm); box-shadow:0 8px 32px rgba(249,115,22,.15); transform:translateY(-4px); }
.cm-price-card.featured { transform:translateY(-6px); }
.cm-price-recommended { position:absolute; top:-1.1rem; left:50%; transform:translateX(-50%); background:var(--cm); color:#fff; font-size:.8rem; font-weight:700; padding:.25rem 1rem; border-radius:2rem; white-space:nowrap; }
.cm-price-val { font-size:2.5rem; font-weight:900; color:var(--cm); }
.cm-price-feat { text-align:left; padding:.375rem 0; font-size:.9375rem; }
.cm-price-feat.unavail { color:#ccc; }
.cm-price-feat.unavail i { color:#ddd; }
.cm-pricing-note { color:var(--cm-g500); font-size:.875rem; margin-top:2rem; }

/* ── 고객센터 페이지 ── */
.cm-support-hero { background:var(--cm-g100); padding:4rem 0 3rem; text-align:center; }
.cm-support-card { background:#fff; border-radius:1rem; border:0.094em solid var(--cm-border); padding:2rem 1.5rem; text-align:center; transition:border-color .2s, box-shadow .2s; min-width:12.5em; }
.cm-support-card:hover { border-color:var(--cm); box-shadow:0 4px 16px rgba(249,115,22,.1); }
.cm-support-icon-wrap { width:3.5rem; height:3.5rem; border-radius:50%; background:var(--cm-light); display:flex; align-items:center; justify-content:center; margin:0 auto .75rem; font-size:1.5rem; color:var(--cm); }
/* 컨테이너 너비 제한 유틸 */
.cm-container-md { max-width:800px; }
.cm-container-sm { max-width:580px; }

/* ── FAQ ── */
.cm-faq-item { border:1px solid var(--cm-border); border-radius:.75rem; margin-bottom:.75rem; overflow:hidden; background:#fff; }
.cm-faq-q { padding:1rem 1.25rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:500; transition:background .15s; }
.cm-faq-q:hover { background:var(--cm-g50); }
.cm-faq-arrow { color:var(--cm); transition:transform .3s; font-size:.875rem; }
.cm-faq-item.open .cm-faq-arrow { transform:rotate(180deg); }
.cm-faq-item.open { border-color:var(--cm); }
.cm-faq-a { display:none; padding:0 1.25rem 1rem; color:var(--cm-g600); font-size:.9375rem; line-height:1.7; }
.cm-faq-item.open .cm-faq-a { display:block; }

/* ── 기타 UI ── */
.cm-label { font-weight:600; font-size:.9375rem; margin-bottom:.375rem; display:block; }
.cm-input { border:1px solid var(--cm-g300); border-radius:.5rem; padding:.625rem .875rem; font-size:.9375rem; transition:border-color .15s; width:100%; }
.cm-input:focus { outline:none; border-color:var(--cm); box-shadow:0 0 0 3px rgba(249,115,22,.1); }
.cm-file-drop { border:0.125em dashed var(--cm-g300); border-radius:.75rem; padding:2rem; text-align:center; cursor:pointer; transition:border-color .15s; }
.cm-file-drop:hover { border-color:var(--cm); background:var(--cm-light); }
.cm-file-item { display:flex; align-items:center; justify-content:space-between; padding:.5rem .75rem; border:1px solid var(--cm-border); border-radius:.5rem; margin-top:.5rem; font-size:.875rem; background:#fff; }
.cm-file-remove { width:1.5rem; height:1.5rem; border-radius:50%; background:#EF4444; color:#fff; border:none; display:flex; align-items:center; justify-content:center; font-size:.75rem; cursor:pointer; flex-shrink:0; }
.cm-result-card { border:1px solid var(--cm-border); border-radius:.75rem; overflow:hidden; background:#fff; margin-bottom:1.5rem; }
.cm-result-header { display:flex; justify-content:space-between; align-items:center; padding:.875rem 1.25rem; border-bottom:1px solid var(--cm-border); font-weight:700; }
.cm-result-body { padding:1.25rem; }
.cm-result-text { white-space:pre-wrap; line-height:1.8; font-size:.9375rem; color:var(--cm-g600); }
.cm-result-img { width:100%; aspect-ratio:16/9; border-radius:.5rem; background:var(--cm-g200); display:flex; align-items:center; justify-content:center; color:var(--cm-g500); overflow:hidden; margin-top:1rem; }
.cm-result-img img { width:100%; height:100%; object-fit:cover; }
.cm-stat-card { background:#fff; border:1px solid var(--cm-border); border-radius:.75rem; padding:1.5rem; text-align:center; }
.cm-stat-num { font-size:2.25rem; font-weight:800; }
.cm-stat-label { color:var(--cm-g500); font-size:.875rem; margin-top:.25rem; }
.cm-auth-card { max-width:440px; margin:3rem auto; padding:2.5rem; background:#fff; border-radius:1rem; box-shadow:0 2px 16px rgba(0,0,0,.06); }
.cm-pagination .page-link { color:var(--cm-g600); border-color:var(--cm-border); }
.cm-pagination .page-item.active .page-link { background:var(--cm); border-color:var(--cm); color:#fff; }
.cm-spinner { display:inline-block; width:1.25rem; height:1.25rem; border:0.125em solid var(--cm-g300); border-top-color:var(--cm); border-radius:50%; animation:cm-spin .7s linear infinite; }
@keyframes cm-spin { to { transform:rotate(360deg); } }
.shadow-header { box-shadow: 0.25rem 0.25rem 0.25rem rgba(0,0,0,.25); }
.shadow-44 { box-shadow: 0 4px 4px rgba(0,0,0, .25); }

/* ── 관리자 ── */
.cm-black-bar { display:inline-block; background-color:black; vertical-align:middle; width:.2em; height:.8em; }
.cm-black-bar::before { content:''; display:inline-block; background-color:var(--cm); vertical-align:top; width:.2em; height:.4em; }
.cm-circle { position:relative; }
.cm-circle:before { content:''; position:absolute; display:inline-block; width:.9em; height:.9em; top:.2em; left:-1.2em; margin-right:.2em; border-radius:100rem; background-color:white; border:0.375em solid var(--cm); }
.table-border-top-dark-bottom-none { border-top:0.125em solid; border-bottom:0; }
.table-border-top-dark-bottom-none th { border-bottom:0; }
.table-layout-fixed { table-layout:fixed; }

/* ── 유틸리티 ── */
.text-cm { color:var(--cm) !important; }
.bg-cm { background:var(--cm) !important; }
.bg-cm-light { background:var(--cm-light) !important; }
.border-cm { border-color:var(--cm) !important; }
.fs-7 { font-size:.875rem; }
.fs-8 { font-size:.75rem; }
.cursor-pointer { cursor:pointer; }
.w-init { width:initial; }
.vh-50 { height:50vh; }
.text-cut-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.text-cut-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── 스피너 ── */
#spinner { display:none; width:3rem; height:3rem; border:0.3125em solid grey; border-top:0.3125em solid var(--cm); border-radius:50%; animation:loading 1s linear infinite; margin:1.5rem auto; }
@keyframes loading { to { transform:rotate(360deg); } }

/* ── 반응형 ── */
/* font12-14: 기본(모바일 이상) .875rem, 화면 작을수록 줄어듦 */
.font12-14 { font-size:.875rem; }
.font14    { font-size:.875rem; }

@media(max-width:992px){
  .cm-sidebar { transform:translateX(-100%); }
  .cm-sidebar.show { transform:translateX(0); }
  .cm-main-sb { margin-left:0; }
  .cm-sidebar-toggle { display:block; }
  .cm-hero-title-lg { font-size:1.75rem; }
  .cm-section-title-lg { font-size:1.75rem; }
}
@media(max-width:768px){
  .cm-hero-gradient { padding:2.5rem 0 2rem; }
  .cm-hero-title-lg { font-size:1.5rem; }
  .cm-section-title { font-size:1.375rem; }
  .cm-section-title-lg { font-size:1.5rem; }
  .cm-price-card.featured { transform:none; }
  .cm-auth-card { margin:1.5rem 1rem; padding:1.5rem; }
  .cm-start-title { font-size:1.75rem; }
  .font12-14 { font-size:.75rem; }
}
@media(max-width:576px){
  .cm-hero-title-lg { font-size:1.25rem; }
  .cm-section-title { font-size:1.125rem; }
  .cm-section-title-lg { font-size:1.25rem; }
  .cm-stat-num { font-size:1.75rem; }
  .cm-main-sb { padding:1rem; }
  .cm-start-title { font-size:1.5rem; }
  .font12-14 { font-size:.6875rem; }
}
@media(max-width:360px){
  .cm-hero-title-lg { font-size:1.125rem; }
  body { font-size:.875rem; }
  .font12-14 { font-size:.625rem; }
}

/* ── 관리자 레이아웃 ── */
.adm-wrap { min-height:100vh; display:flex; flex-direction:column; }
.adm-topbar { background:var(--cm); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.5rem; position:sticky; top:0; z-index:1100; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.adm-topbar-title { font-size:1.1rem; font-weight:800; letter-spacing:-.01em; }
.adm-topbar a { color:rgba(255,255,255,.85); font-size:.875rem; transition:color .2s; }
.adm-topbar a:hover { color:#fff; }
.adm-body { display:flex; flex:1; }
.adm-sidebar { width:220px; background:#fff; border-right:1px solid var(--cm-border); padding:1.5rem 0; flex-shrink:0; position:sticky; top:52px; height:calc(100vh - 52px); overflow-y:auto; }
.adm-sidebar-link { display:flex; align-items:center; gap:.5rem; padding:.625rem 1.25rem; font-size:.9375rem; color:var(--cm-g600); transition:all .15s; border-left:3px solid transparent; text-decoration:none; }
.adm-sidebar-link:hover { color:var(--cm); background:var(--cm-light); }
.adm-sidebar-link.active { color:var(--cm); font-weight:700; background:var(--cm-light); border-left-color:var(--cm); }
.adm-content { flex:1; padding:2rem; background:var(--cm-g100); min-width:0; }

/* ── 이미지 비율 카드 프리뷰 ── */
.cm-ratio-preview { border-radius:.375rem; }
.cm-ratio-preview-sq   { width:3.75em; height:3.75em; }   /* 1:1  */
.cm-ratio-preview-wide { width:5em;    height:2.8125em; } /* 16:9 */
.cm-ratio-preview-43   { width:4.5em;  height:3.375em; }  /* 4:3  */
.cm-ratio-preview-tall { width:2.8125em; height:5em; }    /* 9:16 */

/* ── 확인 다이얼로그 오버레이 (JS confirm 대체) ── */
.cm-confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:2000; display:flex; align-items:center; justify-content:center; }
.cm-confirm-box { background:#fff; border-radius:.75rem; padding:2rem 1.75rem; max-width:22rem; width:90%; box-shadow:0 8px 32px rgba(0,0,0,.18); text-align:center; }
.cm-confirm-box .cm-confirm-msg { font-size:.9375rem; margin-bottom:1.5rem; word-break:keep-all; }
.cm-confirm-box .d-flex { gap:.75rem; }

/* ── 텍스트 수정 인라인 에디터 ── */
.cm-result-text-wrap { position:relative; }
.cm-result-editable  { white-space:pre-wrap; line-height:1.8; font-size:.9375rem; color:var(--cm-g600); border:0.125em solid transparent; border-radius:.375rem; padding:.25rem; min-height:3em; transition:border-color .2s; }
.cm-result-editable.editing { border-color:var(--cm); background:#fffdf9; outline:none; }
.cm-edited-badge { display:inline-block; font-size:.6875rem; font-weight:700; color:var(--cm); background:var(--cm-light); border-radius:2rem; padding:.1rem .5rem; margin-left:.5rem; vertical-align:middle; }