/* 인스타 카드뉴스 만들기 (/cardnews, prefix cn-) — 2026-09-21 */
#cn-app{--cn-ink:#1b2430;--cn-accent:#cc2366;--cn-line:#ecdfe6;--cn-soft:#fdf6f9;--cn-mut:#7a8493;
  max-width:1120px;margin:12px auto 35px;text-align:left;color:var(--cn-ink);font-size:14px;line-height:1.7}
#cn-app *{box-sizing:border-box}
#cn-app [hidden]{display:none !important}

/* 히어로 */
#cn-app .cn-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:30px;
  border:1px solid var(--cn-line);background:var(--cn-soft);border-radius:24px;margin-bottom:22px}
#cn-app .cn-hero img{width:210px;height:210px;border-radius:22px;flex:0 0 auto}
#cn-app .cn-eyebrow{color:#b3608a;font-size:10px;font-weight:800;letter-spacing:2px}
#cn-app h1{font-size:34px;line-height:1.3;letter-spacing:-1.4px;font-weight:800;margin:12px 0;word-break:keep-all}
#cn-app .cn-hero p{font-size:14px;color:#776970;margin:0 0 16px;word-break:keep-all}
#cn-app .cn-badge{display:inline-block;font-size:11px;background:#f6e3ec;color:#a4436e;padding:6px 11px;border-radius:20px}

#cn-app h2{font-size:20px;margin:0;font-weight:750}
#cn-app h3{font-size:16px;margin:0 0 14px;font-weight:750}
#cn-app h3>span{font-size:11px;color:#c07f9c;margin-right:7px}
#cn-app .cn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 레이아웃 */
#cn-app .cn-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
#cn-app .cn-panel{border:1px solid #eee3e8;border-radius:18px;background:#fff;padding:20px;margin-bottom:16px;min-width:0}
#cn-app .cn-side{position:sticky;top:10px}

/* 공통 폼 */
#cn-app label{display:block;font-size:12px;font-weight:700;margin-bottom:7px}
#cn-app textarea,#cn-app input[type=text]{font:inherit;line-height:1.7;color:var(--cn-ink);border:1.5px solid #e2d8dd;
  border-radius:11px;background:#fdfbfc;padding:11px 13px;width:100%;outline:none;transition:border-color .15s,background .15s}
#cn-app textarea{display:block;resize:vertical;min-height:88px;font-size:14.5px}
#cn-app input[type=text]{height:44px}
#cn-app textarea:focus,#cn-app input[type=text]:focus{border-color:#e39ab9;background:#fff}
#cn-app :is(input,textarea,button,select):focus-visible{outline:2px solid #d67ba2;outline-offset:2px}
#cn-app button{font:inherit;font-size:12.5px;font-weight:700;color:#8a4463;background:#fdf7fa;border:1.5px solid #ecd9e2;
  border-radius:10px;padding:9px 13px;cursor:pointer;line-height:1.5;-webkit-tap-highlight-color:transparent}
#cn-app button:hover{background:#f8ecf2}
#cn-app button:disabled{opacity:.45;cursor:not-allowed}
#cn-app .cn-primary{background:linear-gradient(45deg,#e6683c,#dc2743,#cc2366);color:#fff;border-color:transparent;
  padding:13px 20px;font-size:14px;box-shadow:0 3px 12px rgba(204,35,102,.24)}
#cn-app .cn-primary:hover{filter:brightness(1.05);background:linear-gradient(45deg,#e6683c,#dc2743,#cc2366)}
#cn-app .cn-note{color:#8a7b83;font-size:12px;line-height:1.7;margin:9px 0 0}
#cn-app .cn-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* 칩 */
#cn-app .cn-chips{display:flex;flex-wrap:wrap;gap:7px}
#cn-app .cn-chip{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;
  border:1.5px solid #e6dae0;background:#fff;color:#6b5f65;font-size:12.5px;font-weight:700;cursor:pointer;
  transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
#cn-app .cn-chip small{font-weight:600;color:#a89aa1;font-size:10.5px}
#cn-app .cn-chip:hover{border-color:#e5a8c2}
#cn-app .cn-chip[aria-pressed="true"]{background:linear-gradient(45deg,#e6683c,#dc2743,#cc2366);color:#fff;border-color:transparent}
#cn-app .cn-chip[aria-pressed="true"] small{color:rgba(255,255,255,.82)}

/* 테마 스와치 */
#cn-app .cn-themes{display:flex;flex-wrap:wrap;gap:12px}
#cn-app .cn-theme{display:flex;flex-direction:column;align-items:center;gap:6px;width:56px;padding:0;border:0;background:none}
#cn-app .cn-theme:hover{background:none}
#cn-app .cn-theme .cn-sw{width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,0,0,.12);transition:transform .12s}
#cn-app .cn-theme:hover .cn-sw{transform:scale(1.08)}
#cn-app .cn-theme[aria-pressed="true"] .cn-sw{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cn-accent)}
#cn-app .cn-theme .cn-swn{font-size:10.5px;color:#8b7f85;font-weight:600;white-space:nowrap}
#cn-app .cn-theme[aria-pressed="true"] .cn-swn{color:var(--cn-accent);font-weight:800}

