:root { color-scheme: light; }

body,
button,
input,
textarea {
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;
}

.cp-md-page-main,
.cp-md-page-main * { box-sizing:border-box; }

.cp-md-page-main ~ .footer { margin-top:0 !important; }

.cp-md-page-main {
  width:100%;
  min-height:76vh;
  padding:54px 20px 90px;
  background:#f4efe6;
}

.cp-md-app {
  --md-ink:#17191d;
  --md-muted:#69717d;
  --md-soft:#f7f8fa;
  --md-line:#e2e6ea;
  --md-line-strong:#cbd2d9;
  --md-panel:#fff;
  --md-green:#24745d;
  --md-green-soft:#edf7f2;
  --md-red:#b42318;
  --md-blue:#2f5da8;
  --md-code:#f3f5f7;
  --md-split:50%;
  width:min(1240px,100%);
  margin:0 auto;
  color:var(--md-ink);
  line-height:1.6;
}

.cp-md-app button,
.cp-md-app input,
.cp-md-app textarea { font:inherit; }

.cp-md-hero {
  max-width:890px;
  margin:0 auto 27px;
  text-align:center;
}

.cp-md-kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:13px;
  padding:7px 11px;
  border:1px solid #d9ddd7;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  color:#58615d;
  font-size:13px;
  font-weight:800;
}

.cp-md-lock-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2d8066;
  box-shadow:0 0 0 4px rgba(45,128,102,.12);
}

.cp-md-hero h1 {
  margin:0;
  font-size:clamp(39px,5vw,64px);
  line-height:1.02;
  letter-spacing:-.055em;
  font-weight:900;
}

.cp-md-lead {
  max-width:820px;
  margin:17px auto 0;
  color:#666f7a;
  font-size:16px;
  line-height:1.78;
}

.cp-md-trust-row {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 17px;
  margin-top:16px;
  color:#59616b;
  font-size:13px;
  font-weight:750;
}

.cp-md-private-status {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0 0 14px;
  padding:14px 17px;
  border:1px solid #d5e6dc;
  border-radius:14px;
  background:rgba(248,253,250,.94);
}

.cp-md-private-status > div {
  display:flex;
  align-items:flex-start;
  gap:11px;
  min-width:0;
}

.cp-md-status-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:9px;
  background:#dff0e7;
  color:var(--md-green);
  font-size:14px;
  font-weight:900;
}

.cp-md-private-status strong {
  display:block;
  margin:0 0 2px;
  font-size:14px;
  letter-spacing:-.02em;
}

.cp-md-private-status p {
  margin:0;
  color:#64706a;
  font-size:12px;
}

.cp-md-status-badge {
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  background:#e2f2e9;
  color:#22634f;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}

.cp-md-shell {
  position:relative;
  z-index:2;
  isolation:isolate;
  overflow:visible;
  border:1px solid #dde2e6;
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 55px rgba(15,23,42,.08);
}

.cp-md-appbar {
  position:relative;
  z-index:15;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:66px;
  padding:12px 16px 12px 20px;
  border-bottom:1px solid var(--md-line);
  background:#fff;
  border-radius:20px 20px 0 0;
}

.cp-md-appbar-brand { min-width:0; }
.cp-md-appbar-brand strong { display:block; font-size:14px; letter-spacing:-.02em; }
.cp-md-appbar-brand span { display:block; margin-top:1px; color:#818893; font-size:11px; font-weight:700; }

.cp-md-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}

.cp-md-action,
.cp-md-export-menu button {
  appearance:none;
  border:1px solid #d8dde3;
  background:#fff;
  color:#343a42;
  cursor:pointer;
}

.cp-md-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:0 13px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

#mdExportBtn::after {
  content:"";
  flex:0 0 auto;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-right:1.7px solid currentColor;
  border-bottom:1.7px solid currentColor;
  transform:rotate(45deg);
  transform-origin:center;
  transition:transform .18s ease, margin-top .18s ease;
}
#mdExportBtn[aria-expanded="true"]::after {
  margin-top:3px;
  transform:rotate(225deg);
}

