.zpl-converter-preview {
  --zpl-text: #5a5c69;
  --zpl-heading: #4e4f58;
  --zpl-muted: #858796;
  --zpl-border: #dcdfe8;
  --zpl-line: #eaecf4;
  color: var(--zpl-text);
  overflow-wrap: break-word;
}
.zpl-converter-preview .card { border-color: var(--zpl-border); }
.zpl-converter-preview .zpl-intro { border: 0; }
.zpl-converter-preview .zpl-section { box-shadow: none; }
.zpl-converter-preview .zpl-section > .card-header { padding: 1.05rem 1.25rem; background: #fff; border-bottom: 1px solid var(--zpl-border); }
.zpl-converter-preview .zpl-section > .card-header h2 { margin: 0 0 .2rem; color: var(--zpl-heading); font-size: 1.05rem; line-height: 1.35; }
.zpl-converter-preview .zpl-section-ko,
.zpl-converter-preview .zpl-intro-en { color: var(--zpl-muted); }
.zpl-converter-preview .zpl-section-ko { font-size: .875rem; }
.zpl-converter-preview .zpl-intro-en { font-size: .95rem; }
.zpl-converter-preview h1 { font-size: 1.5rem; line-height: 1.4; }
.zpl-converter-preview h3 { color: var(--zpl-heading); font-size: 1.05rem; }
.zpl-converter-preview p,
.zpl-converter-preview li { line-height: 1.7; word-break: keep-all; }
.zpl-converter-preview .zpl-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.zpl-converter-preview .zpl-actions .btn { font-size: .8rem; }
.zpl-converter-preview figure { margin: 0; min-width: 0; }
.zpl-converter-preview figure > a { display: block; border-radius: .35rem; }
.zpl-converter-preview figure > a:focus-visible { outline: 3px solid rgba(78,115,223,.3); outline-offset: 3px; }
.zpl-converter-preview figure img { display: block; width: 100%; height: auto; border: 1px solid #e3e6f0; border-radius: .2rem; background: #fff; }
.zpl-converter-preview figcaption { margin-top: .55rem; color: #6e707e; font-size: .8125rem; text-align: center; }
.zpl-converter-preview figcaption strong,
.zpl-converter-preview figcaption span { display: block; }
.zpl-converter-preview figcaption span { margin-top: .15rem; color: var(--zpl-muted); }
.zpl-converter-preview .zpl-hero { max-width: 28rem; margin: 0 auto; }
.zpl-converter-preview .zpl-flow { max-width: 60rem; margin: 1rem auto 0; }
.zpl-converter-preview .zpl-flow img { border: 0; }
.zpl-converter-preview .zpl-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 1.25rem; }
.zpl-converter-preview .zpl-gallery figure { display: flex; flex-direction: column; }
.zpl-converter-preview .zpl-gallery a { display: flex; align-items: center; flex: 1; background: #f8f9fc; }
.zpl-converter-preview .zpl-feature-list,
.zpl-converter-preview .zpl-chip-list { padding: 0; margin: 0; list-style: none; }
.zpl-converter-preview .zpl-feature-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--zpl-line); }
.zpl-converter-preview .zpl-feature-list li { padding: .85rem .75rem; border-bottom: 1px solid var(--zpl-line); }
.zpl-converter-preview .zpl-feature-list li:nth-child(odd) { padding-left: 0; padding-right: 1.25rem; }
.zpl-converter-preview .zpl-feature-list li:nth-child(even) { padding-left: 1.25rem; padding-right: 0; }
.zpl-converter-preview .zpl-feature-list strong,
.zpl-converter-preview .zpl-feature-list span { display: block; }
.zpl-converter-preview .zpl-feature-list strong { margin-bottom: .2rem; color: var(--zpl-heading); }
.zpl-converter-preview .zpl-chip-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--zpl-line); }
.zpl-converter-preview .zpl-chip-list li { padding: .6rem .4rem; border-bottom: 1px solid var(--zpl-line); color: var(--zpl-heading); font-size: .875rem; line-height: 1.35; }
.zpl-converter-preview .zpl-info-card { height: 100%; padding: 1.2rem; border: 1px solid var(--zpl-border); border-radius: .3rem; }
.zpl-converter-preview .zpl-info-card ul { margin: .75rem 0 0; padding-left: 1.2rem; }
.zpl-converter-preview .zpl-demo-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; }
.zpl-converter-preview .zpl-demo-panel { min-width: 0; padding: 1rem; border: 1px solid var(--zpl-border); border-radius: .3rem; background: #fff; }
.zpl-converter-preview .zpl-demo-panel textarea { min-height: 19rem; font: .8rem/1.5 Consolas,Monaco,monospace; }
.zpl-converter-preview .zpl-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1rem 0; }
.zpl-converter-preview .zpl-result { min-height: 27rem; overflow: auto; border: 1px dashed #cbd2e3; border-radius: .25rem; background: #f8f9fc; }
.zpl-converter-preview .zpl-result img[role="button"] { cursor: zoom-in; }
.zpl-converter-preview .zpl-empty { display: flex; align-items: center; justify-content: center; min-height: 27rem; padding: 2rem; color: var(--zpl-muted); text-align: center; }
.zpl-converter-preview .zpl-upload-status { min-height: 1.25rem; color: var(--zpl-muted); font-size: .8125rem; line-height: 1.5; }
.zpl-converter-page .navbar-toggler { max-width: 100%; white-space: normal; }
@media (max-width: 991.98px) {
  .zpl-converter-preview .zpl-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zpl-converter-preview .zpl-demo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .zpl-converter-preview .zpl-section > .card-header,
  .zpl-converter-preview .zpl-section > .card-body { padding-left: 1rem; padding-right: 1rem; }
  .zpl-converter-preview .zpl-gallery,
  .zpl-converter-preview .zpl-feature-list,
  .zpl-converter-preview .zpl-controls,
  .zpl-converter-preview .zpl-chip-list { grid-template-columns: 1fr; }
  .zpl-converter-preview .zpl-feature-list li:nth-child(n) { padding-left: 0; padding-right: 0; }
  .zpl-converter-preview .zpl-actions .btn { width: 100%; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .zpl-converter-preview figure img { transition: none; }
}