/* 슬라이드 편집 목록 */
#cn-slides{display:flex;flex-direction:column;gap:12px}
#cn-app .cn-slide{border:1.5px solid #eee3e8;border-radius:14px;background:#fffdfe;padding:13px}
#cn-app .cn-slide.on{border-color:#e6a2c0;background:#fffafc;box-shadow:0 2px 10px rgba(204,35,102,.08)}
#cn-app .cn-shead{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
#cn-app .cn-sn{flex:0 0 auto;min-width:28px;height:28px;padding:0 8px;border-radius:9px;background:#f3e6ec;color:#a4436e;
  font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
#cn-app .cn-slide.on .cn-sn{background:linear-gradient(45deg,#e6683c,#dc2743,#cc2366);color:#fff}
#cn-app .cn-srole{font-size:11.5px;color:#9a8b92;font-weight:700}
#cn-app .cn-warn{font-size:11px;font-weight:700;color:#b3401f;background:#fdeee7;border-radius:8px;padding:3px 8px}
#cn-app .cn-sbtns{margin-left:auto;display:flex;gap:5px}
#cn-app .cn-sbtns button{padding:6px 9px;font-size:12px;min-width:34px}
#cn-app .cn-slide label{margin-top:8px}
#cn-app .cn-slide label:first-of-type{margin-top:0}
#cn-app .cn-cnt{float:right;font-weight:600;color:#a89aa1}

/* 미리보기 */
#cn-app .cn-pv{text-align:center}
#cn-app .cn-frame{display:inline-block;position:relative;max-width:100%;border-radius:14px;overflow:hidden;
  box-shadow:0 6px 22px rgba(27,36,48,.14);line-height:0}
#cn-canvas{display:block;max-width:100%;width:auto;height:auto;max-height:52vh}
#cn-app .cn-grid-mask{position:absolute;inset:0;pointer-events:none}
#cn-app .cn-grid-mask b{position:absolute;left:0;right:0;height:10%;background:rgba(17,22,30,.55)}
#cn-app .cn-grid-mask b.t{top:0}#cn-app .cn-grid-mask b.b{bottom:0}
#cn-app .cn-grid-mask i{position:absolute;left:0;right:0;top:10%;bottom:10%;border:2px dashed rgba(255,255,255,.85)}
#cn-app .cn-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
#cn-app .cn-nav button{min-width:44px;padding:9px 12px;font-size:15px}
#cn-app .cn-pos{font-size:13px;font-weight:800;color:#6b5f65;min-width:62px}

/* 썸네일 스트립 */
#cn-strip{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:thin}
#cn-app .cn-thumb{flex:0 0 auto;padding:0;border:2px solid #e8dce2;border-radius:10px;background:#fff;overflow:hidden;line-height:0;position:relative}
#cn-app .cn-thumb:hover{background:#fff;border-color:#e5a8c2}
#cn-app .cn-thumb[aria-current="true"]{border-color:var(--cn-accent);box-shadow:0 2px 9px rgba(204,35,102,.2)}
#cn-app .cn-thumb canvas{display:block;width:62px;height:auto}
#cn-app .cn-thumb em{position:absolute;left:3px;top:3px;font-style:normal;font-size:9.5px;font-weight:800;color:#fff;
  background:rgba(20,24,31,.6);border-radius:5px;padding:1px 4px;line-height:1.5}

/* 다운로드 */
#cn-app .cn-dl{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
#cn-app .cn-dl .cn-primary{flex:1 1 180px}
#cn-status{min-height:22px;font-size:13px;color:#a4436e;font-weight:700;margin:10px 0 0;text-align:center}

/* 도움말 */
#cn-app .cn-help{padding:26px 4px 0}
#cn-app .cn-help p{color:#7c6f75;font-size:13px;word-break:keep-all}
#cn-app .cn-help details{border-bottom:1px solid #eee3e8;padding:13px 0}
#cn-app .cn-help summary{cursor:pointer;font-size:13.5px;font-weight:700}

@media(max-width:900px){
  #cn-app .cn-layout{grid-template-columns:1fr}
  #cn-app .cn-side{position:static;order:-1}
  #cn-canvas{max-height:46vh}
}
@media(max-width:650px){
  #cn-app{font-size:13.5px}
  #cn-app .cn-hero{padding:20px 16px;gap:12px}
  #cn-app h1{font-size:25px}
  #cn-app .cn-hero img{width:88px;height:88px;border-radius:15px}
  #cn-app .cn-hero p{font-size:12.5px}
  #cn-app .cn-panel{padding:16px}
  #cn-app h2{font-size:18px}
  #cn-app .cn-theme{width:50px}
  #cn-app .cn-theme .cn-sw{width:36px;height:36px}
  #cn-canvas{max-height:42vh}
}