류윤주 류윤주 04-08
250408 류윤주 수정
@1149f9a1725d6869475c1da90eb797906a3c9883
client/ckeditor/build/ckeditor.js
--- client/ckeditor/build/ckeditor.js
+++ client/ckeditor/build/ckeditor.js
@@ -4297,7 +4297,7 @@
         var a = s()(o());
         a.push([
           t.id,
-          ".ck-hidden{display:none!important}:root{--ck-z-default:1;--ck-z-panel:calc(var(--ck-z-default) + 999);--ck-z-dialog:9999}.ck-transitions-disabled,.ck-transitions-disabled *{transition:none!important}:root{--ck-powered-by-line-height:10px;--ck-powered-by-padding-vertical:2px;--ck-powered-by-padding-horizontal:4px;--ck-powered-by-text-color:#4f4f4f;--ck-powered-by-border-radius:var(--ck-border-radius);--ck-powered-by-background:#fff;--ck-powered-by-border-color:var(--ck-color-focus-border)}.ck.ck-balloon-panel.ck-powered-by-balloon{--ck-border-radius:var(--ck-powered-by-border-radius);background:var(--ck-powered-by-background);box-shadow:none;min-height:unset;z-index:calc(var(--ck-z-panel) - 1)}.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by{line-height:var(--ck-powered-by-line-height)}.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by a{align-items:center;cursor:pointer;display:flex;filter:grayscale(80%);line-height:var(--ck-powered-by-line-height);opacity:.66;padding:var(--ck-powered-by-padding-vertical) var(--ck-powered-by-padding-horizontal)}.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-powered-by__label{color:var(--ck-powered-by-text-color);cursor:pointer;font-size:7.5px;font-weight:700;letter-spacing:-.2px;line-height:normal;margin-right:4px;padding-left:2px;text-transform:uppercase}.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-icon{cursor:pointer;display:block}.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by:hover a{filter:grayscale(0);opacity:1}.ck.ck-balloon-panel.ck-powered-by-balloon[class*=position_inside]{border-color:transparent}.ck.ck-balloon-panel.ck-powered-by-balloon[class*=position_border]{border:var(--ck-focus-ring);border-color:var(--ck-powered-by-border-color)}:root{--ck-color-base-foreground:#fafafa;--ck-color-base-background:#fff;--ck-color-base-border:#ccced1;--ck-color-base-action:#53a336;--ck-color-base-focus:#6cb5f9;--ck-color-base-text:#333;--ck-color-base-active:#2977ff;--ck-color-base-active-focus:#0d65ff;--ck-color-base-error:#db3700;--ck-color-focus-border-coordinates:218,81.8%,56.9%;--ck-color-focus-border:hsl(var(--ck-color-focus-border-coordinates));--ck-color-focus-outer-shadow:#cae1fc;--ck-color-focus-disabled-shadow:rgba(119,186,248,.3);--ck-color-focus-error-shadow:rgba(255,64,31,.3);--ck-color-text:var(--ck-color-base-text);--ck-color-shadow-drop:rgba(0,0,0,.15);--ck-color-shadow-drop-active:rgba(0,0,0,.2);--ck-color-shadow-inner:rgba(0,0,0,.1);--ck-color-button-default-background:transparent;--ck-color-button-default-hover-background:#f0f0f0;--ck-color-button-default-active-background:#f0f0f0;--ck-color-button-default-disabled-background:transparent;--ck-color-button-on-background:#f0f7ff;--ck-color-button-on-hover-background:#dbecff;--ck-color-button-on-active-background:#dbecff;--ck-color-button-on-disabled-background:#f0f2f4;--ck-color-button-on-color:#2977ff;--ck-color-button-action-background:var(--ck-color-base-action);--ck-color-button-action-hover-background:#4d9d30;--ck-color-button-action-active-background:#4d9d30;--ck-color-button-action-disabled-background:#7ec365;--ck-color-button-action-text:var(--ck-color-base-background);--ck-color-button-save:#008a00;--ck-color-button-cancel:#db3700;--ck-color-switch-button-off-background:#939393;--ck-color-switch-button-off-hover-background:#7d7d7d;--ck-color-switch-button-on-background:var(--ck-color-button-action-background);--ck-color-switch-button-on-hover-background:#4d9d30;--ck-color-switch-button-inner-background:var(--ck-color-base-background);--ck-color-switch-button-inner-shadow:rgba(0,0,0,.1);--ck-color-dropdown-panel-background:var(--ck-color-base-background);--ck-color-dropdown-panel-border:var(--ck-color-base-border);--ck-color-dialog-background:var(--ck-custom-background);--ck-color-dialog-form-header-border:var(--ck-custom-border);--ck-color-input-background:var(--ck-color-base-background);--ck-color-input-border:var(--ck-color-base-border);--ck-color-input-error-border:var(--ck-color-base-error);--ck-color-input-text:var(--ck-color-base-text);--ck-color-input-disabled-background:#f2f2f2;--ck-color-input-disabled-border:var(--ck-color-base-border);--ck-color-input-disabled-text:#757575;--ck-color-list-background:var(--ck-color-base-background);--ck-color-list-button-hover-background:var(--ck-color-button-default-hover-background);--ck-color-list-button-on-background:var(--ck-color-button-on-color);--ck-color-list-button-on-background-focus:var(--ck-color-button-on-color);--ck-color-list-button-on-text:var(--ck-color-base-background);--ck-color-panel-background:var(--ck-color-base-background);--ck-color-panel-border:var(--ck-color-base-border);--ck-color-toolbar-background:var(--ck-color-base-background);--ck-color-toolbar-border:var(--ck-color-base-border);--ck-color-tooltip-background:var(--ck-color-base-text);--ck-color-tooltip-text:var(--ck-color-base-background);--ck-color-engine-placeholder-text:#707070;--ck-color-upload-bar-background:#6cb5f9;--ck-color-link-default:#0000f0;--ck-color-link-selected-background:rgba(31,176,255,.1);--ck-color-link-fake-selection:rgba(31,176,255,.3);--ck-color-highlight-background:#ff0;--ck-color-light-red:#fcc;--ck-disabled-opacity:.5;--ck-focus-outer-shadow-geometry:0 0 0 3px;--ck-focus-outer-shadow:var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow);--ck-focus-disabled-outer-shadow:var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow);--ck-focus-error-outer-shadow:var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow);--ck-focus-ring:1px solid var(--ck-color-focus-border);--ck-font-size-base:13px;--ck-line-height-base:1.84615;--ck-font-face:Helvetica,Arial,Tahoma,Verdana,Sans-Serif;--ck-font-size-tiny:0.7em;--ck-font-size-small:0.75em;--ck-font-size-normal:1em;--ck-font-size-big:1.4em;--ck-font-size-large:1.8em;--ck-ui-component-min-height:2.3em}.ck-reset_all :not(.ck-reset_all-excluded *),.ck.ck-reset,.ck.ck-reset_all{word-wrap:break-word;background:transparent;border:0;box-sizing:border-box;height:auto;margin:0;padding:0;position:static;text-decoration:none;transition:none;vertical-align:middle;width:auto}.ck-reset_all :not(.ck-reset_all-excluded *),.ck.ck-reset_all{border-collapse:collapse;color:var(--ck-color-text);cursor:auto;float:none;font:normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face);text-align:left;white-space:nowrap}.ck-reset_all .ck-rtl :not(.ck-reset_all-excluded *){text-align:right}.ck-reset_all iframe:not(.ck-reset_all-excluded *){vertical-align:inherit}.ck-reset_all textarea:not(.ck-reset_all-excluded *){white-space:pre-wrap}.ck-reset_all input[type=password]:not(.ck-reset_all-excluded *),.ck-reset_all input[type=text]:not(.ck-reset_all-excluded *),.ck-reset_all textarea:not(.ck-reset_all-excluded *){cursor:text}.ck-reset_all input[type=password][disabled]:not(.ck-reset_all-excluded *),.ck-reset_all input[type=text][disabled]:not(.ck-reset_all-excluded *),.ck-reset_all textarea[disabled]:not(.ck-reset_all-excluded *){cursor:default}.ck-reset_all fieldset:not(.ck-reset_all-excluded *){border:2px groove #dfdee3;padding:10px}.ck-reset_all button:not(.ck-reset_all-excluded *)::-moz-focus-inner{border:0;padding:0}.ck[dir=rtl],.ck[dir=rtl] .ck{text-align:right}:root{--ck-border-radius:2px;--ck-inner-shadow:2px 2px 3px var(--ck-color-shadow-inner) inset;--ck-drop-shadow:0 1px 2px 1px var(--ck-color-shadow-drop);--ck-drop-shadow-active:0 3px 6px 1px var(--ck-color-shadow-drop-active);--ck-spacing-unit:0.6em;--ck-spacing-large:calc(var(--ck-spacing-unit)*1.5);--ck-spacing-standard:var(--ck-spacing-unit);--ck-spacing-medium:calc(var(--ck-spacing-unit)*0.8);--ck-spacing-small:calc(var(--ck-spacing-unit)*0.5);--ck-spacing-tiny:calc(var(--ck-spacing-unit)*0.3);--ck-spacing-extra-tiny:calc(var(--ck-spacing-unit)*0.16)}",
+          ".ck-hidden{display:none!important}:root{--ck-z-default:1;--ck-z-panel:calc(var(--ck-z-default) + 999);--ck-z-dialog:9999}.ck-transitions-disabled,.ck-transitions-disabled *{transition:none!important}:root{--ck-powered-by-line-height:10px;--ck-powered-by-padding-vertical:2px;--ck-powered-by-padding-horizontal:4px;--ck-powered-by-text-color:#4f4f4f;--ck-powered-by-border-radius:var(--ck-border-radius);--ck-powered-by-background:#fff;--ck-powered-by-border-color:var(--ck-color-focus-border)}.ck.ck-balloon-panel.ck-powered-by-balloon{--ck-border-radius:var(--ck-powered-by-border-radius);background:var(--ck-powered-by-background);box-shadow:none;min-height:unset;z-index:calc(var(--ck-z-panel) - 1)}.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by{line-height:var(--ck-powered-by-line-height)}.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by a{align-items:center;cursor:pointer;display:flex;filter:grayscale(80%);line-height:var(--ck-powered-by-line-height);opacity:.66;padding:var(--ck-powered-by-padding-vertical) var(--ck-powered-by-padding-horizontal)}.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-powered-by__label{color:var(--ck-powered-by-text-color);cursor:pointer;font-size:7.5px;font-weight:700;letter-spacing:-.2px;line-height:normal;margin-right:4px;padding-left:2px;text-transform:uppercase}.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-icon{cursor:pointer;display:block}.ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by:hover a{filter:grayscale(0);opacity:1}.ck.ck-balloon-panel.ck-powered-by-balloon[class*=position_inside]{border-color:transparent}.ck.ck-balloon-panel.ck-powered-by-balloon[class*=position_border]{border:var(--ck-focus-ring);border-color:var(--ck-powered-by-border-color)}:root{--ck-color-base-foreground:#fafafa;--ck-color-base-background:#fff;--ck-color-base-border:#ccced1;--ck-color-base-action:#53a336;--ck-color-base-focus:#6cb5f9;--ck-color-base-text:#333;--ck-color-base-active:#2977ff;--ck-color-base-active-focus:#0d65ff;--ck-color-base-error:#db3700;--ck-color-focus-border-coordinates:218,81.8%,56.9%;--ck-color-focus-border:hsl(var(--ck-color-focus-border-coordinates));--ck-color-focus-outer-shadow:#cae1fc;--ck-color-focus-disabled-shadow:rgba(119,186,248,.3);--ck-color-focus-error-shadow:rgba(255,64,31,.3);--ck-color-text:var(--ck-color-base-text);--ck-color-shadow-drop:rgba(0,0,0,.15);--ck-color-shadow-drop-active:rgba(0,0,0,.2);--ck-color-shadow-inner:rgba(0,0,0,.1);--ck-color-button-default-background:transparent;--ck-color-button-default-hover-background:#f0f0f0;--ck-color-button-default-active-background:#f0f0f0;--ck-color-button-default-disabled-background:transparent;--ck-color-button-on-background:#f0f7ff;--ck-color-button-on-hover-background:#dbecff;--ck-color-button-on-active-background:#dbecff;--ck-color-button-on-disabled-background:#f0f2f4;--ck-color-button-on-color:#2977ff;--ck-color-button-action-background:var(--ck-color-base-action);--ck-color-button-action-hover-background:#4d9d30;--ck-color-button-action-active-background:#4d9d30;--ck-color-button-action-disabled-background:#7ec365;--ck-color-button-action-text:var(--ck-color-base-background);--ck-color-button-save:#008a00;--ck-color-button-cancel:#db3700;--ck-color-switch-button-off-background:#939393;--ck-color-switch-button-off-hover-background:#7d7d7d;--ck-color-switch-button-on-background:var(--ck-color-button-action-background);--ck-color-switch-button-on-hover-background:#4d9d30;--ck-color-switch-button-inner-background:var(--ck-color-base-background);--ck-color-switch-button-inner-shadow:rgba(0,0,0,.1);--ck-color-dropdown-panel-background:var(--ck-color-base-background);--ck-color-dropdown-panel-border:var(--ck-color-base-border);--ck-color-dialog-background:var(--ck-custom-background);--ck-color-dialog-form-header-border:var(--ck-custom-border);--ck-color-input-background:var(--ck-color-base-background);--ck-color-input-border:var(--ck-color-base-border);--ck-color-input-error-border:var(--ck-color-base-error);--ck-color-input-text:var(--ck-color-base-text);--ck-color-input-disabled-background:#f2f2f2;--ck-color-input-disabled-border:var(--ck-color-base-border);--ck-color-input-disabled-text:#757575;--ck-color-list-background:var(--ck-color-base-background);--ck-color-list-button-hover-background:var(--ck-color-button-default-hover-background);--ck-color-list-button-on-background:var(--ck-color-button-on-color);--ck-color-list-button-on-background-focus:var(--ck-color-button-on-color);--ck-color-list-button-on-text:var(--ck-color-base-background);--ck-color-panel-background:var(--ck-color-base-background);--ck-color-panel-border:var(--ck-color-base-border);--ck-color-toolbar-background:var(--ck-color-base-background);--ck-color-toolbar-border:var(--ck-color-base-border);--ck-color-tooltip-background:var(--ck-color-base-text);--ck-color-tooltip-text:var(--ck-color-base-background);--ck-color-engine-placeholder-text:#707070;--ck-color-upload-bar-background:#6cb5f9;--ck-color-link-default:#0000f0;--ck-color-link-selected-background:rgba(31,176,255,.1);--ck-color-link-fake-selection:rgba(31,176,255,.3);--ck-color-highlight-background:#ff0;--ck-color-light-red:#fcc;--ck-disabled-opacity:.5;--ck-focus-outer-shadow-geometry:0 0 0 3px;--ck-focus-outer-shadow:var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow);--ck-focus-disabled-outer-shadow:var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow);--ck-focus-error-outer-shadow:var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow);--ck-focus-ring:1px solid var(--ck-color-focus-border);--ck-font-size-base:13px;--ck-line-height-base:1.84615;--ck-font-face:Helvetica,Arial,Tahoma,Verdana,Sans-Serif;--ck-font-size-tiny:0.7em;--ck-font-size-small:0.75em;--ck-font-size-normal:1em;--ck-font-size-big:1.4em;--ck-font-size-large:1.8em;--ck-ui-component-min-height:2.3em}.ck-reset_all :not(.ck-reset_all-excluded *),.ck.ck-reset,.ck.ck-reset_all{word-wrap:break-word;background:transparent;border:0;box-sizing:border-box;margin:0;padding:0;position:static;text-decoration:none;transition:none;vertical-align:middle;width:auto}.ck-reset_all :not(.ck-reset_all-excluded *),.ck.ck-reset_all{border-collapse:collapse;color:var(--ck-color-text);cursor:auto;float:none;font:normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face);text-align:left;white-space:nowrap}.ck-reset_all .ck-rtl :not(.ck-reset_all-excluded *){text-align:right}.ck-reset_all iframe:not(.ck-reset_all-excluded *){vertical-align:inherit}.ck-reset_all textarea:not(.ck-reset_all-excluded *){white-space:pre-wrap}.ck-reset_all input[type=password]:not(.ck-reset_all-excluded *),.ck-reset_all input[type=text]:not(.ck-reset_all-excluded *),.ck-reset_all textarea:not(.ck-reset_all-excluded *){cursor:text}.ck-reset_all input[type=password][disabled]:not(.ck-reset_all-excluded *),.ck-reset_all input[type=text][disabled]:not(.ck-reset_all-excluded *),.ck-reset_all textarea[disabled]:not(.ck-reset_all-excluded *){cursor:default}.ck-reset_all fieldset:not(.ck-reset_all-excluded *){border:2px groove #dfdee3;padding:10px}.ck-reset_all button:not(.ck-reset_all-excluded *)::-moz-focus-inner{border:0;padding:0}.ck[dir=rtl],.ck[dir=rtl] .ck{text-align:right}:root{--ck-border-radius:2px;--ck-inner-shadow:2px 2px 3px var(--ck-color-shadow-inner) inset;--ck-drop-shadow:0 1px 2px 1px var(--ck-color-shadow-drop);--ck-drop-shadow-active:0 3px 6px 1px var(--ck-color-shadow-drop-active);--ck-spacing-unit:0.6em;--ck-spacing-large:calc(var(--ck-spacing-unit)*1.5);--ck-spacing-standard:var(--ck-spacing-unit);--ck-spacing-medium:calc(var(--ck-spacing-unit)*0.8);--ck-spacing-small:calc(var(--ck-spacing-unit)*0.5);--ck-spacing-tiny:calc(var(--ck-spacing-unit)*0.3);--ck-spacing-extra-tiny:calc(var(--ck-spacing-unit)*0.16)}",
           "",
           {
             version: 3,
@@ -4665,8 +4665,8 @@
           var o = n
             ? ""
             : i.media
-            ? "@media ".concat(i.media, " {").concat(i.css, "}")
-            : i.css;
+              ? "@media ".concat(i.media, " {").concat(i.css, "}")
+              : i.css;
           if (t.styleSheet) {
             t.styleSheet.cssText = d(e, o);
           } else {
@@ -4902,7 +4902,7 @@
         let t = false;
         try {
           t = "ć".search(new RegExp("[\\p{L}]", "u")) === 0;
-        } catch (t) {}
+        } catch (t) { }
         return t;
       }
       function p() {
@@ -5813,7 +5813,7 @@
         try {
           t[Vt] = undefined;
           var i = true;
-        } catch (t) {}
+        } catch (t) { }
         var o = Rt.call(t);
         if (i) {
           if (e) {
@@ -6017,10 +6017,10 @@
         if (t != null) {
           try {
             return tn.call(t);
-          } catch (t) {}
+          } catch (t) { }
           try {
             return t + "";
-          } catch (t) {}
+          } catch (t) { }
         }
         return "";
       }
@@ -6033,14 +6033,14 @@
       var ln = an.hasOwnProperty;
       var dn = RegExp(
         "^" +
-          cn
-            .call(ln)
-            .replace(on, "\\$&")
-            .replace(
-              /hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,
-              "$1.*?"
-            ) +
-          "$"
+        cn
+          .call(ln)
+          .replace(on, "\\$&")
+          .replace(
+            /hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,
+            "$1.*?"
+          ) +
+        "$"
       );
       function un(t) {
         if (!st(t) || Je(t)) {
@@ -6217,7 +6217,7 @@
           var t = pn(Object, "defineProperty");
           t({}, "", {});
           return t;
-        } catch (t) {}
+        } catch (t) { }
       })();
       const li = ci;
       function di(t, e, n) {
@@ -6286,8 +6286,8 @@
       )
         ? Ci
         : function (t) {
-            return Xt(t) && yi.call(t, "callee") && !xi.call(t, "callee");
-          };
+          return Xt(t) && yi.call(t, "callee") && !xi.call(t, "callee");
+        };
       const Di = Ei;
       function Si() {
         return false;
@@ -6355,7 +6355,7 @@
         fo[ho] =
         fo[mo] =
         fo[go] =
-          true;
+        true;
       fo[$i] =
         fo[qi] =
         fo[io] =
@@ -6371,7 +6371,7 @@
         fo[to] =
         fo[eo] =
         fo[no] =
-          false;
+        false;
       function po(t) {
         return Xt(t) && Ui(t.length) && !!fo[Yt(t)];
       }
@@ -6395,7 +6395,7 @@
             return t;
           }
           return vo && vo.binding && vo.binding("util");
