/* FreeReport viewer and designer. Override the --fr-* variables to theme. */
.fr-viewer, .fr-designer {
  --fr-bg: #e9ecf1;
  --fr-panel: #ffffff;
  --fr-ink: #0e1726;
  --fr-ink-2: #4a5568;
  --fr-rule: #d5dbe3;
  --fr-accent: #2340f5;
  --fr-accent-ink: #ffffff;
  --fr-hover: #f1f3f7;
  --fr-radius: 6px;
  --fr-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  display: flex; flex-direction: column; min-height: 0; height: 100%;
  font: 13px/1.4 var(--fr-font); color: var(--fr-ink); background: var(--fr-bg);
  border: 1px solid var(--fr-rule); border-radius: var(--fr-radius); overflow: hidden; box-sizing: border-box;
}
.fr-viewer *, .fr-designer * { box-sizing: border-box; }

.fr-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 6px 8px; background: var(--fr-panel); border-bottom: 1px solid var(--fr-rule); }
.fr-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--fr-radius); background: none; color: var(--fr-ink); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.fr-btn:hover { background: var(--fr-hover); }
.fr-btn:focus-visible, .fr-viewer select:focus-visible, .fr-viewer input:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 1px; }
.fr-btn:disabled { opacity: .45; cursor: default; }
.fr-btn.fr-icon { width: 30px; padding: 0; justify-content: center; }
.fr-btn.fr-primary { background: var(--fr-accent); color: var(--fr-accent-ink); }
.fr-btn.fr-primary:hover { filter: brightness(1.08); }
.fr-btn[aria-expanded="true"], .fr-btn[aria-pressed="true"] { background: var(--fr-hover); border-color: var(--fr-rule); }
.fr-btn svg { flex: none; }
.fr-sep { width: 1px; height: 20px; margin: 0 6px; background: var(--fr-rule); }
.fr-spacer { flex: 1; }
.fr-pageno { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; color: var(--fr-ink-2); font-variant-numeric: tabular-nums; }
.fr-pageno input { width: 44px; height: 28px; text-align: center; border: 1px solid var(--fr-rule); border-radius: var(--fr-radius); font: inherit; color: var(--fr-ink); }
.fr-zoom { height: 30px; padding: 0 6px; border: 1px solid var(--fr-rule); border-radius: var(--fr-radius); background: var(--fr-panel); font: inherit; color: var(--fr-ink); }
.fr-menu { position: relative; }
.fr-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 180px; padding: 4px; background: var(--fr-panel); border: 1px solid var(--fr-rule); border-radius: var(--fr-radius); box-shadow: 0 8px 24px rgba(14, 23, 38, .14); display: flex; flex-direction: column; }
.fr-menu-list[hidden] { display: none; }
.fr-menu-list button { text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 4px; font: inherit; color: var(--fr-ink); cursor: pointer; }
.fr-menu-list button:hover, .fr-menu-list button:focus-visible { background: var(--fr-hover); outline: none; }