.cp-md-action:hover { background:#f7f8fa; border-color:#c8ced6; }
.cp-md-action:focus-visible,
.cp-md-toolbar button:focus-visible,
.cp-md-mobile-tabs button:focus-visible,
.cp-md-faq summary:focus-visible,
.cp-md-autosave:has(input:focus-visible) {
  outline:3px solid rgba(47,93,168,.2);
  outline-offset:2px;
}

.cp-md-action-primary {
  border-color:#22272d;
  background:#22272d;
  color:#fff;
}
.cp-md-action-primary:hover { background:#121519; border-color:#121519; }

.cp-md-export-wrap { position:relative; }
.cp-md-export-menu {
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:50;
  width:190px;
  padding:6px;
  border:1px solid #dfe3e7;
  border-radius:12px;
  background:#fff;
  box-shadow:0 14px 35px rgba(15,23,42,.14);
}
.cp-md-export-menu[hidden] { display:none !important; }
.cp-md-export-menu button {
  display:flex;
  align-items:center;
  width:100%;
  min-height:40px;
  padding:7px 9px;
  border:0;
  border-radius:8px;
  text-align:left;
  font-size:12px;
  font-weight:750;
}
.cp-md-export-menu button:hover { background:#f5f6f8; }
.cp-md-export-menu button span {
  display:inline-flex;
  justify-content:center;
  width:43px;
  margin-right:8px;
  padding:3px 5px;
  border-radius:6px;
  background:#eef1f4;
  color:#5d6570;
  font-size:10px;
  font-weight:850;
}

.cp-md-mobile-tabs { display:none; }

/* Keep the Markdown workspace fixed-height; long documents scroll inside editor/preview. */
.cp-md-workspace {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,var(--md-split)) 9px minmax(0,calc(100% - var(--md-split) - 9px));
  height:clamp(580px,68vh,760px);
  min-height:0;
  max-height:none;
  overflow:hidden;
  background:#fff;
}

.cp-md-pane {
  display:flex;
  min-width:0;
  min-height:0;
  height:100%;
  flex-direction:column;
  overflow:hidden;
}

.cp-md-pane-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:47px;
  padding:0 16px;
  border-bottom:1px solid #eceff2;
  background:#fbfbfc;
}

.cp-md-pane-head > div { display:flex; align-items:baseline; gap:9px; }
.cp-md-pane-label { color:#4c545e; font-size:10px; font-weight:900; letter-spacing:.12em; }
.cp-md-pane-head small { color:#9aa0a8; font-size:10px; }
.cp-md-drop-hint { color:#a1a6ad; font-size:10px; font-weight:700; }

.cp-md-toolbar {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  min-height:48px;
  padding:7px 10px;
  border-bottom:1px solid #eceff2;
  background:#fff;
}

.cp-md-toolbar button {
  min-width:32px;
  height:31px;
  padding:0 8px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#444b54;
  cursor:pointer;
  font-size:11px;
  font-weight:750;
}
.cp-md-toolbar button:hover { border-color:#e0e4e8; background:#f5f6f8; }
.cp-md-toolbar-sep { width:1px; height:20px; margin:0 3px; background:#e5e8eb; }

.cp-md-editor-wrap {
  position:relative;
  display:flex;
  flex:1 1 auto;
  width:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#fff;
}

#mdEditor {
  display:block;
  flex:1 1 0;
  width:100%;
  min-width:0;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  margin:0;
  resize:none;
  padding:23px 25px 40px;
  border:0;
  outline:0;
  background:#fff;
  color:#24282e;
  tab-size:2;
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;
  font-size:14px;
  line-height:1.75;
  letter-spacing:-.01em;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overflow-wrap:anywhere;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}

.cp-md-drop-overlay {
  position:absolute;
  inset:12px;
  z-index:8;
  display:none;
  align-items:center;
  justify-content:center;
  border:2px dashed #75a28f;
  border-radius:14px;
  background:rgba(239,248,244,.96);
  color:#2c6c56;
  font-size:15px;
  font-weight:850;
  pointer-events:none;
}
.cp-md-editor-wrap.is-dragging .cp-md-drop-overlay { display:flex; }

.cp-md-divider {
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:col-resize;
  background:#f3f4f6;
  border-left:1px solid #e5e8eb;
  border-right:1px solid #e5e8eb;
  touch-action:none;
}
.cp-md-divider span {
  display:block;
  width:2px;
  height:38px;
  border-radius:99px;
  background:#c9ced4;
}
.cp-md-divider:hover,
.cp-md-divider:focus-visible { background:#edf2f8; }

.cp-md-preview-pane { background:#fafbfc; }
.cp-md-scroll-sync { display:flex; align-items:center; gap:6px; color:#858c95; font-size:10px; font-weight:700; cursor:pointer; }
.cp-md-scroll-sync input { accent-color:#2f5da8; }
.cp-md-preview-scroll { flex:1 1 0; min-height:0; height:100%; overflow-y:auto; overflow-x:hidden; padding:28px 31px 50px; overscroll-behavior:contain; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; }

.cp-md-document {
  width:100%;
  max-width:790px;
  min-height:100%;
  margin:0 auto;
  color:#272b31;
  font-size:15px;
  line-height:1.75;
  overflow-wrap:anywhere;
}
.cp-md-document > :first-child { margin-top:0 !important; }
.cp-md-document h1,
.cp-md-document h2,
.cp-md-document h3,
.cp-md-document h4,
.cp-md-document h5,
.cp-md-document h6 { color:#171a1f; line-height:1.28; letter-spacing:-.035em; scroll-margin-top:20px; }
.cp-md-document h1 { margin:0 0 24px; padding-bottom:13px; border-bottom:1px solid #e4e7ea; font-size:32px; }
.cp-md-document h2 { margin:35px 0 15px; padding-bottom:8px; border-bottom:1px solid #eceef0; font-size:24px; }
.cp-md-document h3 { margin:29px 0 10px; font-size:20px; }
.cp-md-document h4 { margin:24px 0 8px; font-size:17px; }
.cp-md-document p { margin:0 0 16px; }
.cp-md-document a { color:#255ca7; text-decoration:underline; text-underline-offset:2px; }
.cp-md-document strong { font-weight:800; }
.cp-md-document blockquote { margin:19px 0; padding:10px 16px; border-left:4px solid #b9c4d0; background:#f6f8fa; color:#58616c; }
.cp-md-document blockquote > :last-child { margin-bottom:0; }
.cp-md-document hr { height:1px; margin:30px 0; border:0; background:#e1e4e8; }
.cp-md-document ul,
.cp-md-document ol { margin:0 0 17px; padding-left:28px; }
.cp-md-document li { margin:4px 0; }
.cp-md-document li > ul,
.cp-md-document li > ol { margin:4px 0 2px; }
.cp-md-document code { padding:2px 5px; border-radius:5px; background:#eef1f4; font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:.88em; }
.cp-md-document pre { overflow:auto; margin:18px 0; padding:16px 18px; border:1px solid #e0e4e8; border-radius:10px; background:#f5f7f9; line-height:1.55; }
.cp-md-document pre code { padding:0; background:transparent; font-size:12.5px; white-space:pre; }
.cp-md-document table { width:100%; margin:20px 0; border-collapse:collapse; font-size:13px; }
.cp-md-document th,
.cp-md-document td { padding:9px 11px; border:1px solid #dfe3e7; text-align:left; vertical-align:top; }
.cp-md-document th { background:#f5f6f8; font-weight:800; }
.cp-md-document input[type="checkbox"] { margin:0 7px 0 0; accent-color:#2f725b; }
.cp-md-document .md-external-image {
  display:block;
  margin:18px 0;
  padding:13px 15px;
  border:1px dashed #cfd6dc;
  border-radius:9px;
  background:#f8f9fa;
  color:#6b737d;
  font-size:12px;
}
.cp-md-document .md-safe-image { display:block; max-width:100%; height:auto; margin:18px 0; border-radius:8px; }
.cp-md-document .md-unsafe-link { color:#7c6260; text-decoration:line-through; cursor:not-allowed; }

.cp-md-statusbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:47px;
  padding:8px 16px 8px 20px;
  border-top:1px solid var(--md-line);
  border-radius:0 0 20px 20px;
  background:#fbfbfc;
}
.cp-md-stats { display:flex; flex-wrap:wrap; gap:7px 18px; color:#858c96; font-size:10px; font-weight:650; }
.cp-md-stats strong { color:#4e5660; font-weight:850; }
.cp-md-autosave { display:flex; align-items:center; gap:7px; color:#676f78; font-size:10px; font-weight:750; cursor:pointer; }
.cp-md-autosave input { accent-color:#28725a; }
.cp-md-autosave b { min-width:31px; padding:2px 6px; border-radius:999px; background:#eceff2; color:#717881; text-align:center; font-size:9px; letter-spacing:.04em; }
.cp-md-autosave.is-on b { background:#dff1e7; color:#25654f; }

.cp-md-privacy-hint {
  position:relative;
  z-index:1;
  clear:both;
  margin:13px 3px 0;
  color:#757d86;
  font-size:11px;
  line-height:1.6;
}

.cp-md-info-grid {
  position:relative;
  z-index:1;
  clear:both;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
  margin-top:40px;
}
.cp-md-info-grid article {
  position:static !important;
  float:none !important;
  width:auto !important;
  padding:23px 22px;
  border:1px solid #e1ddd5;
  border-radius:15px;
  background:rgba(255,255,255,.62);
}
.cp-md-info-icon { display:block; margin-bottom:11px; font-size:20px; }
.cp-md-info-grid h2 { margin:0 0 8px; font-size:15px; letter-spacing:-.025em; }
.cp-md-info-grid p { margin:0; color:#6b716f; font-size:12px; line-height:1.7; }

.cp-md-guide,
.cp-md-faq { margin-top:55px; }
.cp-md-section-heading { margin-bottom:20px; }
.cp-md-section-heading > span { display:block; margin-bottom:7px; color:#7f7569; font-size:10px; font-weight:900; letter-spacing:.14em; }
.cp-md-section-heading h2 { margin:0; font-size:26px; line-height:1.25; letter-spacing:-.04em; }
.cp-md-section-heading p { margin:8px 0 0; color:#74716d; font-size:13px; }

.cp-md-cheatsheet { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.cp-md-cheatsheet article { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 16px; border:1px solid #e1ddd5; border-radius:12px; background:rgba(255,255,255,.62); }
.cp-md-cheatsheet code { color:#30353b; font-family:"SFMono-Regular",Consolas,monospace; font-size:11px; font-weight:700; }
.cp-md-cheatsheet span { color:#868078; font-size:10px; font-weight:750; }

.cp-md-faq-list { display:grid; gap:10px; }
.cp-md-faq-list details { border:1px solid #dfdcd5; border-radius:13px; background:rgba(255,255,255,.66); transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.cp-md-faq-list details[open] { border-color:#d2cec6; background:#fff; box-shadow:0 8px 22px rgba(44,38,29,.045); }
.cp-md-faq-list summary { position:relative; padding:17px 48px 17px 18px; list-style:none; cursor:pointer; color:#30332f; font-size:13px; font-weight:800; }
.cp-md-faq-list summary::-webkit-details-marker { display:none; }
.cp-md-faq-list summary::after { content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); color:#8d877e; font-size:20px; font-weight:400; }
.cp-md-faq-list details[open] summary::after { content:"−"; }
.cp-md-faq-list details p { margin:0; padding:0 18px 18px; color:#6e716d; font-size:12px; line-height:1.75; }

.cp-md-modal[hidden],
.cp-md-toast[hidden] { display:none !important; }
.cp-md-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(17,20,24,.45); backdrop-filter:blur(2px); }
.cp-md-modal-card { width:min(420px,100%); padding:25px; border-radius:16px; background:#fff; box-shadow:0 25px 80px rgba(0,0,0,.22); }
.cp-md-modal-card h2 { margin:0 0 7px; font-size:20px; letter-spacing:-.035em; }
.cp-md-modal-card p { margin:0; color:#6c737b; font-size:13px; }
.cp-md-modal-card > div { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }
.cp-md-modal-card button { min-height:39px; padding:0 13px; border:1px solid #d8dde2; border-radius:9px; background:#fff; cursor:pointer; font-size:12px; font-weight:800; }
.cp-md-modal-card button.danger { border-color:#b42318; background:#b42318; color:#fff; }

.cp-md-toast { position:fixed; left:50%; bottom:28px; z-index:10000; transform:translateX(-50%); max-width:min(520px,calc(100vw - 32px)); padding:10px 14px; border:1px solid rgba(0,0,0,.08); border-radius:10px; background:#22272d; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.18); font-size:12px; font-weight:700; }

.cp-md-print-document { display:none; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media (max-width:980px) {
  .cp-md-workspace { height:clamp(560px,68vh,700px); min-height:0; max-height:none; }
  .cp-md-info-grid { grid-template-columns:1fr; }
  .cp-md-cheatsheet { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:820px) {
  .cp-md-page-main { padding:40px 13px 70px; }
  .cp-md-hero h1 { font-size:42px; }
  .cp-md-private-status { align-items:flex-start; }
  .cp-md-status-badge { display:none; }
  .cp-md-shell { border-radius:16px; }
  .cp-md-appbar { align-items:flex-start; padding:12px; border-radius:16px 16px 0 0; }
  .cp-md-appbar-brand { display:none; }
  .cp-md-actions { width:100%; }
  .cp-md-action { flex:1 1 auto; }
  .cp-md-export-wrap { flex:1 1 auto; }
  .cp-md-export-wrap .cp-md-action { width:100%; }
  .cp-md-export-menu { left:auto; right:0; width:210px; }
  .cp-md-mobile-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:7px; border-bottom:1px solid #e5e8eb; background:#f8f9fa; }
  .cp-md-mobile-tabs button { min-height:38px; border:0; border-radius:8px; background:transparent; color:#747b84; font-size:12px; font-weight:800; cursor:pointer; }
  .cp-md-mobile-tabs button.is-active { background:#fff; color:#22272d; box-shadow:0 1px 5px rgba(15,23,42,.08); }
  .cp-md-workspace { display:block; height:clamp(520px,68dvh,680px); min-height:0; max-height:none; }
  .cp-md-divider { display:none; }
  .cp-md-pane { height:100%; min-height:0; }
  .cp-md-app[data-mobile-pane="edit"] .cp-md-preview-pane { display:none; }
  .cp-md-app[data-mobile-pane="preview"] .cp-md-editor-pane { display:none; }
  .cp-md-editor-wrap { min-height:0; }
  #mdEditor { height:100% !important; min-height:0 !important; max-height:100% !important; }
  .cp-md-preview-scroll { min-height:0; height:100%; }
  .cp-md-statusbar { border-radius:0 0 16px 16px; }
}

@media (max-width:560px) {
  .cp-md-page-main { padding:34px 10px 58px; }
  .cp-md-hero h1 { font-size:37px; }
  .cp-md-lead { font-size:14px; }
  .cp-md-private-status { padding:13px; }
  .cp-md-toolbar { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
  .cp-md-toolbar button { flex:0 0 auto; }
  #mdEditor { padding:18px 17px 30px; font-size:13px; }
  .cp-md-preview-scroll { padding:22px 18px 40px; }
  .cp-md-statusbar { align-items:flex-start; flex-direction:column; gap:6px; padding:10px 14px; }
  .cp-md-cheatsheet { grid-template-columns:1fr; }
  .cp-md-section-heading h2 { font-size:23px; }
  .cp-md-info-grid { margin-top:32px; }
}

@page { size:A4 portrait; margin:16mm 17mm 18mm; }

@media print {
  body > * { display:none !important; }
  body > #mdPrintDocument { display:block !important; }
  #mdPrintDocument {
    position:static !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    color:#111 !important;
    background:#fff !important;
    font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif !important;
  }
  #mdPrintDocument .cp-md-document { max-width:none; font-size:10.5pt; line-height:1.62; }
  #mdPrintDocument .cp-md-document h1 { font-size:24pt; }
  #mdPrintDocument .cp-md-document h2 { font-size:18pt; break-after:avoid-page; }
  #mdPrintDocument .cp-md-document h3 { font-size:14pt; break-after:avoid-page; }
  #mdPrintDocument .cp-md-document pre,
  #mdPrintDocument .cp-md-document table,
  #mdPrintDocument .cp-md-document blockquote { break-inside:avoid-page; }
  #mdPrintDocument .cp-md-document img { max-width:100% !important; }
  #mdPrintDocument a { color:#111 !important; text-decoration:none !important; }
}