-        } catch (t) {}
+        } catch (t) { }
       })();
       const xo = yo;
       var Eo = xo && xo.isTypedArray;
@@ -6550,14 +6550,14 @@
       var Ar = !wr
         ? pr
         : function (t) {
-            if (t == null) {
-              return [];
-            }
-            t = Object(t);
-            return gr(wr(t), function (e) {
-              return br.call(t, e);
-            });
-          };
+          if (t == null) {
+            return [];
+          }
+          t = Object(t);
+          return gr(wr(t), function (e) {
+            return br.call(t, e);
+          });
+        };
       const _r = Ar;
       function Cr(t, e) {
         return ki(t, _r(t), e);
@@ -6577,13 +6577,13 @@
       var Dr = !Er
         ? pr
         : function (t) {
-            var e = [];
-            while (t) {
-              xr(e, _r(t));
-              t = ae(t);
-            }
-            return e;
-          };
+          var e = [];
+          while (t) {
+            xr(e, _r(t));
+            t = ae(t);
+          }
+          return e;
+        };
       const Sr = Dr;
       function Tr(t, e) {
         return ki(t, Sr(t), e);
@@ -6749,7 +6749,7 @@
       const Us = Hs;
       var $s = Object.create;
       var qs = (function () {
-        function t() {}
+        function t() { }
         return function (e) {
           if (!st(e)) {
             return {};
@@ -6836,7 +6836,7 @@
         Pa[La] =
         Pa[Na] =
         Pa[za] =
-          true;
+        true;
       Pa[ga] = Pa[fa] = Pa[ya] = false;
       function Ra(t, e, n, i, o, r) {
         var s,
@@ -8170,13 +8170,13 @@
       var Ml = !li
         ? vl
         : function (t, e) {
-            return li(t, "toString", {
-              configurable: true,
-              enumerable: false,
-              value: Bl(e),
-              writable: true,
-            });
-          };
+          return li(t, "toString", {
+            configurable: true,
+            enumerable: false,
+            value: Bl(e),
+            writable: true,
+          });
+        };
       const Il = Ml;
       var Ll = 800,
         Nl = 16;
@@ -8313,8 +8313,8 @@
         get language() {
           console.warn(
             "locale-deprecated-language-property: " +
-              "The Locale#language property has been deprecated and will be removed in the near future. " +
-              "Please use #uiLanguage and #contentLanguage properties instead."
+            "The Locale#language property has been deprecated and will be removed in the near future. " +
+            "Please use #uiLanguage and #contentLanguage properties instead."
           );
           return this.uiLanguage;
         }
@@ -9672,7 +9672,7 @@
           super(...arguments);
           this._childCommandsDefinitions = [];
         }
-        refresh() {}
+        refresh() { }
         execute(...t) {
           const e = this._getFirstEnabledCommand();
           return !!e && e.execute(t);
@@ -10546,7 +10546,7 @@
         return Fu(t, n, (t) => e.getAttribute(t));
       }
       function qu(t, e) {
-        return Fu(t, e.getClassNames(), () => {});
+        return Fu(t, e.getClassNames(), () => { });
       }
       function Wu(t, e) {
         return Fu(t, e.getStyleNames(true), (t) => e.getStyle(t));
@@ -12712,7 +12712,7 @@
           }
           return 0;
         }
-        render(t, e) {}
+        render(t, e) { }
       }
       Sm.prototype.is = function (t, e) {
         if (!e) {
@@ -15188,7 +15188,7 @@
       var Ng = /\s/;
       function zg(t) {
         var e = t.length;
-        while (e-- && Ng.test(t.charAt(e))) {}
+        while (e-- && Ng.test(t.charAt(e))) { }
         return e;
       }
       const Pg = zg;
@@ -15221,8 +15221,8 @@
         return n || Ug.test(t)
           ? $g(t.slice(2), n ? 2 : 8)
           : jg.test(t)
-          ? Fg
-          : +t;
+            ? Fg
+            : +t;
       }
       const Wg = qg;
       var Gg = "Expected a function";
@@ -15354,7 +15354,7 @@
             { priority: "lowest" }
           );
         }
-        stopObserving() {}
+        stopObserving() { }
         destroy() {
           super.destroy();
           this._fireSelectionChangeDoneDebounced.cancel();
@@ -15804,7 +15804,7 @@
             this._isFocusChanging = true;
             this._renderTimeoutId = setTimeout(() => {
               this.flush();
-              t.change(() => {});
+              t.change(() => { });
             }, 50);
           });
           e.on("blur", (n, i) => {
@@ -15812,7 +15812,7 @@
             if (o === null || o === i.target) {
               e.isFocused = false;
               this._isFocusChanging = false;
-              t.change(() => {});
+              t.change(() => { });
             }
           });
         }
@@ -15901,7 +15901,7 @@
           this._fireSelectionChangeDoneDebounced.cancel();
           this._documentIsSelectingInactivityTimeoutDebounced.cancel();
         }
-        _reportInfiniteLoop() {}
+        _reportInfiniteLoop() { }
         _handleSelectionChange(t, e) {
           if (!this.isEnabled) {
             return;
@@ -16128,8 +16128,8 @@
             }
           });
         }
-        observe() {}
-        stopObserving() {}
+        observe() { }
+        stopObserving() { }
       }
       class cp extends Eg {
         constructor(t) {
@@ -16146,8 +16146,8 @@
             }
           });
         }
-        observe() {}
-        stopObserving() {}
+        observe() { }
+        stopObserving() { }
       }
       var lp = 1,
         dp = 4;
@@ -16364,7 +16364,7 @@
         forceRender() {
           this._hasChangedSinceTheLastRendering = true;
           this.getObserver(ep).flush();
-          this.change(() => {});
+          this.change(() => { });
         }
         destroy() {
           for (const t of this._observers.values()) {
@@ -16397,7 +16397,7 @@
         _disableRendering(t) {
           this._renderingDisabled = t;
           if (t == false) {
-            this.change(() => {});
+            this.change(() => { });
           }
         }
         _render() {
@@ -19679,9 +19679,8 @@
         bk(c, e, n, i, o);
       }
       function kk(t, e, n, i, o, r) {
-        const s = `data-${r.group}-${e ? "start" : "end"}-${
-          n ? "before" : "after"
-        }`;
+        const s = `data-${r.group}-${e ? "start" : "end"}-${n ? "before" : "after"
+          }`;
         const a = t.hasAttribute(s) ? t.getAttribute(s).split(",") : [];
         a.unshift(r.name);
         i.writer.setAttribute(s, a.join(","), t);
@@ -21641,8 +21640,8 @@
         if (typeof t == "string" || t.is("documentFragment")) {
           return {
             name: typeof t == "string" ? t : "$documentFragment",
-            *getAttributeKeys() {},
-            getAttribute() {},
+            *getAttributeKeys() { },
+            getAttribute() { },
           };
         } else {
           return {
@@ -22220,7 +22219,7 @@
           this.isDocumentOperation = this.baseVersion !== null;
           this.batch = null;
         }
-        _validate() {}
+        _validate() { }
         toJSON() {
           const t = Object.assign({}, this);
           t.__className = this.constructor.className;
@@ -22892,7 +22891,7 @@
         getReversed() {
           return new Cw(this.baseVersion + 1);
         }
-        _execute() {}
+        _execute() { }
         static get className() {
           return "NoOperation";
         }
@@ -31558,8 +31557,8 @@
             attributes: { class: [e.if("isVertical", "ck-toolbar_vertical")] },
           });
         }
-        render() {}
-        destroy() {}
+        render() { }
+        destroy() { }
       }
       class Tx {
         constructor(t) {
@@ -32419,8 +32418,8 @@
           ? o === t
             ? (e - n) / r
             : o === e
-            ? 2 + (n - t) / r
-            : 4 + (t - e) / r
+              ? 2 + (n - t) / r
+              : 4 + (t - e) / r
           : 0;
         return {
           h: pE(60 * (s < 0 ? s + 6 : s)),
@@ -32498,16 +32497,16 @@
                 n === 39
                   ? 0.01
                   : n === 37
-                  ? -0.01
-                  : n === 34
-                  ? 0.05
-                  : n === 33
-                  ? -0.05
-                  : n === 35
-                  ? 1
-                  : n === 36
-                  ? -1
-                  : 0,
+                    ? -0.01
+                    : n === 34
+                      ? 0.05
+                      : n === 33
+                        ? -0.05
+                        : n === 35
+                          ? 1
+                          : n === 36
+                            ? -1
+                            : 0,
               y: n === 40 ? 0.01 : n === 38 ? -0.01 : 0,
             },
             true
@@ -33171,7 +33170,7 @@
             if (
               this.isVisible &&
               this.focusTracker.focusedElement !==
-                this.cancelButtonView.element &&
+              this.cancelButtonView.element &&
               this.colorPickerView.isValid()
             ) {
               this.fire("execute", { value: this.selectedColor });
@@ -34908,12 +34907,12 @@
                 children: [
                   ...(e
                     ? [
-                        {
-                          tag: "span",
-                          attributes: { class: ["ck", "ck-powered-by__label"] },
-                          children: [e],
-                        },
-                      ]
+                      {
+                        tag: "span",
+                        attributes: { class: ["ck", "ck-powered-by__label"] },
+                        children: [e],
+                      },
+                    ]
                     : []),
                   n,
                 ],
@@ -35171,7 +35170,7 @@
         get _editableElements() {
           console.warn(
             "editor-ui-deprecated-editable-elements: " +
-              "The EditorUI#_editableElements property has been deprecated and will be removed in the near future.",
+            "The EditorUI#_editableElements property has been deprecated and will be removed in the near future.",
             { editorUI: this }
           );
           return this._editableElementsMap;
@@ -35186,8 +35185,8 @@
           if (n) {
             console.warn(
               "editor-ui-deprecated-viewport-offset-config: " +
-                "The `toolbar.vieportTopOffset` configuration option is deprecated. " +
-                "It will be removed from future CKEditor versions. Use `ui.viewportOffset.top` instead."
+              "The `toolbar.vieportTopOffset` configuration option is deprecated. " +
+              "It will be removed from future CKEditor versions. Use `ui.viewportOffset.top` instead."
             );
             return { top: n };
           }
@@ -35975,9 +35974,9 @@
                 width: e.to("isSticky", (t) =>
                   t
                     ? ST(
-                        this._contentPanelPlaceholder.getBoundingClientRect()
-                          .width
-                      )
+                      this._contentPanelPlaceholder.getBoundingClientRect()
+                        .width
+                    )
                     : null
                 ),
                 top: e.to("_stickyTopOffset", (t) => (t ? ST(t) : t)),
@@ -36673,37 +36672,37 @@
           const n = a.isSafari && a.isiOS;
           const i = n
             ? bS({
-                heightOffset: Math.max(
-                  pS.arrowHeightOffset,
-                  Math.round(20 / e.window.visualViewport.scale)
-                ),
-              })
+              heightOffset: Math.max(
+                pS.arrowHeightOffset,
+                Math.round(20 / e.window.visualViewport.scale)
+              ),
+            })
             : pS.defaultPositions;
           return t
             ? [
-                i.northWestArrowSouth,
-                i.northWestArrowSouthWest,
-                i.northWestArrowSouthEast,
-                i.northWestArrowSouthMiddleEast,
-                i.northWestArrowSouthMiddleWest,
-                i.southWestArrowNorth,
-                i.southWestArrowNorthWest,
-                i.southWestArrowNorthEast,
-                i.southWestArrowNorthMiddleWest,
-                i.southWestArrowNorthMiddleEast,
-              ]
+              i.northWestArrowSouth,
+              i.northWestArrowSouthWest,
+              i.northWestArrowSouthEast,
+              i.northWestArrowSouthMiddleEast,
+              i.northWestArrowSouthMiddleWest,
+              i.southWestArrowNorth,
+              i.southWestArrowNorthWest,
+              i.southWestArrowNorthEast,
+              i.southWestArrowNorthMiddleWest,
+              i.southWestArrowNorthMiddleEast,
+            ]
             : [
-                i.southEastArrowNorth,
-                i.southEastArrowNorthEast,
-                i.southEastArrowNorthWest,
-                i.southEastArrowNorthMiddleEast,
-                i.southEastArrowNorthMiddleWest,
-                i.northEastArrowSouth,
-                i.northEastArrowSouthEast,
-                i.northEastArrowSouthWest,
-                i.northEastArrowSouthMiddleEast,
-                i.northEastArrowSouthMiddleWest,
-              ];
+              i.southEastArrowNorth,
+              i.southEastArrowNorthEast,
+              i.southEastArrowNorthWest,
+              i.southEastArrowNorthMiddleEast,
+              i.southEastArrowNorthMiddleWest,
+              i.northEastArrowSouth,
+              i.northEastArrowSouthEast,
+              i.northEastArrowSouthWest,
+              i.northEastArrowSouthMiddleEast,
+              i.northEastArrowSouthMiddleWest,
+            ];
         }
       }
       function pB(t, e) {
@@ -38233,7 +38232,7 @@
           if (!this._restart) {
             throw new Error(
               "The Watchdog class was split into the abstract `Watchdog` class and the `EditorWatchdog` class. " +
-                "Please, use `EditorWatchdog` if you have used the `Watchdog` class previously."
+              "Please, use `EditorWatchdog` if you have used the `Watchdog` class previously."
             );
           }
         }
@@ -38328,7 +38327,7 @@
               for (const e of t) {
                 n.push(e);
               }
-            } catch (t) {}
+            } catch (t) { }
           } else {
             for (const e in t) {
               if (e === "defaultValue") {
@@ -38543,7 +38542,7 @@
             console.error(
               t,
               "An error happened during restoring editor data. " +
-                "Editor will be restored from the previously saved data."
+              "Editor will be restored from the previously saved data."
             );
           }
         }
@@ -38897,7 +38896,7 @@
             ? Promise.all(this._queues.values())
             : Promise.all([this._queues.get(jM), this._queues.get(t)]);
           const o = i.then(e);
-          const r = o.catch(() => {});
+          const r = o.catch(() => { });
           this._queues.set(t, r);
           return o.finally(() => {
             this._activeActions--;
@@ -39585,8 +39584,8 @@
             { priority: "lowest" }
           );
         }
-        observe() {}
-        stopObserving() {}
+        observe() { }
+        stopObserving() { }
       }
       class CI extends au {
         static get pluginName() {
@@ -39845,8 +39844,8 @@
             LI(this);
           }
         }
-        observe() {}
-        stopObserving() {}
+        observe() { }
+        stopObserving() { }
       }
       function LI(t) {
         const e = t.view;
@@ -41066,8 +41065,8 @@
             }
           });
         }
-        observe() {}
-        stopObserving() {}
+        observe() { }
+        stopObserving() { }
       }
       class QL extends au {
         static get pluginName() {
@@ -42557,8 +42556,8 @@
                 t.push(() =>
                   this.isEnabled
                     ? n(
-                        "Press Enter to type after or press Shift + Enter to type before the widget"
-                      )
+                      "Press Enter to type after or press Shift + Enter to type before the widget"
+                    )
                     : ""
                 );
               }
@@ -44749,7 +44748,7 @@
             (t, e) => {
               this._finalizeDragging(
                 !e.dataTransfer.isCanceled &&
-                  e.dataTransfer.dropEffect == "move"
+                e.dataTransfer.dropEffect == "move"
               );
             },
             { priority: "low" }