.fr-params { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 10px 12px; background: var(--fr-panel); border-bottom: 1px solid var(--fr-rule); }
.fr-params[hidden] { display: none; }
.fr-param { display: flex; flex-direction: column; gap: 3px; }
.fr-param label { font-size: 12px; color: var(--fr-ink-2); font-weight: 600; }
.fr-param label b { color: #c8102e; }
.fr-param input, .fr-param select { height: 30px; min-width: 140px; padding: 0 8px; border: 1px solid var(--fr-rule); border-radius: var(--fr-radius); font: inherit; background: #fff; color: var(--fr-ink); }

.fr-body { position: relative; flex: 1; min-height: 0; overflow: auto; outline: none; }
.fr-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 24px 32px; min-width: min-content; }
.fr-page { width: var(--fr-page-w, 794px); height: var(--fr-page-h, 1123px); flex: none; background: #fff; box-shadow: 0 1px 3px rgba(14, 23, 38, .18), 0 6px 18px -8px rgba(14, 23, 38, .25); }
.fr-page-svg { display: block; width: 100%; height: 100%; }
.fr-page { position: relative; }
.fr-hit { position: absolute; background: rgba(242, 169, 0, .38); outline: 2px solid #f2a900; border-radius: 2px; pointer-events: none; }
.fr-search { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px; border: 1px solid var(--fr-rule); border-radius: var(--fr-radius); color: var(--fr-ink-2); background: var(--fr-panel); }
.fr-search input { width: 120px; border: 0; outline: none; font: inherit; color: var(--fr-ink); background: none; }
.fr-search:focus-within { border-color: var(--fr-accent); }
.fr-search-count { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fr-empty { margin: 48px auto; color: var(--fr-ink-2); }
.fr-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(233, 236, 241, .72); font-weight: 600; color: var(--fr-ink-2); z-index: 5; }
.fr-overlay[hidden] { display: none; }
.fr-spinner { width: 18px; height: 18px; border: 2px solid var(--fr-rule); border-top-color: var(--fr-accent); border-radius: 50%; animation: fr-spin .8s linear infinite; }
@keyframes fr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fr-spinner { animation-duration: 2.4s; } }
.fr-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 10px; background: var(--fr-panel); border-top: 1px solid var(--fr-rule); color: var(--fr-ink-2); font-size: 12px; font-variant-numeric: tabular-nums; min-height: 26px; }
.fr-badge { color: var(--fr-ink-2); text-decoration: none; border: 1px solid var(--fr-rule); border-radius: 999px; padding: 0 8px; }
.fr-badge[hidden] { display: none; }

@media (max-width: 640px) {
  .fr-btn span { display: none; }
  .fr-btn { padding: 0 7px; }
  .fr-pages { padding: 10px 8px 24px; }
}
@media print {
  .fr-viewer .fr-toolbar, .fr-viewer .fr-status, .fr-viewer .fr-params { display: none; }
}

/* ── Designer ─────────────────────────────────── */
.fr-designer { outline: none; }
.fr-designer .fr-toolbar { gap: 1px; }
.fr-designer .fr-group { display: inline-flex; align-items: center; gap: 1px; flex-wrap: wrap; }
.fr-designer.is-preview .fr-design-only, .fr-designer.is-json .fr-design-only { display: none; }
.fr-tabs { display: inline-flex; padding: 2px; background: var(--fr-bg); border-radius: 7px; }
.fr-tab { height: 26px; padding: 0 12px; border: 0; border-radius: 5px; background: none; font: inherit; font-weight: 600; color: var(--fr-ink-2); cursor: pointer; }
.fr-tab[aria-selected="true"] { background: var(--fr-panel); color: var(--fr-ink); box-shadow: 0 1px 2px rgba(14, 23, 38, .12); }
.fr-zoom-label { min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; color: var(--fr-ink-2); }
.fr-dz { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr) 270px; }
.fr-designer.is-preview .fr-dz, .fr-designer.is-json .fr-dz { grid-template-columns: minmax(0, 1fr); }
.fr-designer.is-preview .fr-dz-left, .fr-designer.is-preview .fr-dz-right, .fr-designer.is-json .fr-dz-left, .fr-designer.is-json .fr-dz-right { display: none; }
.fr-dz-left, .fr-dz-right { background: var(--fr-panel); overflow: auto; min-height: 0; }
.fr-dz-left { border-right: 1px solid var(--fr-rule); padding: 8px; }
.fr-dz-right { border-left: 1px solid var(--fr-rule); }
.fr-dz-left h3 { margin: 10px 4px 6px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--fr-ink-2); }
.fr-dz-left h3:first-child { margin-top: 2px; }
.fr-dz-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.fr-dz-tool { display: flex; align-items: center; gap: 6px; padding: 6px; word-break: keep-all; overflow-wrap: anywhere; border: 1px solid var(--fr-rule); border-radius: var(--fr-radius); background: var(--fr-panel); font: inherit; font-size: 12px; color: var(--fr-ink); cursor: grab; text-align: left; }
.fr-dz-tool:hover, .fr-dz-field:hover { border-color: var(--fr-accent); color: var(--fr-accent); }
.fr-dz-fields { display: flex; flex-wrap: wrap; gap: 4px; }
.fr-dz-field { padding: 3px 8px; border: 1px solid var(--fr-rule); border-radius: 999px; background: #f7f9fc; font: 12px/1.4 ui-monospace, Consolas, monospace; color: var(--fr-ink); cursor: grab; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.fr-dz-empty { margin: 0 4px; color: var(--fr-ink-2); font-size: 12px; }
.fr-dz-bandopt { display: flex; align-items: center; gap: 6px; padding: 2px 4px; font-size: 12.5px; cursor: pointer; }
.fr-dz-groupopt { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 2px 4px; font-size: 12px; }
.fr-dz-groupopt code { font-size: 11.5px; }
.fr-dz-addgroup { display: flex; gap: 4px; margin-top: 6px; }
.fr-dz-addgroup select { flex: 1; min-width: 0; height: 30px; border: 1px solid var(--fr-rule); border-radius: var(--fr-radius); font: inherit; font-size: 12px; }
.fr-dz-addgroup .fr-btn span { font-size: 12px; }
.fr-dz-center { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.fr-dz-canvas { flex: 1; overflow: auto; padding: 24px 32px 64px; outline: none; }
.fr-dz-canvas[hidden], .fr-dz-preview[hidden], .fr-dz-json[hidden] { display: none; }
.fr-dz-page { margin: 0 auto; background: #fff; box-shadow: 0 1px 3px rgba(14, 23, 38, .16), 0 8px 24px -12px rgba(14, 23, 38, .3); user-select: none; }
.fr-dz-band { position: relative; }
.fr-dz-band-head { display: flex; justify-content: space-between; align-items: center; height: 20px; padding: 0 8px; background: #eef1f6; border-top: 1px solid var(--fr-rule); border-bottom: 1px solid var(--fr-rule); font-size: 11px; font-weight: 600; color: var(--fr-ink-2); cursor: pointer; }
.fr-dz-band-head small { font-weight: 500; font-variant-numeric: tabular-nums; }
.fr-dz-band.is-selected .fr-dz-band-head { background: #dfe6ff; color: var(--fr-accent); }
.fr-dz-band-area { position: relative; background-image: radial-gradient(circle, #d3d9e3 .8px, transparent .9px); overflow: visible; }
.fr-dz-band-resize { height: 5px; margin-top: -2px; position: relative; z-index: 3; cursor: ns-resize; }
.fr-dz-band-resize:hover { background: var(--fr-accent); opacity: .5; }
.fr-dz-hint { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #a6b0c0; font-size: 11px; pointer-events: none; white-space: nowrap; }
.fr-dz-el { position: absolute; cursor: move; outline: 1px dashed rgba(35, 64, 245, .18); }
.fr-dz-el:hover { outline-color: rgba(35, 64, 245, .55); }
.fr-dz-el.is-selected { outline: 1.5px solid var(--fr-accent); z-index: 2; }
.fr-dz-el.is-line { outline-offset: 2px; }
.fr-dz-el > * { pointer-events: none; }
.fr-dz-el > .fr-dz-h, .fr-dz-el > .fr-dz-inline { pointer-events: auto; }
.fr-dz-text { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; white-space: pre-wrap; word-break: break-all; }
.fr-dz-text small { margin-left: 4px; font-size: 9px; color: #7a8599; font-weight: 400; }
.fr-dz-expr { color: #1a2fc0; }
.fr-dz-rect { position: absolute; inset: 0; }
.fr-dz-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fr-dz-el img { width: 100%; height: 100%; display: block; }
.fr-dz-ph { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #f4f6fa, #f4f6fa 4px, #eceff5 4px, #eceff5 8px); color: #8a94a6; }
.fr-dz-h { position: absolute; width: 8px; height: 8px; background: #fff; border: 1.5px solid var(--fr-accent); border-radius: 2px; z-index: 3; }
.fr-dz-h-nw { left: -4px; top: -4px; cursor: nwse-resize; }
.fr-dz-h-n { left: calc(50% - 4px); top: -4px; cursor: ns-resize; }
.fr-dz-h-ne { right: -4px; top: -4px; cursor: nesw-resize; }
.fr-dz-h-e { right: -4px; top: calc(50% - 4px); cursor: ew-resize; }
.fr-dz-h-se { right: -4px; bottom: -4px; cursor: nwse-resize; }
.fr-dz-h-s { left: calc(50% - 4px); bottom: -4px; cursor: ns-resize; }
.fr-dz-h-sw { left: -4px; bottom: -4px; cursor: nesw-resize; }
.fr-dz-h-w { left: -4px; top: calc(50% - 4px); cursor: ew-resize; }
.fr-dz-marquee { position: absolute; border: 1px solid var(--fr-accent); background: rgba(35, 64, 245, .08); pointer-events: none; z-index: 4; }
.fr-dz-inline { position: absolute; inset: 0; min-height: 24px; z-index: 5; font: 13px/1.4 var(--fr-font); padding: 2px 4px; border: 2px solid var(--fr-accent); resize: none; }
.fr-dz-preview { flex: 1; min-height: 0; }
.fr-dz-preview .fr-viewer { border: 0; border-radius: 0; }
.fr-dz-json { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fr-dz-json textarea { flex: 1; border: 0; padding: 14px 16px; font: 12.5px/1.55 ui-monospace, "Cascadia Code", Consolas, monospace; resize: none; outline: none; background: #fbfcfe; color: var(--fr-ink); }
.fr-dz-json-bar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--fr-rule); background: var(--fr-panel); }
.fr-dz-json-err { color: #c8102e; font-size: 12px; }
.fr-dz-props { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 12px 24px; }
.fr-dz-sec { grid-column: 1 / -1; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--fr-rule); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--fr-ink-2); }
.fr-dz-sec:first-child { border-top: 0; margin-top: 4px; padding-top: 4px; }
.fr-dz-prop { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fr-dz-prop.is-wide { grid-column: 1 / -1; }
.fr-dz-prop.is-check { flex-direction: row; align-items: center; gap: 6px; grid-column: 1 / -1; font-size: 12.5px; cursor: pointer; }
.fr-dz-plabel { font-size: 11.5px; color: var(--fr-ink-2); font-weight: 600; }
.fr-dz-prop input[type=text], .fr-dz-prop input[type=number], .fr-dz-prop select, .fr-dz-prop textarea { width: 100%; height: 28px; padding: 0 7px; border: 1px solid var(--fr-rule); border-radius: var(--fr-radius); font: inherit; font-size: 12.5px; color: var(--fr-ink); background: #fff; }
.fr-dz-prop textarea { height: auto; padding: 5px 7px; font-family: ui-monospace, Consolas, monospace; resize: vertical; }
.fr-dz-prop input.is-expr { font-family: ui-monospace, Consolas, monospace; }
.fr-dz-prop :focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 0; }
.fr-dz-err { color: #c8102e; font-size: 11px; }
.fr-dz-err:empty { display: none; }
.fr-dz-color { display: flex; gap: 4px; }
.fr-dz-color input[type=color] { width: 30px; height: 28px; padding: 1px; border: 1px solid var(--fr-rule); border-radius: var(--fr-radius); background: #fff; flex: none; }
.fr-dz-toggles { display: flex; gap: 3px; flex-wrap: wrap; }
.fr-dz-toggle { width: 30px; height: 28px; padding: 0; justify-content: center; border: 1px solid var(--fr-rule); font-weight: 700; }
.fr-dz-toggle[aria-pressed="true"] { background: #dfe6ff; border-color: var(--fr-accent); color: var(--fr-accent); }
@media (max-width: 960px) {
  .fr-dz { grid-template-columns: 150px minmax(0, 1fr); }
  .fr-dz-right { display: none; }
}