@@ -44834,7 +44833,7 @@
               if (
                 this._draggedRange &&
                 this._draggingUid !=
-                  n.dataTransfer.getData("application/ckeditor5-dragging-uid")
+                n.dataTransfer.getData("application/ckeditor5-dragging-uid")
               ) {
                 this._draggedRange.detach();
                 this._draggedRange = null;
@@ -46164,17 +46163,17 @@
             e instanceof nd
               ? e
               : i.document
-                  .getRootNames()
-                  .reduce(
-                    (t, n) =>
-                      o.updateFindResultFromRange(
-                        i.createRangeIn(i.document.getRoot(n)),
-                        i,
-                        o.findByTextCallback(e, this._state),
-                        t
-                      ),
-                    null
-                  );
+                .getRootNames()
+                .reduce(
+                  (t, n) =>
+                    o.updateFindResultFromRange(
+                      i.createRangeIn(i.document.getRoot(n)),
+                      i,
+                      o.findByTextCallback(e, this._state),
+                      t
+                    ),
+                  null
+                );
           if (r.length) {
             i.change(() => {
               [...r].forEach((e) => {
@@ -51393,7 +51392,7 @@
           }
           const r =
             t.getStyle("display") == "block" ||
-            t.findAncestor(n.isBlockImageView)
+              t.findAncestor(n.isBlockImageView)
               ? "imageBlock"
               : "imageInline";
           if (r !== e) {
@@ -51615,9 +51614,9 @@
       const FH = new RegExp(
         String(
           /^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@!$&'()*+,;=%-]+/.source +
-            /\.(jpg|jpeg|png|gif|ico|webp|JPG|JPEG|PNG|GIF|ICO|WEBP)/.source +
-            /(\?[\w.~:/[\]@!$&'()*+,;=%-]*)?/.source +
-            /(#[\w.~:/[\]@!$&'()*+,;=%-]*)?$/.source
+          /\.(jpg|jpeg|png|gif|ico|webp|JPG|JPEG|PNG|GIF|ICO|WEBP)/.source +
+          /(\?[\w.~:/[\]@!$&'()*+,;=%-]*)?/.source +
+          /(#[\w.~:/[\]@!$&'()*+,;=%-]*)?$/.source
         )
       );
       class jH extends au {
@@ -53389,7 +53388,7 @@
               .then((t) => {
                 this._loadersMap.set(t, e);
               })
-              .catch(() => {});
+              .catch(() => { });
           }
           e.on("change:uploaded", () => {
             let t = 0;
@@ -53514,7 +53513,7 @@
           const t = this.status;
           this.status = "aborted";
           if (!this._filePromiseWrapper.isFulfilled) {
-            this._filePromiseWrapper.promise.catch(() => {});
+            this._filePromiseWrapper.promise.catch(() => { });
             this._filePromiseWrapper.rejecter("aborted");
           } else if (t == "reading") {
             this._reader.abort();
@@ -56469,13 +56468,13 @@
           e.change((t) => {
             const o = n.isCollapsed
               ? [
-                  nL(
-                    n.getFirstPosition(),
-                    "linkHref",
-                    n.getAttribute("linkHref"),
-                    e
-                  ),
-                ]
+                nL(
+                  n.getFirstPosition(),
+                  "linkHref",
+                  n.getAttribute("linkHref"),
+                  e
+                ),
+              ]
               : e.schema.getValidRanges(n.getRanges(), "linkHref");
             for (const e of o) {
               t.removeAttribute("linkHref", e);
@@ -57381,31 +57380,31 @@
       const rG = 4;
       const sG = new RegExp(
         "(^|\\s)" +
-          "(" +
-          "(" +
-          "(?:(?:(?:https?|ftp):)?\\/\\/)" +
-          "(?:\\S+(?::\\S*)?@)?" +
-          "(?:" +
-          "(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])" +
-          "(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}" +
-          "(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))" +
-          "|" +
-          "(" +
-          "((?!www\\.)|(www\\.))" +
-          "(?![-_])(?:[-_a-z0-9\\u00a1-\\uffff]{1,63}\\.)+" +
-          "(?:[a-z\\u00a1-\\uffff]{2,63})" +
-          ")" +
-          ")" +
-          "(?::\\d{2,5})?" +
-          "(?:[/?#]\\S*)?" +
-          ")" +
-          "|" +
-          "(" +
-          "(www.|(\\S+@))" +
-          "((?![-_])(?:[-_a-z0-9\\u00a1-\\uffff]{1,63}\\.))+" +
-          "(?:[a-z\\u00a1-\\uffff]{2,63})" +
-          ")" +
-          ")$",
+        "(" +
+        "(" +
+        "(?:(?:(?:https?|ftp):)?\\/\\/)" +
+        "(?:\\S+(?::\\S*)?@)?" +
+        "(?:" +
+        "(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])" +
+        "(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}" +
+        "(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))" +
+        "|" +
+        "(" +
+        "((?!www\\.)|(www\\.))" +
+        "(?![-_])(?:[-_a-z0-9\\u00a1-\\uffff]{1,63}\\.)+" +
+        "(?:[a-z\\u00a1-\\uffff]{2,63})" +
+        ")" +
+        ")" +
+        "(?::\\d{2,5})?" +
+        "(?:[/?#]\\S*)?" +
+        ")" +
+        "|" +
+        "(" +
+        "(www.|(\\S+@))" +
+        "((?![-_])(?:[-_a-z0-9\\u00a1-\\uffff]{1,63}\\.))+" +
+        "(?:[a-z\\u00a1-\\uffff]{2,63})" +
+        ")" +
+        ")$",
         "i"
       );
       const aG = 2;
@@ -57974,7 +57973,7 @@
           return t + e;
         }
       }
-      const GG = { exec: function t() {} };
+      const GG = { exec: function t() { } };
       function KG(t) {
         let e = 1,
           n,
@@ -57991,15 +57990,15 @@
       }
       function YG(t, e) {
         const n = t.replace(/\|/g, (t, e, n) => {
-            let i = false,
-              o = e;
-            while (--o >= 0 && n[o] === "\\") i = !i;
-            if (i) {
-              return "|";
-            } else {
-              return " |";
-            }
-          }),
+          let i = false,
+            o = e;
+          while (--o >= 0 && n[o] === "\\") i = !i;
+          if (i) {
+            return "|";
+          } else {
+            return " |";
+          }
+        }),
           i = n.split(/ \|/);
         let o = 0;
         if (!i[0].trim()) {
@@ -58811,16 +58810,16 @@
       iK.pedantic = KG({}, iK.normal, {
         html: VG(
           "^ *(?:comment *(?:\\n|\\s*$)" +
-            "|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)" +
-            "|<tag(?:\"[^\"]*\"|'[^']*'|\\s[^'\"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))"
+          "|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)" +
+          "|<tag(?:\"[^\"]*\"|'[^']*'|\\s[^'\"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))"
         )
           .replace("comment", iK._comment)
           .replace(
             /tag/g,
             "(?!(?:" +
-              "a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub" +
-              "|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)" +
-              "\\b)\\w+(?!:|[^\\w\\s@]*@)\\b"
+            "a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub" +
+            "|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)" +
+            "\\b)\\w+(?!:|[^\\w\\s@]*@)\\b"
           )
           .getRegex(),
         def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/,
@@ -59830,8 +59829,8 @@
         if (typeof t !== "string") {
           throw new Error(
             "marked(): input parameter is of type " +
-              Object.prototype.toString.call(t) +
-              ", string expected"
+            Object.prototype.toString.call(t) +
+            ", string expected"
           );
         }
         if (typeof e === "function") {
@@ -60066,8 +60065,8 @@
         if (typeof t !== "string") {
           throw new Error(
             "marked.parseInline(): input parameter is of type " +
-              Object.prototype.toString.call(t) +
-              ", string expected"
+            Object.prototype.toString.call(t) +
+            ", string expected"
           );
         }
         e = KG({}, hK.defaults, e || {});
@@ -60563,11 +60562,11 @@
           if (new t().parseFromString("", "text/html")) {
             e = true;
           }
-        } catch (t) {}
+        } catch (t) { }
         return e;
       }
       function OK() {
-        var t = function () {};
+        var t = function () { };
         {
           if (FK()) {
             t.prototype.parseFromString = function (t) {
@@ -60980,9 +60979,9 @@
       }
       const yY = new RegExp(
         /\b(?:(?:https?|ftp):\/\/|www\.)/.source +
-          /(?![-_])(?:[-_a-z0-9\u00a1-\uffff]{1,63}\.)+(?:[a-z\u00a1-\uffff]{2,63})/
-            .source +
-          /(?:[^\s<>]*)/.source,
+        /(?![-_])(?:[-_a-z0-9\u00a1-\uffff]{1,63}\.)+(?:[a-z\u00a1-\uffff]{2,63})/
+          .source +
+        /(?:[^\s<>]*)/.source,
         "gi"
       );
       function* xY(t) {
@@ -61036,7 +61035,7 @@
         registerRawContentMatcher(t) {
           this._htmlDP.registerRawContentMatcher(t);
         }
-        useFillerType() {}
+        useFillerType() { }
       }
       class SY extends au {
         constructor(t) {
@@ -61441,8 +61440,7 @@
                   const n = t[2];
                   return (
                     '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
-                    `<iframe src="https://www.youtube.com/embed/${e}${
-                      n ? `?start=${n}` : ""
+                    `<iframe src="https://www.youtube.com/embed/${e}${n ? `?start=${n}` : ""
                     }" ` +
                     'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
                     'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
@@ -62722,8 +62720,8 @@
             e.length === 1
               ? " "
               : Array(e.length + 1)
-                  .join("  ")
-                  .substr(0, e.length)
+                .join("  ")
+                .substr(0, e.length)
         );
       }
       function lZ(t, e) {
@@ -63851,15 +63849,15 @@
           if (!e && n.some((e) => t.plugins.has(e))) {
             console.warn(
               "You initialized the editor with the source editing feature and at least one of the collaboration features. " +
-                "Please be advised that the source editing feature may not work, and be careful when editing document source " +
-                "that contains markers created by the collaboration features."
+              "Please be advised that the source editing feature may not work, and be careful when editing document source " +
+              "that contains markers created by the collaboration features."
             );
           }
           if (t.plugins.has("RestrictedEditingModeEditing")) {
             console.warn(
               "You initialized the editor with the source editing feature and restricted editing feature. " +
-                "Please be advised that the source editing feature may not work, and be careful when editing document source " +
-                "that contains markers created by the restricted editing feature."
+              "Please be advised that the source editing feature may not work, and be careful when editing document source " +
+              "that contains markers created by the restricted editing feature."
             );
           }
         }
@@ -71204,8 +71202,8 @@
               const s = r.is("element", "table")
                 ? r
                 : Array.from(r.getChildren()).find((t) =>
-                    t.is("element", "table")
-                  );
+                  t.is("element", "table")
+                );
               const a = s0(o);
               if (a) {
                 i.addClass("ck-table-resized", s);
@@ -71791,7 +71789,7 @@
           this.fire("update", { words: e, characters: n });
         }
       }
-      class Q5 extends WM {}
+      class Q5 extends WM { }
       Q5.builtinPlugins = [
         dI,
         mN,
 
client/resources/img/admin/ico_contacts_book.svg (added)
+++ client/resources/img/admin/ico_contacts_book.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 2C3.44772 2 3 2.44772 3 3V5H5V4H19V20H5V19H3V21C3 21.5523 3.44772 22 4 22H20C20.5523 22 21 21.5523 21 21V3C21 2.44772 20.5523 2 20 2H4ZM9 16C9 14.3431 10.3431 13 12 13C13.6569 13 15 14.3431 15 16H9ZM12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10C14 11.1046 13.1046 12 12 12ZM6 9V7H2V9H6ZM6 11V13H2V11H6ZM6 17V15H2V17H6Z"></path></svg>(파일 끝에 줄바꿈 문자 없음)
 
client/resources/img/admin/ico_folders.svg (added)
+++ client/resources/img/admin/ico_folders.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 7V4C6 3.44772 6.44772 3 7 3H13.4142L15.4142 5H21C21.5523 5 22 5.44772 22 6V16C22 16.5523 21.5523 17 21 17H18V20C18 20.5523 17.5523 21 17 21H3C2.44772 21 2 20.5523 2 20V8C2 7.44772 2.44772 7 3 7H6ZM6 9H4V19H16V17H6V9ZM8 5V15H20V7H14.5858L12.5858 5H8Z"></path></svg>(파일 끝에 줄바꿈 문자 없음)
 
client/resources/img/admin/ico_image.svg (added)
+++ client/resources/img/admin/ico_image.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"></path></svg>(파일 끝에 줄바꿈 문자 없음)
 
client/resources/img/admin/ico_mac.svg (added)
+++ client/resources/img/admin/ico_mac.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14 18V20L16 21V22H8L7.99639 21.0036L10 20V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H14ZM4 5V14H20V5H4Z"></path></svg>(파일 끝에 줄바꿈 문자 없음)
 
client/resources/img/admin/ico_numbers.svg (added)
+++ client/resources/img/admin/ico_numbers.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9 18H4V10H9V18ZM15 18H10V6H15V18ZM21 18H16V2H21V18ZM22 22H3V20H22V22Z"></path></svg>(파일 끝에 줄바꿈 문자 없음)
 
client/resources/img/admin/ico_settings.svg (added)
+++ client/resources/img/admin/ico_settings.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.33409 4.54491C6.3494 3.63637 7.55145 2.9322 8.87555 2.49707C9.60856 3.4128 10.7358 3.99928 12 3.99928C13.2642 3.99928 14.3914 3.4128 15.1245 2.49707C16.4486 2.9322 17.6506 3.63637 18.6659 4.54491C18.2405 5.637 18.2966 6.90531 18.9282 7.99928C19.5602 9.09388 20.6314 9.77679 21.7906 9.95392C21.9279 10.6142 22 11.2983 22 11.9993C22 12.7002 21.9279 13.3844 21.7906 14.0446C20.6314 14.2218 19.5602 14.9047 18.9282 15.9993C18.2966 17.0932 18.2405 18.3616 18.6659 19.4536C17.6506 20.3622 16.4486 21.0664 15.1245 21.5015C14.3914 20.5858 13.2642 19.9993 12 19.9993C10.7358 19.9993 9.60856 20.5858 8.87555 21.5015C7.55145 21.0664 6.3494 20.3622 5.33409 19.4536C5.75952 18.3616 5.7034 17.0932 5.0718 15.9993C4.43983 14.9047 3.36862 14.2218 2.20935 14.0446C2.07212 13.3844 2 12.7002 2 11.9993C2 11.2983 2.07212 10.6142 2.20935 9.95392C3.36862 9.77679 4.43983 9.09388 5.0718 7.99928C5.7034 6.90531 5.75952 5.637 5.33409 4.54491ZM13.5 14.5974C14.9349 13.7689 15.4265 11.9342 14.5981 10.4993C13.7696 9.0644 11.9349 8.57277 10.5 9.4012C9.06512 10.2296 8.5735 12.0644 9.40192 13.4993C10.2304 14.9342 12.0651 15.4258 13.5 14.5974Z"></path></svg>(파일 끝에 줄바꿈 문자 없음)
 
client/resources/img/admin/ico_shield_user.svg (added)
+++ client/resources/img/admin/ico_shield_user.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3.78307 2.82598L12 1L20.2169 2.82598C20.6745 2.92766 21 3.33347 21 3.80217V13.7889C21 15.795 19.9974 17.6684 18.3282 18.7812L12 23L5.6718 18.7812C4.00261 17.6684 3 15.795 3 13.7889V3.80217C3 3.33347 3.32553 2.92766 3.78307 2.82598ZM12 11C13.3807 11 14.5 9.88071 14.5 8.5C14.5 7.11929 13.3807 6 12 6C10.6193 6 9.5 7.11929 9.5 8.5C9.5 9.88071 10.6193 11 12 11ZM7.52746 16H16.4725C16.2238 13.75 14.3163 12 12 12C9.68372 12 7.77619 13.75 7.52746 16Z"></path></svg>(파일 끝에 줄바꿈 문자 없음)
 
client/resources/img/admin/ico_terminal_window.svg (added)
+++ client/resources/img/admin/ico_terminal_window.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 9V5H4V9H20ZM20 11H4V19H20V11ZM3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM5 12H8V17H5V12ZM5 6H7V8H5V6ZM9 6H11V8H9V6Z"></path></svg>(파일 끝에 줄바꿈 문자 없음)
 
client/resources/img/admin/ico_user.svg (added)
+++ client/resources/img/admin/ico_user.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 14.0619V20H13V14.0619C16.9463 14.554 20 17.9204 20 22H4C4 17.9204 7.05369 14.554 11 14.0619ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13Z"></path></svg>(파일 끝에 줄바꿈 문자 없음)
 
client/resources/img/component/common/ico_arr_16_right_green70.svg (added)
+++ client/resources/img/component/common/ico_arr_16_right_green70.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#228738;stroke-linecap:round;}
+</style>
+<path class="st0" d="M6,11.5l4.1-3.8L6,4"/>
+</svg>
 
client/resources/img/component/common/ico_comment.svg (added)
+++ client/resources/img/component/common/ico_comment.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 8.99374C2 5.68349 4.67654 3 8.00066 3H15.9993C19.3134 3 22 5.69478 22 8.99374V21H8.00066C4.68659 21 2 18.3052 2 15.0063V8.99374ZM14 11V13H16V11H14ZM8 11V13H10V11H8Z"></path></svg>(파일 끝에 줄바꿈 문자 없음)
 
client/resources/img/component/common/ico_pencil.svg (added)
+++ client/resources/img/component/common/ico_pencil.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#2D2D2D;}
+	.st1{fill:none;stroke:#2D2D2D;stroke-width:1.8;}
+</style>
+<polyline points="44,18.5 44,4.5 30,4.5 30,18.5 44,18.5 "/>
+<path d="M65.8,12c1.5,0,2.7,1.2,2.7,2.7v18.7c0,1.5-1.2,2.7-2.7,2.7H47.1c-1.5,0-2.7-1.2-2.7-2.7V14.7c0-1.5,1.2-2.7,2.7-2.7H65.8"
+	/>
+<g>
+	<g>
+		<path class="st0" d="M19.9,5.9l-1.2,1.2l-2-2l1.2-1.2c0.3-0.3,0.7-0.3,0.9,0L19.9,5C20.2,5.3,20.2,5.7,19.9,5.9"/>
+		<polygon class="st0" points="8.9,13 16.2,5.7 18.2,7.7 10.9,15 8.6,15.2 		"/>
+	</g>
+	<path id="Rectangle_415" class="st1" d="M10.5,7H6.3C4.9,7,3.9,8.1,3.9,9.4v8.4c0,1.3,1.1,2.4,2.4,2.4h8.4c1.3,0,2.4-1.1,2.4-2.4
+		v-4.2"/>
+</g>
+</svg>
client/resources/img/component/common/ico_trashcan.svg
--- client/resources/img/component/common/ico_trashcan.svg
+++ client/resources/img/component/common/ico_trashcan.svg
@@ -1,1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 18"><title>자산 1</title><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><path d="M5,0V1H0V3H1V16a2,2,0,0,0,2,2H13a2,2,0,0,0,2-2V3h1V1H11V0H5M3,3H13V16H3V3M5,5v9H7V5H5M9,5v9h2V5Z"/></g></g></svg>
(파일 끝에 줄바꿈 문자 없음)
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#2D2D2D;}
+</style>
+<path class="st0" d="M9,2.8v0.9H3.7v1.4h1.1v14.5c0,1.1,0,2,1.1,2h12.6c1.1,0,1.1-0.9,1.1-2V5.2h0.8V3.7H15V2.8H9 M6.4,5.2h11.5
+	v14.9H6.4V5.9 M9,7.9v9.3h1.4V7.9H9 M13.7,7.9v9.3h1.5V7.9H13.7z"/>
+</svg>
client/resources/scss/admin/content.scss
--- client/resources/scss/admin/content.scss
+++ client/resources/scss/admin/content.scss
@@ -25,6 +25,9 @@
         &.sch-full{
             height: calc(100% - 70px);
         }
+        &.detail{
+            height: calc(100% - 228px);
+        }
     }
 }
 
@@ -100,7 +103,8 @@
 
 .btn-wrap {
     @include flex-layout(flex, center, end);
-    padding: 3rem 0;
+    // padding: 2rem 0;
+    padding-top: 2rem;
 
     button {
         margin-left: 1rem;
@@ -132,16 +136,12 @@
     background-color: var(--tk-white);
     border-radius: 0 0 2rem 2rem;
     height: calc(100% - 45px);
-    // grid-template-rows: 1fr 1fr;
+    // max-height: fit-content;
 
-    >div {
+    .layout {
         width: 100%;
         padding: 1rem;
         border-bottom: 1px solid var(--tk-gray-10);
-
-        // &:last-child {
-        //     align-items: flex-start;
-        // }
 
         .form-title {
             width: 180px;
@@ -152,7 +152,6 @@
                 margin-right: .5rem;
             }
         }
-
 
         .form-select {
             min-width: 135px;
@@ -169,7 +168,7 @@
 
         >div,
         .form-group {
-            width: calc(100% - 180px);
+            max-width: calc(100% - 180px);
 
             .form-control {
                 max-width: 100%;
@@ -178,12 +177,21 @@
             span {
                 font-size: var(--tk-fz-detail-sm);
             }
+
+            &.w_100{
+                width: 100%;
+            }
         }
 
         >div,
         .input-group{
             max-width: calc(100% - 180px);
+            &.w_100{
+                width: 100%;
+            }
         }
+
+
 
         &.grid-column {
             grid-column: 1/3;
@@ -198,6 +206,14 @@
             padding-bottom: 0;
             border-bottom: 0;
         }
+
+        &.pb10{
+            padding-bottom: 1rem; 
+        }
+    }
+
+    &.grid-none {
+        display: block;
     }
 
 
@@ -225,7 +241,6 @@
     }
 
 }
-
 
 .form-box {
     border: 1px solid var(--tk-gray-10);
@@ -377,14 +392,10 @@
     // height: 100%;
     // box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
 
-    &.overflow-y{
-        overflow-y: auto;
-    }
-
     .tbl{
         max-width: 100%;
         width: 100%;
-        .data{
+        &.data{
             thead{
                 th{
                     background-color: #c8d0d8;
@@ -412,6 +423,11 @@
                 }
             }
         }
+
+        
+    &.overflow-y{
+        overflow-y: auto;
+    }
     }
 
 
@@ -463,6 +479,10 @@
     gap: 3rem;
 }
 
+.w_100{
+    width: 100%;
+}
+
 .h_100{
     height: 100%;
 }
@@ -478,3 +498,138 @@
     }
 }
 
+.border-top{
+    border-top: 1px solid var(--tk-gray-10);
+}
+
+
+.gallery-wrap{
+    margin-bottom: 3rem;
+    .mySwiper{
+        max-width: 600px;
+        height: auto;
+        aspect-ratio: 4/3;
+        background-color: #c8d0d8;
+    }
+    
+    .mySwiper2{
+        max-width: 600px;
+        .swiper-slide{
+            width: 25%;
+            height: auto;
+            aspect-ratio: 4/3;
+            background-color: #c8d0d8;
+        }
+    }
+}
+
+.video-zone{
+    margin-bottom: 3rem;
+
+    iframe{
+        display: block;
+        width: 600px;
+        height: auto;
+        aspect-ratio: 16/9;
+        margin: 0 auto;
+    }
+}
+
+.comment-box{
+    padding: 3rem;
+    background-color: var(--tk-gray-10);
+    @include radius(20);
+    margin-top: 3rem;
+
+    .comment-head{
+        width: auto;
+        margin-right: 3rem;
+        padding-left: 3rem;
+        background-image: url(#{$url}/component/common/ico_comment.svg);
+        background-repeat: no-repeat;
+        background-position: left center;
+    }
+
+    .form-control{
+        max-width: calc(100% - 230px);
+    }
+
+    .btn{
+        margin-left: 1rem;
+    }
+}
+
+.navigate-wrap{
+    padding: 2rem;
+    background-color: var(--tk-white);
+    @include radius(20);
+    margin-top: 2rem;
+    .content-navigate{
+        border-top: 1px solid var(--tk-gray-50);
+        border-bottom: 1px solid var(--tk-gray-50);
+        tbody{
+            tr{
+                border-bottom: 1px solid var(--tk-gray-30);
+
+                td{
+                    padding: 1rem;
+                }
+
+                &:last-child{
+                    border-bottom: 0;
+                }
+            }
+        }
+    }
+}
+
+.icon-btn-zone{
+    button{
+        border: 1px solid var(--tk-gray-30);
+        background-color: var(--tk-white);
+        border-radius: 50%;
+        margin-left: 1rem;
+        &.btn-ico[class*='ico-'] {
+            background-size: 1.8rem;
+        }
+
+        &:first-child{
+            margin-left: 0;
+        }
+    }
+}
+
+.state{
+    display: inline-block;
+    padding: .5rem 1rem;
+    @include radius(10);
+    font-weight: 700;
+    &.red{
+        background-color: var(--tk-point-10);
+        color: var(--tk-point-40);
+    }
+    &.blue{
+        background-color: var(--tk-primary-10); 
+        color: var(--tk-primary-40); 
+    }
+
+    &.answer{
+        border: 1px solid var(--tk-gray-90);
+        margin-right: 1rem;
+        font-size: 1.5rem;
+    }
+
+     &.question{
+        background-color: var(--tk-gray-90);
+        color: var(--tk-white);
+        margin-right: 1rem;
+        font-size: 1.5rem;
+    }
+}
+
+
+
+
+
+
+
client/resources/scss/admin/layout.scss
--- client/resources/scss/admin/layout.scss
+++ client/resources/scss/admin/layout.scss
@@ -77,6 +77,34 @@
                         &.main-active{
                             color: var(--tk-main-50);
                             font-weight: 700;
+
+                        }
+                    }
+                    
+                    >span.has-children{
+                        position: relative;
+
+                        &::after {
+                            content: '';
+                            position: absolute;
+                            right: 0;
+                            top: 50%;
+                            transform: translateY(-50%);
+                            width: 20px;
+                            height: 20px;
+                            background-image: url(#{$url}/component/common/ico_arr_16_right_gray70.svg);
+                            background-repeat: no-repeat;
+                            background-size: contain;
+                            border:1px solid var(--tk-gray-50);
+                            border-radius: 50%;
+                            transition: transform 0.3s ease;
+                        }
+                    
+                        &.open::after {
+                            border: 1px solid var(--tk-main-50);
+                            background-image: url(#{$url}/component/common/ico_arr_16_right_green70.svg);
+                            transform: translateY(-50%) rotate(90deg); // 오른쪽 화살표 → 아래 방향
+                    
                         }
                     }
     
client/resources/scss/common/component/_buttons.scss
--- client/resources/scss/common/component/_buttons.scss
+++ client/resources/scss/common/component/_buttons.scss
@@ -233,6 +233,12 @@
   &.ico-sch {
     background-image: url(#{$url}/component/common/ico_sch_40.svg);
   }
+  &.ico-comment {
+    background-image: url(#{$url}/component/common/ico_comment_16.svg);
+  }
+  &.ico-update {
+    background-image: url(#{$url}/component/common/ico_pencil.svg);
+  }
   &.ico-info {
     background-image: url(#{$url}/component/common/ico_info.svg);
     &.sm {
client/views/component/ckeditor5/ckeditor.css
--- client/views/component/ckeditor5/ckeditor.css
+++ client/views/component/ckeditor5/ckeditor.css
@@ -1,9 +1,17 @@
 /**** ckeditor ****/
+.ck-reset{
+    height: 100%;
+}
+.ck-editor__main{
+    height: calc(100% - 40px);
+}
 .ck-restricted-editing_mode_standard {
-    height: 600px;
+    /* height: 600px; */
+    height: 100%;
 
 }
 
+
 .ck-source-editing-area {
     height: 600px;
 }
client/views/component/ckeditor5/ckeditorComponent.vue
--- client/views/component/ckeditor5/ckeditorComponent.vue
+++ client/views/component/ckeditor5/ckeditorComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <textarea name="editor5" id="editor5" style="width:100%" ref="editorContainer"></textarea>
+    <textarea name="editor5" id="editor5" style="width:50%" ref="editorContainer"></textarea>
 </template>
 <script>
 import { mdiBorderColor } from '@mdi/js';
client/views/component/comment/CommentItem.vue
--- client/views/component/comment/CommentItem.vue
+++ client/views/component/comment/CommentItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="comment-item" v-for="comment in comments" :key="comment.id">
-    <div class="flex align-center mb5">
+    <div class="layout">
       <h4 class="comment-user">{{ comment.rgtrNm }}</h4>
       <span class="comment-date ml5">{{ comment.regDt }}</span>
     </div>
@@ -8,16 +8,12 @@
     <textarea v-if="'isUpdate' in comment && comment.isUpdate" class="comment-text mb10" v-model="comment.cmntCn"
       style="width: 100%; min-height: 4rem"></textarea>
 
-    <p v-else class="comment-text mb10">
+    <p v-else class="comment-text">
       {{ comment.useYn == "Y" ? comment.cmntCn : "[ 삭제된 댓글입니다. ]" }}
     </p>
 
-    <div v-if="showReplyInput[comment.cmntId]" class="flex align-center mb10">
-      <div class="gd-10 pl0">
+    <div v-if="showReplyInput[comment.cmntId]" class="layout">
         <textarea v-model="comment.replyText" style="width: 100%; min-height: 4rem"></textarea>
-      </div>
-
-      <div class="gd-2 pr0">
         <button :class="{
           'large-btn': true,
           'blue-btn': pageRole == 'adm',
@@ -26,7 +22,6 @@
           등록
         </button>
       </div>
-    </div>
 
     <div class="flex justify-end align-center mb10">
       <button v-if="comment.isUpdate != true" :class="{
client/views/layout/AdminMenu.vue
--- client/views/layout/AdminMenu.vue
+++ client/views/layout/AdminMenu.vue
@@ -7,7 +7,7 @@
             <ul class="main-menu">
                 <li v-for="(menu, idx) in menuList" :key="idx" class="menu-item"
                     @click.stop="toggleSubMenu(menu)">
-                    <span :class="{ 'main-active': isActive(menu.menuId) }">
+                    <span :class="{ 'main-active': isActive(menu.menuId), 'open': menu.isOpen,'has-children': menu.childList && menu.childList.length > 0 }">
                         {{ menu.menuNm }}
                     </span>
                     <ul v-if="menu.isOpen" class="sub-menu">
client/views/pages/adm/authority/authority/AuthoritySelectList.vue
--- client/views/pages/adm/authority/authority/AuthoritySelectList.vue
+++ client/views/pages/adm/authority/authority/AuthoritySelectList.vue
@@ -30,7 +30,7 @@
           >
             <template v-slot:button="{ row, idx }">
               <button
-                class="btn-ico md ico-del"
+                class="btn-ico sm ico-del"
                 @click.stop="fnDel(row, idx)"
                 v-if="pageAuth.delAuthrt == 'Y'"
               >
client/views/pages/adm/boardManagement/template/commonTemplate/CommonInsert.vue
--- client/views/pages/adm/boardManagement/template/commonTemplate/CommonInsert.vue
+++ client/views/pages/adm/boardManagement/template/commonTemplate/CommonInsert.vue
@@ -40,166 +40,144 @@
       <div  class="content-zone  sch-full">
         <div class="content">
           <div class="scroll">
-            <div class="tbl-wrap">
-              <table class="tbl data">
-                <colgroup>
-                  <col width="10%" />
-                  <col width="90%" />
-                </colgroup>
-                <tbody>
-                  <tr>
-                    <th class="text-lf">
-                      <span>제목</span>
-                    </th>
-                    <td>
-                      <input type="text" class="form-control sm" v-model="bbsCn.bbsNm" placeholder="제목을 입력하세요." />
-                    </td>
-                  </tr>
-                  <tr>
-                    <th class="text-lf" style="vertical-align: top;">
-                      <span>내용</span>
-                    </th>
-                    <td>
-                      <ckeditorComponent ref="ckeditor5" :bbsCn.sync="bbsCn"></ckeditorComponent>
-                    </td>
-                  </tr>
-                  <tr v-if="bbsMng.atchFileUseYn === 'Y'">
-                    <th>첨부파일</th>
-                    <td>
-                      <label for="file" >파일찾기</label>
+            <div class="form-box h_100">
+              <div class="form-box-title">
+                <p>기본정보</p>
+                <p><span>*</span>필수입력</p>
+              </div>
+              <div class="form-content grid-none">
+                <div class="layout">
+                  <label for="" class="form-title">제목</label>
+                  <input type="text" class="form-control sm" v-model="bbsCn.bbsNm" placeholder="제목을 입력하세요." />
+                </div>
+                <div class="layout"  ref="first">
+                  <label for="" class="form-title">내용</label>
+                  <div class="w_100 h_100">
+                    <ckeditorComponent ref="ckeditor5" :bbsCn.sync="bbsCn"></ckeditorComponent>
+                  </div>
+                </div>
+                <div class="layout"  ref="two" v-if="bbsMng.atchFileUseYn === 'Y'">
+                  <label for="" class="form-title">첨부파일</label>
+                  <div>
+                    <label for="file" >파일찾기</label>
+                    <input
+                      type="file"
+                      id="file"
+                      ref="file"
+                      @change="fnFileInsert"
+                      multiple
+                    />
+                    <div  v-if="fileList.length > 0">
+                      <ul>
+                        <li v-for="(file, idx) in fileList" :key="idx">
+                          <div v-if="file['fileId'] != null" class="file-wrap">
+                            <p>{{ file["fileNm"] }}.{{ file["extnNm"] }}</p>
+                            <button class="del-btn" @click="fnFileDelete(file, idx)">X</button>
+                          </div>
+                          <div v-else class="file-wrap">
+                            <p>{{ file.name }}</p>
+                            <button class="del-btn" @click="fnFileDelete(file, idx)">X</button>
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <div class="layout" ref="three" v-if="bbsMng.ntcUseYn === 'Y'" >
+                  <label for="" class="form-title">공지글</label>
+                  <div class="check-area">
+                    <div class="form-check">
                       <input
-                        type="file"
-                        id="file"
-                        ref="file"
-                        @change="fnFileInsert"
-                        multiple
+                        type="radio"
+                        name="notice"
+                        id="notice-y"
+                        class="mr5"
+                        value="Y"
+                        v-model="bbsCn.ntcPstYn"
                       />
-                      <div  v-if="fileList.length > 0">
-                        <ul>
-                          <li v-for="(file, idx) in fileList" :key="idx">
-                            <div v-if="file['fileId'] != null" class="file-wrap">
-                              <p>{{ file["fileNm"] }}.{{ file["extnNm"] }}</p>
-                              <button class="del-btn" @click="fnFileDelete(file, idx)">X</button>
-                            </div>
-                            <div v-else class="file-wrap">
-                              <p>{{ file.name }}</p>
-                              <button class="del-btn" @click="fnFileDelete(file, idx)">X</button>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr v-if="bbsMng.ntcUseYn === 'Y'" class="border-top">
-                    <th>공지글</th>
-                    <td>
-                      <div class="check-area">
-                        <div class="form-check">
-                          <input
-                            type="radio"
-                            name="notice"
-                            id="notice-y"
-                            class="mr5"
-                            value="Y"
-                            v-model="bbsCn.ntcPstYn"
-                          />
-                          <label for="notice-y">사용</label>
-                        </div>
-                        <div class="form-check">
-                          <input
-                            type="radio"
-                            name="notice"
-                            id="notice-n"
-                            class="mr5"
-                            value="N"
-                            v-model="bbsCn.ntcPstYn"
-                          />
-                          <label for="notice-n">미사용</label>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr v-if="bbsCn.ntcPstYn === 'Y'" class="border-top">
-                    <th>공지글 게시기간</th>
-                    <td>
-                      <div class="input-group">
-                        <div class="form-control sm cal">
-                          <VueDatePicker
-                            InlineOptions
-                            placeholder="시작일"
-                            locale="ko"
-                            :enable-time-picker="false"
-                            :format="formatDate"
-                            v-model="bbsCn.ntcBgngDt"
-                            @update:model-value="checkDateValidity('ntcBgngDt',$event)"
-                          />
-                          <!-- <input
-                            type="datetime-local"
-                            class="full-input ml0"
-                            v-model="bbsCn.ntcBgngDt"
-                            @change="checkDateValidity('ntcBgngDt', $event)"
-                          /> -->
-                        </div>
-                        <div class="mark">-</div>
-                        <div class="form-control sm cal">
-                          <VueDatePicker
-                            InlineOptions
-                            placeholder="종료일"
-                            locale="ko"
-                            :enable-time-picker="false"
-                            :format="formatDate"
-                            v-model="bbsCn.ntcEndDt"
-                            @update:model-value="checkDateValidity('ntcEndDt',$event)"
-                          />
-                          <!-- <input
-                            type="datetime-local"
-                            class="full-input ml0"
-                            v-model="bbsCn.ntcEndDt"
-                            @change="checkDateValidity('ntcEndDt', $event)"
-                          /> -->
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr v-if="bbsMng.prvtPstUseYn === 'Y'" class="border-top">
-                    <th
-                      :class="{
-                        'text-lf': true,
-                        'point-font2': pageRole == 'adm',
-                        'point-font': pageRole == 'portal',
-                      }"
-                    >
-                      비밀글
-                    </th>
-                    <td colspan="3">
-                      <div class="flex align-center no-gutters">
-                        <div class="gd-4">
-                          <input
-                            type="radio"
-                            name="private"
-                            id="private-y"
-                            class="mr5"
-                            value="Y"
-                            v-model="bbsCn.prvtPstYn"
-                          />
-                          <label for="private-y">사용</label>
-                        </div>
-                        <div class="gd-4">
-                          <input
-                            type="radio"
-                            name="private"
-                            id="private-n"
-                            class="mr5"
-                            value="N"
-                            v-model="bbsCn.prvtPstYn"
-                          />
-                          <label for="private-n">미사용</label>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+                      <label for="notice-y">사용</label>
+                    </div>
+                    <div class="form-check">
+                      <input
+                        type="radio"
+                        name="notice"
+                        id="notice-n"
+                        class="mr5"
+                        value="N"
+                        v-model="bbsCn.ntcPstYn"
+                      />
+                      <label for="notice-n">미사용</label>
+                    </div>
+                  </div>
+                </div>
+                <div class="layout"  ref="four"  v-if="bbsCn.ntcPstYn === 'Y'">
+                  <label for="" class="form-title">공지글 게시기간</label>
+                  <div class="input-group">
+                    <div class="form-control sm cal">
+                      <VueDatePicker
+                        InlineOptions
+                        placeholder="시작일"
+                        locale="ko"
+                        :enable-time-picker="false"
+                        :format="formatDate"
+                        v-model="bbsCn.ntcBgngDt"
+                        @update:model-value="checkDateValidity('ntcBgngDt',$event)"
+                      />
+                      <!-- <input
+                        type="datetime-local"
+                        class="full-input ml0"
+                        v-model="bbsCn.ntcBgngDt"
+                        @change="checkDateValidity('ntcBgngDt', $event)"
+                      /> -->
+                    </div>
+                    <div class="mark">-</div>
+                    <div class="form-control sm cal">
+                      <VueDatePicker
+                        InlineOptions
+                        placeholder="종료일"
+                        locale="ko"
+                        :enable-time-picker="false"
+                        :format="formatDate"
+                        v-model="bbsCn.ntcEndDt"
+                        @update:model-value="checkDateValidity('ntcEndDt',$event)"
+                      />
+                      <!-- <input
+                        type="datetime-local"
+                        class="full-input ml0"
+                        v-model="bbsCn.ntcEndDt"
+                        @change="checkDateValidity('ntcEndDt', $event)"
+                      /> -->
+                    </div>
+                  </div>
+                </div>
+                <div class="layout" ref="five" v-if="bbsMng.prvtPstUseYn === 'Y'">
+                  <label for="" class="form-title">비밀글</label>
+                  <div class="flex align-center no-gutters">
+                    <div class="gd-4">
+                      <input
+                        type="radio"
+                        name="private"
+                        id="private-y"
+                        class="mr5"
+                        value="Y"
+                        v-model="bbsCn.prvtPstYn"
+                      />
+                      <label for="private-y">사용</label>
+                    </div>
+                    <div class="gd-4">
+                      <input
+                        type="radio"
+                        name="private"
+                        id="private-n"
+                        class="mr5"
+                        value="N"
+                        v-model="bbsCn.prvtPstYn"
+                      />
+                      <label for="private-n">미사용</label>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -618,7 +596,26 @@
       const month = ('00' + (date.getMonth() + 1)).slice(-2);
       const day = ('00' + date.getDate()).slice(-2);
       return `${year}-${month}-${day}`;
-    }
+    },
+    updateHeight() {
+      this.$nextTick(() => {
+        const first = this.$refs.first;
+        const two = this.$refs.two;
+        const three = this.$refs.three;
+        const fore = this.$refs.fore;
+        const five = this.$refs.five;
+
+        let total = 0;
+        if (two) total += two.offsetHeight;
+        if (three) total += three.offsetHeight;
+        if (fore) total += fore.offsetHeight;
+        if (five) total += five.offsetHeight;
+
+        if (first) {
+          first.style.height = `calc(100% - ${total}px - 51px)`;
+        }
+      });
+    },
   },
   watch: {
     "bbsCn.ntcPstYn": function (val) {
@@ -631,12 +628,36 @@
           this.bbsCn.ntcEndDt == null ? now : this.bbsCn.ntcEndDt;
       }
     },
+    bbsMng: {
+      handler() {
+        this.$nextTick(() => {
+          this.updateHeight();
+        });
+      },
+      deep: true,
+    },
+    bbsCn: {
+      handler() {
+        this.$nextTick(() => {
+          this.updateHeight();
+        });
+      },
+      deep: true,
+    },
   },
   computed: {},
   components: {
     ckeditorComponent,
   },
-  mounted() {},
+  mounted() {
+    this.updateHeight();
+
+    // 창 크기 변경 시에도 대응하고 싶다면:
+    window.addEventListener('resize', this.updateHeight);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
+  },
 };
 </script>
 <style scoped>
client/views/pages/adm/boardManagement/template/commonTemplate/CommonSelectListOne.vue
--- client/views/pages/adm/boardManagement/template/commonTemplate/CommonSelectListOne.vue
+++ client/views/pages/adm/boardManagement/template/commonTemplate/CommonSelectListOne.vue
@@ -143,130 +143,110 @@
   </template>
   <!-- 관리자 -->
   <template v-else>
-    <div class="content-zone  sch-full">
+    <div
+      class="content-zone"
+      :class="bbsMng.bfrAftrPstUseYn === 'Y' ? 'detail' : 'sch-full'"
+    >
       <div class="content">
         <div class="scroll">
-          <div class="tbl-wrap">
-            <table class="tbl data">
-              <colgroup>
-                <col width="10%" />
-                <col width="90%" />
-              </colgroup>
-              <tbody>
-                <tr class="detail-title">
-                  <td colspan="2">
-                    <p>{{ bbsCn.bbsNm }}</p>
-                    <p><span>등록일시 | {{ bbsCn.regDt }}</span></p>
-                  </td>
-                </tr>
-                <tr>
-                  <td colspan="2">
-                    <div
-                      class="editor5"
-                      style="width: 100%; min-height: 35rem"
-                      v-html="sanitizedContent"
-                    ></div>
-                  </td>
-                </tr>
-                <tr>
-                  <td colspan="2">
-                    <div v-if="fileList.length == 0">
-                      <label>첨부된 파일이 없습니다.</label>
-                    </div>
-
-                    <ul v-else class="pd10">
-                      <li
-                        v-for="(item, idx) in fileList"
-                        :key="idx"
-                        @click="downloadFile(item)">
-                        <p>{{ item.fileNm + "." + item.extnNm }}</p>
-                        <svg-icon type="mdi" :path="downloadFilePath"></svg-icon>
-                      </li>
-                    </ul>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <table v-if="bbsMng.bfrAftrPstUseYn == 'Y'" class="content-navigate">
-              <colgroup>
-                <col width="10%" />
-                <col width="90%" />
-              </colgroup>
-              <tbody>
-                <tr>
-                  <td class="pd10 text-ct">이전글</td>
-                  <td
-                    v-if="prevBbsCn != null"
-                    class="pd10 cursor"
-                    @click="fnMoveBbsCn(prevBbsCn.bbsId)"
-                  >
-                    {{ prevBbsCn.bbsNm }}
-                  </td>
-                  <td v-else class="pd10">이전글이 없습니다</td>
-                </tr>
-                <tr>
-                  <td class="pd10 text-ct">다음글</td>
-                  <td
-                    v-if="nextBbsCn != null"
-                    class="pd10 cursor"
-                    @click="fnMoveBbsCn(nextBbsCn.bbsId)"
-                  >
-                    {{ nextBbsCn.bbsNm }}
-                  </td>
-                  <td v-else class="pd10">다음글이 없습니다</td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              v-if="bbsMng.cmntUseYn == 'Y'"
-              :class="{
-                pd30: true,
-                'comment-zone': pageRole == 'adm',
-                'comment-zone2': pageRole == 'portal',
-              }"
-            >
-              <div class="flex justify-start align-start mb30">
-                <div class="gd-10 pl0">
-                  <textarea
-                    name="InputCmnt"
-                    id="InputCmnt"
-                    style="width: 100%; min-height: 4rem"
-                    v-model="InputCmnt"
-                  ></textarea>
-                </div>
-                <div class="gd-2 pr0">
-                  <button
-                    :class="{
-                      'large-btn comment-btn radius': true,
-                      'blue-btn': pageRole == 'adm',
-                      'green-btn': pageRole == 'portal',
-                    }"
-                    @click="fnInsertCmnt"
-                  >
-                    등록
-                  </button>
-                </div>
+          <div class="form-box h_100">
+            <div class="layout between form-box-title">
+              <div>
+                  <p>{{ bbsCn.bbsNm }}</p>
               </div>
-              <div class="comment-wrap">
-                <template v-if="cmntList.length > 0">
-                  <CommentItem
-                    :comments="cmntList"
-                    :pageAuth="pageAuth"
-                    :pageId="pageId"
-                    @isReply="isReply"
-                  />
-                </template>
-                <template v-else>
-                  <p class="comment-text text-ct data-none">
-                    등록된 댓글이 없습니다.
-                  </p>
-                </template>
+              <span>등록일시 | {{ bbsCn.regDt }}</span>
+            </div>
+            <div class="form-content grid-none" :style="bbsMng.cmntUseYn == 'Y' ? 'min-height: fit-content;' : ''">
+              <div style="min-height: 27rem;">
+                <div
+                  class="editor5"
+                  style="width: 100%;height: 100%;"
+                  v-html="sanitizedContent"
+                ></div>
               </div>
+              <div class="layout border-bottom pb10">
+                  <p class="form-title">첨부파일</p>
+                  <div v-if="fileList.length == 0">
+                    <label>첨부된 파일이 없습니다.</label>
+                  </div>
+                  <ul v-else>
+                    <li
+                      v-for="(item, idx) in fileList"
+                      :key="idx"
+                      @click="downloadFile(item)"
+                      class="layout"
+                    >
+                      <p>{{ item.fileNm + "." + item.extnNm }}</p>
+                      <svg-icon type="mdi" :path="downloadFilePath"></svg-icon>
+                    </li>
+                  </ul>
+                </div>
+                 <!-- 댓글 -->
+                <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box">
+                  <div class="layout w_100 mb30">
+                      <p class="comment-head">댓글</p>
+                      <textarea
+                        class="form-control sm border-none"
+                        placeholder="댓글을 입력하세요."
+                        v-model="InputCmnt"
+                      ></textarea>
+                      <button class="btn sm primary" @click="fnInsertCmnt">
+                        등록
+                      </button>
+                  </div>
+                  <div class="comment-wrap">
+                    <template v-if="cmntList.length > 0">
+                      <CommentItem
+                        :comments="cmntList"
+                        :pageAuth="pageAuth"
+                        :pageId="pageId"
+                        @isReply="isReply"
+                      />
+                    </template>
+                    <template v-else>
+                      <p class="comment-text text-ct data-none">
+                        등록된 댓글이 없습니다.
+                      </p>
+                    </template>
+                  </div>
+                </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+    <div class="navigate-wrap"  v-if="bbsMng.bfrAftrPstUseYn == 'Y'">
+      <table class="content-navigate">
+        <colgroup>
+          <col width="10%" />
+          <col width="90%" />
+        </colgroup>
+        <tbody>
+          <tr>
+            <td class="pd10 text-ct">이전글</td>
+            <td
+              v-if="prevBbsCn != null"
+              class="pd10 cursor"
+              @click="fnMoveBbsCn(prevBbsCn.bbsId)"
+            >
+              {{ prevBbsCn.bbsNm }}
+            </td>
+            <td v-else class="pd10">이전글이 없습니다</td>
+          </tr>
+          <tr>
+            <td class="pd10 text-ct">다음글</td>
+            <td
+              v-if="nextBbsCn != null"
+              class="pd10 cursor"
+              @click="fnMoveBbsCn(nextBbsCn.bbsId)"
+            >
+              {{ nextBbsCn.bbsNm }}
+            </td>
+            <td v-else class="pd10">다음글이 없습니다</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
     <div class="btn-wrap">
         <button class="btn sm tertiary" @click="fnList">
           목록
client/views/pages/adm/boardManagement/template/faqTemplate/FaqInsert.vue
--- client/views/pages/adm/boardManagement/template/faqTemplate/FaqInsert.vue
+++ client/views/pages/adm/boardManagement/template/faqTemplate/FaqInsert.vue
@@ -1,258 +1,165 @@
 <template>
-  <div
-    :class="{
-      content: true,
-      'admin-style overflow-y': pageRole === 'adm',
-      'w1400 pt50 pb50': pageRole === 'portal',
-    }"
-  >
-    <div
-      :class="{
-        'admin-page-title point-font2 mb30': pageRole == 'adm',
-        'page-title point-font mb30': pageRole == 'portal',
-      }"
-    >
-      <p>{{ bbsMng.bbsNm }}</p>
-    </div>
-    <table class="form-table mb30">
-      <colgroup>
-        <col width="10%" />
-        <col width="90%" />
-      </colgroup>
-      <tbody>
-        <tr>
-          <th
-            colspan="4"
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            <span>내용</span>
-          </th>
-        </tr>
-        <tr>
-          <td v-if="ansPageId != null" colspan="4">
-            <textarea
-              name=""
-              id=""
-              class="content"
-              placeholder="답변을 입력하세요."
-              v-model="bbsCn.ansCn"
-            ></textarea>
-          </td>
-          <td v-else colspan="4">
-            <textarea
-              name=""
-              id=""
-              class="content"
-              placeholder="내용을 입력하세요."
-              v-model="bbsCn.bbsCn"
-            ></textarea>
-          </td>
-        </tr>
-        <tr v-if="bbsMng.atchFileUseYn === 'Y'" class="border-top">
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            첨부파일
-          </th>
-          <td colspan="3">
-            <div class="flex align-center">
-              <div class="gd-10">
-                <div>
+  <div class="content-zone sch-full">
+    <div class="content">
+      <div class="scroll">
+        <div class="form-box h_100">
+          <div class="form-box-title">
+            <p>기본정보</p>
+            <p><span>*</span>필수입력</p>
+          </div>
+          <div class="form-content grid-none">
+            <div class="layout" ref="first">
+              <label for="" class="form-title">내용</label>
+              <template v-if="ansPageId != null">
+                <textarea class="form-control area"  placeholder="답변을 입력하세요."   v-model="bbsCn.ansCn" style="height: 100%;"></textarea>
+              </template>
+              <template v-else>
+                <textarea  class="form-control area"  placeholder="답변을 입력하세요."  v-model="bbsCn.bbsCn" style="height: 100%;"></textarea>
+              </template>
+            </div>
+            <div class="layout" ref="two" v-if="bbsMng.atchFileUseYn === 'Y'">
+                <label for="" class="form-title">첨부파일</label>
+                <div class="layout">
+                  <div>
+                    <p  v-if="fileList.length < 1">첨부파일이 없습니다.</p>
+                    <ul v-else class="pl10 pr10 border radius align-center">
+                      <li
+                        v-for="(file, idx) in fileList"
+                        :key="idx"
+                        class="file-wrap"
+                      >
+                        <p v-if="file['fileId'] != null">
+                          {{ file["fileNm"] }}.{{ file["extnNm"] }}
+                          <button
+                            class="del-btn"
+                            @click="fnFileDelete(file, idx)"
+                          >
+                            X
+                          </button>
+                        </p>
+                        <p v-else>
+                          {{ file.name }}
+                          <button
+                            class="del-btn"
+                            @click="fnFileDelete(file, idx)"
+                          >
+                            X
+                          </button>
+                        </p>
+                      </li>
+                    </ul>
+                  </div>
+                  <div>
+                    <label for="file" class="large-btn green-border-btn text-ct"
+                        >파일찾기</label
+                      >
+                      <input
+                        type="file"
+                        id="file"
+                        ref="file"
+                        @change="fnFileInsert"
+                        multiple
+                      />
+                  </div>
+                </div>
+            </div>
+            <div class="layout" ref="three" v-if="bbsMng.ntcUseYn === 'Y'">
+              <label for="" class="form-title">공지글</label>
+              <div class="flex align-center no-gutters">
+                  <div class="gd-4">
+                    <input
+                      type="radio"
+                      name="notice"
+                      id="notice-y"
+                      class="mr5"
+                      value="Y"
+                      v-model="bbsCn.ntcPstYn"
+                    />
+                    <label for="notice-y">사용</label>
+                  </div>
+                  <div class="gd-4">
+                    <input
+                      type="radio"
+                      name="notice"
+                      id="notice-n"
+                      class="mr5"
+                      value="N"
+                      v-model="bbsCn.ntcPstYn"
+                    />
+                    <label for="notice-n">미사용</label>
+                  </div>
+                </div>
+            </div>
+            <div class="layout" ref="four" v-if="bbsCn.ntcPstYn === 'Y'">
+              <label for="" class="form-title">공지글 게시기간</label>
+              <div class="flex align-center no-gutters">
+                  <div class="gd-4">
+                    <input
+                      type="date"
+                      class="full-input ml0"
+                      v-model="bbsCn.ntcBgngDt"
+                      @change="checkDateValidity('ntcBgngDt', $event)"
+                    />
+                  </div>
+                  <div class="pd10">-</div>
+                  <div class="gd-4">
+                    <input
+                      type="date"
+                      class="full-input ml0"
+                      v-model="bbsCn.ntcEndDt"
+                      @change="checkDateValidity('ntcEndDt', $event)"
+                    />
+                  </div>
+                </div>
+            </div>
+            <div class="layout" ref="five" v-if="bbsMng.prvtPstUseYn === 'Y'" >
+              <label class="form-title">비밀글</label>
+              <div class="check-area">
+                <div class="form-check">
                   <input
-                    v-if="fileList.length < 1"
-                    class="upload-name full-input"
-                    placeholder="첨부파일이 없습니다."
-                    disabled
+                    type="radio"
+                    name="private"
+                    id="private-y"
+                    class="mr5"
+                    value="Y"
+                    v-model="bbsCn.prvtPstYn"
                   />
-                  <ul v-else class="pl10 pr10 border radius align-center">
-                    <li
-                      v-for="(file, idx) in fileList"
-                      :key="idx"
-                      class="file-wrap"
-                    >
-                      <p v-if="file['fileId'] != null">
-                        {{ file["fileNm"] }}.{{ file["extnNm"] }}
-                        <button
-                          class="del-btn"
-                          @click="fnFileDelete(file, idx)"
-                        >
-                          X
-                        </button>
-                      </p>
-                      <p v-else>
-                        {{ file.name }}
-                        <button
-                          class="del-btn"
-                          @click="fnFileDelete(file, idx)"
-                        >
-                          X
-                        </button>
-                      </p>
-                    </li>
-                  </ul>
+                  <label for="private-y">사용</label>
+                </div>
+                <div class="form-check">
+                  <input
+                    type="radio"
+                    name="private"
+                    id="private-n"
+                    class="mr5"
+                    value="N"
+                    v-model="bbsCn.prvtPstYn"
+                  />
+                  <label for="private-n">미사용</label>
                 </div>
               </div>
-              <div class="gd-2">
-                <label for="file" class="large-btn green-border-btn text-ct"
-                  >파일찾기</label
-                >
-                <input
-                  type="file"
-                  id="file"
-                  ref="file"
-                  @change="fnFileInsert"
-                  multiple
-                />
-              </div>
             </div>
-          </td>
-        </tr>
-        <tr v-if="bbsMng.ntcUseYn === 'Y'" class="border-top">
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            공지글
-          </th>
-          <td colspan="3">
-            <div class="flex align-center no-gutters">
-              <div class="gd-4">
-                <input
-                  type="radio"
-                  name="notice"
-                  id="notice-y"
-                  class="mr5"
-                  value="Y"
-                  v-model="bbsCn.ntcPstYn"
-                />
-                <label for="notice-y">사용</label>
-              </div>
-              <div class="gd-4">
-                <input
-                  type="radio"
-                  name="notice"
-                  id="notice-n"
-                  class="mr5"
-                  value="N"
-                  v-model="bbsCn.ntcPstYn"
-                />
-                <label for="notice-n">미사용</label>
-              </div>
-            </div>
-          </td>
-        </tr>
-        <tr v-if="bbsCn.ntcPstYn === 'Y'" class="border-top">
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            공지글 게시기간
-          </th>
-          <td colspan="3">
-            <div class="flex align-center no-gutters">
-              <div class="gd-4">
-                <input
-                  type="date"
-                  class="full-input ml0"
-                  v-model="bbsCn.ntcBgngDt"
-                  @change="checkDateValidity('ntcBgngDt', $event)"
-                />
-              </div>
-              <div class="pd10">-</div>
-              <div class="gd-4">
-                <input
-                  type="date"
-                  class="full-input ml0"
-                  v-model="bbsCn.ntcEndDt"
-                  @change="checkDateValidity('ntcEndDt', $event)"
-                />
-              </div>
-            </div>
-          </td>
-        </tr>
-        <tr v-if="bbsMng.prvtPstUseYn === 'Y'" class="border-top">
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            비밀글
-          </th>
-          <td colspan="3">
-            <div class="flex align-center no-gutters">
-              <div class="gd-4">
-                <input
-                  type="radio"
-                  name="private"
-                  id="private-y"
-                  class="mr5"
-                  value="Y"
-                  v-model="bbsCn.prvtPstYn"
-                />
-                <label for="private-y">사용</label>
-              </div>
-              <div class="gd-4">
-                <input
-                  type="radio"
-                  name="private"
-                  id="private-n"
-                  class="mr5"
-                  value="N"
-                  v-model="bbsCn.prvtPstYn"
-                />
-                <label for="private-n">미사용</label>
-              </div>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <div class="flex justify-end align-center no-gutters">
-      <div class="gd-1 mr10">
-        <button
-          v-if="ansPageId == null"
-          :class="{
-            'large-btn': true,
-            'blue-btn': pageRole == 'adm',
-            'green-btn': pageRole == 'portal',
-          }"
-          @click="fnInsert"
-        >
-          {{ bbsCn.bbsId == null ? "등록" : "수정" }}
-        </button>
-        <button
-          v-else
-          class="large-btn blue-btn"
-          :class="{
-            'large-btn': true,
-            'blue-btn': pageRole == 'adm',
-            'green-btn': pageRole == 'portal',
-          }"
-          @click="fnAnsInsert"
-        >
-          {{ bbsCn.ansStts == "N" ? "답변 등록" : "답변 수정" }}
-        </button>
-      </div>
-      <div class="gd-1">
-        <button class="large-btn gray-btn" @click="fnCancel">취소</button>
+          </div>
+        </div>
       </div>
     </div>
+  </div>
+  <div class="btn-wrap">
+      <button
+        v-if="ansPageId == null"
+        class="btn sm main"
+        @click="fnInsert"
+      >
+        {{ bbsCn.bbsId == null ? "등록" : "수정" }}
+      </button>
+      <button
+        v-else
+        class="btn sm main"
+        @click="fnAnsInsert"
+      >
+        {{ bbsCn.ansStts == "N" ? "답변 등록" : "답변 수정" }}
+      </button>
+      <button class="btn sm tertiary" @click="fnCancel">취소</button>
   </div>
 </template>
 
@@ -518,10 +425,59 @@
         path: this.path + "/list.page",
       });
     },
+
+    updateHeight() {
+      this.$nextTick(() => {
+        const first = this.$refs.first;
+        const two = this.$refs.two;
+        const three = this.$refs.three;
+        const fore = this.$refs.fore;
+        const five = this.$refs.five;
+
+        let total = 0;
+        if (two) total += two.offsetHeight;
+        if (three) total += three.offsetHeight;
+        if (fore) total += fore.offsetHeight;
+        if (five) total += five.offsetHeight;
+
+        if (first) {
+          first.style.height = `calc(100% - ${total}px)`;
+        }
+      });
+    },
+
   },
-  watch: {},
-  computed: {},
+  watch: {
+    bbsMng: {
+      handler() {
+        this.$nextTick(() => {
+          this.updateHeight();
+        });
+      },
+      deep: true,
+    },
+    bbsCn: {
+      handler() {
+        this.$nextTick(() => {
+          this.updateHeight();
+        });
+      },
+      deep: true,
+    },
+
+  },
+  computed: {
+
+  },
   components: {},
-  mounted() {},
+  mounted() {
+    this.updateHeight();
+
+    // 창 크기 변경 시에도 대응하고 싶다면:
+    window.addEventListener('resize', this.updateHeight);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
+  },
 };
 </script>
client/views/pages/adm/boardManagement/template/faqTemplate/FaqSelectList.vue
--- client/views/pages/adm/boardManagement/template/faqTemplate/FaqSelectList.vue
+++ client/views/pages/adm/boardManagement/template/faqTemplate/FaqSelectList.vue
@@ -239,10 +239,13 @@
                 <tbody>
                   <template v-for="(item, idx) in list" :key="idx">
                     <tr @click="toggle(idx)">
-                      <td>{{ item.ansStts == "N" ? "미답변" : "답변완료" }}</td>
+                      <td>
+                        <span v-if="item.ansStts == 'N'" class="state red">미답변</span>
+                        <span v-else class="state blue">답변완료</span>
+                      </td>
                       <td>
                         <div class="layout">
-                          <span>Q.</span>
+                          <span class="state question">Q</span>
                           <div v-if="item.prvtPstYn == 'Y'">
                             <!-- {{ item.rgtr == mbrId || roles == 'ROLE_ADMIN' ? item.bbsCn : '[ 비밀글입니다 ]' }} -->
                             <p
@@ -262,30 +265,33 @@
                       <td>{{ item.rgtrNm }}</td>
                       <td>{{ item.regDt }}</td>
                       <td>
-                        <div>
+                        <div class="icon-btn-zone">
                           <template v-if="item.rgtr == mbrId || roles == 'ROLE_ADMIN'">
-                              <button class="btn sm primary"
+                              <button class="btn-ico md ico-update"
                                 @click="fnUpdate(item.bbsId)"
+                                title="수정"
                               >
-                                수정
+                              <span class="sr-only">수정</span>
                               </button>
                               <button
-                                class="btn sm red"
+                                class="btn-ico md ico-del red"
                                 @click="fnDelete(item)"
+                                title="삭제"
                               >
-                                삭제
+                                <span class="sr-only">삭제</span>
                               </button>
                           </template>
-                          <div
+                          <template
                             v-if="roles == 'ROLE_ADMIN' && item.ansCn == null"
                           >
                             <button
-                              class="btn sm btn-chip-outline primary"
+                              class="btn-ico md ico-comment"
                               @click="fnAnswer(item.bbsId)"
+                              title="답변"
                             >
-                              답변
+                            <span class="sr-only">답변</span>
                             </button>
-                          </div>
+                          </template>
                         </div>
                       </td>
                     </tr>
@@ -293,7 +299,7 @@
                       <td></td>
                       <td colspan="3">
                         <div class="layout">
-                          <span>A.</span>
+                          <span class="state answer">A</span>
                           <div v-if="item.prvtPstYn == 'Y'">
                             <!-- {{ item.rgtr == mbrId || roles == 'ROLE_ADMIN' ? item.ansCn : '[ 비밀 답글입니다 ]' }} -->
                             <p
client/views/pages/adm/boardManagement/template/galleryTemplate/GalleryInsert.vue
--- client/views/pages/adm/boardManagement/template/galleryTemplate/GalleryInsert.vue
+++ client/views/pages/adm/boardManagement/template/galleryTemplate/GalleryInsert.vue
@@ -1,152 +1,87 @@
 <template>
-  <div
-    :class="{
-      content: true,
-      'admin-style overflow-y': pageRole === 'adm',
-      'w1400 pt50 pb50': pageRole === 'portal',
-    }"
-  >
-    <div
-      :class="{
-        'admin-page-title point-font2 mb30': pageRole == 'adm',
-        'page-title point-font mb30': pageRole == 'portal',
-      }"
-    >
-      <p>{{ bbsMng.bbsNm }}</p>
-    </div>
-    <table class="form-table mb30">
-      <colgroup>
-        <col width="10%" />
-        <col width="90%" />
-      </colgroup>
-      <tbody>
-        <tr>
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            <span>제목</span>
-          </th>
-          <td>
-            <input
-              type="text"
-              class="full-input"
-              v-model="bbsCn.bbsNm"
-              placeholder="제목을 입력하세요."
-            />
-          </td>
-        </tr>
-        <tr class="border-top">
-          <th
-            colspan="4"
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            <span>내용</span>
-          </th>
-        </tr>
-        <tr>
-          <td colspan="4">
-            <!-- <textarea name="smart" id="smart" style="width:100%"></textarea> -->
-            <ckeditorComponent
-              ref="ckeditor5"
-              :bbsCn.sync="bbsCn"
-            ></ckeditorComponent>
-          </td>
-        </tr>
-        <tr>
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            <span>이미지파일</span>
-          </th>
-          <td colspan="4">
-            <div class="gd-12 pr0">
-              <div class="flex align-center">
-                <div class="gd-2 pl0 pr0">
-                  <label
-                    for="imgFile"
-                    :class="{
-                      'large-btn text-ct': true,
-                      'blue-border-btn': pageRole == 'adm',
-                      'green-border-btn':
-                        pageRole == 'portal',
-                    }"
-                  >
-                    파일찾기
-                  </label>
-                  <input
-                    type="file"
-                    id="imgFile"
-                    ref="imgFile"
-                    @change="fnImgFileInsert"
-                    multiple
-                    accept="image/*"
-                  />
-                </div>
-                <div class="gd-12 pl0">
-                  <div>
-                    <ul v-if="imgFileList.length > 0">
-                      <li
-                        v-for="(file, idx) in imgFileList"
-                        :key="idx"
-                        class="file-wrap pd10 mt10 border radius"
-                      >
-                        <div
-                          v-if="file['fileId'] != null"
-                          class="flex align-center justify-between file-wrap"
-                        >
-                          <p>{{ file["fileNm"] }}.{{ file["extnNm"] }}</p>
-                          <button
-                            class="del-btn"
-                            @click="fnImgFileDelete(file, idx)"
-                          >
-                            X
-                          </button>
-                        </div>
-                        <div
-                          v-else
-                          class="flex align-center justify-between file-wrap"
-                        >
-                          <p>{{ file.name }}</p>
-                          <button
-                            class="del-btn"
-                            @click="fnImgFileDelete(file, idx)"
-                          >
-                            X
-                          </button>
-                        </div>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
+  <div class="content-zone sch-full">
+    <div class="content">
+      <div class="scroll">
+        <div class="form-box h_100">
+          <div class="form-box-title">
+            <p>기본정보</p>
+            <p><span>*</span>필수입력</p>
+          </div>
+          <div class="form-content grid-none">
+            <div class="layout">
+              <label for="" class="form-title">제목</label>
+              <input
+                type="text"
+                class="form-control sm"
+                v-model="bbsCn.bbsNm"
+                placeholder="제목을 입력하세요."
+              />
+            </div>
+            <div class="layout" ref="first">
+              <label for="" class="form-title">내용</label>
+              <div class="w_100 h_100">
+                <ckeditorComponent ref="ckeditor5" :bbsCn.sync="bbsCn"></ckeditorComponent>
               </div>
             </div>
-          </td>
-        </tr>
-        <tr v-if="bbsMng.atchFileUseYn === 'Y'" class="border-top">
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            첨부파일
-          </th>
-          <td colspan="2">
-            <div class="gd-12 pr0">
-              <div class="gd-2 pl0 pr0">
+            <div class="layout">
+              <label for="" class="form-title">이미지 파일</label>
+              <div>
+                <label
+                  for="imgFile"
+                  :class="{
+                    'large-btn text-ct': true,
+                    'blue-border-btn': pageRole == 'adm',
+                    'green-border-btn':
+                      pageRole == 'portal',
+                  }"
+                >
+                  파일찾기
+                </label>
+                <input
+                  type="file"
+                  id="imgFile"
+                  ref="imgFile"
+                  @change="fnImgFileInsert"
+                  multiple
+                  accept="image/*"
+                />
+                <ul v-if="imgFileList.length > 0">
+                  <li
+                    v-for="(file, idx) in imgFileList"
+                    :key="idx"
+                    class="file-wrap"
+                  >
+                    <div
+                      v-if="file['fileId'] != null"
+                      class="layout"
+                    >
+                      <p>{{ file["fileNm"] }}.{{ file["extnNm"] }}</p>
+                      <button
+                        class="del-btn"
+                        @click="fnImgFileDelete(file, idx)"
+                      >
+                        X
+                      </button>
+                    </div>
+                    <div
+                      v-else
+                      class="layout"
+                    >
+                      <p>{{ file.name }}</p>
+                      <button
+                        class="del-btn"
+                        @click="fnImgFileDelete(file, idx)"
+                      >
+                        X
+                      </button>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="layout" ref="two" v-if="bbsMng.atchFileUseYn === 'Y'" >
+              <label for="" class="form-title">첨부파일</label>
+              <div>
                 <label
                   for="file"
                   :class="{
@@ -164,156 +99,138 @@
                   ref="file"
                   @change="fnFileInsert"
                   multiple
-                />
-              </div>
-              <div class="gd-12 pl0" v-if="fileList.length > 0">
-                <ul>
-                  <li
-                    v-for="(file, idx) in fileList"
-                    :key="idx"
-                    class="pd10 mt10 border radius"
-                  >
-                    <div
-                      v-if="file['fileId'] != null"
-                      class="flex align-center justify-between file-wrap"
+                />               
+                <ul v-if="fileList.length > 0">
+                    <li
+                      v-for="(file, idx) in fileList"
+                      :key="idx"
+                      class="pd10 mt10 border radius"
                     >
-                      <p>{{ file["fileNm"] }}.{{ file["extnNm"] }}</p>
-                      <button class="del-btn" @click="fnFileDelete(file, idx)">
-                        X
-                      </button>
-                    </div>
-                    <div
-                      v-else
-                      class="flex align-center justify-between file-wrap"
-                    >
-                      <p>{{ file.name }}</p>
-                      <button class="del-btn" @click="fnFileDelete(file, idx)">
-                        X
-                      </button>
-                    </div>
-                  </li>
+                      <div
+                        v-if="file['fileId'] != null"
+                        class="flex align-center justify-between file-wrap"
+                      >
+                        <p>{{ file["fileNm"] }}.{{ file["extnNm"] }}</p>
+                        <button class="del-btn" @click="fnFileDelete(file, idx)">
+                          X
+                        </button>
+                      </div>
+                      <div
+                        v-else
+                        class="flex align-center justify-between file-wrap"
+                      >
+                        <p>{{ file.name }}</p>
+                        <button class="del-btn" @click="fnFileDelete(file, idx)">
+                          X
+                        </button>
+                      </div>
+                    </li>
                 </ul>
               </div>
             </div>
-          </td>
-        </tr>
-        <tr v-if="bbsMng.ntcUseYn === 'Y'" class="border-top">
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            공지글
-          </th>
-          <td colspan="3">
-            <div class="flex align-center no-gutters">
-              <div class="gd-4">
-                <input
-                  type="radio"
-                  name="notice"
-                  id="y"
-                  class="mr5"
-                  value="Y"
-                  v-model="bbsCn.ntcPstYn"
-                />
-                <label for="y">사용</label>
-              </div>
-              <div class="gd-4">
-                <input
-                  type="radio"
-                  name="notice"
-                  id="n"
-                  class="mr5"
-                  value="N"
-                  v-model="bbsCn.ntcPstYn"
-                />
-                <label for="n">미사용</label>
+            <div class="layout" ref="three" v-if="bbsMng.ntcUseYn === 'Y'">
+              <label for="" class="form-title">공지글</label>
+              <div class="check-area">
+                <div class="form-check">
+                  <input
+                    type="radio"
+                    name="notice"
+                    id="y"
+                    class="mr5"
+                    value="Y"
+                    v-model="bbsCn.ntcPstYn"
+                  />
+                  <label for="y">사용</label>
+                </div>
+                <div class="form-check">
+                  <input
+                    type="radio"
+                    name="notice"
+                    id="n"
+                    class="mr5"
+                    value="N"
+                    v-model="bbsCn.ntcPstYn"
+                  />
+                  <label for="n">미사용</label>
+                </div>
               </div>
             </div>
-          </td>
-        </tr>
-        <tr v-if="bbsCn.ntcPstYn === 'Y'" class="border-top">
-          <th class="point-font2 text-lf">공지글 게시기간</th>
-          <td colspan="3">
-            <div class="flex align-center no-gutters">
-              <div class="gd-4">
-                <input
-                  type="datetime-local"
-                  class="full-input ml0"
-                  v-model="bbsCn.ntcBgngDt"
-                  @change="checkDateValidity('ntcBgngDt', $event)"
-                />
-              </div>
-              <div class="pd10">-</div>
-              <div class="gd-4">
-                <input
-                  type="datetime-local"
-                  class="full-input ml0"
-                  v-model="bbsCn.ntcEndDt"
-                  @change="checkDateValidity('ntcEndDt', $event)"
-                />
+            <div class="layout" ref="four" v-if="bbsCn.ntcPstYn === 'Y'">
+              <label for="" class="form-title" >공지글 게시기간</label>
+              <div class="flex align-center no-gutters">
+                <div class="form-control sm cal">
+                  <VueDatePicker
+                        InlineOptions
+                        placeholder="시작일"
+                        locale="ko"
+                        :enable-time-picker="false"
+                        :format="formatDate"
+                        v-model="bbsCn.ntcBgngDt"
+                        @update:model-value="checkDateValidity('ntcBgngDt',$event)"
+                      />
+                  <!-- <input
+                    type="datetime-local"
+                    class="full-input ml0"
+                    v-model="bbsCn.ntcBgngDt"
+                    @change="checkDateValidity('ntcBgngDt', $event)"
+                  /> -->
+                </div>
+                <div class="mark">-</div>
+                <div class="form-control sm cal">
+                  <VueDatePicker
+                        InlineOptions
+                        placeholder="종료일"
+                        locale="ko"
+                        :enable-time-picker="false"
+                        :format="formatDate"
+                        v-model="bbsCn.ntcEndDt"
+                        @update:model-value="checkDateValidity('ntcEndDt',$event)"
+                      />
+                  <!-- <input
+                    type="datetime-local"
+                    class="full-input ml0"
+                    v-model="bbsCn.ntcEndDt"
+                    @change="checkDateValidity('ntcEndDt', $event)"
+                  /> -->
+                </div>
               </div>
             </div>
-          </td>
-        </tr>
-        <tr v-if="bbsMng.prvtPstUseYn === 'Y'" class="border-top">
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            비밀글
-          </th>
-          <td colspan="3">
-            <div class="flex align-center no-gutters">
-              <div class="gd-4">
-                <input
-                  type="radio"
-                  name="secret"
-                  id="y"
-                  class="mr5"
-                  value="Y"
-                  v-model="bbsCn.prvtPstYn"
-                />
-                <label for="y">사용</label>
-              </div>
-              <div class="gd-4">
-                <input
-                  type="radio"
-                  name="secret"
-                  id="n"
-                  class="mr5"
-                  value="N"
-                  v-model="bbsCn.prvtPstYn"
-                />
-                <label for="n">미사용</label>
+            <div class="layout" ref="five" v-if="bbsMng.prvtPstUseYn === 'Y'">
+              <label for="" class="form-title">비밀글</label>
+              <div class="check-area">
+                <div class="form-check">
+                  <input
+                    type="radio"
+                    name="secret"
+                    id="y"
+                    class="mr5"
+                    value="Y"
+                    v-model="bbsCn.prvtPstYn"
+                  />
+                  <label for="y">사용</label>
+                </div>
+                <div class="form-check">
+                  <input
+                    type="radio"
+                    name="secret"
+                    id="n"
+                    class="mr5"
+                    value="N"
+                    v-model="bbsCn.prvtPstYn"
+                  />
+                  <label for="n">미사용</label>
+                </div>
               </div>
             </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <div class="flex justify-end align-center no-gutters">
-      <div class="gd-1 mr10">
-        <button
-          :class="{
-            'large-btn': true,
-            'blue-btn': pageRole == 'adm',
-            'green-btn': pageRole == 'portal',
-          }"
-          @click="fnInsert"
-        >
-          {{ bbsCn.bbsId == null ? "등록" : "수정" }}
-        </button>
-      </div>
-      <div class="gd-1">
-        <button class="large-btn gray-btn" @click="fnCancel">취소</button>
+          </div>
+        </div>
       </div>
     </div>
+  </div>
+  
+  <div class="btn-wrap">
+    <button class="btn sm main" @click="fnInsert">{{ bbsCn.bbsId == null ? "등록" : "수정" }}</button>
+    <button class="btn sm tertiary" @click="fnCancel">취소</button>
   </div>
 </template>
 
@@ -689,6 +606,32 @@
 
     //     });
     // }
+    // 날짜포맷
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = ('00' + (date.getMonth() + 1)).slice(-2);
+      const day = ('00' + date.getDate()).slice(-2);
+      return `${year}-${month}-${day}`;
+    },
+    updateHeight() {
+      this.$nextTick(() => {
+        const first = this.$refs.first;
+        const two = this.$refs.two;
+        const three = this.$refs.three;
+        const fore = this.$refs.fore;
+        const five = this.$refs.five;
+
+        let total = 0;
+        if (two) total += two.offsetHeight;
+        if (three) total += three.offsetHeight;
+        if (fore) total += fore.offsetHeight;
+        if (five) total += five.offsetHeight;
+
+        if (first) {
+          first.style.height = `calc(100% - ${total}px - 51px - 48px)`;
+        }
+      });
+    },
   },
   watch: {
     "bbsCn.ntcPstYn": function (val) {
@@ -701,11 +644,35 @@
           this.bbsCn.ntcEndDt == null ? now : this.bbsCn.ntcEndDt;
       }
     },
+    bbsMng: {
+      handler() {
+        this.$nextTick(() => {
+          this.updateHeight();
+        });
+      },
+      deep: true,
+    },
+    bbsCn: {
+      handler() {
+        this.$nextTick(() => {
+          this.updateHeight();
+        });
+      },
+      deep: true,
+    },
   },
   computed: {},
   components: {
     ckeditorComponent,
   },
-  mounted() {},
+  mounted() {
+    this.updateHeight();
+
+    // 창 크기 변경 시에도 대응하고 싶다면:
+    window.addEventListener('resize', this.updateHeight);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
+  },
 };
 </script>
client/views/pages/adm/boardManagement/template/galleryTemplate/GallerySelectListOne.vue
--- client/views/pages/adm/boardManagement/template/galleryTemplate/GallerySelectListOne.vue
+++ client/views/pages/adm/boardManagement/template/galleryTemplate/GallerySelectListOne.vue
@@ -1,61 +1,64 @@
 <template>
   <template v-if="pageRole === 'portal'"></template>
   <template v-else>
-      <div class="content-zone">
+    <div
+      class="content-zone"
+      :class="bbsMng.bfrAftrPstUseYn === 'Y' ? 'detail' : 'sch-full'"
+    >
         <div class="content">
           <div class="scroll">
-            <div class="form-box">
-              <div class="layout between">
-                <div class="form-box-title">
+            <div class="form-box h_100">
+              <div class="layout between form-box-title">
+                <div>
                   <p>{{ bbsCn.bbsNm }}</p>
                 </div>
                 <span>등록일시 | {{ bbsCn.regDt }}</span>
               </div>
-              <div class="form-content">
-                <div class="grid-column">
-                  <swiper-container
-                    class="mySwiper mb30"
-                    thumbs-swiper=".mySwiper2"
-                    space-between="10"
-                    navigation="true"
-                  >
-                    <swiper-slide
-                      v-for="(item, index) in imgFileList"
-                      :key="index"
-                    >
-                      <img :src="item.absltPath" />
-                    </swiper-slide>
-                  </swiper-container>
+              <div class="form-content grid-none " style="max-height: auto;">
+                <div>
+                    <div class="gallery-wrap">
+                      <swiper-container
+                        class="mySwiper"
+                        thumbs-swiper=".mySwiper2"
+                        space-between="10"
+                        navigation="true"
+                      >
+                        <swiper-slide
+                          v-for="(item, index) in imgFileList"
+                          :key="index"
+                        >
+                          <img :src="item.absltPath" />
+                        </swiper-slide>
+                      </swiper-container>
 
-                  <swiper-container
-                    class="mySwiper2"
-                    space-between="10"
-                    slides-per-view="4"
-                    free-mode="true"
-                    watch-slides-progress="true"
-                  >
-                    <swiper-slide
-                      v-for="(item, index) in imgFileList"
-                      :key="index"
-                    >
-                      <img :src="item.absltPath" class="radius" />
-                    </swiper-slide>
-                  </swiper-container>
-                  <div>
+                      <swiper-container
+                        class="mySwiper2"
+                        space-between="10"
+                        slides-per-view="4"
+                        free-mode="true"
+                        watch-slides-progress="true"
+                      >
+                        <swiper-slide
+                          v-for="(item, index) in imgFileList"
+                          :key="index"
+                        >
+                          <img :src="item.absltPath" class="radius" />
+                        </swiper-slide>
+                      </swiper-container>
+                    </div>
                     <div
                       class="editor5"
-                      style="width: 100%; min-height: 35rem"
+                      style="width: 100%;"
                       v-html="sanitizedContent"
                     >
                     </div>
-                  </div>
                 </div>
-                <div class="grid-column">
-                  <p>첨부파일</p>
+                <div class="layout border-bottom">
+                  <p class="form-title">첨부파일</p>
                   <div v-if="fileList.length == 0">
                     <label>첨부된 파일이 없습니다.</label>
                   </div>
-                  <ul v-else class="pd10">
+                  <ul v-else>
                     <li
                       v-for="(item, idx) in fileList"
                       :key="idx"
@@ -67,109 +70,86 @@
                     </li>
                   </ul>
                 </div>
-              </div>
-            </div>
-            <div
-              v-if="bbsMng.cmntUseYn == 'Y'"
-              :class="{
-                pd30: true,
-                'comment-zone': pageRole == 'adm',
-                'comment-zone2': pageRole == 'portal',
-              }"
-            >
-              <div class="flex justify-start align-start mb30">
-                <div class="gd-10 pl0">
-                  <textarea
-                    name=""
-                    id=""
-                    style="width: 100%; min-height: 4rem"
-                    v-model="InputCmnt"
-                  ></textarea>
+                <!-- 댓글 -->
+                <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box">
+                  <div class="layout w_100 mb30">
+                      <p class="comment-head">댓글</p>
+                      <textarea
+                        class="form-control sm border-none"
+                        placeholder="댓글을 입력하세요."
+                        v-model="InputCmnt"
+                      ></textarea>
+                      <button class="btn sm primary" @click="fnInsertCmnt">
+                        등록
+                      </button>
+                  </div>
+                  <div class="comment-wrap">
+                    <template v-if="cmntList.length > 0">
+                      <CommentItem
+                        :comments="cmntList"
+                        :pageAuth="pageAuth"
+                        :pageId="pageId"
+                        @isReply="isReply"
+                      />
+                    </template>
+                    <template v-else>
+                      <p class="comment-text text-ct data-none">
+                        등록된 댓글이 없습니다.
+                      </p>
+                    </template>
+                  </div>
                 </div>
-                <div class="gd-2 pr0">
-                  <button
-                    :class="{
-                      'large-btn comment-btn radius': true,
-                      'blue-btn': pageRole == 'adm',
-                      'green-btn': pageRole == 'portal',
-                    }"
-                    @click="fnInsertCmnt"
-                  >
-                    등록
-                  </button>
-                </div>
-              </div>
-              <div class="comment-wrap">
-                <template v-if="cmntList.length > 0">
-                  <CommentItem
-                    :comments="cmntList"
-                    :pageAuth="pageAuth"
-                    :pageId="pageId"
-                    @isReply="isReply"
-                  />
-                </template>
-                <template v-else>
-                  <p class="comment-text text-ct data-none">
-                    등록된 댓글이 없습니다.
-                  </p>
-                </template>
               </div>
             </div>
           </div>
         </div>
       </div>
       <!-- 다음글 이전글 -->
-      <div>
-        <table v-if="bbsMng.bfrAftrPstUseYn == 'Y'" class="content-navigate mb30">
+      <div class="navigate-wrap" v-if="bbsMng.bfrAftrPstUseYn == 'Y'">
+        <table  class="content-navigate">
           <colgroup>
             <col width="10%" />
             <col width="90%" />
           </colgroup>
           <tbody>
             <tr>
-              <td class="pd10 text-ct">이전글</td>
+              <td>이전글</td>
               <td
                 v-if="prevBbsCn != null"
-                class="pd10 cursor"
+                class="cursor"
                 @click="fnMoveBbsCn(prevBbsCn.bbsId)"
               >
                 {{ prevBbsCn.bbsNm }}
               </td>
-              <td v-else class="pd10">이전글이 없습니다</td>
+              <td v-else>이전글이 없습니다</td>
             </tr>
             <tr>
-              <td class="pd10 text-ct">다음글</td>
+              <td>다음글</td>
               <td
                 v-if="nextBbsCn != null"
-                class="pd10 cursor"
+                class=" cursor"
                 @click="fnMoveBbsCn(nextBbsCn.bbsId)"
               >
                 {{ nextBbsCn.bbsNm }}
               </td>
-              <td v-else class="pd10">다음글이 없습니다</td>
+              <td v-else>다음글이 없습니다</td>
             </tr>
           </tbody>
         </table>
       </div>
       <div class="btn-wrap">
-            <button class="btn sm" @click="fnList">
+            <button class="btn sm tertiary" @click="fnList">
               목록
             </button>
           <template v-if="pageAuth.mdfcnAuthrt == 'Y' || mbrId == bbsCn.rgtr">
-            <button
-              :class="{
-                'large-btn': true,
-                'blue-border-btn': pageRole == 'adm',
-                'green-border-btn':
-                  pageRole == 'portal',
-              }"
+            <button class="btn sm main"
               @click="fnUpdate"
             >
               수정
             </button>
           </template>
           <template v-if="pageAuth.delAuthrt == 'Y' || mbrId == bbsCn.rgtr">
-            <button class="large-btn red-border-btn" @click="fnDelete">
+            <button class="btn sm red" @click="fnDelete">
               삭제
             </button>
           </template>
@@ -430,7 +410,7 @@
 };
 </script>
 
-<style scoped>
+<!-- <style scoped>
 swiper-container {
   width: 100%;
   height: 100%;
@@ -493,4 +473,4 @@
   height: 100%;
   object-fit: cover;
 }
-</style>
+</style> -->
client/views/pages/adm/boardManagement/template/videoTemplate/VideoInsert.vue
--- client/views/pages/adm/boardManagement/template/videoTemplate/VideoInsert.vue
+++ client/views/pages/adm/boardManagement/template/videoTemplate/VideoInsert.vue
@@ -1,168 +1,99 @@
 <template>
-  <div
-    :class="{
-      content: true,
-      'admin-style overflow-y': pageRole === 'adm',
-      'w1400 pt50 pb50': pageRole === 'portal',
-    }"
-  >
-    <div
-      :class="{
-        'admin-page-title point-font2 mb30': pageRole == 'adm',
-        'page-title point-font mb30': pageRole == 'portal',
-      }"
-    >
-      <p>{{ bbsMng.bbsNm }}</p>
-    </div>
-    <table class="form-table mb30">
-      <colgroup>
-        <col width="10%" />
-        <col width="90%" />
-      </colgroup>
-      <tbody>
-        <tr>
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            <span>제목</span>
-          </th>
-          <td>
-            <input
-              type="text"
-              class="full-input"
-              placeholder="제목을 입력하세요."
-              v-model="bbsCn.bbsNm"
-            />
-          </td>
-        </tr>
-        <tr class="border-top">
-          <th
-            colspan="4"
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            <span>내용</span>
-          </th>
-        </tr>
-        <tr>
-          <td colspan="4">
-            <!-- <textarea name="smart" id="smart" style="width:100%"></textarea>-->
-            <ckeditorComponent
-              ref="ckeditor5"
-              :bbsCn.sync="bbsCn"
-            ></ckeditorComponent>
-          </td>
-        </tr>
-        <tr>
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            <span>영상 URL</span>
-          </th>
-          <td colspan="4">
-            <div class="gd-6">
+  <div class="content-zone sch-full">
+    <div class="content">
+      <div class="scroll">
+        <div class="form-box h_100">
+          <div class="form-box-title">
+            <p>기본정보</p>
+            <p><span>*</span>필수입력</p>
+          </div>
+          <div class="form-content grid-none">
+            <div class="layout">
+              <label for="" class="form-title">제목</label>
               <input
                 type="text"
-                class="full-input"
-                placeholder="youtube URL을 입력해주세요."
-                v-model="bbsCn.vdoUrl"
+                class="form-control sm"
+                v-model="bbsCn.bbsNm"
+                placeholder="제목을 입력하세요."
               />
             </div>
-          </td>
-        </tr>
-        <tr>
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            썸네일
-          </th>
-          <td colspan="2">
-            <div class="gd-12 pr0">
-              <div class="gd-2 pl0 pr0">
-                <label
-                  for="thumbnail"
-                  :class="{
-                    'large-btn text-ct': true,
-                    'blue-border-btn': pageRole == 'adm',
-                    'green-border-btn':
-                      pageRole == 'portal',
-                  }"
-                >
-                  파일찾기
-                </label>
-                <input
-                  type="file"
-                  id="thumbnail"
-                  ref="thumbnail"
-                  @change="fnThumbnailInsert"
-                  accept="image/*"
-                />
-              </div>
-              <div class="gd-12 pl0" v-if="imgFileList.length > 0">
-                <ul>
-                  <li
-                    v-for="(file, index) in imgFileList"
-                    :key="index"
-                    class="pd10 mt10 border radius"
-                  >
-                    <div
-                      v-if="file['fileId'] != null"
-                      class="flex align-center justify-between file-wrap"
-                    >
-                      <p>{{ file["fileNm"] }}.{{ file["extnNm"] }}</p>
-                      <button
-                        class="del-btn"
-                        @click="fnImgFileDelete(file, index)"
-                      >
-                        X
-                      </button>
-                    </div>
-                    <div
-                      v-else
-                      class="flex align-center justify-between file-wrap"
-                    >
-                      <p>{{ file.name }}</p>
-                      <button
-                        class="del-btn"
-                        @click="fnImgFileDelete(file, index)"
-                      >
-                        X
-                      </button>
-                    </div>
-                  </li>
-                </ul>
+            <div class="layout" ref="first">
+              <label for="" class="form-title">내용</label>
+              <div class="w_100 h_100">
+                <ckeditorComponent ref="ckeditor5" :bbsCn.sync="bbsCn"></ckeditorComponent>
               </div>
             </div>
-          </td>
-        </tr>
-        <tr v-if="bbsMng.atchFileUseYn === 'Y'" class="border-top">
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            첨부파일
-          </th>
-          <td colspan="2">
-            <div class="gd-12 pr0">
-              <div class="gd-2 pl0 pr0">
+            <div class="layout">
+              <label for="" class="form-title">영상 URL</label>
+              <input
+                type="text"
+                class="form-control sm"
+                v-model="bbsCn.vdoUrl"
+                placeholder="youtube URL을 입력하세요."
+              />
+            </div>
+            <div class="layout">
+              <label for="" class="form-title">썸네일</label>
+              <div>
+                <div class="gd-2 pl0 pr0">
+                  <label
+                    for="thumbnail"
+                    :class="{
+                      'large-btn text-ct': true,
+                      'blue-border-btn': pageRole == 'adm',
+                      'green-border-btn':
+                        pageRole == 'portal',
+                    }"
+                  >
+                    파일찾기
+                  </label>
+                  <input
+                    type="file"
+                    id="thumbnail"
+                    ref="thumbnail"
+                    @change="fnThumbnailInsert"
+                    accept="image/*"
+                  />
+                </div>
+                <div class="gd-12 pl0" v-if="imgFileList.length > 0">
+                  <ul>
+                    <li
+                      v-for="(file, index) in imgFileList"
+                      :key="index"
+                      class="pd10 mt10 border radius"
+                    >
+                      <div
+                        v-if="file['fileId'] != null"
+                        class="flex align-center justify-between file-wrap"
+                      >
+                        <p>{{ file["fileNm"] }}.{{ file["extnNm"] }}</p>
+                        <button
+                          class="del-btn"
+                          @click="fnImgFileDelete(file, index)"
+                        >
+                          X
+                        </button>
+                      </div>
+                      <div
+                        v-else
+                        class="flex align-center justify-between file-wrap"
+                      >
+                        <p>{{ file.name }}</p>
+                        <button
+                          class="del-btn"
+                          @click="fnImgFileDelete(file, index)"
+                        >
+                          X
+                        </button>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="layout" ref="two" v-if="bbsMng.atchFileUseYn === 'Y'" >
+              <label for="" class="form-title">첨부파일</label>
+              <div>
                 <label
                   for="file"
                   :class="{
@@ -180,164 +111,445 @@
                   ref="file"
                   @change="fnFileInsert"
                   multiple
-                />
-              </div>
-              <div class="gd-12 pl0" v-if="fileList.length > 0">
-                <ul>
-                  <li
-                    v-for="(file, idx) in fileList"
-                    :key="idx"
-                    class="pd10 mt10 border radius"
-                  >
-                    <div
-                      v-if="file['fileId'] != null"
-                      class="flex align-center justify-between file-wrap file-wrap"
+                />               
+                <ul v-if="fileList.length > 0">
+                    <li
+                      v-for="(file, idx) in fileList"
+                      :key="idx"
+                      class="pd10 mt10 border radius"
                     >
-                      <p>{{ file["fileNm"] }}.{{ file["extnNm"] }}</p>
-                      <button class="del-btn" @click="fnFileDelete(file, idx)">
-                        X
-                      </button>
-                    </div>
-                    <div
-                      v-else
-                      class="flex align-center justify-between file-wrap file-wrap"
-                    >
-                      <p>{{ file.name }}</p>
-                      <button class="del-btn" @click="fnFileDelete(file, idx)">
-                        X
-                      </button>
-                    </div>
-                  </li>
+                      <div
+                        v-if="file['fileId'] != null"
+                        class="flex align-center justify-between file-wrap"
+                      >
+                        <p>{{ file["fileNm"] }}.{{ file["extnNm"] }}</p>
+                        <button class="del-btn" @click="fnFileDelete(file, idx)">
+                          X
+                        </button>
+                      </div>
+                      <div
+                        v-else
+                        class="flex align-center justify-between file-wrap"
+                      >
+                        <p>{{ file.name }}</p>
+                        <button class="del-btn" @click="fnFileDelete(file, idx)">
+                          X
+                        </button>
+                      </div>
+                    </li>
                 </ul>
               </div>
             </div>
-          </td>
-        </tr>
-        <tr v-if="bbsMng.ntcUseYn === 'Y'" class="border-top">
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            공지글
-          </th>
-          <td colspan="3">
-            <div class="flex align-center no-gutters">
-              <div class="gd-4">
-                <input
-                  type="radio"
-                  name="notice"
-                  id="y"
-                  class="mr5"
-                  value="Y"
-                  v-model="bbsCn.ntcPstYn"
-                />
-                <label for="y">사용</label>
-              </div>
-              <div class="gd-4">
-                <input
-                  type="radio"
-                  name="notice"
-                  id="n"
-                  class="mr5"
-                  value="N"
-                  v-model="bbsCn.ntcPstYn"
-                />
-                <label for="n">미사용</label>
+            <div class="layout" ref="three" v-if="bbsMng.ntcUseYn === 'Y'">
+              <label for="" class="form-title">공지글</label>
+              <div class="check-area">
+                <div class="form-check">
+                  <input
+                    type="radio"
+                    name="notice"
+                    id="y"
+                    class="mr5"
+                    value="Y"
+                    v-model="bbsCn.ntcPstYn"
+                  />
+                  <label for="y">사용</label>
+                </div>
+                <div class="form-check">
+                  <input
+                    type="radio"
+                    name="notice"
+                    id="n"
+                    class="mr5"
+                    value="N"
+                    v-model="bbsCn.ntcPstYn"
+                  />
+                  <label for="n">미사용</label>
+                </div>
               </div>
             </div>
-          </td>
-        </tr>
-        <tr v-if="bbsCn.ntcPstYn === 'Y'" class="border-top">
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            공지글 게시기간
-          </th>
-          <td colspan="3">
-            <div class="flex align-center no-gutters">
-              <div class="gd-4">
-                <input
-                  type="datetime-local"
-                  class="full-input ml0"
-                  v-model="bbsCn.ntcBgngDt"
-                  @change="checkDateValidity('ntcBgngDt', $event)"
-                />
-              </div>
-              <div class="pd10">-</div>
-              <div class="gd-4">
-                <input
-                  type="datetime-local"
-                  class="full-input ml0"
-                  v-model="bbsCn.ntcEndDt"
-                  @change="checkDateValidity('ntcEndDt', $event)"
-                />
+            <div class="layout" ref="four" v-if="bbsCn.ntcPstYn === 'Y'">
+              <label for="" class="form-title" >공지글 게시기간</label>
+              <div class="flex align-center no-gutters">
+                <div class="form-control sm cal">
+                  <VueDatePicker
+                        InlineOptions
+                        placeholder="시작일"
+                        locale="ko"
+                        :enable-time-picker="false"
+                        :format="formatDate"
+                        v-model="bbsCn.ntcBgngDt"
+                        @update:model-value="checkDateValidity('ntcBgngDt',$event)"
+                      />
+                  <!-- <input
+                    type="datetime-local"
+                    class="full-input ml0"
+                    v-model="bbsCn.ntcBgngDt"
+                    @change="checkDateValidity('ntcBgngDt', $event)"
+                  /> -->
+                </div>
+                <div class="mark">-</div>
+                <div class="form-control sm cal">
+                  <VueDatePicker
+                        InlineOptions
+                        placeholder="종료일"
+                        locale="ko"
+                        :enable-time-picker="false"
+                        :format="formatDate"
+                        v-model="bbsCn.ntcEndDt"
+                        @update:model-value="checkDateValidity('ntcEndDt',$event)"
+                      />
+                  <!-- <input
+                    type="datetime-local"
+                    class="full-input ml0"
+                    v-model="bbsCn.ntcEndDt"
+                    @change="checkDateValidity('ntcEndDt', $event)"
+                  /> -->
+                </div>
               </div>
             </div>
-          </td>
-        </tr>
-        <tr v-if="bbsMng.prvtPstUseYn === 'Y'" class="border-top">
-          <th
-            :class="{
-              'text-lf': true,
-              'point-font2': pageRole == 'adm',
-              'point-font': pageRole == 'portal',
-            }"
-          >
-            비밀글
-          </th>
-          <td colspan="3">
-            <div class="flex align-center no-gutters">
-              <div class="gd-4">
-                <input
-                  type="radio"
-                  name="secret"
-                  id="y"
-                  class="mr5"
-                  value="Y"
-                  v-model="bbsCn.prvtPstYn"
-                />
-                <label for="y">사용</label>
-              </div>
-              <div class="gd-4">
-                <input
-                  type="radio"
-                  name="secret"
-                  id="n"
-                  class="mr5"
-                  value="N"
-                  v-model="bbsCn.prvtPstYn"
-                />
-                <label for="n">미사용</label>
+            <div class="layout" ref="five" v-if="bbsMng.prvtPstUseYn === 'Y'">
+              <label for="" class="form-title">비밀글</label>
+              <div class="check-area">
+                <div class="form-check">
+                  <input
+                    type="radio"
+                    name="secret"
+                    id="y"
+                    class="mr5"
+                    value="Y"
+                    v-model="bbsCn.prvtPstYn"
+                  />
+                  <label for="y">사용</label>
+                </div>
+                <div class="form-check">
+                  <input
+                    type="radio"
+                    name="secret"
+                    id="n"
+                    class="mr5"
+                    value="N"
+                    v-model="bbsCn.prvtPstYn"
+                  />
+                  <label for="n">미사용</label>
+                </div>
               </div>
             </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <div class="flex justify-end align-center no-gutters">
-      <div class="gd-1 mr10">
-        <button
-          :class="{
-            'large-btn': true,
-            'blue-btn': pageRole == 'adm',
-            'green-btn': pageRole == 'portal',
-          }"
-          @click="fnInsert"
-        >
-          {{ bbsCn.bbsId == null ? "등록" : "수정" }}
-        </button>
-      </div>
-      <div class="gd-1">
-        <button class="large-btn gray-btn" @click="fnCancel">취소</button>
+
+
+            <!-- <table class="form-table mb30">
+              <colgroup>
+                <col width="10%" />
+                <col width="90%" />
+              </colgroup>
+              <tbody>
+                <tr>
+                  <th
+                    :class="{
+                      'text-lf': true,
+                      'point-font2': pageRole == 'adm',
+                      'point-font': pageRole == 'portal',
+                    }"
+                  >
+                    <span>제목</span>
+                  </th>
+                  <td>
+                    <input
+                      type="text"
+                      class="full-input"
+                      placeholder="제목을 입력하세요."
+                      v-model="bbsCn.bbsNm"
+                    />
+                  </td>
+                </tr>
+                <tr class="border-top">
+                  <th
+                    colspan="4"
+                    :class="{
+                      'text-lf': true,
+                      'point-font2': pageRole == 'adm',
+                      'point-font': pageRole == 'portal',
+                    }"
+                  >
+                    <span>내용</span>
+                  </th>
+                </tr>
+                <tr>
+                  <td colspan="4">
+                    <ckeditorComponent
+                      ref="ckeditor5"
+                      :bbsCn.sync="bbsCn"
+                    ></ckeditorComponent>
+                  </td>
+                </tr>
+                <tr>
+                  <th
+                    :class="{
+                      'text-lf': true,
+                      'point-font2': pageRole == 'adm',
+                      'point-font': pageRole == 'portal',
+                    }"
+                  >
+                    <span>영상 URL</span>
+                  </th>
+                  <td colspan="4">
+                    <div class="gd-6">
+                      <input
+                        type="text"
+                        class="full-input"
+                        placeholder="youtube URL을 입력해주세요."
+                        v-model="bbsCn.vdoUrl"
+                      />
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th
+                    :class="{
+                      'text-lf': true,
+                      'point-font2': pageRole == 'adm',
+                      'point-font': pageRole == 'portal',
+                    }"
+                  >
+                    썸네일
+                  </th>
+                  <td colspan="2">
+                    <div class="gd-12 pr0">
+                      <div class="gd-2 pl0 pr0">
+                        <label
+                          for="thumbnail"
+                          :class="{
+                            'large-btn text-ct': true,
+                            'blue-border-btn': pageRole == 'adm',
+                            'green-border-btn':
+                              pageRole == 'portal',
+                          }"
+                        >
+                          파일찾기
+                        </label>
+                        <input
+                          type="file"
+                          id="thumbnail"
+                          ref="thumbnail"
+                          @change="fnThumbnailInsert"
+                          accept="image/*"
+                        />
+                      </div>
+                      <div class="gd-12 pl0" v-if="imgFileList.length > 0">
+                        <ul>
+                          <li
+                            v-for="(file, index) in imgFileList"
+                            :key="index"
+                            class="pd10 mt10 border radius"
+                          >
+                            <div
+                              v-if="file['fileId'] != null"
+                              class="flex align-center justify-between file-wrap"
+                            >
+                              <p>{{ file["fileNm"] }}.{{ file["extnNm"] }}</p>
+                              <button
+                                class="del-btn"
+                                @click="fnImgFileDelete(file, index)"
+                              >
+                                X
+                              </button>
+                            </div>
+                            <div
+                              v-else
+                              class="flex align-center justify-between file-wrap"
+                            >
+                              <p>{{ file.name }}</p>
+                              <button
+                                class="del-btn"
+                                @click="fnImgFileDelete(file, index)"
+                              >
+                                X
+                              </button>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <tr v-if="bbsMng.atchFileUseYn === 'Y'" class="border-top">
+                  <th
+                    :class="{
+                      'text-lf': true,
+                      'point-font2': pageRole == 'adm',
+                      'point-font': pageRole == 'portal',
+                    }"
+                  >
+                    첨부파일
+                  </th>
+                  <td colspan="2">
+                    <div class="gd-12 pr0">
+                      <div class="gd-2 pl0 pr0">
+                        <label
+                          for="file"
+                          :class="{
+                            'large-btn text-ct': true,
+                            'blue-border-btn': pageRole == 'adm',
+                            'green-border-btn':
+                              pageRole == 'portal',
+                          }"
+                        >
+                          파일찾기
+                        </label>
+                        <input
+                          type="file"
+                          id="file"
+                          ref="file"
+                          @change="fnFileInsert"
+                          multiple
+                        />
+                      </div>
+                      <div class="gd-12 pl0" v-if="fileList.length > 0">
+                        <ul>
+                          <li
+                            v-for="(file, idx) in fileList"
+                            :key="idx"
+                            class="pd10 mt10 border radius"
+                          >
+                            <div
+                              v-if="file['fileId'] != null"
+                              class="flex align-center justify-between file-wrap file-wrap"
+                            >
+                              <p>{{ file["fileNm"] }}.{{ file["extnNm"] }}</p>
+                              <button class="del-btn" @click="fnFileDelete(file, idx)">
+                                X
+                              </button>
+                            </div>
+                            <div
+                              v-else
+                              class="flex align-center justify-between file-wrap file-wrap"
+                            >
+                              <p>{{ file.name }}</p>
+                              <button class="del-btn" @click="fnFileDelete(file, idx)">
+                                X
+                              </button>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <tr v-if="bbsMng.ntcUseYn === 'Y'" class="border-top">
+                  <th
+                    :class="{
+                      'text-lf': true,
+                      'point-font2': pageRole == 'adm',
+                      'point-font': pageRole == 'portal',
+                    }"
+                  >
+                    공지글
+                  </th>
+                  <td colspan="3">
+                    <div class="flex align-center no-gutters">
+                      <div class="gd-4">
+                        <input
+                          type="radio"
+                          name="notice"
+                          id="y"
+                          class="mr5"
+                          value="Y"
+                          v-model="bbsCn.ntcPstYn"
+                        />
+                        <label for="y">사용</label>
+                      </div>
+                      <div class="gd-4">
+                        <input
+                          type="radio"
+                          name="notice"
+                          id="n"
+                          class="mr5"
+                          value="N"
+                          v-model="bbsCn.ntcPstYn"
+                        />
+                        <label for="n">미사용</label>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <tr v-if="bbsCn.ntcPstYn === 'Y'" class="border-top">
+                  <th
+                    :class="{
+                      'text-lf': true,
+                      'point-font2': pageRole == 'adm',
+                      'point-font': pageRole == 'portal',
+                    }"
+                  >
+                    공지글 게시기간
+                  </th>
+                  <td colspan="3">
+                    <div class="flex align-center no-gutters">
+                      <div class="gd-4">
+                        <input
+                          type="datetime-local"
+                          class="full-input ml0"
+                          v-model="bbsCn.ntcBgngDt"
+                          @change="checkDateValidity('ntcBgngDt', $event)"
+                        />
+                      </div>
+                      <div class="pd10">-</div>
+                      <div class="gd-4">
+                        <input
+                          type="datetime-local"
+                          class="full-input ml0"
+                          v-model="bbsCn.ntcEndDt"
+                          @change="checkDateValidity('ntcEndDt', $event)"
+                        />
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <tr v-if="bbsMng.prvtPstUseYn === 'Y'" class="border-top">
+                  <th
+                    :class="{
+                      'text-lf': true,
+                      'point-font2': pageRole == 'adm',
+                      'point-font': pageRole == 'portal',
+                    }"
+                  >
+                    비밀글
+                  </th>
+                  <td colspan="3">
+                    <div class="flex align-center no-gutters">
+                      <div class="gd-4">
+                        <input
+                          type="radio"
+                          name="secret"
+                          id="y"
+                          class="mr5"
+                          value="Y"
+                          v-model="bbsCn.prvtPstYn"
+                        />
+                        <label for="y">사용</label>
+                      </div>
+                      <div class="gd-4">
+                        <input
+                          type="radio"
+                          name="secret"
+                          id="n"
+                          class="mr5"
+                          value="N"
+                          v-model="bbsCn.prvtPstYn"
+                        />
+                        <label for="n">미사용</label>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table> -->
+          </div>
+        </div>
       </div>
     </div>
+  </div>
+  <div class="btn-wrap">
+      <button class="btn sm main" @click="fnInsert">{{ bbsCn.bbsId == null ? "등록" : "수정" }}</button>
+      <button class="btn sm tertiary" @click="fnCancel">취소</button>
   </div>
 </template>
 
@@ -721,6 +933,32 @@
 
     //     });
     // }
+    // 날짜포맷
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = ('00' + (date.getMonth() + 1)).slice(-2);
+      const day = ('00' + date.getDate()).slice(-2);
+      return `${year}-${month}-${day}`;
+    },
+    updateHeight() {
+      this.$nextTick(() => {
+        const first = this.$refs.first;
+        const two = this.$refs.two;
+        const three = this.$refs.three;
+        const fore = this.$refs.fore;
+        const five = this.$refs.five;
+
+        let total = 0;
+        if (two) total += two.offsetHeight;
+        if (three) total += three.offsetHeight;
+        if (fore) total += fore.offsetHeight;
+        if (five) total += five.offsetHeight;
+
+        if (first) {
+          first.style.height = `calc(100% - ${total}px - 61px - 48px - 48px)`;
+        }
+      });
+    },
   },
   watch: {
     youtubeUrl() {
@@ -736,11 +974,35 @@
           this.bbsCn.ntcEndDt == null ? now : this.bbsCn.ntcEndDt;
       }
     },
+    bbsMng: {
+      handler() {
+        this.$nextTick(() => {
+          this.updateHeight();
+        });
+      },
+      deep: true,
+    },
+    bbsCn: {
+      handler() {
+        this.$nextTick(() => {
+          this.updateHeight();
+        });
+      },
+      deep: true,
+    },
   },
   computed: {},
   components: {
     ckeditorComponent,
   },
-  mounted() {},
+  mounted() {
+    this.updateHeight();
+
+    // 창 크기 변경 시에도 대응하고 싶다면:
+    window.addEventListener('resize', this.updateHeight);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
+  },
 };
 </script>
client/views/pages/adm/boardManagement/template/videoTemplate/VideoSelectListOne.vue
--- client/views/pages/adm/boardManagement/template/videoTemplate/VideoSelectListOne.vue
+++ client/views/pages/adm/boardManagement/template/videoTemplate/VideoSelectListOne.vue
@@ -1,206 +1,336 @@
 <template>
-  <div
-    :class="{
-      content: true,
-      'admin-style overflow-y': pageRole === 'adm',
-      'w1400 pt50 pb50': pageRole === 'portal',
-    }"
-  >
-    <div
+    <template v-if="pageRole === 'portal'">
+      <div
       :class="{
-        'admin-page-title point-font2 mb30': pageRole == 'adm',
-        'page-title point-font mb30': pageRole == 'portal',
+        content: true,
+        'admin-style overflow-y': pageRole === 'adm',
+        'w1400 pt50 pb50': pageRole === 'portal',
       }"
     >
-      <p>{{ bbsMng.bbsNm }}</p>
-    </div>
-    <div>
-      <table
-        class="detail-table mb30"
-        :class="{ 'admin-detail': pageRole === 'adm' }"
-      >
-        <colgroup>
-          <col width="10%" />
-          <col width="90%" />
-        </colgroup>
-        <tbody>
-          <tr class="detail-title">
-            <td colspan="2">
-              <p
-                :class="{
-                  'detail-table-title point-font2 mb10': pageRole == 'adm',
-                  'detail-table-title point-font mb10':
-                    pageRole == 'portal',
-                }"
-              >
-                {{ bbsCn.bbsNm }}
-              </p>
-              <p>
-                <span>등록일시 | {{ bbsCn.regDt }}</span>
-              </p>
-            </td>
-          </tr>
-          <tr>
-            <td colspan="2" class="pd15">
-              <div style="min-height: 70rem">
-                <div class="video-zone">
-                  <div class="iframe-container">
-                    <iframe
-                      :src="bbsCn.vdoUrl"
-                      title="YouTube video player"
-                      frameborder="0"
-                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                      referrerpolicy="strict-origin-when-cross-origin"
-                      allowfullscreen
-                    >
-                    </iframe>
-                  </div>
-                </div>
-                <div
-                  class="editor5"
-                  style="width: 100%; min-height: 35rem"
-                  v-html="sanitizedContent"
-                ></div>
-              </div>
-            </td>
-          </tr>
-          <tr class="border-top">
-            <td
-              :class="{
-                'pd15 point-font2': pageRole == 'adm',
-                'pd15 point-font': pageRole == 'portal',
-              }"
-            >
-              첨부파일
-            </td>
-            <td>
-              <div v-if="fileList.length == 0">
-                <label>첨부된 파일이 없습니다.</label>
-              </div>
-              <ul v-else class="pd10">
-                <li
-                  v-for="(item, idx) in fileList"
-                  :key="idx"
-                  @click="downloadFile(item)"
-                  class="cursor pd5 border radius mb5 flex justify-between align-center"
-                >
-                  <p>{{ item.fileNm + "." + item.extnNm }}</p>
-                  <svg-icon type="mdi" :path="downloadFilePath"></svg-icon>
-                </li>
-              </ul>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="flex justify-end align-center mb30">
-        <div class="gd-1 pr0">
-          <button class="large-btn gray-border-btn" @click="fnList">
-            목록
-          </button>
-        </div>
-        <div
-          v-if="pageAuth.mdfcnAuthrt == 'Y' || mbrId == bbsCn.rgtr"
-          class="gd-1 pr0"
-        >
-          <button
-            :class="{
-              'large-btn': true,
-              'blue-border-btn': pageRole == 'adm',
-              'green-border-btn':
-                pageRole == 'portal',
-            }"
-            @click="fnUpdate"
-          >
-            수정
-          </button>
-        </div>
-        <div
-          v-if="pageAuth.delAuthrt == 'Y' || mbrId == bbsCn.rgtr"
-          class="gd-1 pr0"
-        >
-          <button class="large-btn red-border-btn" @click="fnDelete">
-            삭제
-          </button>
-        </div>
-      </div>
-      <table v-if="bbsMng.bfrAftrPstUseYn == 'Y'" class="content-navigate mb30">
-        <colgroup>
-          <col width="10%" />
-          <col width="90%" />
-        </colgroup>
-        <tbody>
-          <tr>
-            <td class="pd10 text-ct">이전글</td>
-            <td
-              v-if="prevBbsCn != null"
-              class="pd10 cursor"
-              @click="fnMoveBbsCn(prevBbsCn.bbsId)"
-            >
-              {{ prevBbsCn.bbsNm }}
-            </td>
-            <td v-else class="pd10">이전글이 없습니다</td>
-          </tr>
-          <tr>
-            <td class="pd10 text-ct">다음글</td>
-            <td
-              v-if="nextBbsCn != null"
-              class="pd10 cursor"
-              @click="fnMoveBbsCn(nextBbsCn.bbsId)"
-            >
-              {{ nextBbsCn.bbsNm }}
-            </td>
-            <td v-else class="pd10">다음글이 없습니다</td>
-          </tr>
-        </tbody>
-      </table>
       <div
-        v-if="bbsMng.cmntUseYn == 'Y'"
         :class="{
-          pd30: true,
-          'comment-zone': pageRole == 'adm',
-          'comment-zone2': pageRole == 'portal',
+          'admin-page-title point-font2 mb30': pageRole == 'adm',
+          'page-title point-font mb30': pageRole == 'portal',
         }"
       >
-        <div class="flex justify-start align-start mb30">
-          <div class="gd-10 pl0">
-            <textarea
-              name=""
-              id=""
-              style="width: 100%; min-height: 4rem"
-              v-model="InputCmnt"
-            ></textarea>
+        <p>{{ bbsMng.bbsNm }}</p>
+      </div>
+      <div>
+        <table
+          class="detail-table mb30"
+          :class="{ 'admin-detail': pageRole === 'adm' }"
+        >
+          <colgroup>
+            <col width="10%" />
+            <col width="90%" />
+          </colgroup>
+          <tbody>
+            <tr class="detail-title">
+              <td colspan="2">
+                <p
+                  :class="{
+                    'detail-table-title point-font2 mb10': pageRole == 'adm',
+                    'detail-table-title point-font mb10':
+                      pageRole == 'portal',
+                  }"
+                >
+                  {{ bbsCn.bbsNm }}
+                </p>
+                <p>
+                  <span>등록일시 | {{ bbsCn.regDt }}</span>
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <td colspan="2" class="pd15">
+                <div style="min-height: 70rem">
+                  <div class="video-zone">
+                    <div class="iframe-container">
+                      <iframe
+                        :src="bbsCn.vdoUrl"
+                        title="YouTube video player"
+                        frameborder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        referrerpolicy="strict-origin-when-cross-origin"
+                        allowfullscreen
+                      >
+                      </iframe>
+                    </div>
+                  </div>
+                  <div
+                    class="editor5"
+                    style="width: 100%; min-height: 35rem"
+                    v-html="sanitizedContent"
+                  ></div>
+                </div>
+              </td>
+            </tr>
+            <tr class="border-top">
+              <td
+                :class="{
+                  'pd15 point-font2': pageRole == 'adm',
+                  'pd15 point-font': pageRole == 'portal',
+                }"
+              >
+                첨부파일
+              </td>
+              <td>
+                <div v-if="fileList.length == 0">
+                  <label>첨부된 파일이 없습니다.</label>
+                </div>
+                <ul v-else class="pd10">
+                  <li
+                    v-for="(item, idx) in fileList"
+                    :key="idx"
+                    @click="downloadFile(item)"
+                    class="cursor pd5 border radius mb5 flex justify-between align-center"
+                  >
+                    <p>{{ item.fileNm + "." + item.extnNm }}</p>
+                    <svg-icon type="mdi" :path="downloadFilePath"></svg-icon>
+                  </li>
+                </ul>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="flex justify-end align-center mb30">
+          <div class="gd-1 pr0">
+            <button class="large-btn gray-border-btn" @click="fnList">
+              목록
+            </button>
           </div>
-          <div class="gd-2 pr0">
+          <div
+            v-if="pageAuth.mdfcnAuthrt == 'Y' || mbrId == bbsCn.rgtr"
+            class="gd-1 pr0"
+          >
             <button
               :class="{
-                'large-btn comment-btn radius': true,
-                'blue-btn': pageRole == 'adm',
-                'green-btn': pageRole == 'portal',
+                'large-btn': true,
+                'blue-border-btn': pageRole == 'adm',
+                'green-border-btn':
+                  pageRole == 'portal',
               }"
-              @click="fnInsertCmnt"
+              @click="fnUpdate"
             >
-              등록
+              수정
+            </button>
+          </div>
+          <div
+            v-if="pageAuth.delAuthrt == 'Y' || mbrId == bbsCn.rgtr"
+            class="gd-1 pr0"
+          >
+            <button class="large-btn red-border-btn" @click="fnDelete">
+              삭제
             </button>
           </div>
         </div>
-        <div class="comment-wrap">
-          <template v-if="cmntList.length > 0">
-            <CommentItem
-              :comments="cmntList"
-              :pageAuth="pageAuth"
-              :pageId="pageId"
-              @isReply="isReply"
-            />
-          </template>
-          <template v-else>
-            <p class="comment-text text-ct data-none">
-              등록된 댓글이 없습니다.
-            </p>
-          </template>
+        <table v-if="bbsMng.bfrAftrPstUseYn == 'Y'" class="content-navigate mb30">
+          <colgroup>
+            <col width="10%" />
+            <col width="90%" />
+          </colgroup>
+          <tbody>
+            <tr>
+              <td class="pd10 text-ct">이전글</td>
+              <td
+                v-if="prevBbsCn != null"
+                class="pd10 cursor"
+                @click="fnMoveBbsCn(prevBbsCn.bbsId)"
+              >
+                {{ prevBbsCn.bbsNm }}
+              </td>
+              <td v-else class="pd10">이전글이 없습니다</td>
+            </tr>
+            <tr>
+              <td class="pd10 text-ct">다음글</td>
+              <td
+                v-if="nextBbsCn != null"
+                class="pd10 cursor"
+                @click="fnMoveBbsCn(nextBbsCn.bbsId)"
+              >
+                {{ nextBbsCn.bbsNm }}
+              </td>
+              <td v-else class="pd10">다음글이 없습니다</td>
+            </tr>
+          </tbody>
+        </table>
+        <div
+          v-if="bbsMng.cmntUseYn == 'Y'"
+          :class="{
+            pd30: true,
+            'comment-zone': pageRole == 'adm',
+            'comment-zone2': pageRole == 'portal',
+          }"
+        >
+          <div class="flex justify-start align-start mb30">
+            <div class="gd-10 pl0">
+              <textarea
+                name=""
+                id=""
+                style="width: 100%; min-height: 4rem"
+                v-model="InputCmnt"
+              ></textarea>
+            </div>
+            <div class="gd-2 pr0">
+              <button
+                :class="{
+                  'large-btn comment-btn radius': true,
+                  'blue-btn': pageRole == 'adm',
+                  'green-btn': pageRole == 'portal',
+                }"
+                @click="fnInsertCmnt"
+              >
+                등록
+              </button>
+            </div>
+          </div>
+          <div class="comment-wrap">
+            <template v-if="cmntList.length > 0">
+              <CommentItem
+                :comments="cmntList"
+                :pageAuth="pageAuth"
+                :pageId="pageId"
+                @isReply="isReply"
+              />
+            </template>
+            <template v-else>
+              <p class="comment-text text-ct data-none">
+                등록된 댓글이 없습니다.
+              </p>
+            </template>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+    </template>
+    <template v-else>
+      <div class="content-zone"
+      :class="bbsMng.bfrAftrPstUseYn === 'Y' ? 'detail' : 'sch-full'">
+        <div class="content">
+          <div class="scroll">
+            <div class="form-box h_100">
+              <div class="layout between form-box-title">
+                <div>
+                  <p>{{ bbsCn.bbsNm }}</p>
+                </div>
+                <span>등록일시 | {{ bbsCn.regDt }}</span>
+              </div>
+              <div class="form-content grid-none" :style="bbsMng.cmntUseYn == 'Y' ? 'height: fit-content;' : ''">
+                <div>
+                  <div class="video-zone">
+                    <div class="iframe-container">
+                      <iframe
+                        :src="bbsCn.vdoUrl"
+                        title="YouTube video player"
+                        frameborder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        referrerpolicy="strict-origin-when-cross-origin"
+                        allowfullscreen
+                      >
+                      </iframe>
+                    </div>
+                  </div>
+                  <div
+                    class="editor5"
+                    style="width: 100%;"
+                    v-html="sanitizedContent"
+                  ></div>
+                </div>
+                <div class="layout border-bottom">
+                  <p class="form-title">첨부파일</p>
+                  <div v-if="fileList.length == 0">
+                    <label>첨부된 파일이 없습니다.</label>
+                  </div>
+                  <ul v-else>
+                    <li
+                      v-for="(item, idx) in fileList"
+                      :key="idx"
+                      @click="downloadFile(item)"
+                      class="layout"
+                    >
+                      <p>{{ item.fileNm + "." + item.extnNm }}</p>
+                      <svg-icon type="mdi" :path="downloadFilePath"></svg-icon>
+                    </li>
+                  </ul>
+                </div>
+                <!-- 댓글 -->
+                <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box">
+                  <div class="layout w_100 mb30">
+                      <p class="comment-head">댓글</p>
+                      <textarea
+                        class="form-control sm border-none"
+                        placeholder="댓글을 입력하세요."
+                        v-model="InputCmnt"
+                      ></textarea>
+                      <button class="btn sm primary" @click="fnInsertCmnt">
+                        등록
+                      </button>
+                  </div>
+                  <div class="comment-wrap">
+                    <template v-if="cmntList.length > 0">
+                      <CommentItem
+                        :comments="cmntList"
+                        :pageAuth="pageAuth"
+                        :pageId="pageId"
+                        @isReply="isReply"
+                      />
+                    </template>
+                    <template v-else>
+                      <p class="comment-text text-ct data-none">
+                        등록된 댓글이 없습니다.
+                      </p>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="navigate-wrap"  v-if="bbsMng.bfrAftrPstUseYn == 'Y'">
+        <table class="content-navigate">
+            <colgroup>
+              <col width="10%" />
+              <col width="90%" />
+            </colgroup>
+            <tbody>
+              <tr>
+                <td>이전글</td>
+                <td
+                  v-if="prevBbsCn != null"
+                  class="cursor"
+                  @click="fnMoveBbsCn(prevBbsCn.bbsId)"
+                >
+                  {{ prevBbsCn.bbsNm }}
+                </td>
+                <td v-else>이전글이 없습니다</td>
+              </tr>
+              <tr>
+                <td>다음글</td>
+                <td
+                  v-if="nextBbsCn != null"
+                  class="cursor"
+                  @click="fnMoveBbsCn(nextBbsCn.bbsId)"
+                >
+                  {{ nextBbsCn.bbsNm }}
+                </td>
+                <td v-else>다음글이 없습니다</td>
+              </tr>
+            </tbody>
+          </table>
+      </div>
+      <div class="btn-wrap">
+          <button class="btn sm tertiary" @click="fnList">목록</button>
+        <template
+          v-if="pageAuth.mdfcnAuthrt == 'Y' || mbrId == bbsCn.rgtr">
+          <button class="btn sm main" @click="fnUpdate">수정</button>
+        </template>
+        <template  v-if="pageAuth.delAuthrt == 'Y' || mbrId == bbsCn.rgtr">
+          <button class="btn sm red" @click="fnDelete">삭제</button>
+        </template>
+      </div>
+    </template>
+
 </template>
 
 <script>
Add a comment
List