/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src\\app\\layout.js","import":"Geist","arguments":[{"variable":"--font-geist-sans","subsets":["latin"],"display":"swap"}],"variableName":"geistSans"} ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8d697b304b401681-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba015fad6dcf6784-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/4cf2300e9c8272f7-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Geist Fallback';src: local("Arial");ascent-override: 95.94%;descent-override: 28.16%;line-gap-override: 0.00%;size-adjust: 104.76%
}.__className_188709 {font-family: 'Geist', 'Geist Fallback';font-style: normal
}.__variable_188709 {--font-geist-sans: 'Geist', 'Geist Fallback'
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src\\app\\layout.js","import":"Geist_Mono","arguments":[{"variable":"--font-geist-mono","subsets":["latin"],"display":"swap"}],"variableName":"geistMono"} ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/9610d9e46709d722-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/747892c23ea88013-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/93f479601ee12b01-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Geist Mono Fallback';src: local("Arial");ascent-override: 74.67%;descent-override: 21.92%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_9a8899 {font-family: 'Geist Mono', 'Geist Mono Fallback';font-style: normal
}.__variable_9a8899 {--font-geist-mono: 'Geist Mono', 'Geist Mono Fallback'
}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/services/css/input.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/

.sidebarSearchInput{
    border: none;
    background-color: #e5e7eb;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.sidebarSearchInput::placeholder{
    font-size: 16px;
    color: #6b7280!important;
    vertical-align: middle;
    line-height: 24px;

}
.sidebarSearchInput:focus {
    outline: none; /* 포커스 시 기본 아웃라인 스타일 제거 */
    border: none; /* 포커스 시 보더 제거 */
  }
/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* :root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
} */

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[11].use[5]!./src/scss/style.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* 웹폰트 */
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 400;
  src: url(/_next/static/media/SpoqaHanSansNeo-Regular.9495104a.eot);
  src: url(/_next/static/media/SpoqaHanSansNeo-Regular.9495104a.eot?#iefix) format("embedded-opentype"), url(/_next/static/media/SpoqaHanSansNeo-Regular.a7f45aa4.woff2) format("woff2"), url(/_next/static/media/SpoqaHanSansNeo-Regular.69822e77.woff) format("woff");
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 500;
  src: url(/_next/static/media/SpoqaHanSansNeo-Medium.aac2b1cb.eot);
  src: url(/_next/static/media/SpoqaHanSansNeo-Medium.aac2b1cb.eot?#iefix) format("embedded-opentype"), url(/_next/static/media/SpoqaHanSansNeo-Medium.292ec9b9.woff2) format("woff2"), url(/_next/static/media/SpoqaHanSansNeo-Medium.4b2a9c5e.woff) format("woff");
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 700;
  src: url(/_next/static/media/SpoqaHanSansNeo-Bold.f0b7d0ab.eot);
  src: url(/_next/static/media/SpoqaHanSansNeo-Bold.f0b7d0ab.eot?#iefix) format("embedded-opentype"), url(/_next/static/media/SpoqaHanSansNeo-Bold.34d3d399.woff2) format("woff2"), url(/_next/static/media/SpoqaHanSansNeo-Bold.a2752bd9.woff) format("woff");
}
@font-face {
  font-family: "Menlo";
  font-style: normal;
  font-weight: 400;
  src: url(/_next/static/media/Menlo-Regular.82222421.ttf) format("truetype");
}
@font-face {
  font-family: "Menlo";
  font-style: normal;
  font-weight: 700;
  src: url(/_next/static/media/Menlo-Bold.ab260409.ttf) format("truetype");
}
/* default */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
  -webkit-text-size-adjust: none;
  height: 100%;
}
@media (min-width: 1025px) {
  html ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background-color: transparent;
  }
  html ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background-clip: padding-box;
    border: 6px solid transparent;
  }
  html ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.15);
  }
  html ::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.15);
  }
  html ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  html ::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  @supports (-moz-appearance: none) {
    html * {
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    }
    html:hover {
      scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    }
    html:active {
      scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    }
  }
  @supports (-moz-appearance: none) {
    html {
      overflow: hidden;
    }
  }
}

body {
  color: #1f2937;
  font-size: 16px;
  font-family: "Spoqa Han Sans Neo", "malgun gothic", Arial, sans-serif;
  letter-spacing: -0.015em;
  line-height: 1.3;
  word-wrap: break-word;
  word-break: break-all;
  height: 100%;
  background: #fff;
}
@media (min-width: 1025px) {
  body.body-no-overflow {
    overflow-y: hidden;
  }
  body ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background-color: transparent;
  }
  body ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background-clip: padding-box;
    border: 6px solid transparent;
  }
  body ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.15);
  }
  body ::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.15);
  }
  body ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  body ::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  @supports (-moz-appearance: none) {
    body * {
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    }
    body:hover {
      scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    }
    body:active {
      scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    }
  }
  @supports (-moz-appearance: none) {
    body {
      overflow-y: hidden;
    }
  }
}

img {
  max-width: 100%;
  border: 0;
}

ul,
li,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6,
dd {
  margin: 0;
}

a,
select,
button,
input,
textarea {
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input[type=submit] {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
  background: transparent;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  margin: 0 !important;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

caption.sr-only {
  position: static;
  width: auto;
  height: 0;
}

fieldset {
  display: block;
  margin: 0;
  border: 0;
  padding: 0;
}

iframe {
  border: 0;
  width: 100%;
}

.m-0 {
  margin: 0px !important;
}

.m-1 {
  margin: 4px !important;
}

.m-2 {
  margin: 8px !important;
}

.m-3 {
  margin: 12px !important;
}

.m-4 {
  margin: 16px !important;
}

.m-5 {
  margin: 20px !important;
}

.m-6 {
  margin: 24px !important;
}

.m-7 {
  margin: 28px !important;
}

.m-8 {
  margin: 32px !important;
}

.m-9 {
  margin: 36px !important;
}

.m-10 {
  margin: 40px !important;
}

.p-0 {
  padding: 0px !important;
}

.p-1 {
  padding: 4px !important;
}

.p-2 {
  padding: 8px !important;
}

.p-3 {
  padding: 12px !important;
}

.p-4 {
  padding: 16px !important;
}

.p-5 {
  padding: 20px !important;
}

.p-6 {
  padding: 24px !important;
}

.p-7 {
  padding: 28px !important;
}

.p-8 {
  padding: 32px !important;
}

.p-9 {
  padding: 36px !important;
}

.p-10 {
  padding: 40px !important;
}

.mt-0 {
  margin-top: 0px !important;
}

.mt-1 {
  margin-top: 4px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mt-3 {
  margin-top: 12px !important;
}

.mt-4 {
  margin-top: 16px !important;
}

.mt-5 {
  margin-top: 20px !important;
}

.mt-6 {
  margin-top: 24px !important;
}

.mt-7 {
  margin-top: 28px !important;
}

.mt-8 {
  margin-top: 32px !important;
}

.mt-9 {
  margin-top: 36px !important;
}

.mt-10 {
  margin-top: 40px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.ml-1 {
  margin-left: 4px !important;
}

.ml-2 {
  margin-left: 8px !important;
}

.ml-3 {
  margin-left: 12px !important;
}

.ml-4 {
  margin-left: 16px !important;
}

.ml-5 {
  margin-left: 20px !important;
}

.ml-6 {
  margin-left: 24px !important;
}

.ml-7 {
  margin-left: 28px !important;
}

.ml-8 {
  margin-left: 32px !important;
}

.ml-9 {
  margin-left: 36px !important;
}

.ml-10 {
  margin-left: 40px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.mr-1 {
  margin-right: 4px !important;
}

.mr-2 {
  margin-right: 8px !important;
}

.mr-3 {
  margin-right: 12px !important;
}

.mr-4 {
  margin-right: 16px !important;
}

.mr-5 {
  margin-right: 20px !important;
}

.mr-6 {
  margin-right: 24px !important;
}

.mr-7 {
  margin-right: 28px !important;
}

.mr-8 {
  margin-right: 32px !important;
}

.mr-9 {
  margin-right: 36px !important;
}

.mr-10 {
  margin-right: 40px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.mb-1 {
  margin-bottom: 4px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.mb-3 {
  margin-bottom: 12px !important;
}

.mb-4 {
  margin-bottom: 16px !important;
}

.mb-5 {
  margin-bottom: 20px !important;
}

.mb-6 {
  margin-bottom: 24px !important;
}

.mb-7 {
  margin-bottom: 28px !important;
}

.mb-8 {
  margin-bottom: 32px !important;
}

.mb-9 {
  margin-bottom: 36px !important;
}

.mb-10 {
  margin-bottom: 40px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pt-1 {
  padding-top: 4px !important;
}

.pt-2 {
  padding-top: 8px !important;
}

.pt-3 {
  padding-top: 12px !important;
}

.pt-4 {
  padding-top: 16px !important;
}

.pt-5 {
  padding-top: 20px !important;
}

.pt-6 {
  padding-top: 24px !important;
}

.pt-7 {
  padding-top: 28px !important;
}

.pt-8 {
  padding-top: 32px !important;
}

.pt-9 {
  padding-top: 36px !important;
}

.pt-10 {
  padding-top: 40px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.pl-1 {
  padding-left: 4px !important;
}

.pl-2 {
  padding-left: 8px !important;
}

.pl-3 {
  padding-left: 12px !important;
}

.pl-4 {
  padding-left: 16px !important;
}

.pl-5 {
  padding-left: 20px !important;
}

.pl-6 {
  padding-left: 24px !important;
}

.pl-7 {
  padding-left: 28px !important;
}

.pl-8 {
  padding-left: 32px !important;
}

.pl-9 {
  padding-left: 36px !important;
}

.pl-10 {
  padding-left: 40px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.pr-1 {
  padding-right: 4px !important;
}

.pr-2 {
  padding-right: 8px !important;
}

.pr-3 {
  padding-right: 12px !important;
}

.pr-4 {
  padding-right: 16px !important;
}

.pr-5 {
  padding-right: 20px !important;
}

.pr-6 {
  padding-right: 24px !important;
}

.pr-7 {
  padding-right: 28px !important;
}

.pr-8 {
  padding-right: 32px !important;
}

.pr-9 {
  padding-right: 36px !important;
}

.pr-10 {
  padding-right: 40px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pb-1 {
  padding-bottom: 4px !important;
}

.pb-2 {
  padding-bottom: 8px !important;
}

.pb-3 {
  padding-bottom: 12px !important;
}

.pb-4 {
  padding-bottom: 16px !important;
}

.pb-5 {
  padding-bottom: 20px !important;
}

.pb-6 {
  padding-bottom: 24px !important;
}

.pb-7 {
  padding-bottom: 28px !important;
}

.pb-8 {
  padding-bottom: 32px !important;
}

.pb-9 {
  padding-bottom: 36px !important;
}

.pb-10 {
  padding-bottom: 40px !important;
}

.clearfix {
  position: relative;
}
.clearfix:after {
  display: block;
  clear: both;
  content: "";
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.vertical-top {
  vertical-align: top !important;
}

.vertical-middle {
  vertical-align: middle !important;
}

.vertical-bottom {
  vertical-align: bottom !important;
}

@media (max-width: 1024.98px) {
  .d-up-lg {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .d-up-md {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .d-down-md {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .d-down-sm {
    display: none !important;
  }
}

.text-default {
  color: #1f2937 !important;
}

.text-gray {
  color: #4b5563 !important;
}

.text-lightgray {
  color: #6b7280 !important;
}

.text-whitegray {
  color: #9ca3af !important;
}

.text-primary {
  color: #1364ff !important;
}

.text-secondary {
  color: #bafd02 !important;
}

.text-invalid {
  color: #dc2626 !important;
}

.text-valid {
  color: #059669 !important;
}

.text-subprimary {
  color: #1364ff !important;
}

.text-disabled {
  color: #6b7280 !important;
}

.text-orange {
  color: #f97316 !important;
}

.title1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.title2 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.title3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.title4 {
  margin-top: 2.1em;
  margin-bottom: 0.7em;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.text-sm {
  font-size: 14px !important;
}

.text-md {
  font-size: 16px !important;
}

.text-lg {
  font-size: 18px !important;
}

.text-xl {
  font-size: 24px !important;
}

.text-normal {
  font-weight: normal !important;
}

.text-medium {
  font-weight: 500 !important;
}

.text-bold {
  font-weight: bold !important;
}

.text-guide {
  font-size: 14px;
  color: #4b5563;
}

.text-code {
  padding: 0.05em 0.1em;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background-color: #f3f4f6;
  color: #dc2626;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-weight: normal;
}

.text-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-text-decoration-color: rgb(102.3463687151, 111.3016759777, 126.6536312849);
          text-decoration-color: rgb(102.3463687151, 111.3016759777, 126.6536312849);
}

.code {
  display: inline-block;
  height: 22px;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.12px;
  color: #e1382f;
}
.code.code-gray {
  height: 20px;
  background-color: #f3f4f6;
}
.code + .code {
  margin-left: 8px;
}

.text-notice {
  display: flex;
  gap: 4px;
}
.text-notice .ico {
  flex: 0 0 auto;
  margin-top: 1.5px;
}

.loading-area {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.loading-area .loading-bar {
  flex: 1 1 auto;
}

.loading-bar {
  color: #1364ff;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.loading-bar.full {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}
.loading-bar.full-dimed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: none;
}
.loading-bar.full-dimed .dimed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.loading-bar.full-dimed .spinner {
  position: absolute;
  z-index: 500;
}
.loading-bar .spinner {
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  padding: 5px;
  overflow: visible;
}
.loading-bar .spinner > circle {
  fill: none;
  stroke: #1264ff;
  cx: 50%;
  cy: 50%;
  r: 50%;
  stroke-width: 10px;
  stroke-linecap: round;
  transform-origin: center;
}
.loading-bar.fade-enter {
  opacity: 1;
  transition: opacity 0.3s;
}
.loading-bar.fade-leave {
  opacity: 0;
  transition: opacity 0.3s;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 100; /* 기존 컨텐츠 위에 표시 */
}
.loading-overlay .loading-text {
  margin-top: 12px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 700;
}

/* 로딩바 2.0 */
.loading-spinner-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.loading-spinner-wrap.spinner-wrap-sm {
  width: 20px;
  height: 20px;
}
.loading-spinner-wrap.spinner-wrap-sm .loading-spinner-img {
  width: 20px;
  height: 20px;
  background: url(/_next/static/media/loading-spinner-sm@2x.9fc45ea9.png);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center center;
}
.loading-spinner-wrap.spinner-wrap-sm + .spinner-message-bottom {
  margin-top: 6px;
}
.loading-spinner-wrap.spinner-wrap-sm + .spinner-message-top {
  margin-bottom: 6px;
}
.loading-spinner-wrap.spinner-wrap-sm + .spinner-message-left {
  margin-right: 6px;
}
.loading-spinner-wrap.spinner-wrap-sm + .spinner-message-right {
  margin-left: 6px;
}
.loading-spinner-wrap.spinner-wrap-md {
  width: 40px;
  height: 40px;
}
.loading-spinner-wrap.spinner-wrap-md .loading-spinner-img {
  width: 40px;
  height: 40px;
  background: url(/_next/static/media/loading-spinner-md@2x.6ec9fae4.png);
  background-size: 40px 40px;
  background-repeat: no-repeat;
  background-position: center center;
}
.loading-spinner-wrap.spinner-wrap-md + .spinner-message-bottom {
  margin-top: 12px;
}
.loading-spinner-wrap.spinner-wrap-md + .spinner-message-top {
  margin-bottom: 12px;
}
.loading-spinner-wrap.spinner-wrap-md + .spinner-message-left {
  margin-right: 12px;
}
.loading-spinner-wrap.spinner-wrap-md + .spinner-message-right {
  margin-left: 12px;
}
.loading-spinner-wrap.spinner-wrap-lg {
  width: 80px;
  height: 80px;
}
.loading-spinner-wrap.spinner-wrap-lg .loading-spinner-img {
  width: 80px;
  height: 80px;
  background: url(/_next/static/media/loading-spinner-lg@2x.f4f3135d.png);
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: center center;
}
.loading-spinner-wrap.spinner-wrap-lg + .spinner-message-bottom {
  margin-top: 18px;
}
.loading-spinner-wrap.spinner-wrap-lg + .spinner-message-top {
  margin-bottom: 18px;
}
.loading-spinner-wrap.spinner-wrap-lg + .spinner-message-left {
  margin-right: 18px;
}
.loading-spinner-wrap.spinner-wrap-lg + .spinner-message-right {
  margin-left: 18px;
}
.loading-spinner-wrap .loading-spinner-img {
  display: block;
  width: 100%;
  height: 100%;
  animation: spinner-rotate 0.75s linear infinite;
  transform: translateZ(0);
}

@keyframes spinner-rotate {
  from {
    transform: rotate(0deg) translateZ(0);
  }
  to {
    transform: rotate(360deg) translateZ(0);
  }
}
/* 로딩바 2.0 스피너 컨테이너 */
.spinner {
  /* 배경 스타일 */
  /* 스피너 컨텐츠 스타일 */
  /* 메시지 스타일 */
  /* 이미지 스타일 */
}
.spinner-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  z-index: 300;
}
.spinner-backdrop-white, .spinner-backdrop-black, .spinner-backdrop-transparent, .spinner-backdrop-blur-white, .spinner-backdrop-blur-black {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.spinner-backdrop-white {
  background-color: White;
}
.spinner-backdrop-black {
  background-color: black;
  color: white;
}
.spinner-backdrop-transparent {
  background-color: transparent;
}
.spinner-backdrop-blur-white {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.spinner-backdrop-blur-black {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.spinner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.spinner-content-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.spinner-content-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.spinner-message {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: #4b5563;
  text-align: center;
  line-height: 1.5;
}
.spinner-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.spinner-image img {
  display: block;
  max-width: 100%;
  height: auto;
}
.spinner-image-top img {
  margin-bottom: 40px;
}
.spinner-image-bottom img {
  margin-top: 40px;
}
.spinner-image-left img {
  margin-right: 6px;
}
.spinner-image-right img {
  margin-left: 6px;
}

.spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-right-color: #fff;
  border-radius: 50%;
  animation: spin 1s infinite linear;
}
.loading-spinner-xs {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-right-color: #fff;
  border-radius: 50%;
}
.loading-spinner-sm {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-right-color: #fff;
  border-radius: 50%;
}
.loading-spinner-md {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-right-color: #fff;
  border-radius: 50%;
}
.loading-spinner-lg {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-right-color: #fff;
  border-radius: 50%;
  border-width: 2px;
}
.loading-spinner-xl {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-right-color: #fff;
  border-radius: 50%;
  border-width: 3px;
}

.ico-loading-xs {
  width: 12px;
  height: 12px;
}
.ico-loading-sm {
  width: 12px;
  height: 12px;
}
.ico-loading-md {
  width: 16px;
  height: 16px;
}
.ico-loading-lg {
  width: 20px;
  height: 20px;
}
.ico-loading-xl {
  width: 28px;
  height: 28px;
}

.btn-loading.btn-primary:disabled {
  color: #fff;
  background: #1364ff;
}
.btn-loading.btn-invalid:disabled {
  color: #fff;
  background: #ef4444;
}
.btn-loading.btn-lightgray:disabled {
  color: #1f2937;
  background: #f3f4f6;
}
.btn-loading.btn-gray:disabled {
  color: #fff;
  background: #6b7280;
}
.btn-loading.btn-dark:disabled {
  color: #fff;
  background: #4b5563;
}
.btn-loading.btn-outline-gray:disabled {
  color: #1f2937;
  background: #fff;
  border: 1px solid #9ca3af;
}
.btn-loading.btn-outline-primary:disabled {
  color: #1364ff;
  background: #fff;
  border: 1px solid #1364ff;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
.ico {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  vertical-align: middle;
  overflow: hidden;
  text-indent: -9999px;
  overflow: hidden;
  text-align: left;
}

/* 범용 비규격 아이콘  */
.ico-search-gray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-search-gray@2x.0429a935.png);
}

/* 레이아웃 공통 아이콘 */
.ico-dashboard-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-dashboard-md@2x.4184a6dc.png);
}

.ico-alarm-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-alarm-md@2x.b86c5fc4.png);
}

.ico-help-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-help-md@2x.606a86ff.png);
}

.ico-community-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-community-md@2x.2729e5ff.png);
}

.ico-resource-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-resource-md@2x.dbd08274.png);
}

.ico-workspace-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-workspace-md@2x.8a2d9916.png);
}

.ico-recentwork-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-recentwork-md@2x.76a4eeae.png);
}

.ico-delete-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-delete-md@2x.1defb13a.png);
}

.ico-img2html-md {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-image: url(/_next/static/media/ico-img2html-md@2x.711fa678.png);
}

.ico-contrast-md {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-image: url(/_next/static/media/ico-contrast-md@2x.8fc055eb.png);
}

.ico-seo-md {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-image: url(/_next/static/media/ico-seo-md@2x.83b593d3.png);
}

.ico-linter-md {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-image: url(/_next/static/media/ico-linter-md@2x.5c03fc59.png);
}

.ico-table-md {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-image: url(/_next/static/media/ico-table-md@2x.e8fd0797.png);
}

.ico-tool-md-primary {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-tool-md-primary@2x.158c8338.png);
}

.ico-arrow-down-sm {
  width: 8px;
  height: 8px;
  line-height: 8px;
  background-image: url(/_next/static/media/ico-arrow-down-sm@2x.0c48a880.png);
}

.ico-arrow-up-sm {
  width: 8px;
  height: 8px;
  line-height: 8px;
  background-image: url(/_next/static/media/ico-arrow-up-sm@2x.5fef0197.png);
}

.ico-arrow-right-sm-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-arrow-right-sm-gray@2x.03cca561.png);
}

.ico-link-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-link-sm@2x.9ee58bbb.png);
}

.ico-link-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-link-md@2x.3bd47b44.png);
}

.ico-search-lg {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url(/_next/static/media/ico-search-lg@2x.4c48a384.png);
}

.ico-file-pdf {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-file-pdf@2x.8cf122d5.png);
}

.ico-pencil-md-gray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-pencil-md-gray@2x.58dbce2d.png);
}

.ico-handshake-md-gray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-handshake-md-gray@2x.54cf7825.png);
}

.ico-tool-md-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-tool-md-white@2x.2c6f52ed.png);
}

.ico-mode {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-mode@2x.3a3ec447.png);
}

.ico-mode-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-mode-gray@2x.b43c8300.png);
}

.ico-mode-white-xs {
  width: 10px;
  height: 10px;
  line-height: 10px;
  background-image: url(/_next/static/media/ico-mode-white-xs@2x.b7ee7b12.png);
}

.ico-notice-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-notice-md@2x.f5744a8d.png);
}

.ico-manager-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-manager-md@2x.7c28cffc.png);
}

.ico-badge-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-badge-sm@2x.1ed99774.png);
}

.ico-locked-xs {
  width: 10px;
  height: 10px;
  line-height: 10px;
  background-image: url(/_next/static/media/ico-locked-xs@2x.be2ed5d9.png);
}

.ico-site-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-site-md@2x.820bc07c.png);
}

.ico-folder-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-folder-md@2x.5a575d61.png);
}

.ico-alt-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-alt-md@2x.860f3693.png);
}

.ico-coin-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-coin-md@2x.a7cd068a.png);
}

.ico-notification-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-notification-md@2x.5dfc592d.png);
}

.ico-setting-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-setting-sm@2x.7c177372.png);
}

.ico-setting-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-setting-md@2x.da25bf8e.png);
}

.ico-tool-md-primary {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-tool-md-primary@2x.158c8338.png);
}

.ico-badge-plan-trial {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-badge-plan-trial@2x.c3acdeaa.png);
}

.ico-badge-plan-starter {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-badge-plan-starter@2x.60ec800e.png);
}

.ico-badge-plan-pro {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-badge-plan-pro@2x.bbb4432b.png);
}

.ico-badge-plan-team {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-badge-plan-team@2x.b62621a9.png);
}

.ico-badge-plan-enterprise {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-badge-plan-enterprise@2x.f73623da.png);
}

.ico-badge-plan-trial-lg {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-badge-plan-trial-lg@2x.44cc2473.png);
}

.ico-badge-plan-starter-lg {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-badge-plan-starter-lg@2x.26b6733f.png);
}

.ico-badge-plan-pro-lg {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-badge-plan-pro-lg@2x.48a45c5f.png);
}

.ico-badge-plan-team-lg {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-badge-plan-team-lg@2x.3072cf1e.png);
}

.ico-badge-plan-enterprise-lg {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-badge-plan-enterprise-lg@2x.da7d1aab.png);
}

.ico-plus-primary {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-plus-primary@2x.7ef5fde3.png);
}

.ico-org-checked-primary {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-org-checked-primary@2x.cd0f561b.png);
}

.ico-role-manager {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-role-manager@2x.f8aad720.png);
}

.ico-role-owner {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-role-owner@2x.550a8174.png);
}

.ico-role-member {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-role-member@2x.0fb650db.png);
}

.ico-linkclip-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-linkclip-lg@2x.12b02a4b.png);
}

.ico-folder-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-folder-lg@2x.90ccb564.png);
}

.ico-site-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-site-lg@2x.84929931.png);
}

.ico-warning-red {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-warning-red@2x.929a61da.png);
}

.ico-denied-red {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-denied-red@2x.241f766d.png);
}

.ico-picture-xxl {
  width: 64px;
  height: 64px;
  line-height: 64px;
  background-image: url(/_next/static/media/ico-picture-xxl@2x.9375f1d8.png);
}

.ico-folder-xxl {
  width: 64px;
  height: 64px;
  line-height: 64px;
  background-image: url(/_next/static/media/ico-folder-xxl@2x.4f7a7426.png);
}

.ico-stepcheck-white-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-stepcheck-white-sm@2x.a75579bb.png);
}

.ico-breadcrumb-arrow {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-breadcrumb-arrow@2x.9018418d.png);
}

.ico-arrow-left-sm-gray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-arrow-left-sm-gray@2x.1f6c29ba.png);
}

.ico-tooltip-gray {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-tooltip-gray@2x.081c74c9.png);
}

.ico-drag-handle {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-drag-handle@2x.42af586e.png);
}

.ico-recentwork-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-recentwork-xs@2x.9e070f59.png);
}

.ico-caret-up-primary-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-caret-up-primary-sm@2x.fdea96e6.png);
}

.ico-caret-down-primary-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-caret-down-primary-sm@2x.8574f8d6.png);
}

.ico-copy-primary-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-copy-primary-xs@2x.7e3c4a17.png);
}

.ico-edit-primary {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-edit-primary@2x.142f53ee.png);
}

.ico-notice-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-notice-sm@2x.59b224c3.png);
}

.ico-info-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-info-xs@2x.84cae63b.png);
}

.ico-nodata {
  width: 48px;
  height: 48px;
  line-height: 48px;
  background-image: url(/_next/static/media/ico-nodata@2x.a6ffde69.png);
}

.ico-info-sm-primary {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-info-sm-primary@2x.c5f19cb1.png);
}

.ico-save-sm-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-save-sm-white@2x.f70ebd1d.png);
}

.ico-arrow-back {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-arrow-back@2x.f2919314.png);
}

.ico-site-agency {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-site-agency@2x.5d0d7aa2.png);
}

.ico-add-xs-white {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-add-xs-white@2x.edcb7cbb.png);
}

.ico-badge-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-badge-md@2x.428f6115.png);
}

.ico-reset-xs-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-reset-xs-gray@2x.d20569f6.png);
}

.ico-search-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-search-xs@2x.0b29a5d6.png);
}

.ico-search-xs-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-search-xs-gray@2x.7246c6a8.png);
}

.ico-search-xs-darkgray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-search-xs-darkgray@2x.b2a924a0.png);
}

.ico-setting-lg {
  width: 18px;
  height: 18px;
  line-height: 18px;
  background-image: url(/_next/static/media/ico-setting-lg@2x.7efc0d77.png);
}

.ico-arrow-lg {
  width: 18px;
  height: 18px;
  line-height: 18px;
  background-image: url(/_next/static/media/ico-arrow-lg@2x.55361fa0.png);
}

.ico-edit-lg {
  width: 18px;
  height: 18px;
  line-height: 18px;
  background-image: url(/_next/static/media/ico-edit-lg@2x.97fbce4d.png);
}

.ico-images-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-images-sm@2x.ac9e7272.png);
}

.ico-image-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-image-sm@2x.275a36c1.png);
}

.ico-folder-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-folder-sm@2x.ed640153.png);
}

.ico-folder-xl {
  width: 32px;
  height: 28px;
  line-height: 28px;
  background-image: url(/_next/static/media/ico-folder-xl@2x.99dd4b9c.png);
}

.ico-disconnect {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-disconnect@2x.9456210d.png);
}

.ico-pause {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-pause@2x.9456210d.png);
}

.ico-banner-check {
  width: 44px;
  height: 44px;
  line-height: 44px;
  background-image: url(/_next/static/media/ico-banner-check@2x.963a2a9a.png);
}

.ico-info-md-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-info-md-white@2x.5cfea439.png);
}

.ico-altimg-xxl {
  width: 64px;
  height: 64px;
  line-height: 64px;
  background-image: url(/_next/static/media/ico-altimg-xxl@2x.874f84c8.png);
}

.ico-edit-xxl {
  width: 64px;
  height: 64px;
  line-height: 64px;
  background-image: url(/_next/static/media/ico-edit-xxl@2x.76ae3131.png);
}

.ico-check-gray-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-check-gray-xs@2x.aea44830.png);
}

.ico-close-md-gray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-close-md-gray@2x.eb93c3da.png);
}

.ico-pass-md {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url(/_next/static/media/ico-pass-md@2x.eca85a15.png);
}

.ico-empty-site {
  width: 80px;
  height: 80px;
  line-height: 80px;
  background-image: url(/_next/static/media/ico-empty-site@2x.fb637451.png);
}

.ico-link-xs {
  width: 8px;
  height: 8px;
  line-height: 8px;
  background-image: url(/_next/static/media/ico-link-xs@2x.1063593c.png);
}

.ico-cloud-sm-white {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-cloud-sm-white@2x.0525d488.png);
}

.ico-error-xs {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-error-xs@2x.5a9ec177.png);
}

.ico-filter-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-filter-xs@2x.b232c3c8.png);
}

.ico-repeat-xs {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-repeat-xs@2x.772661a5.png);
}

.ico-warning-xs {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-warning-xs@2x.c71ce517.png);
}

.ico-datepicker {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-datepicker@2x.5739b6a2.png);
}

.ico-image-md-gray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-image-md-gray@2x.ce71c424.png);
}

.ico-img-type8-md {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-img-type8-md@2x.b4c3ac37.png);
}

.ico-img-type7-md {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-img-type7-md@2x.26772f50.png);
}

.ico-img-type6-md {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-img-type6-md@2x.4af8b314.png);
}

.ico-img-type5-md {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-img-type5-md@2x.9b54f961.png);
}

.ico-img-type4-md {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-img-type4-md@2x.40e6d1ce.png);
}

.ico-img-type3-md {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-img-type3-md@2x.007e55dd.png);
}

.ico-img-type2-md {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-img-type2-md@2x.b615d65c.png);
}

.ico-img-type1-md {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-img-type1-md@2x.cc514aaa.png);
}

.ico-img-type8-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-img-type8-sm@2x.878aac61.png);
}

.ico-img-type7-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-img-type7-sm@2x.df0366c1.png);
}

.ico-img-type6-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-img-type6-sm@2x.cd127756.png);
}

.ico-img-type5-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-img-type5-sm@2x.e20c754b.png);
}

.ico-img-type4-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-img-type4-sm@2x.9959d0a2.png);
}

.ico-img-type3-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-img-type3-sm@2x.49512a32.png);
}

.ico-img-type2-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-img-type2-sm@2x.9a8745ea.png);
}

.ico-img-type1-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-img-type1-sm@2x.473b9829.png);
}

.ico-importance-low-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-importance-low-md@2x.d3b9eef6.png);
}

.ico-importance-medium-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-importance-medium-md@2x.df3796f7.png);
}

.ico-importance-high-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-importance-high-md@2x.0550deec.png);
}

.ico-bg-md-gray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-bg-md-gray@2x.daf0a4f0.png);
}

.ico-download-primary-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-download-primary-xs@2x.d68c6f83.png);
}

.ico-ai-generate {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-ai-generate@2x.6f4996ec.png);
}

.ico-ai-generate-gray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-ai-generate-gray@2x.1bc70734.png);
}

.ico-edit-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-edit-sm@2x.6686e571.png);
}

.ico-edit-xs {
  width: 8px;
  height: 8px;
  line-height: 8px;
  background-image: url(/_next/static/media/ico-edit-xs@2x.f27dda3d.png);
}

.ico-cancel-xs-lightgray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-cancel-xs-lightgray@2x.68c2fc18.png);
}

.ico-nodata-xl {
  width: 80px;
  height: 80px;
  line-height: 80px;
  background-image: url(/_next/static/media/ico-nodata-xl@2x.c8f19568.png);
}

.ico-arrow-left-darkgray {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url(/_next/static/media/ico-arrow-left-darkgray@2x.dcf4e8ea.png);
}

.ico-page-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-page-sm@2x.4e041031.png);
}

.ico-quickstart {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url(/_next/static/media/ico-quickstart@2x.4e7de792.png);
}

.ico-alt-copy {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-alt-copy@2x.015e45ad.png);
}

.ico-imagetype02-sm-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-imagetype02-sm-gray@2x.d1b63606.png);
}

.ico-step-check {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-step-check@2x.392ef733.png);
}

.ico-pass-xl {
  width: 64px;
  height: 64px;
  line-height: 64px;
  background-image: url(/_next/static/media/ico-pass-xl@2x.03c88197.png);
}

.ico-cloud-md-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-cloud-md-white@2x.2563c192.png);
}

.ico-error-md {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url(/_next/static/media/ico-error-md@2x.c48bc306.png);
}

.ico-history {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-history@2x.0a96df51.png);
}

.ico-text-format {
  width: 10px;
  height: 10px;
  line-height: 10px;
  background-image: url(/_next/static/media/ico-text-format@2x.a3ddf5ec.png);
}

.ico-curly-brackets {
  width: 10px;
  height: 10px;
  line-height: 10px;
  background-image: url(/_next/static/media/ico-curly-brackets@2x.efc367e4.png);
}

.ico-img-type1-xl {
  width: 22px;
  height: 22px;
  line-height: 22px;
  background-image: url(/_next/static/media/ico-img-type1-xl@2x.3e9e8605.png);
}

.ico-img-type2-xl {
  width: 22px;
  height: 22px;
  line-height: 22px;
  background-image: url(/_next/static/media/ico-img-type2-xl@2x.af1579f0.png);
}

.ico-view-off {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-view-off@2x.6d9ffe2f.png);
}

.ico-viewer-type01 {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-viewer-type01@2x.d86b883b.png);
}

.ico-viewer-type01-active {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-viewer-type01-active@2x.aabe1356.png);
}

.ico-viewer-type02 {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-viewer-type02@2x.d7c14a29.png);
}

.ico-viewer-type02-active {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-viewer-type02-active@2x.f78712e7.png);
}

.ico-tooltip-darkgray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-tooltip-darkgray@2x.451dfe77.png);
}

.ico-info-xs-lightgray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-info-xs-lightgray@2x.918c1b4f.png);
}

.ico-repeat-sm-gray {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-repeat-sm-gray@2x.f5942e95.png);
}

.ico-copy-xs-lightgray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-copy-xs-lightgray@2x.5a19ebef.png);
}

.ico-arrow-down-lightgray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-arrow-down-lightgray@2x.ffb91c72.png);
}

.ico-arrow-up-lightgray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-arrow-up-lightgray@2x.083eb2d3.png);
}

.ico-fullscreen {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-fullscreen@2x.6feb78d0.png);
}

.ico-arrow-double-right-lightgray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-arrow-double-right-lightgray@2x.d3e25ee7.png);
}

.ico-save-sm-primary {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-save-sm-primary@2x.8d671d7c.png);
}

.ico-alt-copy-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-alt-copy-gray@2x.5a19ebef.png);
}

.ico-alt-copy-darkgray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-alt-copy-darkgray@2x.3bf6d1a9.png);
}

.ico-arrow-right-sm-darkgray {
  width: 8px;
  height: 8px;
  line-height: 8px;
  background-image: url(/_next/static/media/ico-arrow-right-sm-darkgray@2x.3c84c6a9.png);
}

.ico-page-sm-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-page-sm-gray@2x.68e08b26.png);
}

.ico-mobile-active {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-mobile-active@2x.7ab0db52.png);
}

.ico-tablet-active {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-tablet-active@2x.b62f395a.png);
}

.ico-mobile {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-mobile@2x.b1c6004c.png);
}

.ico-tablet {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-tablet@2x.9dc9a668.png);
}

.ico-pc-active {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-pc-active@2x.4ec0a13b.png);
}

.ico-pc {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-pc@2x.7a0e6996.png);
}

.ico-view {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-view@2x.14c1606f.png);
}

.ico-pin {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-pin@2x.47214e26.png);
}

.ico-url-link {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url(/_next/static/media/ico-url-link@2x.70a61fc5.png);
}

.ico-promotion {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-promotion@2x.e8c16670.png);
}

.ico-government {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-government@2x.cd5bb55c.png);
}

.ico-news {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-news@2x.929eb051.png);
}

.ico-product {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-product@2x.ffcad3d6.png);
}

.ico-education {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-education@2x.0381db27.png);
}

.ico-entertainment {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-entertainment@2x.45e95091.png);
}

.ico-community {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-community@2x.f0454183.png);
}

.ico-work {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-work@2x.d01316a8.png);
}

.ico-plugin-status-paused {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-plugin-status-paused@2x.70b1f212.png);
}

.ico-plugin-status-pending {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-plugin-status-pending@2x.dd6fb9aa.png);
}

.ico-plugin-status-connected {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-plugin-status-connected@2x.a73cd51c.png);
}

.ico-plugin-status-disconnected {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-plugin-status-disconnected@2x.5f0269d3.png);
}

.ico-plugin-status-connectionLost {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-plugin-status-connectionLost@2x.5f0269d3.png);
}

.ico-arrow-right-sm-primary {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-arrow-right-sm-primary@2x.9a09bdd6.png);
}

.ico-loading-type01 {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-loading-type01@2x.ff91d938.png);
}

.ico-loading-type02 {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-loading-type02@2x.750e192d.png);
}

.ico-loading-type03 {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-loading-type03@2x.9c8153ea.png);
}

.ico-scan-xl {
  width: 64px;
  height: 64px;
  line-height: 64px;
  background-image: url(/_next/static/media/ico-scan-xl@2x.183091aa.png);
}

.ico-error-red {
  width: 64px;
  height: 64px;
  line-height: 64px;
  background-image: url(/_next/static/media/ico-error-red@2x.e7197a5d.png);
}

.ico-disconnected-xl {
  width: 64px;
  height: 64px;
  line-height: 64px;
  background-image: url(/_next/static/media/ico-disconnected-xl@2x.bac5fa57.png);
}

.ico-connected-xl {
  width: 64px;
  height: 64px;
  line-height: 64px;
  background-image: url(/_next/static/media/ico-connected-xl@2x.7cb7ffed.png);
}

.ico-paused-xl {
  width: 64px;
  height: 64px;
  line-height: 64px;
  background-image: url(/_next/static/media/ico-paused-xl@2x.bb93f7be.png);
}

.ico-progress01-xl {
  width: 54px;
  height: 54px;
  line-height: 54px;
  background-image: url(/_next/static/media/ico-progress01-xl@2x.00af5d25.png);
}

.ico-progress02-xl {
  width: 54px;
  height: 54px;
  line-height: 54px;
  background-image: url(/_next/static/media/ico-progress02-xl@2x.06bf8a67.png);
}

.ico-progress03-xl {
  width: 54px;
  height: 54px;
  line-height: 54px;
  background-image: url(/_next/static/media/ico-progress03-xl@2x.758134bb.png);
}

.ico-progress04-xl {
  width: 54px;
  height: 54px;
  line-height: 54px;
  background-image: url(/_next/static/media/ico-progress04-xl@2x.76570083.png);
}

.ico-add-sm-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-add-sm-gray@2x.4a8035f8.png);
}

.ico-arrow-lg-lightgray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-arrow-lg-lightgray@2x.b243b73f.png);
}

.ico-percent-xl {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url(/_next/static/media/ico-percent-xl@2x.8b60ff5c.png);
}

.ico-coin {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-coin@2x.62ceb356.png);
}

.ico-coins {
  width: 20px;
  height: 28px;
  line-height: 28px;
  background-image: url(/_next/static/media/ico-coins@2x.1afe846a.png);
}

.ico-coin-xs-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-coin-xs-gray@2x.2a467739.png);
}

.ico-credit-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-credit-md@2x.e5ee7a4b.png);
}

.ico-monitor {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-monitor@2x.fb3d6923.png);
}

.ico-entertainment-xs {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-entertainment-xs@2x.c5e78d95.png);
}

.ico-site-agency-xs {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-site-agency-xs@2x.398d839d.png);
}

.ico-news-xs {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-news-xs@2x.3caffeaf.png);
}

.ico-product-xs {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-product-xs@2x.8de93a1b.png);
}

.ico-education-xs {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-education-xs@2x.6684e2ab.png);
}

.ico-community-xs {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-community-xs@2x.7ee6a1e9.png);
}

.ico-manager-xs {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-manager-xs@2x.11558e63.png);
}

.ico-promotion-xs {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-promotion-xs@2x.a2e1cbd5.png);
}

.ico-del {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-del@2x.7f363e2d.png);
}

.ico-delete-xs-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-delete-xs-gray@2x.8f3428f8.png);
}

.ico-edittable-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-edittable-lg@2x.4b012659.png);
}

.ico-ordered-list-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-ordered-list-lg@2x.b27e2e52.png);
}

.ico-bullet-list-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-bullet-list-lg@2x.ed7ac93a.png);
}

.ico-strike-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-strike-lg@2x.5acd2f3e.png);
}

.ico-underline-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-underline-lg@2x.b9a4f048.png);
}

.ico-italic-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-italic-lg@2x.051401bf.png);
}

.ico-bold-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-bold-lg@2x.a6c8aa04.png);
}

.ico-paragraph-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-paragraph-lg@2x.be1f9d19.png);
}

.ico-link-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-link-lg@2x.bbcbdb9c.png);
}

.ico-h1-lg {
  width: 22px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-h1-lg@2x.72efaf13.png);
}

.ico-h2-lg {
  width: 22px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-h2-lg@2x.0a42e508.png);
}

.ico-h3-lg {
  width: 22px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-h3-lg@2x.32c53eeb.png);
}

.ico-redo-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-redo-lg@2x.5d4adbd7.png);
}

.ico-undo-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-undo-lg@2x.16da42c5.png);
}

.ico-download-light-xs {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-download-light-xs@2x.d0b91d0b.png);
}

.ico-download-dark-xs {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-download-dark-xs@2x.5d480e76.png);
}

.ico-notify-xs {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-notify-xs@2x.b236edde.png);
}

.ico-close-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-close-xs@2x.fd1dffd1.png);
}

.ico-close-xs-dark {
  width: 8px;
  height: 8px;
  line-height: 8px;
  background-image: url(/_next/static/media/ico-close-xs-dark@2x.181447c6.png);
}

.ico-handle-sm-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-handle-sm-gray@2x.6630e2b7.png);
}

.ico-thumb-up-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-thumb-up-white@2x.1f1b9cf7.png);
}

.ico-thumb-up-dark {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-thumb-up-dark@2x.fdf3990a.png);
}

.ico-thumb-down-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-thumb-down-white@2x.2ae0d3e1.png);
}

.ico-thumb-down-dark {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-thumb-down-dark@2x.952fc8e7.png);
}

.ico-deploy-xxl {
  width: 64px;
  height: 64px;
  line-height: 64px;
  background-image: url(/_next/static/media/ico-deploy-xxl@2x.e8315b7a.png);
}

.ico-img2html-sm {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-img2html-sm@2x.20e4fbf8.png);
}

.ico-contrast-sm {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-contrast-sm@2x.75de4413.png);
}

.ico-seo-sm {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-seo-sm@2x.daf752af.png);
}

.ico-linter-sm {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-linter-sm@2x.8d90f101.png);
}

.ico-table-sm {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-table-sm@2x.36e3c61d.png);
}

.ico-listview {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-listview@2x.4d031201.png);
}

.ico-cardview {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-cardview@2x.172a822f.png);
}

.ico-tool-lg-primary {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-tool-lg-primary@2x.e95fa983.png);
}

.ico-img2html-lg {
  width: 43px;
  height: 43px;
  line-height: 43px;
  background-image: url(/_next/static/media/ico-img2html-lg@2x.3e7729bb.png);
}

.ico-contrast-lg {
  width: 43px;
  height: 43px;
  line-height: 43px;
  background-image: url(/_next/static/media/ico-contrast-lg@2x.a04de517.png);
}

.ico-seo-lg {
  width: 43px;
  height: 43px;
  line-height: 43px;
  background-image: url(/_next/static/media/ico-seo-lg@2x.68ae155a.png);
}

.ico-linter-lg {
  width: 43px;
  height: 43px;
  line-height: 43px;
  background-image: url(/_next/static/media/ico-linter-lg@2x.20837947.png);
}

.ico-table-lg {
  width: 43px;
  height: 43px;
  line-height: 43px;
  background-image: url(/_next/static/media/ico-table-lg@2x.1585c52c.png);
}

.ico-arrow-right-lg {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url(/_next/static/media/ico-arrow-right-lg@2x.1dcd185f.png);
}

.ico-caret-up-darkgray-md {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url(/_next/static/media/ico-caret-up-darkgray-md@2x.148fd5b5.png);
}

.ico-more-action {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-more-action@2x.89ed273e.png);
}

.ico-edit-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-edit-sm@2x.6686e571.png);
}

.ico-cloud-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-cloud-sm@2x.4d668829.png);
}

.ico-shared-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-shared-md@2x.1416764e.png);
}

.ico-shared-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-shared-sm@2x.97fc24d8.png);
}

.ico-download-white-sm {
  width: 16.5px;
  height: 16.5px;
  line-height: 16.5px;
  background-image: url(/_next/static/media/ico-download-white-sm@2x.89253108.png);
}

.ico-cancel-xs {
  width: 12px;
  height: 12.5px;
  line-height: 12.5px;
  background-image: url(/_next/static/media/ico-cancel-xs@2x.fca7234c.png);
}

.ico-cancel-black-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-cancel-black-xs@2x.ed1adcd9.png);
}

.ico-delete-xs {
  width: 12px;
  height: 12.5px;
  line-height: 12.5px;
  background-image: url(/_next/static/media/ico-delete-xs@2x.489df067.png);
}

.ico-delete-white-xs {
  width: 12px;
  height: 12.5px;
  line-height: 12.5px;
  background-image: url(/_next/static/media/ico-delete-white-xs@2x.c8d7e39f.png);
}

.ico-add-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-add-sm@2x.cccbc6bf.png);
}

.ico-service-img2html-lg {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-image: url(/_next/static/media/ico-service-img2html-lg@2x.6aee38ac.png);
}

.ico-service-contrast-lg {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-image: url(/_next/static/media/ico-service-contrast-lg@2x.8b23c503.png);
}

.ico-service-seo-lg {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-image: url(/_next/static/media/ico-service-seo-lg@2x.89c00243.png);
}

.ico-service-linter-lg {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-image: url(/_next/static/media/ico-service-linter-lg@2x.ee05c37d.png);
}

.ico-service-table-lg {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-image: url(/_next/static/media/ico-service-table-lg@2x.3d502b38.png);
}

.ico-tool-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-tool-md@2x.a017057b.png);
}

.ico-question-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-question-md@2x.745a4c0c.png);
}

.ico-copy-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-copy-xs@2x.906d91f4.png);
}

.ico-copy-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-copy-sm@2x.26f25780.png);
}

.ico-copy-white-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-copy-white-sm@2x.896dc709.png);
}

.ico-copy-gray-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-copy-gray-sm@2x.1049130e.png);
}

.ico-arrow-left-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-arrow-left-white@2x.339190f5.png);
}

.ico-check-green {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-check-green@2x.2a556848.png);
}

.ico-warning-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-warning-sm@2x.0445b830.png);
}

.ico-info-md {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-info-md@2x.ea6c96b7.png);
}

.ico-info-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-info-sm@2x.1ddce889.png);
}

.ico-export-white-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-export-white-sm@2x.2c4a9c18.png);
}

.ico-cancel-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-cancel-md@2x.23ceb4c7.png);
}

.ico-zoomin-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-zoomin-xs@2x.08b057ae.png);
}

.ico-zoomout-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-zoomout-xs@2x.a4bec1b8.png);
}

.ico-reset-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-reset-xs@2x.6f474f9c.png);
}

.ico-pass {
  width: 32px;
  height: 32.5px;
  line-height: 32.5px;
  background-image: url(/_next/static/media/ico-pass@2x.d1624769.png);
}

.ico-checking-red {
  width: 12px;
  height: 12.5px;
  line-height: 12.5px;
  background-image: url(/_next/static/media/ico-checking-red@2x.daf26627.png);
}

.ico-checking-white {
  width: 12px;
  height: 12.5px;
  line-height: 12.5px;
  background-image: url(/_next/static/media/ico-checking-white@2x.7634c8ce.png);
}

.ico-exclamation-mark {
  width: 12px;
  height: 12.5px;
  line-height: 12.5px;
  background-image: url(/_next/static/media/ico-exclamation-mark@2x.1532b4c6.png);
}

.ico-fail-sm {
  width: 16.5px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-fail-sm@2x.37b0604a.png);
}

.ico-pass-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-pass-sm@2x.83dcfe1c.png);
}

.ico-background-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-background-sm@2x.67b2af5e.png);
}

.ico-text-color-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-text-color-sm@2x.586c6cab.png);
}

.ico-arrow-right-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-arrow-right-sm@2x.9f2ccf7a.png);
}

.ico-workspace-black-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-workspace-black-sm@2x.264d8870.png);
}

.ico-check-white-xs {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-check-white-xs@2x.169446f6.png);
}

.ico-close-black-md {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url(/_next/static/media/ico-close-black-md@2x.a8b30b20.png);
}

.ico-share-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-share-sm@2x.bed483bc.png);
}

.ico-share-white-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-share-white-sm@2x.1ad945c7.png);
}

.ico-download-primary-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-download-primary-sm@2x.1ecf41b9.png);
}

.ico-linkclip-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-linkclip-sm@2x.f473df94.png);
}

.ico-caret-up-darkgray-sm {
  width: 16.5px;
  height: 16.5px;
  line-height: 16.5px;
  background-image: url(/_next/static/media/ico-caret-up-darkgray-sm@2x.b55e1d3e.png);
}

.ico-caret-down-darkgray-sm {
  width: 16.5px;
  height: 16.5px;
  line-height: 16.5px;
  background-image: url(/_next/static/media/ico-caret-down-darkgray-sm@2x.ec243a37.png);
}

.ico-check-blue {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-check-blue@2x.8eda82b7.png);
}

.ico-caption-tag-no {
  width: 14.5px;
  height: 14.5px;
  line-height: 14.5px;
  background-image: url(/_next/static/media/ico-caption-tag-no@2x.759a7b0a.png);
}

.ico-caption-tag-yes {
  width: 14.5px;
  height: 14.5px;
  line-height: 14.5px;
  background-image: url(/_next/static/media/ico-caption-tag-yes@2x.cb2240fd.png);
}

.ico-caption-exist {
  width: 14.5px;
  height: 14.5px;
  line-height: 14.5px;
  background-image: url(/_next/static/media/ico-caption-exist@2x.bb248ec6.png);
}

.ico-violation-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-violation-sm@2x.031deb50.png);
}

.ico-arrow-left-gray {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url(/_next/static/media/ico-arrow-left-gray@2x.a7f2fe60.png);
}

.ico-handle {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-handle@2x.42321b72.png);
}

.ico-undo {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-undo@2x.08a54ff2.png);
}

.ico-redo {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-redo@2x.33fea930.png);
}

.ico-paragraph-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-paragraph-sm@2x.6722a6d3.png);
}

.ico-bold {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-bold@2x.036e7b27.png);
}

.ico-italic {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-italic@2x.c2c9b2d9.png);
}

.ico-underline {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-underline@2x.3036e6d1.png);
}

.ico-bullet-list {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-bullet-list@2x.f97747cd.png);
}

.ico-ordered-list {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-ordered-list@2x.06d5127c.png);
}

.ico-table {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-table@2x.70a870a2.png);
}

.ico-link {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-link@2x.2aeb1039.png);
}

.ico-strike {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-strike@2x.3d48c784.png);
}

.ico-plus-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-plus-sm@2x.112255a1.png);
}

.ico-del-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-del-sm@2x.a225632f.png);
}

.ico-cellmerge-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-cellmerge-sm@2x.54e09925.png);
}

.ico-celldivision-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-celldivision-sm@2x.6c02c937.png);
}

.ico-columntitle-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-columntitle-sm@2x.fc38babe.png);
}

.ico-rowtitle-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-rowtitle-sm@2x.90dc61d3.png);
}

.ico-no-repeat-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-no-repeat-sm@2x.5d42fb13.png);
}

.ico-notify {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-notify@2x.2f368fca.png);
}

.ico-profile-sm {
  width: 20.5px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-profile-sm@2x.e3685988.png);
}

.ico-link-sm-white {
  width: 12.5px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-link-sm-white@2x.52913d8b.png);
}

.ico-pencil-sm-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-pencil-sm-gray@2x.9f2339c9.png);
}

.ico-faq-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-faq-sm@2x.7f562c5e.png);
}

.ico-guide-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-guide-sm@2x.97b0a796.png);
}

.ico-credit-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-credit-sm@2x.ec862777.png);
}

.ico-certification-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-certification-sm@2x.5a797779.png);
}

.ico-support-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-support-sm@2x.98944406.png);
}

.ico-upload-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-upload-sm@2x.5b8420ae.png);
}

.ico-plan-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-plan-sm@2x.1aeeaa81.png);
}

.ico-sitescan-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-sitescan-sm@2x.793b1119.png);
}

.ico-urlscan-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-urlscan-sm@2x.b57fb890.png);
}

.ico-contrastline-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-contrastline-sm@2x.011a6bf9.png);
}

.ico-metatag-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-metatag-sm@2x.0b338399.png);
}

.ico-expertcheck-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-expertcheck-sm@2x.301e75f1.png);
}

.ico-tableline-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-tableline-sm@2x.b971a203.png);
}

.ico-link-lightgray {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-link-lightgray@2x.a11f7cfa.png);
}

.ico-arrow-right-xs-white {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-arrow-right-xs-white@2x.d4d1351a.png);
}

.ico-caret-down-gray-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-caret-down-gray-md@2x.35277adb.png);
}

.ico-imagetype02-md-gray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-imagetype02-md-gray@2x.636256da.png);
}

.ico-storage-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-storage-md@2x.7445aea5.png);
}

.ico-plus-primary-sm {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-plus-primary-sm@2x.5290bcdb.png);
}

.ico-depth {
  width: 7.5px;
  height: 7.5px;
  line-height: 7.5px;
  background-image: url(/_next/static/media/ico-depth@2x.42b6b940.png);
}

.ico-check-green-md {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-check-green-md@2x.19c69a13.png);
}

.ico-cancel-type2-md {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-cancel-type2-md@2x.073ae7ca.png);
}

.ico-plan-starter-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-plan-starter-lg@2x.1b2db2ba.png);
}

.ico-plan-pro-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-plan-pro-lg@2x.70e9f7cb.png);
}

.ico-plan-team-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-plan-team-lg@2x.d0d20a2e.png);
}

.ico-plan-enterprise-lg {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(/_next/static/media/ico-plan-enterprise-lg@2x.6fb3b823.png);
}

.ico-info-sm-lightgray {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-info-sm-lightgray@2x.6542a9d5.png);
}

.ico-mode-minimal {
  width: 28px;
  height: 28px;
  line-height: 28px;
  background-image: url(/_next/static/media/ico-mode-minimal@2x.c30dd29c.png);
}

.ico-mode-ally {
  width: 28px;
  height: 28px;
  line-height: 28px;
  background-image: url(/_next/static/media/ico-mode-ally@2x.16d298d6.png);
}

.ico-mode-minimal-white {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-mode-minimal-white@2x.83b8cf85.png);
}

.ico-mode-ally-white {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-mode-ally-white@2x.7795fd48.png);
}

.ico-mode-minimal-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-mode-minimal-gray@2x.0b9c4da2.png);
}

.ico-mode-ally-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-mode-ally-gray@2x.a720f3c6.png);
}

.ico-img-type8-lg {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-img-type8-lg@2x.89d858c0.png);
}

.ico-img-type6-lg {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-img-type6-lg@2x.24c5cefa.png);
}

.ico-img-type5-lg {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-img-type5-lg@2x.896b6f1d.png);
}

.ico-img-type4-lg {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-img-type4-lg@2x.b4432e10.png);
}

.ico-img-type3-lg {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-img-type3-lg@2x.e884aea9.png);
}

.ico-img-type2-lg {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-img-type2-lg@2x.506df524.png);
}

.ico-img-type1-lg {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-img-type1-lg@2x.8a05feb5.png);
}

.ico-ai-generate-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-ai-generate-white@2x.d9558847.png);
}

.ico-ai-generate-black-lg {
  width: 18px;
  height: 18px;
  line-height: 18px;
  background-image: url(/_next/static/media/ico-ai-generate-black-lg@2x.d87c7d5a.png);
}

.ico-text-format-darkgray {
  width: 10px;
  height: 10px;
  line-height: 10px;
  background-image: url(/_next/static/media/ico-text-format-darkgray@2x.ef9df80c.png);
}

.ico-curly-brackets-darkgray {
  width: 10px;
  height: 10px;
  line-height: 10px;
  background-image: url(/_next/static/media/ico-curly-brackets-darkgray@2x.8ad03c17.png);
}

.ico-warning-type02-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-warning-type02-sm@2x.e8730726.png);
}

.ico-url-link-sm {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-url-link-sm@2x.74cb4c6e.png);
}

.ico-ai-generate-sm-gray {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-ai-generate-sm-gray@2x.3c6b61ef.png);
}

.ico-mode-ally-md {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-mode-ally-md@2x.5f8bdd09.png);
}

.ico-mode-minimal-md {
  width: 14px;
  height: 14px;
  line-height: 14px;
  background-image: url(/_next/static/media/ico-mode-minimal-md@2x.ddb2ea58.png);
}

.ico-page-loading {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background-image: url(/_next/static/media/ico-page-loading@2x.73678df2.png);
}

.ico-coin-sm {
  width: 18px;
  height: 18px;
  line-height: 18px;
  background-image: url(/_next/static/media/ico-coin-sm@2x.a0bf1ddd.png);
}

.ico-email-line {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url(/_next/static/media/ico-email-line@2x.62693163.png);
}

.ico-a11y-embelem {
  width: 48px;
  height: 48px;
  line-height: 48px;
  background-image: url(/_next/static/media/ico-a11y-embelem@2x.8db7c290.png);
}

.ico-page-locked {
  width: 80px;
  height: 80px;
  line-height: 80px;
  background-image: url(/_next/static/media/ico-page-locked@2x.ec0de981.png);
}

.ico-log-sm-white {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url(/_next/static/media/ico-log-sm-white@2x.50f4a2ff.png);
}

.ico-arrow-right-green {
  width: 10px;
  height: 10px;
  line-height: 10px;
  background-image: url(/_next/static/media/ico-arrow-right-green@2x.1d3f9359.png);
}

.list > li {
  position: relative;
}
.list > li:after {
  display: block;
  clear: both;
  content: "";
}
.list > li:before {
  content: "";
  position: absolute;
  left: 0;
}
.list li {
  position: relative;
  padding-left: 11px;
}
.list li + li {
  margin-top: 4px;
}
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  margin-top: -1.5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c4c4c4;
}

.list1 > li {
  position: relative;
  padding-left: 12px;
  color: #4b5563;
}
.list1 > li::before {
  content: "";
  position: absolute;
  margin-top: -3px;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4b5563;
}

.list2 > li {
  padding-left: 14px;
  line-height: 1.3;
}
.list2 > li::before {
  content: "";
  position: absolute;
  margin-top: -3px;
  left: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
}
.list2 > li + li {
  margin-top: 0;
}

.list3 {
  font-size: 14px;
  color: #1f2937;
}
.list3 > li {
  padding-left: 16px;
  line-height: 1.4;
}
.list3 > li::before {
  content: "";
  position: absolute;
  margin-top: -3px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #6b7280;
}
.list3 > li .code {
  position: relative;
  top: -1px;
  height: 20px;
  margin: 0 4px;
}

.list-num {
  padding-left: 21px;
}
.list-num > li {
  padding-left: 0;
  font-weight: 400;
  font-size: 14px;
  color: #1f2937;
  list-style-type: decimal;
}
.list-num > li::before {
  content: none;
}

.list4 > li {
  padding-left: 14px;
  line-height: 1.3;
}
.list4 > li::before {
  content: "";
  position: absolute;
  left: 6px;
  width: 4.5px;
  height: 1px;
  background-color: currentColor;
}
.list4 > li + li {
  margin-top: 0;
}

/* 불릿 시스템 */
.page-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #1f2937;
}

@media (min-width: 768px) {
  .content-row > .inner {
    display: flex;
    margin: -12px;
  }
  .content-row > .inner > .col-item {
    flex: 1 1 50%;
    margin: 12px;
  }
  .content-row > .inner > .col-item-fit {
    flex: 0 0 auto;
    margin: 12px;
  }
}
@media (max-width: 767.98px) {
  .content-row > .inner > .col-item + .col-item,
  .content-row > .inner > .col-item + .col-item-fit,
  .content-row > .inner > .col-item-fit + .col-item,
  .content-row > .inner > .col-item-fit + .col-item-fit {
    margin-top: 40px;
  }
}

.card-list {
  display: flex;
  flex-wrap: wrap;
  margin: 10px -10px -10px -10px;
}
.card-list li {
  position: relative;
  width: calc(20% - 20px);
  padding: 16px;
  margin: 10px;
  border-radius: 16px;
  background: #f3f4f6;
}
.card-list li:hover {
  background: #f3f4f6;
}
.card-list li.checked {
  position: relative;
  background: #eff6ff;
}
.card-list li.checked::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  border: 2px solid #1364ff;
}
.card-list .check-item {
  position: absolute;
  top: 18px;
  left: 16px;
}
.card-list .more-action-wrap {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 24px;
  height: 24px;
}
.card-list .more-action-wrap .more-popup {
  position: absolute;
  left: auto;
  right: -1px;
}
.card-list .more-action-wrap .more-action,
.card-list .more-action-wrap .btn-action {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.card-list .card-header {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 28px;
}
.card-list .card-body {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  height: 140px;
  max-height: 140px;
}
.card-list .card-body .img {
  display: inline-flex;
  width: 100%;
  height: 100%;
  max-height: 140px;
  border-radius: 12px;
  background: #f3f4f6;
  overflow: hidden;
}
.card-list .card-body .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.card-list .card-body .img.no-img {
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);
}
.card-list .card-body .img.no-img img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: center;
}
.card-list .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
}
.card-list h3.file-name {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1;
  line-height: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.card-list h3.file-name .file-name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: #1f2937;
  text-align: left;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1;
  line-height: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  line-height: 21px;
}
.card-list .label-shared {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
}
.card-list .service-type {
  min-width: 20px;
  height: 20px;
}
.card-list .service-type .ico {
  width: 100%;
  height: 100%;
  margin-bottom: 2px;
}
.card-list .data-area {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.card-list .file-size {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: #4b5563;
}
.card-list .date-time,
.card-list .last-date {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: #4b5563;
}
@media (max-width: 1782px) {
  .card-list li {
    width: calc(25% - 20px);
    flex: 0 0 auto;
  }
}
@media (max-width: 1514px) {
  .card-list li {
    width: calc(33.33% - 20px);
  }
}
@media (max-width: 1024.98px) {
  .card-list li {
    width: calc(50% - 20px);
  }
}
@media (max-width: 767.98px) {
  .card-list li {
    width: calc(100% - 20px);
  }
}

/* 박스 */
.box {
  position: relative;
  padding: 20px;
  border-radius: 12px;
  background-color: #f3f4f6;
}
.box + .box {
  margin-top: -24px;
}
.box-outline {
  border: 1px solid #d1d5db;
  border-radius: 20px;
}
.box-point {
  border-radius: 20px;
  background-color: #eff6ff;
  z-index: 0;
}
.box-outline-point {
  padding: 16px 20px;
  background-color: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 12px;
}
.box-lightgray {
  background-color: #f9fafb;
}
.box-outline-gray {
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
}
.box-full {
  width: 100%;
}
.box-code {
  padding: 20px;
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-weight: 400;
  font-size: 12px;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
}
.box-code pre {
  -moz-tab-size: 4;
  tab-size: 4;
  white-space: pre; /* 공백 보존 */
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
}
.box-code code {
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
}
.box-code .code-gray {
  color: #6b7280;
}
.box-code .code-red {
  color: #dc2626;
}
.box-code .code-line {
  display: block;
}
.box-code .code-line.depth-2 {
  margin-left: 14px;
}
@media (max-width: 1024.98px) {
  .box-code {
    padding: 16px;
  }
  .box-code ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background-color: transparent;
  }
  .box-code ::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 8px;
    background-clip: padding-box;
    border: 6px solid transparent;
  }
  .box-code ::-webkit-scrollbar-thumb:hover {
    background-color: rgb(194.6951219512, 199.9390243902, 207.8048780488);
  }
  .box-code ::-webkit-scrollbar-thumb:active {
    background-color: rgb(180.3902439024, 186.8780487805, 196.6097560976);
  }
  .box-code ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .box-code ::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  @supports (-moz-appearance: none) {
    .box-code * {
      scrollbar-width: thin;
      scrollbar-color: #d1d5db transparent;
    }
    .box-code:hover {
      scrollbar-color: rgb(194.6951219512, 199.9390243902, 207.8048780488) transparent;
    }
    .box-code:active {
      scrollbar-color: rgb(180.3902439024, 186.8780487805, 196.6097560976) transparent;
    }
  }
  .box-code .code-container {
    overflow-x: auto;
  }
}

.box-warning {
  width: 100%;
  margin-top: 16px;
  padding: 24px 16px;
  background-color: #fff4f4;
  border: 1px solid #ffc8c8;
  border-radius: 12px;
  text-align: left;
}
.box-warning .list li + li {
  margin-top: 6px;
}

.box-info {
  width: 100%;
  margin-top: 16px;
  padding: 24px 16px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-align: left;
}
.box-info .list > li + li {
  margin-top: 6px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 11px;
  font-size: inherit;
}
.btn:disabled, .btn.disabled {
  cursor: default;
  pointer-events: none;
}
.btn.blink {
  animation: blink 1s infinite !important;
}

@keyframes blink {
  0%, 100% {
    box-shadow: 0 0 5px 2px rgba(186, 253, 2, 0.5);
  }
  50% {
    box-shadow: 0 0 10px 5px rgb(186, 253, 2);
  }
}
.btn-primary {
  color: #fff;
  background: #1364ff;
}
.btn-primary:hover:not(:disabled):not(.disabled) {
  background: #0658f5;
}
.btn-primary:disabled, .btn-primary.disabled {
  color: #fff;
  background: #bfdbfe;
  pointer-events: none;
}

.btn-secondary {
  color: #000;
  background: #bafd02;
}

.btn-invalid {
  color: #fff;
  background: #ef4444;
}
.btn-invalid:hover:not(:disabled):not(.disabled) {
  background: #dc2626;
}
.btn-invalid:disabled, .btn-invalid.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.btn-lightinvalid {
  color: #dc2626;
  background: #ffdede;
}
.btn-lightinvalid:hover:not(:disabled):not(.disabled) {
  background: #ffc8c8;
}
.btn-lightinvalid:disabled, .btn-lightinvalid.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.btn-lightgray {
  color: #1f2937;
  background: #f3f4f6;
}

.btn-gray {
  color: #fff;
  background: #6b7280;
}
.btn-gray:hover:not(:disabled):not(.disabled) {
  background: #4b5563;
}
.btn-gray:disabled, .btn-gray.disabled {
  background: #d1d5db;
  pointer-events: none;
}

.btn-dark {
  color: #fff;
  background: #4b5563;
}

.btn-black {
  background: #000;
  border: 1px solid #000;
  color: #fff;
  transition: all 0.3s ease;
  transition-delay: 0s;
}
.btn-black:hover {
  background: #1a212b;
  border: 1px solid #1a212b;
  color: #fff;
}

.btn-white {
  color: #1f2937;
  background: #fff;
  transition: all 0.3s ease;
  transition-delay: 0s;
}
.btn-white:hover {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid #fff;
  color: #fff;
  transition-delay: 0.1s;
}

.btn-outline-primary {
  color: #1364ff;
  background: #fff;
  border: 1px solid #9ca3af;
}
.btn-outline-primary:hover {
  background: #f3f4f6;
  border: 1px solid #6b7280;
}
.btn-outline-primary:disabled {
  color: #6b7280;
  background: #fff;
  border: 1px solid primary;
}

.btn-outline-gray {
  color: #1f2937;
  background: #fff;
  border: 1px solid #d1d5db;
}
.btn-outline-gray:hover:not(:disabled):not(.disabled) {
  background: #f3f4f6;
  border: 1px solid #6b7280;
}
.btn-outline-gray:disabled, .btn-outline-gray.disabled {
  color: #6b7280;
  background: #fff;
  border: 1px solid #e5e7eb;
  pointer-events: none;
}

.btn-outline-none {
  color: #1f2937;
  background: #fff;
  border: 1px solid transparent;
}
.btn-outline-none:hover:not(:disabled):not(.disabled) {
  background: #f3f4f6;
}
.btn-outline-none:disabled, .btn-outline-none.disabled {
  color: #6b7280;
  background: #fff;
  border: 1px solid #e5e7eb;
  pointer-events: none;
}

.btn-outline-primary {
  color: #1364ff;
  background: #fff;
  border: 1px solid #1364ff;
}
.btn-outline-primary:hover:not(:disabled):not(.disabled) {
  background: #eff6ff;
  border: 1px solid #1364ff;
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled {
  color: #60a5fa;
  background: #fff;
  border: 1px solid #bfdbfe;
  pointer-events: none;
}
.btn-outline-primary:disabled .ico, .btn-outline-primary.disabled .ico {
  opacity: 0.5;
}

.btn-outline-white {
  color: #fff;
  border: 1px solid currentColor;
}

.btn-text-gray {
  color: #4b5563;
}

.btn-text-primary {
  color: #1364ff;
}

.btn-xs {
  height: 28px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.btn-sm {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.btn-md {
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.btn-lg {
  height: 48px;
  padding: 0 20px;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 700;
}

.btn-xl {
  min-width: 100px;
  height: 56px;
  padding: 0 24px;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 700;
  gap: 6px;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-gradient {
  position: relative;
  color: white;
  isolation: isolate;
  padding: 0;
}
.btn-gradient:disabled {
  opacity: 0.3;
}
.btn-gradient .text {
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
  position: relative;
  height: 100%;
}
.btn-gradient .text::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background-color: #000;
  z-index: -1;
  border-radius: 7px;
}
.btn-gradient .bg-blur-1 {
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(256deg, rgba(0, 140, 255, 0.9) 7.14%, rgba(186, 253, 2, 0.9) 93.15%);
  filter: blur(7.5px);
  z-index: -2;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.btn-gradient .bg-blur-2 {
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(256deg, rgba(186, 253, 2, 0.9) 7.14%, rgba(0, 140, 255, 0.9) 93.15%);
  filter: blur(7.5px);
  z-index: -2;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.btn-gradient .border-1 {
  position: absolute;
  inset: 0;
  padding: 2px;
  background: linear-gradient(102.37deg, #bafd02 4.21%, #008cff 95.02%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.btn-gradient .border-2 {
  position: absolute;
  inset: 0;
  padding: 2px;
  background: linear-gradient(102.37deg, #008cff 4.21%, #bafd02 95.02%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.btn-gradient:hover:not(:disabled):not(.disabled), .btn-gradient:focus:not(:disabled):not(.disabled) {
  outline: none;
}
.btn-gradient:hover:not(:disabled):not(.disabled) .bg-blur-1,
.btn-gradient:hover:not(:disabled):not(.disabled) .border-1, .btn-gradient:focus:not(:disabled):not(.disabled) .bg-blur-1,
.btn-gradient:focus:not(:disabled):not(.disabled) .border-1 {
  opacity: 0;
}
.btn-gradient:hover:not(:disabled):not(.disabled) .bg-blur-2,
.btn-gradient:hover:not(:disabled):not(.disabled) .border-2, .btn-gradient:focus:not(:disabled):not(.disabled) .bg-blur-2,
.btn-gradient:focus:not(:disabled):not(.disabled) .border-2 {
  opacity: 1;
}
.btn-gradient:disabled, .btn-gradient.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.btn-gradient .btn-gradient-fast .bg-blur-1,
.btn-gradient .btn-gradient-fast .bg-blur-2,
.btn-gradient .btn-gradient-fast .border-1,
.btn-gradient .btn-gradient-fast .border-2 {
  transition: opacity 0.3s ease-in-out;
}
.btn-gradient .btn-gradient-slow .bg-blur-1,
.btn-gradient .btn-gradient-slow .bg-blur-2,
.btn-gradient .btn-gradient-slow .border-1,
.btn-gradient .btn-gradient-slow .border-2 {
  transition: opacity 0.8s ease-in-out;
}
.btn-gradient .btn-gradient-smooth .bg-blur-1,
.btn-gradient .btn-gradient-smooth .bg-blur-2,
.btn-gradient .btn-gradient-smooth .border-1,
.btn-gradient .btn-gradient-smooth .border-2 {
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn-gradient .btn-gradient-bounce .bg-blur-1,
.btn-gradient .btn-gradient-bounce .bg-blur-2,
.btn-gradient .btn-gradient-bounce .border-1,
.btn-gradient .btn-gradient-bounce .border-2 {
  transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.btn-gradient.btn-xs .text {
  padding-inline: 8px;
  border-radius: 7px;
}
.btn-gradient.btn-xs .bg-blur-1,
.btn-gradient.btn-xs .bg-blur-2,
.btn-gradient.btn-xs .border-1,
.btn-gradient.btn-xs .border-2 {
  border-radius: 8px;
}
.btn-gradient.btn-sm .text {
  padding-inline: 12px;
  border-radius: 7px;
}
.btn-gradient.btn-sm .bg-blur-1,
.btn-gradient.btn-sm .bg-blur-2,
.btn-gradient.btn-sm .border-1,
.btn-gradient.btn-sm .border-2 {
  border-radius: 8px;
}
.btn-gradient.btn-md .text {
  padding-inline: 16px;
  border-radius: 7px;
}
.btn-gradient.btn-md .bg-blur-1,
.btn-gradient.btn-md .bg-blur-2,
.btn-gradient.btn-md .border-1,
.btn-gradient.btn-md .border-2 {
  border-radius: 8px;
}
.btn-gradient.btn-lg .text {
  padding-inline: 20px;
  border-radius: 11px;
}
.btn-gradient.btn-lg .bg-blur-1,
.btn-gradient.btn-lg .bg-blur-2,
.btn-gradient.btn-lg .border-1,
.btn-gradient.btn-lg .border-2 {
  border-radius: 12px;
}
.btn-gradient.btn-xl .text {
  padding-inline: 24px;
  border-radius: 11px;
}
.btn-gradient.btn-xl .bg-blur-1,
.btn-gradient.btn-xl .bg-blur-2,
.btn-gradient.btn-xl .border-1,
.btn-gradient.btn-xl .border-2 {
  border-radius: 12px;
}

.btn-ai-generate .border-1,
.btn-ai-generate .border-2 {
  padding: 4px;
}
.btn-ai-generate .bg-blur-1,
.btn-ai-generate .bg-blur-2 {
  display: none;
}
.btn-ai-generate .text {
  gap: 4px;
}
.btn-ai-generate .text::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background-color: #000;
  z-index: -1;
  border-radius: 7px;
}
.btn-ai-generate .text .count {
  position: relative;
  margin-left: 9px;
  opacity: 0.7;
}
.btn-ai-generate .text .count::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  width: 1px;
  height: calc(100% + 6px);
  background: #fff;
  opacity: 0.2;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.btn-group.group-center {
  justify-content: center;
}

.btn-group-flex {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-group-flex .btn {
  flex: 1 1 25%;
}

.btn-group-fixed {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 76px;
  padding: 0 24px;
}
@media (max-width: 1024.98px) {
  .btn-group-fixed {
    position: relative;
    display: none;
    z-index: 50;
  }
}

.btn-group-between {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
}
.pagination + .btn-group-between {
  margin-top: 0;
}
.btn-group-between .left,
.btn-group-between .right {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btn-group-between .right:only-child {
  flex: 1 1 auto;
  justify-content: flex-end;
}
@media (min-width: 768px) {
  .btn-group-between {
    justify-content: space-between;
  }
}
@media (max-width: 767.98px) {
  .btn-group-between {
    flex-direction: column;
    align-items: stretch;
  }
  .pagination + .btn-group-between {
    margin-top: 44px;
  }
  .btn-group-between .left {
    display: none;
  }
  .btn-group-between .right {
    flex: 1 1 auto;
    flex-wrap: wrap;
  }
  .btn-group-between .right .btn {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(33.3333333333% - 5.3333333333px);
  }
  .btn-group-between .right .btn.sm-full {
    flex-basis: 100%;
  }
}

.btn-group-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-group-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.gap-xs {
  gap: 4px !important;
}
.gap-sm {
  gap: 6px !important;
}
.gap-md {
  gap: 6px !important;
}
.gap-lg {
  gap: 8px !important;
}

/* 탭메뉴 */
.tabmenu {
  margin-bottom: 24px;
}
.tabmenu:before, .tabmenu:after {
  content: "";
  display: table;
}

.tab-list {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  font-size: 16px;
  border-bottom: 1px solid #e5e7eb;
}
.tab-list li {
  flex: 0 0 auto;
  height: 56px;
}
.tab-list li a,
.tab-list li button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 16px;
}
.tab-list li span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-height: 2.4em;
  line-height: 1.2em;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  font-weight: 500;
  color: #4b5563;
}
.tab-list li.on {
  position: relative;
}

.tabmenu-type1 .tab-list {
  display: flex;
  justify-items: flex-start;
  text-align: center;
  flex-wrap: wrap;
  overflow: hidden;
  background-color: #fff;
}
.tabmenu-type1 .tab-list li {
  flex: 1 1 auto;
  width: 20%;
  height: 48px;
}
.tabmenu-type1 .tab-list li.on a {
  border: 1px solid #0658f5;
  background-color: #eff6ff;
  font-weight: 700;
}
.tabmenu-type1 .tab-list li.on a span {
  color: #1364ff;
}
@media (min-width: 1025px) {
  .tabmenu-type1 .tab-list li a:hover {
    border-color: transparent;
    background-color: #f3f4f6;
  }
  .tabmenu-type1 .tab-list li a:hover span {
    color: #1f2937;
  }
  .tabmenu-type1 .tab-list li.on a:hover {
    border: 1px solid #0658f5;
    background-color: #eff6ff;
  }
  .tabmenu-type1 .tab-list li.on a:hover span {
    color: #1364ff;
  }
}
.tabmenu-type1 .tab-list li:nth-child(n+6) {
  flex: 0 0 auto;
}
.tabmenu-type1.bg-lightgray {
  border-radius: 10px;
}
.tabmenu-type1.bg-lightgray .tab-list {
  border: 1px solid #f9fafb;
  border-radius: 10px;
  background-color: #f3f4f6 !important;
}
@media (min-width: 1025px) {
  .tabmenu-type1.bg-lightgray li a:hover {
    background-color: #e5e7eb;
  }
}

.tabmenu-type2 .tab-list {
  background-color: #fff;
}
.tabmenu-type2 .tab-list li {
  height: 48px;
}
.tabmenu-type2 .tab-list li a,
.tabmenu-type2 .tab-list li button {
  padding: 4px 16px;
}
.tabmenu-type2 .tab-list li a .badge-text,
.tabmenu-type2 .tab-list li button .badge-text {
  color: #fff;
}
.tabmenu-type2 .tab-list li.on a,
.tabmenu-type2 .tab-list li.on button {
  position: relative;
  font-weight: 700;
}
.tabmenu-type2 .tab-list li.on a::before,
.tabmenu-type2 .tab-list li.on button::before {
  content: "";
  position: absolute;
  bottom: -1px;
  z-index: 10;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
}
.tabmenu-type2 .tab-list li.on a span,
.tabmenu-type2 .tab-list li.on button span {
  color: #1f2937;
}
.tabmenu-type2 .tab-list li.on a .badge-text,
.tabmenu-type2 .tab-list li.on button .badge-text {
  color: #fff;
}
@media (min-width: 1025px) {
  .tabmenu-type2 .tab-list li a:hover,
  .tabmenu-type2 .tab-list li button:hover {
    background-color: #f3f4f6;
    position: relative;
  }
  .tabmenu-type2 .tab-list li a:hover::before,
  .tabmenu-type2 .tab-list li button:hover::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #e5e7eb;
  }
  .tabmenu-type2 .tab-list li a:hover span,
  .tabmenu-type2 .tab-list li button:hover span {
    color: #1f2937;
  }
  .tabmenu-type2 .tab-list li a:hover .badge-text,
  .tabmenu-type2 .tab-list li button:hover .badge-text {
    color: #fff;
  }
  .tabmenu-type2 .tab-list li.on a:hover,
  .tabmenu-type2 .tab-list li.on button:hover {
    background-color: #f3f4f6;
    position: relative;
  }
  .tabmenu-type2 .tab-list li.on a:hover::before,
  .tabmenu-type2 .tab-list li.on button:hover::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000;
  }
  .tabmenu-type2 .tab-list li.on a:hover span,
  .tabmenu-type2 .tab-list li.on button:hover span {
    color: #1f2937;
  }
  .tabmenu-type2 .tab-list li.on a:hover .badge-text,
  .tabmenu-type2 .tab-list li.on button:hover .badge-text {
    color: #fff;
  }
}

.tabmenu-type3 {
  margin-bottom: 0;
}
.tabmenu-type3 .tab-list {
  gap: 8px;
  border-bottom: 0;
}
.tabmenu-type3 .tab-list li {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}
.tabmenu-type3 .tab-list li:hover {
  background: #e5e7eb;
}
.tabmenu-type3 .tab-list li a {
  padding: 3px 1px;
}
.tabmenu-type3 .tab-list li.on {
  background: #e5e7eb;
}

.tabmenu-type2 .tab-list li a:has(.badge-plan),
.tabmenu-type2 .tab-list li button:has(.badge-plan),
.tabmenu-type2 .tab-list li.on a:has(.badge-plan),
.tabmenu-type2 .tab-list li.on button:has(.badge-plan) {
  gap: 4px;
}
.tabmenu-type2 .tab-list li a .badge-plan,
.tabmenu-type2 .tab-list li button .badge-plan,
.tabmenu-type2 .tab-list li.on a .badge-plan,
.tabmenu-type2 .tab-list li.on button .badge-plan {
  line-height: 1;
}
.tabmenu-type2 .tab-list li a .badge-plan.locked .badge-text,
.tabmenu-type2 .tab-list li button .badge-plan.locked .badge-text,
.tabmenu-type2 .tab-list li.on a .badge-plan.locked .badge-text,
.tabmenu-type2 .tab-list li.on button .badge-plan.locked .badge-text {
  color: #6b7280;
}

table {
  width: 100%;
  border-spacing: 0;
}

.table table {
  table-layout: fixed;
  border-collapse: collapse;
  border-left: hidden;
  border-right: hidden;
  border-bottom: 1px solid #e5e7eb;
}
.table thead {
  word-break: keep-all;
}
.table thead ~ tbody,
.table thead ~ tfoot {
  text-align: center;
}
.table caption + tbody > tr:first-child > th,
.table caption + tbody > tr:first-child > td,
.table colgroup + tbody > tr:first-child > th,
.table colgroup + tbody > tr:first-child > td {
  border-top: 0;
}
.table th {
  height: 48px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: #6b7280;
}
.table td {
  height: 76px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}
.table thead {
  text-align: center;
}
.table .req {
  display: inline-block;
  position: relative;
  right: -6px;
  top: -17px;
  margin: 0 !important;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.table .req::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 4px;
  background-color: #ef4444;
  border-radius: 50%;
}

.table-task {
  width: 100%;
  min-width: 900px;
}
.table-task tr.on {
  background: #eff6ff;
}
.table-task th {
  height: 48px;
  text-align: center;
}
.table-task th.text-left .btn-sort {
  justify-content: flex-start;
}
.table-task th .btn-sort {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  line-height: 21px;
  color: #6b7280;
}
.table-task th .btn-sort .ico {
  transform: rotate(0deg);
}
.table-task th .btn-sort.sort .ico {
  transform: rotate(180deg);
}
.table-task td > a {
  display: flex;
  align-items: center;
}
.table-task .service-type + .task-name {
  margin-left: 12px;
}
.table-task .more-action-wrap {
  position: relative;
}
.table-task .more-action-wrap .more-popup {
  position: absolute;
  left: auto;
  right: 0;
}
.table-task tbody > tr:hover {
  cursor: pointer;
  background-color: #f3f4f6;
}
.table-task tbody > tr:hover .check-item-wrap,
.table-task tbody > tr:hover .more-action-wrap {
  background-color: #f3f4f6;
}
.table-task .task-name {
  width: calc(100% - 48px);
  text-align: left;
  display: flex;
  align-items: center;
}
.table-task .file-name {
  display: inline-block;
  text-align: left;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.table-task .label-shared {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  padding: 6px 8px 6px 6px;
  border-radius: 100px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 12px;
  font-weight: 500;
}
.table-task .file-type,
.table-task .file-size,
.table-task .date-time,
.table-task .last-date {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #4b5563;
}

.default-nodata {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 480px;
}
.default-nodata .nodata-warp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.default-nodata p {
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.24px;
  text-align: center;
  color: #4b5563;
}
.default-nodata img {
  width: 84px;
  height: 100px;
}

.table-list tr {
  border-color: #f3f4f6;
}
.table-list th {
  height: 40px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: #6b7280;
}
.table-list td {
  height: 48px;
  padding: 15px 12px;
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #1f2937;
}
.table-list + .pagination {
  margin-top: 20px;
}
.table-list .cell-select {
  text-align: center;
}

.table-row table {
  border-bottom: 0;
}
.table-row thead th {
  text-align: center;
}
.table-row tbody th + td {
  padding-left: 8px;
}
.table-row tr {
  text-align: left;
  color: #1f2937;
}
.table-row th,
.table-row td {
  border-top: 0;
  height: auto;
  min-height: 48px;
}
.table-row th {
  flex: 0 0 auto;
  align-content: flex-start;
  padding-block: 11px;
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
  text-align: left;
}
.table-row td {
  gap: 8px;
  color: #4b5563;
  text-align: left;
}
.table-row + .btn-group .btn {
  margin-top: 0;
  margin-bottom: 0;
}
.table-row .form-item .guide-text {
  margin-top: 6px;
}
@media (max-width: 1024.98px) {
  .table-row colgroup {
    display: none;
  }
}
@media (min-width: 1025px) {
  .table-scroll .scroll-container table {
    min-width: auto !important;
  }
}
@media (max-width: 1024.98px) {
  .table-scroll {
    position: relative;
    overflow: hidden;
  }
  .table-scroll:before, .table-scroll:after {
    content: "";
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    width: 23px;
    top: 0;
    bottom: 0;
    transition-duration: 0.1s;
  }
  .table-scroll.scroll-ing:before {
    opacity: 1;
    visibility: visible;
  }
  .table-scroll.scroll-end:after {
    opacity: 0;
    visibility: hidden;
  }
  .table-scroll .scroll-container {
    margin-right: -1px;
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-scroll .scroll-container table {
    position: relative;
  }
  .table-scroll .scroll-container table:after {
    position: absolute;
    width: 1px;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    content: "";
  }
}

.drag-table table {
  position: relative;
}
.drag-table table th {
  height: 40px;
  padding-inline: 12px;
  font-weight: 400;
  font-size: 14px;
  color: #6b7280;
}
.drag-table table td {
  height: 48px;
  min-height: 48px;
  padding: 2px 12px;
  font-size: 14px;
  color: #1f2937;
}
.drag-table table tr.dragging {
  opacity: 0.5;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.drag-table table td.handle {
  position: relative;
  width: 48px;
  padding: 0;
}
.drag-table table td.handle .btn-drag {
  height: 100%;
  cursor: -webkit-grab;
  cursor: grab;
}
.drag-table table td.handle .btn-drag:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.drag-table table td.handle .num {
  display: inline-block;
  width: 60px;
  padding-inline: 12px;
}
.drag-table table .form-control:is(select) {
  min-width: auto;
}

.table-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.table-top .left {
  text-align: left;
}
.table-top .left .total {
  font-weight: 500;
  font-size: 14px;
  color: #1a212b;
}
.table-top .left .total .count {
  display: inline-block;
  font-style: normal;
  color: #1f2937;
  margin-left: 3px;
}
.table-top .left .total .count strong {
  font-weight: 500;
  color: #1364ff;
}
.table-top .right {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.table-top .right .search-area {
  display: flex;
  align-items: center;
  gap: 6px;
}
.table-top .right .search-area .form-control-sm {
  padding-right: 38px;
  font-size: 14px;
  background-image: url(/_next/static/media/ico-search-gray@2x.0429a935.png);
  background-size: 16px auto;
  background-position: right 12px center;
  background-repeat: no-repeat;
}
.table-top .right .search-area .btn-sm {
  width: 56px;
  font-size: 15px;
}

/* 페이징 */
.pagination {
  width: 100%;
  text-align: center;
  color: #4b5563;
  margin-top: 24px;
}
.pagination .page-num {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.pagination a {
  position: relative;
  transition-duration: 0.3s;
}
.pagination a:hover {
  background-color: #f3f4f6;
}
.pagination a.active {
  background: #eff6ff;
  font-weight: 500;
  color: #1364ff;
}
.pagination a.disabled {
  pointer-events: none;
}
.pagination a,
.pagination strong {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  height: 40px;
  min-width: 40px;
  margin: 0 2px;
  padding: 0 2px;
  font-size: 16px;
  font-weight: 400;
  color: #4b5563;
}
.layout-community .pagination a,
.layout-community .pagination strong {
  height: 32px;
  min-width: 32px;
  font-size: 14px;
}
.pagination .first {
  background: url(/_next/static/media/ico-first-default@2x.e75a222a.png) center center no-repeat;
  background-size: 24px 24px;
}
.pagination .first.disabled {
  background: url(/_next/static/media/ico-first-disabled@2x.785167dd.png) center center no-repeat;
  background-size: 24px 24px;
}
.pagination .prev {
  background: url(/_next/static/media/ico-prev-default@2x.a7f2fe60.png) center center no-repeat;
  background-size: 24px 24px;
}
.pagination .prev.disabled {
  background: url(/_next/static/media/ico-prev-disabled@2x.f0cae196.png) center center no-repeat;
  background-size: 24px 24px;
}
.pagination .next {
  background: url(/_next/static/media/ico-next-default@2x.81b304c6.png) center center no-repeat;
  background-size: 24px 24px;
}
.pagination .next.disabled {
  background: url(/_next/static/media/ico-next-disabled@2x.b1c8292d.png) center center no-repeat;
  background-size: 24px 24px;
}
.pagination .last {
  background: url(/_next/static/media/ico-last-default@2x.51217ced.png) center center no-repeat;
  background-size: 24px 24px;
}
.pagination .last.disabled {
  background: url(/_next/static/media/ico-last-disabled@2x.ac81bb2c.png) center center no-repeat;
  background-size: 24px 24px;
}

.form-control {
  width: 100%;
  max-width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: left;
  border: 1px solid #d1d5db;
  color: #333;
  background: #fff;
  vertical-align: middle;
  font-size: 16px;
  height: 56px;
  border-radius: 8px;
  padding: 10px 19px 10px 19px;
  line-height: 46px;
  transition-duration: 0.2s;
  transition-property: color, border-color, box-shadow;
  will-change: color, border-color, box-shadow;
}
.form-control::-ms-clear {
  display: none;
}
.form-control[type=number]::-webkit-outer-spin-button, .form-control[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-control-xs {
  min-width: 182px;
  border: 1px solid #9ca3af;
  height: 28px;
  padding: 4px 8px;
  border-radius: 7px;
  font-weight: 400;
  font-size: 12px;
  color: #333;
  vertical-align: middle;
  line-height: 16px;
  background: #fff;
}
.form-control-xs.invalid {
  border-color: #ef4444 !important;
  color: #dc2626;
}
.form-control-xs.invalid + .invalid-message {
  display: block;
  color: #dc2626;
}
.form-control-xs:hover {
  border-color: #0658f5;
}
.form-control-xs:focus {
  outline: 0;
  position: relative;
  border-color: #1364ff;
}
.form-control-xs:disabled, .form-control-xs[readonly=readonly], .form-control-xs.readonly {
  background-color: #e5e7eb;
  opacity: 1;
}
.form-control-xs:disabled::-ms-value, .form-control-xs[readonly=readonly]::-ms-value, .form-control-xs.readonly::-ms-value {
  color: #6b7280 !important;
}
.form-control-xs:disabled {
  color: #6b7280;
}
.form-control-xs:disabled:hover, .form-control-xs:disabled:focus {
  box-shadow: none;
  border-color: #e5e7eb;
}
.form-control-xs:-moz-read-only:not(select):not(span) {
  background-color: #f3f4f6;
  opacity: 1;
}
.form-control-xs:read-only:not(select):not(span) {
  background-color: #f3f4f6;
  opacity: 1;
}
.form-control-xs:is(select) {
  min-width: 70px;
  max-width: 100%;
  padding-right: 30px;
  background: #fff url(/_next/static/media/ico-caret-down-gray-xs@2x.13174655.png) no-repeat right 8px center;
  background-size: 12px auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.form-control-xs:is(select)::-ms-expand {
  display: none;
}
.form-control-xs:is(select):hover {
  border-color: #0658f5;
}
.form-control-xs:is(select):focus {
  outline: 0;
  position: relative;
  border-color: #1364ff;
}
.form-control-xs:is(select).invalid {
  border-color: #ef4444 !important;
  color: #dc2626;
}
.form-control-xs:is(select).invalid + .invalid-message {
  display: block;
  color: #dc2626;
}
.form-control-xs:is(select):disabled, .form-control-xs:is(select)[readonly=readonly], .form-control-xs:is(select).readonly {
  background-color: #e5e7eb;
  opacity: 1;
}
.form-control-xs:is(select):disabled::-ms-value, .form-control-xs:is(select)[readonly=readonly]::-ms-value, .form-control-xs:is(select).readonly::-ms-value {
  color: #6b7280 !important;
}
.form-control-xs:is(select):-moz-read-only:not(select):not(span) {
  background-color: #f3f4f6;
  opacity: 1;
}
.form-control-xs:is(select):read-only:not(select):not(span) {
  background-color: #f3f4f6;
  opacity: 1;
}
.form-control-xs.full {
  min-width: 100%;
}
.form-control-sm {
  min-width: 182px;
  border: 1px solid #9ca3af;
  height: 32px;
  padding: 2px 12px;
  border-radius: 8px;
  font-size: 16px;
  color: #333;
  vertical-align: middle;
  line-height: 16px;
  background: #fff;
}
.form-control-sm.invalid {
  border-color: #ef4444 !important;
  color: #dc2626;
}
.form-control-sm.invalid + .invalid-message {
  display: block;
  color: #dc2626;
}
.form-control-sm:hover {
  border-color: #0658f5;
}
.form-control-sm:focus {
  outline: 0;
  position: relative;
  border-color: #1364ff;
}
.form-control-sm:disabled, .form-control-sm[readonly=readonly], .form-control-sm.readonly {
  background-color: #e5e7eb;
  opacity: 1;
}
.form-control-sm:disabled::-ms-value, .form-control-sm[readonly=readonly]::-ms-value, .form-control-sm.readonly::-ms-value {
  color: #6b7280 !important;
}
.form-control-sm:disabled {
  color: #6b7280;
}
.form-control-sm:disabled:hover, .form-control-sm:disabled:focus {
  box-shadow: none;
  border-color: #e5e7eb;
}
.form-control-sm:-moz-read-only:not(select):not(span) {
  background-color: #f3f4f6;
  opacity: 1;
}
.form-control-sm:read-only:not(select):not(span) {
  background-color: #f3f4f6;
  opacity: 1;
}
.form-control-sm:is(select) {
  min-width: 132px;
  max-width: 100%;
  padding-right: 30px;
  background: url(/_next/static/media/ico-caret-down-gray-sm@2x.69acb1f6.png) no-repeat right 20px center;
  background-size: 16px auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.form-control-sm:is(select)::-ms-expand {
  display: none;
}
.form-control-sm:is(select):hover {
  border-color: #0658f5;
}
.form-control-sm:is(select):focus {
  outline: 0;
  position: relative;
  border-color: #1364ff;
}
.form-control-sm:is(select).invalid {
  border-color: #ef4444 !important;
  color: #dc2626;
}
.form-control-sm:is(select).invalid + .invalid-message {
  display: block;
  color: #dc2626;
}
.form-control-sm:is(select):disabled, .form-control-sm:is(select)[readonly=readonly], .form-control-sm:is(select).readonly {
  background-color: #e5e7eb;
  opacity: 1;
}
.form-control-sm:is(select):disabled::-ms-value, .form-control-sm:is(select)[readonly=readonly]::-ms-value, .form-control-sm:is(select).readonly::-ms-value {
  color: #6b7280 !important;
}
.form-control-sm:is(select):-moz-read-only:not(select):not(span) {
  background-color: #f3f4f6;
  opacity: 1;
}
.form-control-sm:is(select):read-only:not(select):not(span) {
  background-color: #f3f4f6;
  opacity: 1;
}
.form-control-sm.full {
  min-width: 100%;
}
.form-control-md {
  min-width: 200px;
  border: 1px solid #9ca3af;
  height: 40px;
  padding: 7px 15px;
  border-radius: 9px;
  font-size: 16px;
  color: #1f2937;
  vertical-align: middle;
  line-height: 24px;
  background: #fff;
}
.form-control-md.invalid {
  border-color: #ef4444 !important;
  color: #dc2626;
}
.form-control-md.invalid + .invalid-message {
  display: block;
  color: #dc2626;
}
.form-control-md:hover {
  border-color: #0658f5;
  color: #1f2937;
}
.form-control-md:focus {
  outline: 0;
  position: relative;
  border-color: #1364ff;
}
.form-control-md:disabled, .form-control-md[readonly=readonly], .form-control-md.readonly {
  border: 1px solid #e5e7eb;
  background-color: #f3f4f6;
  color: #6b7280;
  opacity: 1;
}
.form-control-md:disabled::-ms-value, .form-control-md[readonly=readonly]::-ms-value, .form-control-md.readonly::-ms-value {
  color: #6b7280 !important;
}
.form-control-md:disabled:hover, .form-control-md:disabled:focus, .form-control-md[readonly=readonly]:hover, .form-control-md[readonly=readonly]:focus, .form-control-md.readonly:hover, .form-control-md.readonly:focus {
  box-shadow: none;
}
.form-control-md:-moz-read-only:not(select):not(span) {
  background-color: #f3f4f6;
  opacity: 1;
}
.form-control-md:read-only:not(select):not(span) {
  background-color: #f3f4f6;
  opacity: 1;
}
.form-control-md:is(select) {
  min-width: 100px;
  max-width: 100%;
  padding-right: 30px;
  background: url(/_next/static/media/ico-caret-down-gray-sm@2x.69acb1f6.png) no-repeat right 16px center;
  background-size: 16px auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.form-control-md:is(select)::-ms-expand {
  display: none;
}
.form-control-md:is(select):hover {
  border-color: #0658f5;
}
.form-control-md:is(select):focus {
  outline: 0;
  position: relative;
  border-color: #1364ff;
}
.form-control-md:is(select).invalid {
  border-color: #ef4444 !important;
  color: #dc2626;
}
.form-control-md:is(select).invalid + .invalid-message {
  display: block;
  color: #dc2626;
}
.form-control-md:is(select):disabled, .form-control-md:is(select)[readonly=readonly], .form-control-md:is(select).readonly {
  border: 1px solid #e5e7eb;
  background-color: #f3f4f6;
  color: #6b7280;
  opacity: 1;
}
.form-control-md:is(select):disabled::-ms-value, .form-control-md:is(select)[readonly=readonly]::-ms-value, .form-control-md:is(select).readonly::-ms-value {
  color: #6b7280 !important;
}
.form-control-md:is(select):-moz-read-only:not(select):not(span) {
  background-color: #f3f4f6;
  opacity: 1;
}
.form-control-md:is(select):read-only:not(select):not(span) {
  background-color: #f3f4f6;
  opacity: 1;
}
.form-control-md.full {
  min-width: 100%;
}
.form-control-md::-webkit-input-placeholder {
  color: #6b7280;
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
}
.form-control-md:-ms-input-placeholder {
  color: #6b7280;
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
}
.form-control:is(select) {
  min-width: 132px;
  max-width: 100%;
  line-height: normal;
  padding-right: 38px;
  background: url(/_next/static/media/ico-caret-down-gray-sm@2x.69acb1f6.png) no-repeat right 20px center;
  background-size: 16px auto;
  color: #1f2937;
}
.form-control:is(select)::-ms-expand {
  display: none;
}
.form-control:is(textarea) {
  height: auto;
  min-height: 120px;
  padding: 16px;
  padding-right: 0;
  overflow-y: scroll;
  line-height: inherit;
  resize: none;
  background: #fff url(/_next/static/media/ico-textarea@2x.f62a8c95.png) no-repeat;
  background-size: 5.5px 5.5px;
  background-position: right 6px bottom 6px;
}
.form-control:is(textarea).form-control-xxl {
  font-size: 18px;
}
.form-control:is(textarea).form-control-xxl::placeholder {
  font-size: 18px;
}
.form-control.invalid {
  border-color: #ef4444 !important;
  color: #dc2626;
}
.form-control.invalid + .invalid-message {
  display: block;
  color: #dc2626;
}
.form-control:hover {
  border-color: #0658f5;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
}
.form-control:focus {
  outline: 0;
  position: relative;
  border-color: #0658f5;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
}
.form-control:disabled {
  background-color: #f3f4f6;
  opacity: 1;
}
.form-control:disabled::-ms-value {
  color: #6b7280 !important;
}
.form-control:disabled {
  border-color: #e5e7eb;
  color: #6b7280;
}
.form-control:disabled:hover, .form-control:disabled:focus {
  box-shadow: none;
  border-color: #e5e7eb;
}
.form-control::-webkit-input-placeholder {
  color: #6b7280;
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
}
.form-control:-ms-input-placeholder {
  color: #6b7280;
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
}
.form-control + .error-text, .form-control + .guide-text, .form-control + .waiting-text {
  display: inline-block;
  margin-top: 9px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #333;
  box-shadow: 0 0 0px 1000px #fff inset;
}

.check-item {
  position: relative;
  cursor: pointer;
}
.check-item [type=checkbox],
.check-item [type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.check-item [type=checkbox] + .label,
.check-item [type=checkbox] + label,
.check-item [type=radio] + .label,
.check-item [type=radio] + label {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.check-item [type=checkbox] + .label:before,
.check-item [type=checkbox] + label:before,
.check-item [type=radio] + .label:before,
.check-item [type=radio] + label:before {
  box-sizing: border-box;
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  border-radius: 2px;
  margin-top: -2px;
  margin-right: 5px;
  background-color: #fff;
  content: "";
  transition-duration: 0.2s;
  transition-property: border-color, box-shadow, background-color;
  will-change: border-color, box-shadow, background-color;
}
.check-item [type=checkbox] + .label.sr-only,
.check-item [type=checkbox] + label.sr-only,
.check-item [type=radio] + .label.sr-only,
.check-item [type=radio] + label.sr-only {
  position: static;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0;
  overflow: visible;
}
.check-item [type=checkbox] + .label.sr-only:before,
.check-item [type=checkbox] + label.sr-only:before,
.check-item [type=radio] + .label.sr-only:before,
.check-item [type=radio] + label.sr-only:before {
  margin-right: 0;
}
.check-item [type=checkbox] + .label::before,
.check-item [type=checkbox] + label::before {
  border-radius: 3px;
  border: 1px solid #9ca3af;
}
.check-item [type=checkbox]:checked + .label:before,
.check-item [type=checkbox]:checked + label:before {
  border-color: #1364ff;
  background: #1364ff url(/_next/static/media/ico-check-white-md@2x.7591e03e.png) no-repeat center -2px;
  background-size: 20px;
}
.check-item [type=checkbox]:checked:hover + .label:before,
.check-item [type=checkbox]:checked:hover + label:before {
  border-color: #1364ff;
  background-color: #1364ff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
}
.check-item [type=checkbox]:checked:disabled + .label:before,
.check-item [type=checkbox]:checked:disabled + label:before {
  background-color: #e5e7eb;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
}
.check-item [type=checkbox]:disabled + .label:before,
.check-item [type=checkbox]:disabled + label:before {
  border-color: #9ca3af;
  background-color: #e5e7eb;
}
.check-item [type=checkbox]:disabled:checked + .label:before,
.check-item [type=checkbox]:disabled:checked + label:before {
  border-color: #9ca3af;
  background-size: 16px;
}
.check-item [type=checkbox]:hover + .label:before,
.check-item [type=checkbox]:hover + label:before {
  border-color: #9ca3af;
  background-color: #e5e7eb;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
}
.check-item [type=checkbox]:focus + .label:before,
.check-item [type=checkbox]:focus + label:before {
  border-color: #1364ff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
}
.check-item [type=radio] + .label:before,
.check-item [type=radio] + label:before {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #9ca3af;
}
.check-item [type=radio] + .label.sr-only:before,
.check-item [type=radio] + label.sr-only:before {
  margin-top: 0;
}
.check-item [type=radio]:checked + .label:before,
.check-item [type=radio]:checked + label:before {
  box-sizing: border-box;
  border-color: #1364ff;
  background-color: #fff;
  box-shadow: 0 0 0 6px #1364ff inset;
}
.check-item [type=radio]:checked:hover + .label:before,
.check-item [type=radio]:checked:hover + label:before {
  box-shadow: inset 0 0 0 5px #1364ff;
}
.check-item [type=radio]:hover + .label:before,
.check-item [type=radio]:hover + label:before {
  box-shadow: inset 0 0 0 1px #e5e7eb;
  background-color: #e5e7eb;
}
.check-item [type=radio]:disabled + .label:before,
.check-item [type=radio]:disabled + label:before {
  box-shadow: 0 0 0 1px #9ca3af inset;
  background-color: #e5e7eb;
}
.check-item [type=radio]:disabled:checked + .label:before,
.check-item [type=radio]:disabled:checked + label:before {
  box-shadow: 0 0 0 4px #9ca3af inset;
  background-color: #e5e7eb;
}
.check-item-sm {
  position: relative;
  cursor: pointer;
}
.check-item-sm [type=checkbox],
.check-item-sm [type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.check-item-sm [type=checkbox] + .label,
.check-item-sm [type=checkbox] + label,
.check-item-sm [type=radio] + .label,
.check-item-sm [type=radio] + label {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.check-item-sm [type=checkbox] + .label:before,
.check-item-sm [type=checkbox] + label:before,
.check-item-sm [type=radio] + .label:before,
.check-item-sm [type=radio] + label:before {
  content: "";
  box-sizing: border-box;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  border-radius: 2px;
  margin-top: -4px;
  margin-right: 5px;
  background-color: #fff;
  content: "";
  transition-duration: 0.2s;
  transition-property: border-color, box-shadow, background-color;
  will-change: border-color, box-shadow, background-color;
}
.check-item-sm [type=checkbox] + .label.sr-only,
.check-item-sm [type=checkbox] + label.sr-only,
.check-item-sm [type=radio] + .label.sr-only,
.check-item-sm [type=radio] + label.sr-only {
  position: static;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0;
  overflow: visible;
}
.check-item-sm [type=checkbox] + .label.sr-only:before,
.check-item-sm [type=checkbox] + label.sr-only:before,
.check-item-sm [type=radio] + .label.sr-only:before,
.check-item-sm [type=radio] + label.sr-only:before {
  margin-right: 0;
}
.check-item-sm [type=checkbox] + .label:before,
.check-item-sm [type=checkbox] + label:before {
  border-radius: 3px;
  border: 1px solid #9ca3af;
}
.check-item-sm [type=checkbox]:checked + .label:before,
.check-item-sm [type=checkbox]:checked + label:before {
  border-color: #1364ff;
  background: #1364ff url(/_next/static/media/ico-check-white-sm@2x.dd4b11c3.png) no-repeat center center;
  background-position: center -2px;
  background-size: 16px;
}
.check-item-sm [type=checkbox]:checked:hover + .label:before,
.check-item-sm [type=checkbox]:checked:hover + label:before {
  border-color: #1364ff;
  background-color: #1364ff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
}
.check-item-sm [type=checkbox]:checked:disabled + .label:before,
.check-item-sm [type=checkbox]:checked:disabled + label:before {
  border-color: #9ca3af;
  background-color: #e5e7eb;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
}
.check-item-sm [type=checkbox]:hover + .label:before,
.check-item-sm [type=checkbox]:hover + label:before {
  border-color: #9ca3af;
  background-color: #e5e7eb;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
}
.check-item-sm [type=checkbox]:focus + .label:before,
.check-item-sm [type=checkbox]:focus + label:before {
  border-color: #1364ff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
}
.check-item-sm [type=checkbox]:disabled + .label:before,
.check-item-sm [type=checkbox]:disabled + label:before {
  border-color: #9ca3af;
  background-color: #e5e7eb;
}
.check-item-sm [type=checkbox]:disabled:checked + .label:before,
.check-item-sm [type=checkbox]:disabled:checked + label:before {
  border-color: #9ca3af;
  background-size: 20px;
}
.check-item-sm [type=radio] + .label:before,
.check-item-sm [type=radio] + label:before {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #9ca3af;
}
.check-item-sm [type=radio]:checked + .label:before,
.check-item-sm [type=radio]:checked + label:before {
  box-sizing: border-box;
  border-color: #1364ff;
  background-color: #fff;
  box-shadow: 0 0 0 5px #1364ff inset;
}
.check-item-sm [type=radio]:checked:hover + .label:before,
.check-item-sm [type=radio]:checked:hover + label:before {
  box-shadow: inset 0 0 0 5px #1364ff;
}
.check-item-sm [type=radio]:hover + .label:before,
.check-item-sm [type=radio]:hover + label:before {
  box-shadow: inset 0 0 0 1px #e5e7eb;
  background-color: #e5e7eb;
}
.check-item-sm [type=radio]:disabled + .label:before,
.check-item-sm [type=radio]:disabled + label:before {
  box-shadow: 0 0 0 1px #9ca3af inset;
  background-color: #e5e7eb;
}
.check-item-sm [type=radio]:disabled:checked + .label:before,
.check-item-sm [type=radio]:disabled:checked + label:before {
  box-shadow: 0 0 0 6px #9ca3af inset;
  background-color: #e5e7eb;
}
.check-item.check-btn label {
  height: 32px;
  padding: 0 7px 0 8px;
  border-radius: 7px;
  background-color: #fff;
  border: 1px solid #d1d5db;
  font-weight: 400;
  font-size: 12px;
  color: #4b5563;
  line-height: 30px;
}
.check-item.check-btn label .ico {
  margin-top: -2px;
}
.check-item.check-btn label::before {
  width: 12px;
  height: 12px;
  margin-right: 2px;
  border-radius: 2px;
  border-color: #d1d5db;
}
.check-item.check-btn input:checked + label {
  background-color: #eff6ff;
  border-color: #bfdbfe;
  color: #1364ff;
}
.check-item.check-btn input:checked + label::before {
  border-color: transparent !important;
  background-image: url(/_next/static/media/ico-check-primary-xs@2x.b86824fe.png);
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: 12px auto;
  box-shadow: none !important;
}
.check-item.check-btn input:checked:focus + label::before, .check-item.check-btn input:checked:hover + label::before {
  background-color: transparent;
  box-shadow: none;
}
.check-item.check-btn input:focus + label::before, .check-item.check-btn input:hover + label::before {
  background-color: transparent !important;
  box-shadow: none;
}

.check-switch {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  cursor: pointer;
}
.check-switch .label {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-align: center;
  overflow: hidden;
  z-index: 0;
  min-width: 48px;
  height: 24px;
  border-radius: 12px;
  padding-left: 24px;
  padding-right: 6px;
  background-image: linear-gradient(to bottom, #9ca3af, #9ca3af);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.3s;
  transition-property: background-color, hover;
}
.check-switch .label:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1364ff;
  transition: opacity 0.3s;
  opacity: 0;
}
.check-switch .label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #fff;
  transition-duration: 0.3s;
}
.check-switch .label span {
  display: block;
  min-width: 18px;
  text-align: center;
}
.check-switch .label .text-checked {
  display: none;
  opacity: 0;
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
  z-index: 1;
}
.check-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.check-switch input:checked + .label {
  padding-left: 6px;
  padding-right: 24px;
}
.check-switch input:checked + .label:before {
  opacity: 1;
}
.check-switch input:checked + .label:after {
  left: calc(100% - 21px);
}
.check-switch input:checked + .label .text-uncheck {
  display: none;
  opacity: 0;
}
.check-switch input:checked + .label .text-checked {
  display: inline;
  opacity: 1;
}
.check-switch input:disabled + .label {
  opacity: 0.5;
}
.check-switch:hover input + .label::before, .check-switch:focus-visible input + .label::before {
  background: rgba(255, 255, 255, 0.3);
}
.check-switch:hover input .text-checked, .check-switch:focus-visible input .text-checked {
  opacity: 1;
}
.check-switch:hover input .text-uncheck, .check-switch:focus-visible input .text-uncheck {
  opacity: 1;
}
.check-switch input:checked:hover + .label::before, .check-switch input:checked:focus-visible + .label::before {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), var(--primary500, #1364ff);
}
.check-switch input:checked:hover + .label .text-checked, .check-switch input:checked:focus-visible + .label .text-checked {
  color: #1f2937;
}
.check-switch input:checked:hover + .label .text-uncheck, .check-switch input:checked:focus-visible + .label .text-uncheck {
  color: #1f2937;
}
.check-switch input:not(:checked):hover + .label, .check-switch input:not(:checked):focus-visible + .label {
  background-image: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), var(--gray400, #9ca3af);
}
.check-switch input:not(:checked):hover + .label .text-checked, .check-switch input:not(:checked):focus-visible + .label .text-checked {
  color: #1f2937;
}
.check-switch input:not(:checked):hover + .label .text-uncheck, .check-switch input:not(:checked):focus-visible + .label .text-uncheck {
  color: #1f2937;
}
.check-switch .text-checked:hover, .check-switch .text-checked:focus-visible {
  color: #1f2937;
}
.check-switch .text-uncheck:hover, .check-switch .text-uncheck:focus-visible {
  color: #1f2937;
}
.check-switch-lg .label {
  min-width: 60px;
}
.check-switch-lg .label span {
  min-width: 30px;
}

.check-item-btn [type=checkbox],
.check-item-btn [type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.check-item-btn [type=checkbox]:focus + label,
.check-item-btn [type=checkbox]:focus + .label,
.check-item-btn [type=radio]:focus + label,
.check-item-btn [type=radio]:focus + .label {
  outline: 2px solid #000;
  border-radius: 2px;
}
.check-item-btn [type=checkbox]:not(:focus-visible) + label,
.check-item-btn [type=checkbox]:not(:focus-visible) + .label,
.check-item-btn [type=radio]:not(:focus-visible) + label,
.check-item-btn [type=radio]:not(:focus-visible) + .label {
  outline: 0;
}
.check-item-btn [type=checkbox] + .label,
.check-item-btn [type=checkbox] + label,
.check-item-btn [type=radio] + .label,
.check-item-btn [type=radio] + label {
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--gray-text-primary, #1f2937);
  background: var(--gray100, #f3f4f6);
}
.check-item-btn [type=checkbox]:checked + .label,
.check-item-btn [type=checkbox]:checked + label,
.check-item-btn [type=radio]:checked + .label,
.check-item-btn [type=radio]:checked + label {
  border-radius: 6px;
  border: 1px solid var(--priamry400, #60a5fa);
  background: var(--primary-primary-5, #eff5ff);
  color: var(--primary700, #003fb7);
}
.check-item-btn .label,
.check-item-btn label {
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 8px;
  background: #f3f3f3;
  transition: background 0.3s;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.check-item-circle [type=checkbox],
.check-item-circle [type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.check-item-circle [type=checkbox]:checked .label,
.check-item-circle [type=checkbox]:checked + label,
.check-item-circle [type=radio]:checked .label,
.check-item-circle [type=radio]:checked + label {
  background: #1364ff;
  color: #fff;
}
.check-item-circle .label,
.check-item-circle label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f3f3f3;
  transition: background 0.3s;
}

.form-item .req {
  display: inline-block;
  position: relative;
  right: -6px;
  top: -17px;
  margin: 0 !important;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.form-item .req::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 4px;
  background-color: #ef4444;
  border-radius: 50%;
}
.form-item.item-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.form-item.item-row + .item-row {
  margin-top: 24px;
}
.form-item.item-row > dt {
  display: flex;
  align-items: center;
  flex: 0 0 140px;
  width: 140px;
  max-height: 56px;
  margin-bottom: 0;
}
.form-item.item-row > dd {
  flex: 1 1 auto;
  width: calc(100% - 148px);
}
.form-item.item-row .error-text,
.form-item.item-row .guide-text,
.form-item.item-row .waiting-text {
  margin-top: 6px;
}

.guide-text {
  display: inline-block;
  font-weight: 400;
  font-size: 14px;
  color: #6b7280;
}

.error-text {
  font-weight: 400;
  font-size: 14px;
  color: #dc2626;
}
.error-text:has(.ico) .ico {
  margin-top: -4px;
}

.list-error {
  margin-top: 6px;
}
.list-error li {
  padding-left: 12px;
  font-weight: 400;
  font-size: 12px;
  color: #ef4444;
}
.list-error li::before {
  top: 8px;
  background-color: #9ca3af;
}

.radio-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.check-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  margin-top: 27px;
  margin-bottom: 4px;
}
.check-toggle + .action-area {
  margin-top: 0;
}
.check-toggle .check-switch input:checked + .label {
  padding-left: 3px;
  padding-right: 10px;
}
.check-toggle .check-switch input:checked + .label::before {
  background-image: none;
  background-color: #1364ff;
}
.check-toggle .check-switch input:checked + .label:after {
  top: 3px;
  left: calc(100% - 15px);
}
.check-toggle .check-switch input:checked + .label .text-checked {
  font-weight: 700;
  color: #1f2937;
}
.check-toggle .check-switch input:checked + .label .text-uncheck {
  opacity: 0.5;
}
.check-toggle .check-switch input:not(:checked) + .label:after {
  top: 3px;
  left: 3px;
}
.check-toggle .check-switch input:not(:checked) + .label .text-checked {
  opacity: 0.5;
}
.check-toggle .check-switch input:not(:checked) + .label .text-uncheck {
  font-weight: 700;
  color: #1f2937;
}
.check-toggle .check-switch .label {
  min-width: 30px;
  height: 18px;
  border-radius: 18px;
  overflow: visible;
  background-image: linear-gradient(to bottom, #9ca3af, #9ca3af);
}
.check-toggle .check-switch .label::before {
  border-radius: 18px;
  overflow: hidden;
  opacity: 1;
  background-image: linear-gradient(to bottom, #9ca3af, #9ca3af);
  box-sizing: border-box;
}
.check-toggle .check-switch .label::after {
  width: 12px;
  height: 12px;
  background-color: #fff;
}
.check-toggle .check-switch .text-checked {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + 6px);
  display: block !important;
  padding-left: 14px;
  opacity: 1;
  font-size: 14px;
  color: #1f2937;
  line-height: 1.4;
}
.check-toggle .check-switch .text-checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url(/_next/static/media/ico-mode-minimal-gray@2x.0b9c4da2.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.check-toggle .check-switch .text-uncheck {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(100% + 6px);
  display: block !important;
  padding-left: 14px;
  opacity: 1;
  font-size: 14px;
  color: #1f2937;
  line-height: 1.4;
}
.check-toggle .check-switch .text-uncheck::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url(/_next/static/media/ico-mode-ally-gray@2x.a720f3c6.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
}

.form-group {
  padding-bottom: 48px;
}
.form-group dt {
  margin-bottom: 12px;
}
.form-group.col-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding-bottom: 0;
}

.input-group-btn {
  display: flex;
  gap: 8px;
}
.input-group-btn .btn,
.input-group-btn .check-item-btn {
  flex: 1 1 20%;
}
.input-group-btn .btn .label,
.input-group-btn .btn label,
.input-group-btn .check-item-btn .label,
.input-group-btn .check-item-btn label {
  display: flex;
  width: 100%;
}
.input-group-btn .input-item-btn {
  flex: 1 1 20%;
  height: 39px;
  border-radius: 8px;
  background: #f3f3f3;
  font-size: 16px;
  color: #333;
}
.input-group-btn .input-item-btn:active {
  background: #1364ff;
  color: #fff;
}
.input-group-btn + .input-group-btn, .input-group-btn + .input-group-form {
  margin-top: 8px;
}

.input-group-period {
  display: flex;
  align-items: center;
  gap: 6px;
}
.input-group-period .mx-datepicker {
  flex: 1 1 auto;
  width: auto;
}

.input-group-form {
  position: relative;
}
.input-group-form .btn-input-reset {
  position: absolute;
  top: 7px;
  right: 10px;
  height: calc(100% - 10px);
  padding: 0 2px 0 8px;
}

.input-group {
  display: flex;
}
.input-group .input-addon {
  flex: 1 0 auto;
  margin-left: 12px;
}
.input-group .input-addon .btn {
  min-width: 100px;
  width: auto;
}
.input-group + .error-text {
  margin-top: 9px;
}
.input-group + .input-btn-group {
  margin-top: 12px;
}

.modal-opened {
  overflow: hidden !important;
}

.modal-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-popup .dimed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}
.modal-popup .popup-inner {
  position: relative;
  z-index: 1100;
  transition-duration: 0.3s;
  transition-property: transform;
  background-color: #fff;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.2);
}
.modal-popup .popup-inner.hide {
  opacity: 0;
  visibility: hidden;
}
.modal-popup .popup-inner.hide .popup-inner {
  transform: translateY(-50px);
}
.modal-popup .popup-inner.show {
  opacity: 1;
  visibility: visible;
  transition-duration: 0.3s;
}
.modal-popup .popup-inner.show .popup-inner {
  transform: translateY(0);
}
.modal-popup .popup-inner .popup-footer {
  padding: 24px 24px;
}
.modal-popup .popup-inner .popup-footer .btn-group {
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
}
.modal-popup .popup-inner .popup-footer .btn-group .btn {
  flex: 1 1 auto;
  min-width: calc(50% - 3px);
  max-width: 100%;
}
.modal-popup .btn-close-popup {
  position: absolute;
  z-index: 100;
  right: 24px;
  top: 20px;
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: url(/_next/static/media/ico-close-gray@2x.58e2aec5.png) center center no-repeat;
  background-size: 24px 24px;
}
@media (max-width: 767.98px) {
  .modal-popup .popup-inner {
    max-height: calc(100% - 40px) !important;
    margin: 0 20px;
  }
}

.modal-bottom-sheet {
  height: 100%;
  align-items: flex-end;
}
.modal-bottom-sheet .popup-header,
.modal-bottom-sheet .popup-footer {
  flex: 0 0 auto;
}
.modal-bottom-sheet .popup-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 56px);
  border-radius: 16px 16px 0 0;
}
.modal-bottom-sheet .popup-header {
  display: flex;
  align-items: center;
  height: 59px;
  padding: 8px 50px 0 24px;
}
.modal-bottom-sheet .popup-title {
  font-size: 18px;
  font-weight: 700;
}
.modal-bottom-sheet .popup-body {
  flex: 1 1 auto;
  padding: 0 24px 24px;
  overflow-y: auto;
  overflow-x: hidden;
}
@media (min-width: 1025px) {
  .modal-bottom-sheet .popup-body {
    padding-right: 8px;
  }
}
.modal-bottom-sheet.no-dimed {
  height: auto;
  top: auto;
}
.modal-bottom-sheet.no-dimed .dimed {
  display: none;
}
.modal-bottom-sheet .btn-group-flex .btn[type=reset] {
  flex: 0 0 auto;
  padding: 0 45px;
}
.modal-bottom-sheet .form-group {
  padding-bottom: 40px;
}

.modal-full .popup-inner {
  border-radius: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.modal-full .btn-close-popup {
  top: 15px;
  right: 14px;
}
.modal-full .popup-header {
  padding: 14px 48px 0 24px;
}
.modal-full .popup-header .popup-title {
  font-size: 18px;
  font-weight: 700;
}
.modal-full .popup-body {
  flex: 1 1 auto;
  padding: 2px 24px 12px;
  overflow-y: scroll;
}
@media (min-width: 1025px) {
  .modal-full .popup-body {
    padding-right: 8px;
  }
}
.modal-full .btn-group-flex {
  gap: 0;
}
.modal-full .btn-group-flex .btn-lightgray {
  flex: 0 0 128px;
}

.modal-sm .popup-inner {
  display: flex;
  flex-direction: column;
  width: calc(100% - 40px);
  max-width: 480px;
  height: auto;
  min-height: 278px;
  max-height: calc(100vh - 80px);
  border-radius: 20px;
}
.modal-sm .popup-header {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 8px 50px 8px 24px;
}
.modal-sm .popup-header::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #d1d5db;
}
.modal-sm .popup-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  line-height: 140%;
}
.modal-sm .popup-body {
  flex: 1 1 auto;
  padding: 0 24px 24px;
  overflow-y: scroll;
}
@media (min-width: 1025px) {
  .modal-sm .popup-body {
    padding-right: 8px;
  }
}
.modal-sm.no-dimed {
  height: auto;
  top: auto;
}
.modal-sm.no-dimed .dimed {
  display: none;
}
.modal-sm .btn-group-flex .btn[type=reset] {
  flex: 0 0 auto;
  padding: 0 45px;
}

.modal-md .popup-inner {
  display: flex;
  flex-direction: column;
  width: calc(100% - 40px);
  max-width: 600px;
  height: auto;
  min-height: 278px;
  max-height: calc(100vh - 80px);
  border-radius: 20px;
}
.modal-md .popup-header {
  display: flex;
  align-items: center;
  height: 64px;
  min-height: 64px;
  padding: 8px 72px 8px 24px;
  position: relative;
}
.modal-md .popup-header::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #d1d5db;
}
.modal-md .popup-title {
  font-size: 18px;
  font-weight: 700;
}
.modal-md .popup-body {
  flex: 1 1 auto;
  padding: 24px;
  overflow-y: scroll;
}
.modal-md .popup-body + .popup-footer {
  margin-top: -24px;
  padding-top: 24px;
}
@media (min-width: 1025px) {
  .modal-md .popup-body {
    padding-right: 8px;
  }
}
.modal-md.no-dimed {
  height: auto;
  top: auto;
}
.modal-md.no-dimed .dimed {
  display: none;
}
.modal-md .btn-group-flex .btn[type=reset] {
  flex: 0 0 auto;
  padding: 0 45px;
}

.modal-lg .popup-inner {
  display: flex;
  flex-direction: column;
  width: calc(100% - 40px);
  max-width: 800px;
  height: auto;
  min-height: 278px;
  max-height: calc(100vh - 80px);
  border-radius: 20px;
}
.modal-lg .popup-header {
  display: flex;
  align-items: center;
  height: 64px;
  min-height: 64px;
  padding: 8px 72px 8px 24px;
  position: relative;
}
.modal-lg .popup-header::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #d1d5db;
}
.modal-lg .popup-title {
  font-size: 18px;
  font-weight: 700;
}
.modal-lg .popup-body {
  flex: 1 1 auto;
  padding: 24px;
  overflow-y: scroll;
}
.modal-lg .popup-body + .popup-footer {
  margin-top: -24px;
  padding-top: 24px;
}
@media (min-width: 1025px) {
  .modal-lg .popup-body {
    padding-right: 8px;
  }
}
.modal-lg.no-dimed {
  height: auto;
  top: auto;
}
.modal-lg.no-dimed .dimed {
  display: none;
}
.modal-lg .btn-group-flex .btn[type=reset] {
  flex: 0 0 auto;
  padding: 0 45px;
}

.modal-default .popup-inner {
  width: 400px;
  max-width: calc(100% - 40px);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}
.modal-default .btn-close-popup {
  top: 20px;
  right: 24px;
}
.modal-default .popup-header {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 14px 24px;
  position: relative;
}
.modal-default .popup-header::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #d1d5db;
}
.modal-default .popup-header .popup-title {
  font-size: 18px;
  font-weight: 700;
}
.modal-default .popup-body {
  flex: 1 1 auto;
  padding: 24px 24px 16px;
  overflow-y: scroll;
}
@media (min-width: 1025px) {
  .modal-default .popup-body {
    padding-right: 8px;
  }
}
.modal-default .btn-group-flex {
  gap: 0;
}
.modal-default .btn-group-flex .btn-lightgray {
  flex: 0 0 128px;
}

.modal-confirm .popup-inner {
  width: 400px;
  display: flex;
  flex-direction: column;
}
.modal-confirm .popup-inner .popup-footer {
  padding: 24px 36px 36px;
}
.modal-confirm .popup-header {
  padding: 36px 36px 0;
}
.modal-confirm .popup-header .popup-title {
  font-size: 18px;
  font-weight: 700;
}
.modal-confirm .popup-body {
  flex: 1 1 auto;
  padding: 12px 36px 16px;
}
.modal-confirm.confirm-md .popup-inner {
  width: 480px;
}

.modal-alert .popup-inner {
  width: 400px;
}
.modal-alert .popup-inner .popup-footer {
  padding: 24px 36px 36px;
}
.modal-alert .popup-header {
  padding: 36px 36px 0;
}
.modal-alert .popup-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 36px 16px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}
.modal-alert.alert-md .popup-inner {
  width: 480px;
}
.modal-alert.alert-md .popup-header::before {
  content: none;
}
.modal-alert .icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 4px;
}
.modal-alert .popup-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: -0.36px;
}
.modal-alert .message {
  font-size: 16px;
  text-align: center;
}
.modal-alert .sub-message {
  display: inline-block;
  margin: 4px 0 20px;
  font-size: 14px;
  font-weight: 400;
  color: #4b5563;
}

.layer-popup {
  position: absolute;
  z-index: 1000;
  transition-duration: 0.3s;
  transition-property: opacity;
}
.layer-popup.hide {
  opacity: 0;
  visibility: hidden;
}
.layer-popup.show {
  opacity: 1;
  visibility: visible;
}
.layer-popup .popup-inner {
  position: relative;
  z-index: 1100;
  transition-duration: 0.3s;
  transition-property: transform;
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #d1d5db;
  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  width: 400px;
  height: auto;
}
.layer-popup .popup-inner:focus {
  outline: 0;
}
.modal-popup.hide .layer-popup .popup-inner {
  transform: scale(0.9);
}
.modal-popup.show .layer-popup .popup-inner {
  transform: scale(1);
}
.layer-popup .popup-header {
  justify-content: flex-start;
  height: 50px;
  padding: 0 19px;
  background-color: #e5e7eb;
}
.layer-popup .popup-header .popup-title {
  display: flex;
  align-items: center;
  padding-top: 6px;
  color: #333;
  font-weight: 600;
}
.layer-popup .popup-header .popup-title .ico {
  margin-top: -4px;
  margin-right: 4px;
}
.layer-popup .popup-header ~ .btn-close-popup {
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-size: 20px auto;
}
.layer-popup .popup-body {
  padding: 24px;
  overflow-y: scroll;
}
@media (min-width: 1025px) {
  .layer-popup .popup-body {
    padding-right: 8px;
  }
}
.layer-popup .popup-body .btn-group {
  margin-top: 12px;
}
.layer-popup .popup-body .tab-content {
  display: block;
}

.search-popup .popup-header {
  display: none;
}
.search-popup .popup-body {
  padding: 0;
  overflow: hidden;
}
.search-popup .btn-close-popup {
  top: 20px;
  right: 24px;
}
.search-popup .search-bar {
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid #d1d5db;
}
.search-popup .search-bar form {
  height: 100%;
}
.search-popup .search-bar .btn-search {
  position: absolute;
  top: 20px;
  left: 24px;
}
.search-popup .search-bar .form-control-md {
  min-width: calc(100% - 48px);
  height: 100%;
  padding: 0 24px 0 48px;
  border: 0;
}
.search-popup .scroll-inner {
  overflow: hidden;
}
.search-popup .search-result {
  display: flex;
  align-items: center;
  align-items: flex-start;
  justify-content: center;
  min-height: 234px;
  max-height: 536px;
  padding: 0 8px 8px 24px;
  overflow: scroll;
}
.search-popup .search-result ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
.search-popup .search-result ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background-clip: padding-box;
  border: 6px solid transparent;
}
.search-popup .search-result ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
.search-popup .search-result ::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.search-popup .search-result ::-webkit-scrollbar-track {
  background-color: transparent;
}
.search-popup .search-result ::-webkit-scrollbar-corner {
  background-color: transparent;
}
@supports (-moz-appearance: none) {
  .search-popup .search-result * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .search-popup .search-result:hover {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .search-popup .search-result:active {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
}
.search-popup .search-result .default-nodata {
  display: flex;
  align-items: center;
  min-height: 210px;
  height: 100%;
  padding-top: 12px;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: #6b7280;
}
.search-popup .search-result .result-nodata {
  display: flex;
  align-items: center;
  min-height: 210px;
  height: 100%;
  padding-top: 12px;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: #6b7280;
}
.search-popup .search-result .search-data {
  margin-right: 2px;
  font-weight: 500;
  color: #1f2937;
}
.search-popup .search-result .result-data {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.search-popup .search-result .result-data .title3 {
  margin: 0;
}
.search-popup .search-result .result-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 18px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.search-popup .search-result .guide-text {
  color: #4b5563;
  font-size: 12px;
  font-weight: 400;
}
.search-popup .search-result .list-result > li {
  height: 72px;
  border-bottom: 1px solid #e5e7eb;
}
.search-popup .search-result .list-result > li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  padding: 18px 12px;
}
.search-popup .search-result .list-result > li a:hover {
  background-color: #f3f4f6;
}
.search-popup .search-result .service-type {
  flex: 0 0 auto;
}
.search-popup .search-result .service-type + .wrok-name {
  margin-left: 12px;
}
.search-popup .search-result .wrok-name {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  width: calc(100% - 208px);
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
}
.search-popup .search-result .wrok-name .file-name {
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.search-popup .search-result .wrok-name .label-shared {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  padding: 6px 8px 6px 6px;
  border-radius: 100px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 12px;
  font-weight: 500;
}
.search-popup .search-result .last-date {
  flex: 0 0 auto;
  display: inline-block;
  width: 160px;
  font-size: 14px;
  font-weight: 400;
  color: #4b5563;
  text-align: center;
}

.layer-popup.left-top {
  top: 0;
  right: 100%;
}
.layer-popup.right-top {
  top: 0;
  left: 100%;
}
.layer-popup.top-left {
  bottom: 100%;
  left: 0;
}
.layer-popup.top-right {
  bottom: 100%;
  right: 0;
}
.layer-popup.left-bottom {
  bottom: 0;
  right: 100%;
}
.layer-popup.right-bottom {
  bottom: 0;
  left: 100%;
}
.layer-popup.bottom-left {
  top: 100%;
  left: 0;
}
.layer-popup.bottom-right {
  top: 100%;
  right: 0;
}
.layer-popup.top-center {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.layer-popup.bottom-center {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.layer-popup.left-center {
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
}
.layer-popup.right-center {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 69px;
  padding: 20px 24px;
  border-radius: 36px;
  border: 1px solid #d1d5db;
  background: #fff;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.15);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #1f2937;
  z-index: 1200;
  white-space: nowrap;
}
.toast.top {
  top: 40px;
  bottom: auto;
  animation: slide-in-top 0.5s forwards, slide-out-top 0.5s forwards 2500ms;
}
.toast.bottom {
  bottom: 40px;
  animation: slide-in-bottom 0.5s forwards, slide-out-bottom 0.5s forwards 2500ms;
}
.toast.open-top {
  top: 40px;
  bottom: auto;
  animation: open-top 0.5s forwards;
}
.toast.open-bottom {
  bottom: 40px;
  animation: open-bottom 0.5s forwards;
}
.toast.close-top {
  animation: close-top 0.5s forwards;
}
.toast.close-bottom {
  animation: close-bottom 0.5s forwards;
}
@keyframes slide-in-top {
  from {
    top: -80px;
    bottom: auto;
  }
  to {
    top: 40px;
    bottom: auto;
  }
}
@keyframes slide-out-top {
  from {
    top: 40px;
    bottom: auto;
  }
  to {
    top: -80px;
    bottom: auto;
  }
}
@keyframes slide-in-bottom {
  from {
    bottom: -80px;
  }
  to {
    bottom: 40px;
  }
}
@keyframes slide-out-bottom {
  from {
    bottom: 40px;
  }
  to {
    bottom: -80px;
  }
}
@keyframes open-top {
  from {
    transform: translate(-50%, -125px);
  }
  to {
    transform: translate(-50%, 0px);
  }
}
@keyframes open-bottom {
  from {
    transform: translate(-50%, 125px);
  }
  to {
    transform: translate(-50%, 0px);
  }
}
@keyframes close-top {
  from {
    transform: translate(-50%, 0px);
  }
  to {
    transform: translate(-50%, -125px);
  }
}
@keyframes close-bottom {
  from {
    transform: translate(-50%, 0px);
  }
  to {
    transform: translate(-50%, 125px);
  }
}
.toast.dark-theme {
  background: #1f2937;
  border: 1px solid #1f2937;
  color: #fff;
}
.toast .toast-icon {
  flex: 0 0 auto;
}
.toast .toast-icon .ico {
  margin-top: -2px;
}
.toast .message {
  flex: 1 1 auto;
  max-width: calc(100vw - 40px);
  line-height: 1.4;
}
.toast .btn-toast-close {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4b5563;
}

.dropdown {
  flex: 0 1 auto;
  display: inline-block;
  min-width: 80px;
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
}
.dropdown.full {
  width: 100%;
}
.table-scroll-x .dropdown.dropdown-up dd {
  top: auto;
  bottom: 34px;
}
.dropdown dt {
  position: relative;
}
.dropdown .select {
  color: #1f2937;
  position: relative;
}
.dropdown .btn-select {
  width: 100%;
  height: 40px;
  padding: 0 42px 0 16px;
  font-size: 16px;
  text-align: left;
  white-space: nowrap;
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-image: url(/_next/static/media/ico-caret-down-gray-md@2x.35277adb.png);
  background-color: #fff;
  border-radius: 9px;
  border: 1px solid #9ca3af;
}
.dropdown .btn-select:disabled {
  border-color: #f3f4f6;
  pointer-events: none;
  background-color: #e5e7eb;
}
.dropdown .btn-select span {
  display: flex;
  align-items: center;
  line-height: 1.3;
}
.dropdown .btn-select .ico {
  margin-right: 8px;
}
.dropdown .btn-cancel {
  position: absolute;
  top: calc(50% - 20px + 2px);
  right: 2px;
  width: 40px;
  height: 36px;
  background-color: #fff;
  border-radius: 8px;
}
.dropdown .btn-cancel > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 16px 0 10px;
  border-radius: 8px;
}
.dropdown.on .btn-select {
  background-image: url(/_next/static/media/ico-caret-up-gray-md@2x.05decfe5.png);
}
.dropdown dd {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
}
.dropdown .option-list {
  min-width: 235px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
}
.dropdown .option-list li {
  width: 100%;
}
.dropdown .option-list a,
.dropdown .option-list button {
  display: flex;
  align-items: center;
  padding: 12.5px 12px;
  border-radius: 6px;
  font-size: 16px;
  white-space: nowrap;
}
.dropdown .option-list a:hover,
.dropdown .option-list button:hover {
  background: #f3f4f6;
}
.dropdown .option-list a:active,
.dropdown .option-list button:active {
  background: #f3f4f6;
}
.dropdown .option-list .ico {
  margin-right: 8px;
}
.dropdown .option-list button {
  width: 100%;
  text-align: left;
}
.dropdown.on {
  border-color: #f3f4f6;
  position: relative;
  z-index: 10;
}
.dropdown.on dd {
  display: block;
}
.dropdown-sm {
  height: 21px;
  flex: 0 1 auto;
  display: inline-block;
  vertical-align: middle;
}
.dropdown-sm .select {
  position: relative;
  display: inline-block;
}
.dropdown-sm .btn-select {
  height: 20px;
  padding: 0 12px 0 0;
  background-size: 8px auto;
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-image: url(/_next/static/media/ico-arrow-down-sm@2x.0c48a880.png);
  background-color: #fff;
  border: none;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  text-align: right;
  color: #6b7280;
  line-height: 1;
}
.dropdown-sm .btn-select span {
  display: inline-block;
  line-height: 1;
}
.dropdown-sm dd {
  display: none;
  position: absolute;
  top: 22px;
  right: 0;
  z-index: 100;
  min-width: 136px;
}
.dropdown-sm .option-list {
  min-width: calc(100% + 20px);
  padding: 8px;
  overflow-y: auto;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
}
.dropdown-sm .option-list li {
  width: 100%;
}
.dropdown-sm .option-list a,
.dropdown-sm .option-list button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #1f2937;
  white-space: nowrap;
}
.dropdown-sm .option-list a:hover,
.dropdown-sm .option-list button:hover {
  background: #f3f4f6;
}
.dropdown-sm .option-list a:active,
.dropdown-sm .option-list button:active {
  background: #f3f4f6;
}
.dropdown-sm .option-list button {
  width: 100%;
  text-align: left;
}
.dropdown-sm.on .btn-select {
  background-image: url(/_next/static/media/ico-arrow-up-sm@2x.5fef0197.png);
}
.dropdown-sm.on dd {
  display: block;
}

.breadcrumb {
  width: 100%;
  font-size: 12px;
}
.breadcrumb + .title1 {
  margin-top: 2px;
}
.breadcrumb .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  min-height: 16px;
}
.breadcrumb .breadcrumb-item {
  color: #4b5563;
  font-weight: 400;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item {
  position: relative;
  padding-left: 16px;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline: 4px;
  background-image: url(/_next/static/media/ico-breadcrumb-arrow@2x.9018418d.png);
  background-size: 8px auto;
  background-repeat: no-repeat;
  background-position: center;
}
.breadcrumb .breadcrumb-item .site-name {
  color: #1f2937;
}
.breadcrumb .breadcrumb-item.active {
  color: #1364ff;
  font-weight: 700;
  cursor: default;
}
.breadcrumb .breadcrumb-item a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb .breadcrumb-item a:hover {
  color: #1364ff;
  text-decoration: underline;
}

/*
	Dropzone.js
	drag And Drop file upload
 */
.file-upload {
  position: relative;
  width: 100%;
  min-height: 64px;
}
.file-upload.col2 .preview-area {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4px;
}
.file-upload.col2 .preview-area .file-item {
  min-width: 0;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 2px);
}
.file-upload.disabled {
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(100%);
}
.file-upload .upload-area {
  width: 100%;
  min-height: 160px;
  padding: 20px;
  background-color: #fff;
  border: 1px dashed #9ca3af;
  border-radius: 16px;
}
.file-upload .guide-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 65px;
  text-align: center;
}
.file-upload .guide-text::before {
  content: "";
  position: absolute;
  top: -52px;
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  background: url(/_next/static/media/img-file-upload@2x.0871f98e.png) 0 0 no-repeat;
  background-size: 40px 40px;
}
.file-upload .guide-text p {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 18px;
  color: #1f2937;
}
.file-upload .guide-text p .btn {
  display: inline-block;
  vertical-align: top;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 18px;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #1364ff;
}
.file-upload .guide-text span {
  margin-top: 4px;
  font-weight: 400;
  font-size: 12px;
  line-height: 130%;
  letter-spacing: -0.01em;
  color: #6b7280;
}
.file-upload .file-item {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.file-upload .file-item .preview {
  width: 100px;
  height: 100px;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}
.file-upload .file-item .preview-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.file-upload .pdf-info .filename {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.file-upload .pdf-info .preview-text {
  font-size: 14px;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tool-file-upload {
  margin-top: 32px;
}
.tool-file-upload.file-upload-pdf {
  margin-top: 0;
}
.tool-file-upload.file-upload-pdf ::before {
  display: none;
}
.tool-file-upload.file-upload-pdf .guide-text {
  margin-top: 0;
}
.tool-file-upload.file-upload-pdf .upload-area {
  max-height: none;
  min-height: 120px;
}
.tool-file-upload.file-upload-pdf .file-item {
  padding: 16px 20px;
}
.tool-file-upload .upload-area {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 300px;
  border: 2px dashed #9ca3af;
  border-radius: 18px;
  background: #f3f4f6;
}
.tool-file-upload .guide-text {
  position: relative;
  margin-top: 60px;
}
.tool-file-upload .guide-text::before {
  content: "";
  position: absolute;
  top: -60px;
  left: calc(50% - 24px);
  width: 48px;
  height: 48px;
  background: url(/_next/static/media/img-file-upload2@2x.8356ee20.png) 0 0 no-repeat;
  background-size: 48px 48px;
}
.tool-file-upload .guide-text p {
  font-size: 18px;
  font-weight: 500;
}
.tool-file-upload .guide-text p .btn {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
}
.tool-file-upload .guide-text span {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
}
.tool-file-upload .file-item {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 350px;
  max-width: calc(100% - 40px);
  height: calc(100% - 40px);
  max-height: 350px;
  margin: 0;
  padding: 32px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0);
}
.tool-file-upload .file-item .preview {
  width: auto;
  height: 100%;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  overflow: hidden;
}
.tool-file-upload .file-item .preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tool-file-upload .btn-delete {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
}
.tool-file-upload .btn-delete .ico {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.popup-feedback {
  position: absolute;
  z-index: 210;
  cursor: move;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  color: #fff;
  background: #1f2937;
  width: 352px;
  right: 20px;
  bottom: 20px;
}
.layout-details .popup-feedback {
  left: calc(50% - 46px);
}
.popup-feedback.l1 {
  width: 276px;
  left: calc(50% - 8px);
}
.popup-feedback .btn-text {
  color: #9ca3af;
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-text-decoration-color: rgb(102.3463687151, 111.3016759777, 126.6536312849);
          text-decoration-color: rgb(102.3463687151, 111.3016759777, 126.6536312849);
}
.popup-feedback .btn-minimize {
  position: absolute;
  right: 20px;
  top: 0;
  padding: 5px;
  border-radius: 0;
  line-height: 1;
  height: 25px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #9ca3af;
}
.popup-feedback .feedback-handle {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px;
  border-radius: 0;
  line-height: 1;
}
.popup-feedback .form-control {
  background: transparent;
  font-size: inherit;
  color: #fff;
}
.popup-feedback .form-control::-webkit-input-placeholder {
  color: #9ca3af;
  font-size: 14px;
}
.popup-feedback .form-control:-ms-input-placeholder {
  color: #9ca3af;
  font-size: 14px;
}
.popup-feedback .form-control:hover, .popup-feedback .form-control:focus {
  border-color: #fff;
}
.popup-feedback .btn-primary {
  font-size: inherit;
}
.popup-feedback .btn-primary:disabled {
  background-color: #19479b;
  color: #8f949b;
}
.popup-feedback .input-group {
  gap: 8px;
}
.popup-feedback .input-group .form-control {
  flex: 1 1 auto;
}
.popup-feedback .input-group .btn {
  flex: 0 0 auto;
  padding: 0 16px;
  font-size: inherit;
}
.popup-feedback .opinion-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 8px;
}
.popup-feedback .opinion-list .btn-sm {
  height: 32px;
  font-weight: normal;
  border-color: #6b7280;
}
.popup-feedback .opinion-list .btn-outline-gray {
  background: transparent;
  color: #d1d5db;
}
.popup-feedback .opinion-list .btn-outline-gray:hover {
  border-color: #fff;
}
.popup-feedback .opinion-list .input-group {
  width: 100%;
}
.popup-feedback .feedback-step1 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}
.popup-feedback .feedback-step1 .message-area {
  flex: 1 1 auto;
}
.popup-feedback .feedback-step1 .btn-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  flex-wrap: wrap;
  gap: 4px;
}
.popup-feedback .feedback-step1 .btn-group .btn-report {
  width: 100%;
  font-size: 12px;
}
.popup-feedback .feedback-step1 .tip {
  width: 100%;
}
.popup-feedback .feedback-step1 .btn {
  border-radius: 8px;
  border: 1px solid #6b7280;
  height: 32px;
  padding: 0 8px;
}
.popup-feedback .feedback-step1 .btn:hover, .popup-feedback .feedback-step1 .btn:focus {
  border-color: transparent;
  background: #fff;
  color: #1f2937;
}
.popup-feedback .feedback-step1 .btn:hover .ico-thumb-up-white, .popup-feedback .feedback-step1 .btn:focus .ico-thumb-up-white {
  background-image: url(/_next/static/media/ico-thumb-up-dark@2x.fdf3990a.png);
}
.popup-feedback .feedback-step1 .btn:hover .ico-thumb-down-white, .popup-feedback .feedback-step1 .btn:focus .ico-thumb-down-white {
  background-image: url(/_next/static/media/ico-thumb-down-dark@2x.952fc8e7.png);
}
.popup-feedback .feedback-step2 .message {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.popup-feedback .feedback-step2-satisfied textarea {
  height: 120px !important;
}
.popup-feedback .feedback-step2-satisfied .btn-group {
  display: flex;
  gap: 8px;
}
.popup-feedback .feedback-step2-satisfied .btn-group .btn {
  flex: 1 1 auto;
  font-size: inherit;
}
.popup-feedback .feedback-step2-satisfied .btn-group .btn-outline-none {
  background: none;
  color: inherit;
  font-weight: normal;
  opacity: 0.7;
}
.popup-feedback .feedback-step2-satisfied .btn-group .btn-primary {
  width: 70%;
}
.popup-feedback .feedback-step2-unsatisfied {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.popup-feedback .feedback-step3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}

.tooltip-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.tooltip-wrapper:focus-within .tooltip-content {
  opacity: 1;
  visibility: visible;
}
.tooltip-wrapper .btn-tooltip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.tooltip-squre .tooltip-inner {
  width: 240px;
  white-space: normal;
  word-break: keep-all;
}
.tooltip-squre .tooltip-inner .custom-content li::before {
  margin-top: 0;
}
.tooltip-squre strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.tooltip-squre p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
.tooltip-squre .btn-xs {
  margin-top: 12px;
  border-radius: 7px;
  font-size: 14px;
}
.tooltip-squre .btn-xs .ico {
  line-height: 0;
  vertical-align: unset;
}

.tooltip-content {
  position: absolute;
  z-index: 100;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
}
.tooltip-content:focus:not(:focus-visible) {
  outline: none;
}
.tooltip-content::before {
  content: "";
  position: absolute;
  top: 1px;
  left: calc(50% - 7px);
  width: 14px;
  height: 7px;
  background: url(/_next/static/media/img-tooltip-arrow-gray@2x.3169481e.png) 0 0 no-repeat;
  background-size: 14px 7px;
}
.tooltip-content .tooltip-inner {
  min-width: 210px;
  width: auto;
  height: auto;
  padding: 12px 16px;
  border-radius: 10px;
  text-align: left;
  overflow: hidden;
  background-color: #0f1318;
  white-space: nowrap;
}
.tooltip-content .btn-group {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tooltip-content .btn-group .btn {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(50% - 4px);
}
.tooltip-content.bottom-center {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 8px;
}
.tooltip-content.bottom-left {
  left: calc(50% - 21px);
  padding-top: 8px;
}
.tooltip-content.bottom-left:before {
  left: 14px;
}
.tooltip-content.bottom-right {
  right: calc(50% - 21px);
  padding-top: 8px;
}
.tooltip-content.bottom-right:before {
  right: 14px;
  left: auto;
}
.tooltip-content.right-top {
  top: -14px;
  left: 14px;
  padding-left: 8px;
}
.tooltip-content.right-top:before {
  top: 18px;
  left: -1px;
  transform: rotate(-90deg);
}
.tooltip-content.right-center {
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  padding-left: 8px;
}
.tooltip-content.right-center:before {
  top: calc(50% - 3.5px);
  left: -1px;
  transform: rotate(-90deg);
}
.tooltip-content.right-bottom {
  top: auto;
  left: 14px;
  bottom: -14px;
  padding-left: 8px;
}
.tooltip-content.right-bottom:before {
  top: auto;
  bottom: 18px;
  left: -1px;
  transform: rotate(-90deg);
}
.tooltip-content.left-top {
  top: -14px;
  right: 14px;
  padding-right: 8px;
}
.tooltip-content.left-top:before {
  top: 18px;
  right: -1px;
  left: auto;
  transform: rotate(-270deg);
}
.tooltip-content.left-center {
  top: 50%;
  right: 14px;
  padding-right: 8px;
  transform: translateY(-50%);
}
.tooltip-content.left-center:before {
  top: calc(50% - 3.5px);
  right: -1px;
  left: auto;
  transform: rotate(-270deg);
}
.tooltip-content.left-bottom {
  top: auto;
  right: 14px;
  bottom: -14px;
  padding-right: 8px;
}
.tooltip-content.left-bottom:before {
  top: auto;
  right: -1px;
  bottom: 18px;
  left: auto;
  transform: rotate(-270deg);
}
.tooltip-content.top-center {
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip-content.top-center:before {
  top: auto;
  bottom: -7px;
  transform: rotate(180deg);
}
.tooltip-content.top-left {
  top: -14px;
  left: 14px;
  padding-left: 8px;
}
.tooltip-content.top-left:before {
  top: auto;
  bottom: 18px;
  left: -1px;
  transform: rotate(180deg);
}
.tooltip-content.top-right {
  top: -14px;
  right: 14px;
  padding-right: 8px;
}
.tooltip-content.top-right:before {
  top: auto;
  bottom: 18px;
  right: -1px;
  left: auto;
  transform: rotate(180deg);
}
.tooltip-content-primary {
  background: #1364ff;
  width: 300px;
  padding: 20px;
}
.tooltip-content .custom-content {
  font-weight: 400;
  font-size: 14px;
  color: #fff;
}
.tooltip-content .custom-content .list li {
  color: #fff;
}
.tooltip-content .custom-content .list li::before {
  background-color: #9ca3af;
}
.tooltip-content .custom-content .list li + li {
  margin-top: 8px;
}
.tooltip-content .list-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 767.98px) {
  .tooltip-content:focus {
    outline: none;
  }
}

.tooltip-in-code {
  font-weight: 400;
}
.tooltip-in-code .custom-content .title {
  display: block;
  width: 100%;
  margin-bottom: 4px;
}
.tooltip-in-code .code {
  height: 18px;
  background-color: #1f2937;
  border: 1px solid #4b5563;
  color: #f9fafb;
  font-weight: 400;
  font-size: 11px;
}
.tooltip-in-code .code + .code {
  margin-left: 4px;
}

.type02 .tooltip-content .tooltip-inner {
  width: auto;
}

.badge-plan {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 18px;
  padding: 0 5px 0 4px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  box-sizing: border-box;
  line-height: 1;
}
.badge-plan.plan-starter {
  background-color: #2a9c67;
  border-color: #2a9c67;
  color: #fff;
}
.badge-plan.plan-pro {
  background-color: #347fff;
  border-color: #347fff;
  color: #fff;
}
.badge-plan.plan-team {
  background-color: #9c34ff;
  border-color: #9c34ff;
  color: #fff;
}
.badge-plan.plan-enterprise {
  background-color: #0a319a;
  border-color: #0a319a;
  color: #fff;
}
.badge-plan.plan-trial {
  background-color: #e5e7eb;
  border-color: #e5e7eb;
  color: #4b5563;
}
.badge-plan.plan-custom {
  background-color: #0a319a;
  border-color: #0a319a;
  color: #fff;
}
.badge-plan.locked {
  position: relative;
  padding-left: 14px;
  background-color: #e5e7eb;
  border: 1px solid #d1d5db;
  color: #6b7280;
}
.badge-plan.locked:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3.5px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-image: url(/_next/static/media/ico-locked-xs@2x.be2ed5d9.png);
  background-size: 10px auto;
}
.badge-role {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 18px;
  padding: 0 6px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  font-weight: 400;
  font-size: 10px;
  text-align: center;
  line-height: 1;
}
.badge-role.role-expert {
  background-color: #1a212b;
  color: #fff;
}
.badge-role.role-expert .badge-text {
  margin-left: 1px;
}
.badge-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 18px;
  padding: 0 5px 0 4px;
  background-color: #1a212b;
  border-radius: 9px;
  font-weight: 500;
  font-size: 10px;
  color: #fff;
  line-height: 1;
}
.badge-sm {
  height: 16px;
  padding: 2px 3px;
  font-size: 10px;
}
.badge-plugin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 22px;
  padding: 0 6px 0 4px;
  background-color: #ffdede;
  border-radius: 11px;
  font-weight: 400;
  font-size: 12px;
  color: #dc2626;
  line-height: 1;
}
.badge-plugin.plugin-pending {
  background-color: #ffdede;
  color: #dc2626;
}
.badge-plugin.plugin-connected {
  background-color: #dbfaf0;
  color: #059669;
}
.badge-plugin.plugin-connectionLost {
  background-color: #fff;
  color: #dc2626;
}
.badge-plugin.plugin-disconnected {
  background-color: #ffdede;
  color: #dc2626;
}
.badge-plugin.plugin-paused {
  background-color: #fff5e0;
  color: #754e00;
}

.status-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 58px;
  height: 24px;
  gap: 4px;
  border-radius: 12px;
  padding: 0 8px 0 16px;
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  line-height: 1;
}
.status-badge::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 3px;
}
.status-badge.type01 {
  background-color: #ede9fe;
  color: #7c3aed;
}
.status-badge.type01::before {
  background-color: #7c3aed;
}
.status-badge.type02 {
  background-color: #ffedd5;
  color: #f97316;
}
.status-badge.type02::before {
  background-color: #f97316;
}
.status-badge.type03 {
  background-color: #dbfaf0;
  color: #059669;
}
.status-badge.type03::before {
  background-color: #059669;
}
.status-badge.type04 {
  background-color: #e5e7eb;
  color: #4b5563;
}
.status-badge.type04::before {
  background-color: #4b5563;
}
.status-badge.status-sm {
  min-width: auto;
  height: 16px;
  padding: 0 4px 0 10px;
  font-size: 10px;
}
.status-badge.status-sm::before {
  left: 4px;
  width: 4px;
  height: 4px;
}
.status-badge.badge-xs {
  height: 22px;
  padding: 0 6px 0 16px;
  font-size: 12px;
}

.multiple-dropzone {
  height: 160px;
  padding: 20px;
  background-color: #fff;
  border: 1px dashed #a6adb9;
  border-radius: 16px;
}
.multiple-dropzone.active {
  background-color: #eff6ff;
  border-color: #1364ff;
}
.multiple-dropzone .upload-area {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.multiple-dropzone .guide-text {
  position: relative;
  margin-top: 52px;
}
.multiple-dropzone .guide-text::before {
  content: "";
  position: absolute;
  top: -52px;
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  background: url(/_next/static/media/ico-multiple-dropzone@2x.1a4fca18.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 40px auto;
}
.multiple-dropzone.active {
  border-color: #1364ff;
  background: #eff6ff;
}
.multiple-dropzone .guide-text {
  text-align: center;
  color: #4b5563;
}
.multiple-dropzone .guide-text .text-md {
  font-size: 14px;
  line-height: 1.5;
}
.multiple-dropzone .guide-text .btn-file {
  color: #1364ff;
  text-decoration: underline;
  font-weight: 500;
}
.multiple-dropzone .guide-text .btn-file:hover {
  color: #0658f5;
}

.upload-list-area .btn-xs {
  gap: 2px;
  height: 24px;
  border-radius: 7px;
  padding-inline: 8px;
  font-weight: 500;
  font-size: 14px;
}
.upload-list-area .list-area {
  max-height: 300px;
  border-radius: 12px;
  gap: 12px;
  margin-top: 4px;
  padding: 20px;
  background-color: #f3f4f6;
  overflow-y: auto;
}
.upload-list-area .upload-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}
.upload-list-area .upload-item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc(50% - 6px);
  height: 72px;
  padding: 12px 56px 12px 12px;
  border-radius: 12px;
  background: #fff;
}
.upload-list-area .upload-item .file-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.upload-list-area .upload-item .file-info .img-area {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #e5e7eb;
}
.upload-list-area .upload-item .info-text {
  display: flex;
  flex-direction: column;
  width: calc(100% - 52px);
}
.upload-list-area .upload-item .info-text .filename {
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.upload-list-area .upload-item .info-text .filesize {
  font-size: 12px;
  color: #6b7280;
}
.upload-list-area .upload-item .btn-delete {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-list-area .upload-item .progress-area {
  position: absolute;
  bottom: 8px;
  flex: 1 1;
  display: flex;
  align-items: center;
  width: calc(100% - 21px);
}
.upload-list-area .upload-item .progress-area .progress-bar {
  flex: 1 1;
  height: 4px;
  background: #d1d5db;
  border-radius: 2px;
  overflow: hidden;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.upload-list-area .upload-item .progress-area .progress-bar .progress-value {
  height: 100%;
  background: #1364ff;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.upload-list-area .upload-item .progress-area .progress-bar::-webkit-progress-bar {
  background: #d1d5db;
  border-radius: 2px;
}
.upload-list-area .upload-item .progress-area .progress-bar::-webkit-progress-value {
  background: #1364ff;
  border-radius: 2px;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.upload-list-area .upload-item .progress-area .progress-bar::-moz-progress-bar {
  background: #1364ff;
  border-radius: 2px;
  -moz-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
@media (max-width: 1024.98px) {
  .upload-list-area .upload-list {
    flex-direction: column;
  }
  .upload-list-area .upload-item {
    width: 100%;
  }
}

.upload-progress .file-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  font-weight: 400;
  font-size: 14px;
  color: #6b7280;
}
.upload-progress .progress-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 20px;
}
.upload-progress .progress-wrap .progress-bar {
  flex: 1 1 auto;
}
.upload-progress .progress-wrap .progress-info {
  flex: 0 0 auto;
}
.upload-progress .progress-bar {
  display: block;
  width: 100%;
  height: 6px;
  border: none;
  border-radius: 5px;
  overflow: hidden;
}
.upload-progress .progress-bar::-webkit-progress-bar {
  background-color: #e5e7eb;
  border-radius: 2px;
}
.upload-progress .progress-bar::-webkit-progress-value {
  background-color: #1364ff;
  border-radius: 5px;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.upload-progress .progress-bar::-moz-progress-bar {
  background-color: #1364ff;
  border-radius: 2px;
  -moz-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.upload-progress .progress-info {
  font-weight: 400;
  font-size: 14px;
  color: #4b5563;
}
.upload-progress .status-text {
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
}
.upload-progress .status-text + .guide-text {
  margin-top: 4px;
}
.upload-progress .guide-text {
  font-weight: 400;
  font-size: 12px;
  color: #4b5563;
}
.upload-progress .btn-group-fixed {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 24px;
  padding-inline: 0;
}
.upload-progress .btn-cancel,
.upload-progress .btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 24px;
  padding-inline: 8px 9px;
  border-radius: 7px;
  font-weight: 500;
  font-size: 14px;
  color: #4b5563;
}
.upload-progress .btn-cancel:hover,
.upload-progress .btn-delete:hover {
  background-color: #e5e7eb;
}

.upload-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}
.upload-list-wrap .upload-item {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 102px;
  border-radius: 12px;
  padding: 20px;
  background-color: #f9fafb;
  border: 1px solid #f3f4f6;
}

.ico-select {
  position: relative;
  min-width: 70px;
  height: 22px;
  padding: 0;
  background-color: #fff !important;
  border-radius: 7px;
  z-index: 50;
}
.ico-select .ico-select-trigger {
  width: 100%;
  height: 100%;
  padding: 4px 6px;
  min-width: 70px;
  max-width: 100%;
  padding-right: 17px;
  background: url(/_next/static/media/ico-arrow-down-sm-gray@2x.6f2b8e7b.png) no-repeat right 6px center;
  background-size: 8px auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 12px;
  line-height: 1;
}
.ico-select .ico-select-value {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ico-select .ico-label {
  font-size: 12px;
  color: #1f2937;
}
.ico-select .placeholder {
  color: #6b7280;
}
.ico-select .ico-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 600;
}
.ico-select .ico-select-options {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
}
.ico-select .ico-option {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 2px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: 14px;
  color: #1f2937;
}
.ico-select .ico-option:hover {
  background-color: #f3f4f6;
}
.ico-select .ico-option.is-selected {
  background-color: #e5e7eb;
}
.ico-select.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}
.ico-select.is-disabled .ico-select-trigger {
  background-color: #f3f4f6;
}
.ico-select.is-error .ico-select-trigger {
  border-color: #ef4444;
}
.ico-select.is-open .ico-select-trigger {
  border-color: #1364ff;
}
.ico-select .ico-arrow-down-up {
  transform: rotate(180deg);
}

.btn-copy-default {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-inline: 9px;
  border-radius: 0;
  font-weight: 500;
  color: #4b5563;
  line-height: 1;
}
.btn-copy-default.copy-xxs {
  height: 20px;
  padding-inline: 4px;
  font-size: 10px;
}
.btn-copy-default.copy-xxs .ico {
  width: 12px;
  height: 12px;
  line-height: 12px;
}
.btn-copy-default.copy-xs {
  font-size: 12px;
}
.btn-copy-default.copy-sm {
  padding-inline: 9px;
  font-size: 14px;
}
.btn-copy-default.copy-md {
  font-size: 16px;
}
.btn-copy-default.copy-lg {
  font-size: 18px;
}
.btn-copy-default.copy-primary {
  color: #1364ff;
}

.btn-copy-text {
  font-weight: 400;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #4b5563;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4rem;
  line-height: 1.4rem;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.btn-copy-text:hover {
  color: #1364ff;
}
.btn-copy-text.copy-xs {
  font-size: 12px;
}

.btn-hash-copy {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  height: 20px;
  padding-inline: 4px 16px;
  border-radius: 4px;
  background-color: transparent;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-weight: 400;
  font-size: 12px;
}
.btn-hash-copy:hover, .btn-hash-copy:focus-visible {
  background-color: #f3f4f6;
}
.btn-hash-copy:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url(/_next/static/media/ico-alt-copy-gray@2x.5a19ebef.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
}

.section-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 347px;
  padding: 80px 24px;
  background: #000;
  color: #fff;
  text-align: center;
  background: url(/_next/static/media/bg-section-cta.009f000d.png) center top;
}
.section-cta .title {
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
}
.section-cta .title .a11y-embelem {
  width: 36px;
  height: 36px;
  margin-top: -6px;
  vertical-align: middle;
}
.section-cta .desc {
  margin-top: 8px;
  margin-bottom: 40px;
}
@media (max-width: 767.98px) {
  .section-cta {
    padding: 60px 0;
    height: auto;
  }
  .section-cta .title {
    font-size: 28px;
  }
  .section-cta .title svg {
    width: 32px;
    height: 32px;
  }
  .section-cta .desc {
    font-size: 14px;
  }
  .section-cta .cta-area {
    font-size: 14px;
  }
}

.cta-url {
  position: relative;
  justify-content: flex-start;
  height: 392px;
  padding: 80px 20px;
  background: linear-gradient(89deg, #0016df -5.86%, #0085ff 104.1%);
  overflow: hidden;
}
.cta-url .cta-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  z-index: 1;
}
.cta-url .title {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  line-height: 1.5;
}
.cta-url .subtitle {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  line-height: 1.4;
}
.cta-url .desc {
  margin-top: 2px;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  color: #fff;
}
.cta-url .desc strong {
  font-weight: 700;
}
.cta-url .cta-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-top: 12px;
  font-size: 14px;
}
.cta-url .form-control::placeholder {
  color: #6b7280;
}
@media (max-width: 767.98px) {
  .cta-url .url-form-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 320px;
  }
}
.cta-url .url-form {
  position: relative;
}
.cta-url .url-form .cta-url-error {
  position: absolute;
  top: calc(100% + 10px);
  left: 9px;
  z-index: 10;
}
.cta-url .url-form .cta-url-error .inner {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 5px;
  background: #d9e2fc;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  color: #ef4444;
}
.cta-url .url-form .cta-url-error .inner::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 11px;
  width: 10px;
  height: 5px;
  background-image: url(/_next/static/media/img-tooltip-arrow-lightgray@2x.03e3c8fd.png);
  background-size: 10px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.cta-url .url-form .cta-url-error .ico {
  position: relative;
  flex: 0 0 auto;
  margin-top: 1px;
}
@media (max-width: 767.98px) {
  .cta-url .url-form .cta-url-error {
    position: relative;
  }
}
.cta-url .cta-check-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  margin-bottom: 12px;
}
.cta-url .cta-check-toggle .check-switch:hover input + .label::before, .cta-url .cta-check-toggle .check-switch:focus-visible input + .label::before {
  background: rgba(255, 255, 255, 0.3);
}
.cta-url .cta-check-toggle .check-switch:hover input .text-checked, .cta-url .cta-check-toggle .check-switch:focus-visible input .text-checked {
  opacity: 1;
}
.cta-url .cta-check-toggle .check-switch:hover input .text-uncheck, .cta-url .cta-check-toggle .check-switch:focus-visible input .text-uncheck {
  opacity: 1;
}
.cta-url .cta-check-toggle .check-switch input:checked:hover + .label, .cta-url .cta-check-toggle .check-switch input:checked:focus-visible + .label,
.cta-url .cta-check-toggle .check-switch input:not(:checked):hover + .label,
.cta-url .cta-check-toggle .check-switch input:not(:checked):focus-visible + .label {
  background-image: none;
  background: rgba(255, 255, 255, 0.3);
}
.cta-url .cta-check-toggle .check-switch input:checked:hover + .label::before, .cta-url .cta-check-toggle .check-switch input:checked:focus-visible + .label::before,
.cta-url .cta-check-toggle .check-switch input:not(:checked):hover + .label::before,
.cta-url .cta-check-toggle .check-switch input:not(:checked):focus-visible + .label::before {
  background: rgba(255, 255, 255, 0.3);
}
.cta-url .cta-check-toggle .check-switch input:checked:hover + .label .text-checked, .cta-url .cta-check-toggle .check-switch input:checked:focus-visible + .label .text-checked,
.cta-url .cta-check-toggle .check-switch input:not(:checked):hover + .label .text-checked,
.cta-url .cta-check-toggle .check-switch input:not(:checked):focus-visible + .label .text-checked {
  color: #fff;
  opacity: 1;
}
.cta-url .cta-check-toggle .check-switch input:checked:hover + .label .text-uncheck, .cta-url .cta-check-toggle .check-switch input:checked:focus-visible + .label .text-uncheck,
.cta-url .cta-check-toggle .check-switch input:not(:checked):hover + .label .text-uncheck,
.cta-url .cta-check-toggle .check-switch input:not(:checked):focus-visible + .label .text-uncheck {
  color: #fff;
  opacity: 1;
}
.cta-url .cta-check-toggle .check-switch .text-checked:hover, .cta-url .cta-check-toggle .check-switch .text-checked:focus-visible {
  opacity: 1;
}
.cta-url .cta-check-toggle .check-switch .text-uncheck:hover, .cta-url .cta-check-toggle .check-switch .text-uncheck:focus-visible {
  opacity: 1;
}
.cta-url .cta-check-toggle .check-switch input:checked + .label {
  padding-left: 3px;
  padding-right: 10px;
}
.cta-url .cta-check-toggle .check-switch input:checked + .label:after {
  top: 3px;
  left: calc(100% - 15px);
}
.cta-url .cta-check-toggle .check-switch input:checked + .label .text-checked {
  font-weight: 700;
  color: #fff;
}
.cta-url .cta-check-toggle .check-switch input:checked + .label .text-uncheck {
  opacity: 0.5;
}
.cta-url .cta-check-toggle .check-switch input:not(:checked) + .label:after {
  top: 3px;
  left: 3px;
}
.cta-url .cta-check-toggle .check-switch input:not(:checked) + .label .text-checked {
  opacity: 0.5;
}
.cta-url .cta-check-toggle .check-switch input:not(:checked) + .label .text-uncheck {
  font-weight: 700;
  color: #fff;
}
.cta-url .cta-check-toggle .check-switch .label {
  min-width: 30px;
  height: 18px;
  border-radius: 18px;
  overflow: visible;
  background-image: none;
}
.cta-url .cta-check-toggle .check-switch .label::before {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
  box-sizing: border-box;
}
.cta-url .cta-check-toggle .check-switch .label::after {
  width: 12px;
  height: 12px;
}
.cta-url .cta-check-toggle .check-switch .text-checked {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + 6px);
  display: block !important;
  padding-left: 14px;
  opacity: 1;
  font-size: 14px;
  color: #fff;
  line-height: 1.4;
}
.cta-url .cta-check-toggle .check-switch .text-checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url(/_next/static/media/ico-mode-minimal-white@2x.83b8cf85.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.cta-url .cta-check-toggle .check-switch .text-uncheck {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(100% + 6px);
  display: block !important;
  padding-left: 14px;
  opacity: 1;
  font-size: 14px;
  color: #fff;
  line-height: 1.4;
}
.cta-url .cta-check-toggle .check-switch .text-uncheck::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url(/_next/static/media/ico-mode-ally-white@2x.7795fd48.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.cta-url .cta-check-toggle .tooltip-label {
  position: absolute;
  top: -104px;
  right: -50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #483400;
  white-space: nowrap;
  z-index: 1;
}
.cta-url .cta-check-toggle .tooltip-label .inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 237px;
  height: 94.5px;
  padding: 14px 14px 22px;
  text-align: center;
  background: url(/_next/static/media/bg-tooltip-type04@2x.12a2f582.png);
  background-size: 237px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.cta-url .cta-check-toggle .tooltip-label .title {
  font-weight: 700;
  font-size: 16px;
}
@media (min-width: 768px) {
  .cta-url:before {
    content: "";
    position: absolute;
    bottom: -116px;
    right: calc(50% - 900px);
    width: 660px;
    height: 660px;
    background: url(/_next/static/media/bg-cta-url01.e7c1c9a3.png) center center;
    background-size: 660px auto;
    background-repeat: no-repeat;
  }
  .cta-url::after {
    content: "";
    position: absolute;
    top: -74px;
    left: calc(50% - 646px);
    width: 280px;
    height: 280px;
    background: url(/_next/static/media/bg-cta-url02.fec69778.png) center center;
    background-size: 280px auto;
    background-repeat: no-repeat;
  }
  .cta-url .cta-check-toggle {
    margin-left: 16px;
  }
  .cta-url .url-form {
    width: 450px;
  }
  .cta-url .url-form .form-control {
    width: 300px;
    padding-inline: 20px;
    border-right: 0;
    border-radius: 11px 0 0 11px;
  }
  .cta-url .url-form .btn-submit {
    width: 150px;
    padding-inline: 10px;
    border-radius: 0 11px 11px 0;
  }
}
@media (max-width: 767.98px) {
  .cta-url {
    height: auto;
    min-height: 467px;
    padding: 80px 20px;
  }
  .cta-url:before {
    content: "";
    position: absolute;
    top: -22px;
    left: -28px;
    width: 138px;
    height: 139px;
    background: url(/_next/static/media/bg-cta-url-mobile01.786d686f.png) center center;
    background-size: 138px auto;
    background-repeat: no-repeat;
  }
  .cta-url::after {
    content: "";
    position: absolute;
    top: 169px;
    right: -96px;
    width: 336px;
    height: 333.5px;
    background: url(/_next/static/media/bg-cta-url-mobile02.b35ba578.png) center center;
    background-size: 336px auto;
    background-repeat: no-repeat;
  }
  .cta-url form {
    width: 100%;
  }
  .cta-url .title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
  }
  .cta-url .subtitle {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
  }
  .cta-url .desc {
    margin-top: 36px;
    font-weight: 400;
    text-align: center;
    line-height: 1.4;
  }
  .cta-url .url-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
  }
  .cta-url .url-form .form-control {
    width: 100%;
    max-width: 320px;
    border-radius: 11px;
  }
  .cta-url .url-form .btn-submit {
    width: 100%;
    max-width: 320px;
    border-radius: 11px;
  }
  .cta-url .cta-content {
    height: 100%;
  }
  .cta-url .cta-area {
    margin-top: 10px;
  }
  .cta-url .cta-check-toggle {
    margin-left: 15px;
  }
}

.popular-resources {
  overflow: hidden;
}
.popular-resources .data-list li {
  display: flex;
  align-items: center;
  gap: 20px;
}
.popular-resources .data-list .inner {
  flex: 1 1 auto;
  display: flex;
  padding: 12px;
  align-items: center;
  gap: 12px;
}
.popular-resources .data-list .inner:is(a):hover {
  border-radius: 16px;
  background: var(--gray100, #f3f4f6);
}
.popular-resources .data-list .num {
  flex: 0 0 auto;
  color: var(--gray-text-secondary, #4b5563);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  margin-right: 8px;
}
.popular-resources .data-list .icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
}
.popular-resources .data-list .info {
  max-width: 400px;
}
.popular-resources .data-list .subject {
  display: block;
  color: var(--gray-text-primary, #1f2937);
  font-size: 16px;
  font-weight: 500;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4em;
  line-height: 1.4em;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.popular-resources .data-list .content {
  display: block;
  margin-top: 4px;
  color: var(--gray-text-secondary, #4b5563);
  font-size: 14px;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4em;
  line-height: 1.4em;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.popular-resources .data-list .more {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  color: var(--gray-text-secondary, #4b5563);
}

.article-item {
  flex: 0 0 auto;
  width: calc(50% - 10px);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 16px;
  padding: 32px;
  background: var(--gray100, #f3f4f6);
}
.article-item .emojj {
  line-height: 1;
}
.article-item.tool-img2html {
  background: #f0f6ff;
}
.article-item.tool-img2html .emoji {
  background: #bfdbfe;
}
.article-item.tool-contrast {
  background: #f8f0ff;
}
.article-item.tool-contrast .emoji {
  background: #e4cbf9;
}
.article-item.tool-seo {
  background: #fff5ee;
}
.article-item.tool-seo .emoji {
  background: #fdc9a7;
}
.article-item.tool-table {
  background: #e8faf5;
}
.article-item.tool-table .emoji {
  background: #c6e8df;
}
.article-item dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.article-item .emoji {
  display: flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  background: var(--gray200, #e5e7eb);
}
.article-item .name {
  font-weight: 700;
  color: var(--gray-text-primary, #1f2937);
}
.article-item .date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gray500, #6b7280);
}
.article-item .date::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gray300, #d1d5db);
}
.article-item .content {
  font-weight: 500;
  flex: 1 1 auto;
}
.article-item.small .content {
  font-size: 14px;
}
.article-item.large .content {
  font-size: 18px;
}
.article-item .info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: var(--gray500, #6b7280);
}
.article-item .info button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-text-decoration-color: #9ca3af;
          text-decoration-color: #9ca3af;
}
.article-item .info .tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.article-item .info .tool-name {
  display: flex;
  align-items: center;
  gap: 4px;
}
.article-item .info .tool-name::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gray300, #d1d5db);
  margin-right: 4px;
}
.article-item .info .tool-name .ico {
  width: 16px;
  height: 16px;
}
@media (max-width: 1599.98px) {
  .mode-logged .article-item {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .mode-public .article-item {
    width: 100%;
  }
}

.ͼ1 .cm-scroller {
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 14px;
}

.codemirror-merge-container {
  max-height: 100vh;
  overflow-y: auto;
}
.codemirror-merge-container ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
.codemirror-merge-container ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background-clip: padding-box;
  border: 6px solid transparent;
}
.codemirror-merge-container ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
.codemirror-merge-container ::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.codemirror-merge-container ::-webkit-scrollbar-track {
  background-color: transparent;
}
.codemirror-merge-container ::-webkit-scrollbar-corner {
  background-color: transparent;
}
@supports (-moz-appearance: none) {
  .codemirror-merge-container * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .codemirror-merge-container:hover {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .codemirror-merge-container:active {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
}

.image-viewer {
  position: relative;
}
.image-viewer .tools {
  position: absolute;
  right: 19px;
  top: 19px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.image-viewer .tools .btn-xs {
  width: 24px;
  height: 24px;
  padding: 0;
}
.image-viewer .react-transform-wrapper {
  margin: 0 auto;
  padding: 82px 0;
  overflow: visible;
  cursor: -webkit-grab;
  cursor: grab;
  vertical-align: top;
}
.image-viewer .react-transform-wrapper:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.image-viewer .react-transform-wrapper .item-container {
  position: relative;
}
.image-viewer .react-transform-wrapper img {
  max-width: none;
}
.image-viewer .react-transform-wrapper .pin-list {
  position: absolute;
  top: 0;
  left: 0;
}
.image-viewer .react-transform-wrapper .pin-item {
  position: absolute;
  opacity: 0.6;
}
.image-viewer .react-transform-wrapper .pin-item:active, .image-viewer .react-transform-wrapper .pin-item:hover, .image-viewer .react-transform-wrapper .pin-item.active {
  opacity: 1;
}
.image-viewer .react-transform-wrapper .pin-item .pin-keep {
  position: absolute;
}
.image-viewer .react-transform-wrapper .pin-item .pin {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 49px;
  transform: translateY(-99%);
  border-radius: 4px 4px 0 0;
  background: #1f2937;
}
.image-viewer .react-transform-wrapper .pin-item .pin span {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 19px;
  padding: 4px 4px 2px 4px;
  font-size: 10px;
  white-space: nowrap;
  color: #fff;
  line-height: 13px;
}
.image-viewer .react-transform-wrapper .pin-item .bbox {
  vertical-align: top;
  border: 2px solid #1f2937;
  border-radius: 0px 4px 4px 4px;
  margin-top: -1px;
}
.image-viewer .react-transform-wrapper .pin-item.active {
  z-index: 50;
}
.image-viewer .react-transform-wrapper .pin-item.active .pin {
  background: #dc2626;
}
.image-viewer .react-transform-wrapper .pin-item.active .bbox {
  border: 2px solid #dc2626;
}
@media (max-width: 1024.98px) {
  .image-viewer .react-transform-wrapper {
    padding: 40px 0;
  }
}

.tally-iframe {
  position: relative;
}
.tally-iframe:after {
  content: "";
  right: 0;
  bottom: 0;
  position: absolute;
  width: 100px;
  height: 65px;
  background: #fff;
}
@media (min-width: 768px) {
  .modal-md .tally-iframe:after {
    width: 240px;
  }
}
@media (min-width: 768px) {
  .tally-iframe.thank-you-page:after {
    width: 224px;
  }
}

.send-feedback-popup .popup-inner {
  min-height: auto;
}
.send-feedback-popup .loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 376px;
  overflow: hidden;
}
.send-feedback-popup iframe {
  height: 0;
}
.send-feedback-popup iframe:not(.loaded) {
  position: absolute;
}

.send-survey-popup .popup-inner {
  min-height: auto;
}
.send-survey-popup .popup-body {
  padding: 16px;
}
.send-survey-popup .dimed {
  background: rgba(0, 0, 0, 0.5);
}
.send-survey-popup .loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 376px;
  overflow: hidden;
}
.send-survey-popup.modal-sm .tally-iframe::after {
  width: 60px;
}
@media (max-width: 767.98px) {
  .send-survey-popup.modal-sm .popup-inner {
    width: 100%;
    height: 100%;
    max-height: none !important;
    margin: 0;
    border-radius: 0;
  }
}
.send-survey-popup iframe {
  height: 0;
}
.send-survey-popup iframe:not(.loaded) {
  position: absolute;
}

.editor-wrap .btn-h1,
.editor-wrap .btn-h2,
.editor-wrap .btn-h3 {
  display: flex;
  align-items: center;
  height: 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: left;
  color: #1f2937;
  word-break: keep-all;
}
.editor-wrap .btn-h2 {
  font-weight: 500;
}
.editor-wrap .btn-h3 {
  font-weight: 400;
}
.editor-wrap .left-menu {
  position: absolute;
  z-index: 1000;
  top: -48px;
  left: 0;
  display: flex;
  flex-direction: row;
  width: max-content;
  height: 44px;
  padding: 7px 8px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.2);
  text-align: left;
  white-space: nowrap;
}
.editor-wrap .left-menu > button {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 6px;
  border-radius: 5px;
  line-height: 1;
}
.editor-wrap .left-menu > button.is-active, .editor-wrap .left-menu > button.on {
  background: #e5e7eb;
}
.editor-wrap .left-menu .tool-line {
  position: relative;
  height: 28px;
  padding: 0 4px;
}
.editor-wrap .left-menu .tool-line::after {
  position: absolute;
  top: calc(50% - 8px);
  left: 4px;
  display: block;
  width: 1px;
  height: 16px;
  background-color: #d1d5db;
  content: "";
}
.editor-wrap .left-menu.table-menu {
  top: 0px;
  left: 20px;
  flex-direction: column;
  width: 133px;
  height: auto;
}
.editor-wrap .left-menu.table-menu > button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.editor-wrap .left-menu.table-menu > button:hover {
  background: #e5e7eb;
}
.editor-wrap .left-menu.table-menu .tool-line {
  height: 1px;
  padding: 4px 0;
}
.editor-wrap .left-menu.table-menu .tool-line::after {
  top: calc(50% - 0.5px);
  left: 0;
  width: 100%;
  height: 1px;
}

.no-scroll .editor-wrap .edit-area {
  padding-right: 16px;
  overflow-y: hidden;
}

/* Basic editor styles */
.tiptap {
  padding: 36px 8px 24px 20px;
  margin-left: 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.312rem;
  letter-spacing: -0.015em;
  text-align: left;
  color: #4b5563;
}
.tiptap:focus {
  outline: none;
}
@media (max-width: 767.98px) {
  .tiptap {
    padding: 25px 8px 24px 20px;
    margin-left: 12px;
  }
}
.tiptap h1,
.tiptap h2,
.tiptap h3,
.tiptap h4,
.tiptap h5,
.tiptap h6 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: #1f2937;
  font-weight: 700;
  line-height: 1.3em;
}
.tiptap h1 {
  font-size: 28px;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.tiptap h2 {
  font-size: 24px;
}
.tiptap h3 {
  font-size: 18px;
}
.tiptap p,
.tiptap ul,
.tiptap ol,
.tiptap table {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: #1f2937;
  font-size: 16px;
  line-height: 1.4em;
}
.tiptap ul li,
.tiptap ol li {
  color: #1f2937;
  font-size: 16px;
  font-weight: 400;
}
.tiptap ul li p,
.tiptap ul li ul,
.tiptap ul li ol,
.tiptap ol li p,
.tiptap ol li ul,
.tiptap ol li ol {
  margin-top: 0;
  margin-bottom: 0;
}
.tiptap ul li p + p,
.tiptap ul li p + ul,
.tiptap ul li p + ol,
.tiptap ul li ul + p,
.tiptap ul li ul + ul,
.tiptap ul li ul + ol,
.tiptap ul li ol + p,
.tiptap ul li ol + ul,
.tiptap ul li ol + ol,
.tiptap ol li p + p,
.tiptap ol li p + ul,
.tiptap ol li p + ol,
.tiptap ol li ul + p,
.tiptap ol li ul + ul,
.tiptap ol li ul + ol,
.tiptap ol li ol + p,
.tiptap ol li ol + ul,
.tiptap ol li ol + ol {
  margin-top: 0.2em;
}
.tiptap ul {
  margin-left: 12px;
  padding-left: 8px;
}
.tiptap ul li {
  list-style-type: disc;
}
.tiptap ol {
  margin-left: 20px;
}
.tiptap ol li {
  list-style-type: decimal;
}
.tiptap ol li p {
  padding-left: 8px;
}
.tiptap strong {
  font-weight: 700;
}
.tiptap code {
  background-color: rgba(97, 97, 97, 0.1);
  color: #616161;
}
.tiptap pre {
  background: #0d0d0d;
  color: #fff;
  font-family: "JetBrainsMono", monospace;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}
.tiptap pre code {
  color: inherit;
  padding: 0;
  background: none;
  font-size: 0.8rem;
}
.tiptap img {
  max-width: 100%;
  height: auto;
}
.tiptap blockquote {
  padding-left: 1rem;
  border-left: 2px solid rgba(13, 13, 13, 0.1);
}
.tiptap hr {
  border: none;
  border-top: 2px solid rgba(13, 13, 13, 0.1);
  margin: 2rem 0;
}

.tiptap ::selection {
  background: rgba(96, 165, 250, 0.2);
}
.tiptap table {
  border-collapse: collapse;
  margin: 0;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
  color: #1f2937;
}
.tiptap table td,
.tiptap table th {
  border: 1px solid #d1d5db;
  box-sizing: border-box;
  min-width: 1em;
  padding: 7.5px;
  position: relative;
  vertical-align: top;
}
.tiptap table td > *,
.tiptap table th > * {
  margin-bottom: 0;
}
.tiptap table th {
  background-color: #e5e7eb;
  font-weight: 500;
  text-align: left;
}
.tiptap table .selectedCell:after {
  background: rgba(96, 165, 250, 0.2);
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  border: 1px solid #60a5fa;
  content: "";
  z-index: 2;
  pointer-events: none;
}
.tiptap table .column-resize-handle {
  background-color: #adf;
  bottom: -2px;
  position: absolute;
  right: -2px;
  pointer-events: none;
  top: 0;
  width: 4px;
}
.tiptap table p {
  margin: 0;
}
.tiptap a {
  color: #1364ff;
}
.tiptap code {
  background-color: rgba(97, 97, 97, 0.1);
  border-radius: 0.25em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  color: #616161;
  font-size: 0.9rem;
  padding: 0.25em;
}

.editor-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  background-color: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  z-index: 100;
}
.editor-toolbar > button {
  display: inline-flex;
  align-items: center;
  justify-items: center;
  height: 28px;
  padding: 6px;
}
.editor-toolbar > button.is-active, .editor-toolbar > button.on {
  border-radius: 5px;
  background: #e5e7eb;
}
.editor-toolbar .tool-line {
  position: relative;
  height: 28px;
  padding: 0 4px;
}
.editor-toolbar .tool-line::after {
  position: absolute;
  top: calc(50% - 8px);
  left: 4px;
  display: block;
  width: 1px;
  height: 16px;
  background-color: #d1d5db;
  content: "";
}

.bubble-menu {
  display: flex;
  padding: 7px 8px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.2);
  z-index: 500;
}
.bubble-menu > button {
  display: flex;
  align-items: center;
  justify-items: center;
  height: 28px;
  padding: 6px;
}
.bubble-menu > button.is-active, .bubble-menu > button.on {
  border-radius: 5px;
  background: #e5e7eb;
}
.bubble-menu .tool-line {
  position: relative;
  height: 28px;
  padding: 0 4px;
}
.bubble-menu .tool-line::after {
  position: absolute;
  top: calc(50% - 8px);
  left: 4px;
  display: block;
  width: 1px;
  height: 16px;
  background-color: #d1d5db;
  content: "";
}

.table-cell-menu {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 6px;
  height: auto;
}
.table-cell-menu button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px;
  border-radius: 5px;
}
.table-cell-menu button:hover {
  background: #e5e7eb;
}
.table-cell-menu > .toggle-menu {
  position: relative;
}

.table-sub-menu {
  position: absolute;
  top: 40px;
  left: 50%;
  display: none;
  min-width: 120px;
  padding: 7px 8px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.table-sub-menu.active {
  display: flex;
  flex-direction: column;
}
.table-sub-menu > button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px;
  border-radius: 5px;
}
.table-sub-menu > button:hover {
  background: #e5e7eb;
}

.tippy-box {
  max-width: initial !important;
}

.link-detail-panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 5px;
  padding: 12px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.2);
  z-index: 100;
}
.link-detail-panel .input-group {
  gap: 8px;
}
.link-detail-panel .form-control-sm {
  width: 200px;
}
.link-detail-panel .btn-sm {
  width: 56px;
}
.link-detail-panel .btn-xs {
  width: 42px;
  padding: 0px 6px;
  font-size: 14px;
  border-radius: 7px;
}
.link-detail-panel .detail-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}

.node-view-wrapper,
.draggable-item {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  gap: 0.5rem;
  white-space: normal;
}
.node-view-wrapper .node-wrap,
.draggable-item .node-wrap {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 64rem;
}
.node-view-wrapper .node-view-content,
.draggable-item .node-view-content {
  padding: 4px 0;
}
.node-view-wrapper .cursor-grab,
.draggable-item .cursor-grab {
  max-height: 29px;
  margin-top: 4px;
}
.node-view-wrapper .node-view-content,
.draggable-item .node-view-content {
  width: calc(100% - 22px);
  margin-left: 20px;
}

.drag-handle {
  position: fixed;
  width: 12px;
  height: 21px;
  background: url(/_next/static/media/ico-handle.df1bc124.svg);
  background-size: 12px auto;
  background-position: center;
  border-radius: 2px;
  opacity: 1;
  transition: opacity 0.2s ease-in;
  z-index: 100;
  cursor: -webkit-grab;
  cursor: grab;
}

.ProseMirror-selectednode {
  position: relative;
  background-color: #eff6ff;
  border-radius: 4px;
}

#root {
  height: 100%;
}

.btn-totop {
  position: fixed;
  z-index: 10;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gray300, #d1d5db);
  background: var(--white, #fff);
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}
.btn-totop.hide {
  opacity: 0;
  visibility: hidden;
}
.btn-totop.show {
  opacity: 1;
  visibility: visible;
}

#skip li {
  list-style: none;
}
#skip a {
  display: block;
  position: absolute;
  top: 0;
  margin-bottom: -1px;
  width: 100%;
  height: 1px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  overflow: hidden;
  z-index: 600;
}
#skip a:focus, #skip a:active {
  height: 45px;
  line-height: 45px;
  color: #fff;
  background: #666;
}

#top-banner {
  flex: 0 0 auto !important;
  flex-direction: row !important;
  text-align: center;
  display: flex;
  justify-content: center;
  width: 100%;
  background: var(--black, #000);
}
#top-banner .inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
}
#top-banner .link {
  display: flex;
  align-items: center;
  gap: 8px;
}
#top-banner .link .message {
  color: var(--secondary500, #bafd02);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}
#top-banner .link .btn {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--white, #fff);
  text-align: center;
  font-size: 14px;
}
#top-banner .btn-banner-close {
  position: absolute;
  height: 24px;
  right: 60px;
}
#top-banner .btn-banner-close .text {
  font-size: 14px;
  font-weight: normal;
  color: var(--white, #fff);
}
.btn-expand-banner {
  position: fixed;
  top: 0;
  right: 60px;
  border-radius: 0 0 12px 12px;
  padding: 2px 8px 4px;
  font-size: 11px;
  color: #fff;
  background: #000;
  opacity: 0.6;
  z-index: 20;
}

@media (max-width: 767.98px) {
  #top-banner {
    display: block;
  }
  #top-banner .inner {
    justify-content: space-between;
  }
  #top-banner .link {
    gap: 2px;
    flex-direction: column;
    align-items: start;
    height: auto;
  }
  #top-banner .btn-banner-close {
    position: static;
  }
}

.header-full {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  z-index: 200;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  border-bottom: 1px solid #f3f4f6;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-full .header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  height: 60px;
}
.header-full .header-container .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
}
#logo {
  flex: 0 0 auto;
  line-height: 1;
  height: 20px;
}
#logo a {
  display: block;
  height: 100%;
}
#logo img {
  width: auto;
  height: 100%;
  vertical-align: top;
}

.header-full .btn-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-full .btn-wrap .btn {
  padding: 0 12px;
  font-size: 14px;
  border-radius: 9px;
}
.header-full .btn-wrap .btn-outline-primary {
  padding-right: 10px;
}
.header-full .btn-wrap .btn-outline-gray {
  border-color: #d1d5db;
}
@media (min-width: 940px) {
  .header-full + #content,
  .header-full + #container {
    padding-top: 60px !important;
  }
}
@media (max-width: 939px) {
  .header-full + #content,
  .header-full + #container {
    padding-top: 56px !important;
  }
  .header-full .header-container {
    padding: 0 6px 0 20px;
    height: 56px;
  }
  .header-full #logo {
    height: 20px;
  }
  .header-full .btn-wrap {
    gap: 4px;
  }
  .header-full .btn-wrap .btn {
    height: 36px;
    padding: 0 12px;
  }
}
.header-full.header-hidden {
  transform: translateY(-100%);
}
.header-full.header-visible {
  transform: translateY(0);
}

.allmenu-opened .header-full {
  transition: none !important;
}
.allmenu-opened .header-full.header-hidden {
  transform: none !important;
}
.allmenu-opened .header-full.header-visible {
  transform: none !important;
}

html:has(.layout-landing) {
  scroll-padding-top: 60px;
  scroll-behavior: auto;
}
@media (max-width: 939px) {
  html:has(.layout-landing) {
    scroll-padding-top: 56px;
    scroll-behavior: auto;
  }
}

.hash-scrolling #content,
.hash-scrolling #container,
.hash-scrolling main {
  visibility: hidden;
}

.hash-scroll-ready #content,
.hash-scroll-ready #container,
.hash-scroll-ready main {
  visibility: visible;
}

#gnb {
  flex: 1 1 auto;
}
#gnb .label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
  color: var(--gray-text-secondary, #4b5563);
  background: var(--gray200, #e5e7eb);
}
#gnb .label.free {
  color: #000;
  background: var(--secondary500, #bafd02);
}
#gnb .label.comingsoon {
  color: #000;
  text-decoration: none;
  width: 4px;
  height: 4px;
  padding: 0;
  margin-top: -10px;
  margin-left: 4px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--secondary500, #dc2626);
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  vertical-align: middle;
  overflow: hidden;
  text-indent: -9999px;
  overflow: hidden;
  text-align: left;
}
#gnb .submenu-list {
  width: 100%;
}
#gnb .submenu-list li.active > a {
  font-weight: bold;
  text-underline-offset: 3px;
}
#gnb .nav-accent span {
  padding: 0 2px;
  background: var(--secondary500, #bafd02);
  font-weight: 700;
}
#gnb .link-new-window .nav-tit {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
#gnb .link-new-window .nav-tit::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url(/_next/static/media/ico-link-lightgray@2x.a11f7cfa.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px auto;
}
@media (min-width: 940px) {
  #gnb {
    position: relative;
    z-index: 100;
  }
  #gnb .gnb-nav-list {
    display: flex;
    gap: 2px;
  }
  #gnb .gnb-nav-list .d-down-semi-md {
    display: none !important;
  }
  #gnb .gnb-nav-list > li {
    position: relative;
    display: flex;
    justify-content: center;
  }
  #gnb .gnb-nav-list > li.active {
    font-weight: 700;
  }
  #gnb .gnb-nav-list > li:hover > a,
  #gnb .gnb-nav-list > li:hover > .menu, #gnb .gnb-nav-list > li:focus-within > a,
  #gnb .gnb-nav-list > li:focus-within > .menu {
    font-weight: 700;
  }
  #gnb .gnb-nav-list > li:hover .lnb-area, #gnb .gnb-nav-list > li:focus-within .lnb-area {
    display: flex;
  }
  #gnb .gnb-nav-list > li > a,
  #gnb .gnb-nav-list > li > .menu {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0px 12px;
    color: var(--black, #000);
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
  }
  #gnb .gnb-nav-list > li:has(.lnb-area) > a,
  #gnb .gnb-nav-list > li:has(.lnb-area) > .menu {
    padding-right: 30px;
    background-image: url(/_next/static/media/ico-arrow-down-lightgray@2x.ffb91c72.png);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px auto;
  }
  #gnb .gnb-nav-list > li:has(.lnb-area):hover > a,
  #gnb .gnb-nav-list > li:has(.lnb-area):hover > .menu, #gnb .gnb-nav-list > li:has(.lnb-area):focus-visible > a,
  #gnb .gnb-nav-list > li:has(.lnb-area):focus-visible > .menu {
    background-image: url(/_next/static/media/ico-arrow-up-lightgray@2x.083eb2d3.png);
  }
  #gnb .gnb-nav-list .nav-service .lnb-area {
    left: -60px;
    padding-top: 22px;
  }
  #gnb .gnb-nav-list .lnb-area {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    display: none;
    min-width: 280px;
    position: absolute;
    top: 44px;
    left: -30px;
    padding: 12px 16px 12px;
    border-radius: 20px;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
    background: var(--white, #fff);
    white-space: nowrap;
    font-size: 14px;
  }
  #gnb .gnb-nav-list .lnb-area dl {
    display: flex;
    flex-direction: column;
    width: 244px;
    height: 100%;
  }
  #gnb .gnb-nav-list .lnb-area dt {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    min-height: 18px;
    margin-bottom: 4px;
  }
  #gnb .gnb-nav-list .lnb-area dt .text {
    padding: 0 16px;
    font-weight: 500;
    color: #4b5563;
  }
  #gnb .gnb-nav-list .lnb-area dt .submenu-depth01 {
    padding: 6px 16px;
  }
  #gnb .gnb-nav-list .lnb-area a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 16px 16px 16px 16px;
    border-radius: 12px;
    color: var(--gray-text-primary, #1f2937);
    font-weight: 500;
  }
  #gnb .gnb-nav-list .lnb-area a:hover, #gnb .gnb-nav-list .lnb-area a:focus {
    background: var(--gray100, #f3f4f6);
  }
  #gnb .gnb-nav-list .lnb-area .ico {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2.5px;
  }
  #gnb .gnb-nav-list .lnb-area .text-area {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: calc(100% - 24px);
    white-space: normal;
  }
  #gnb .gnb-nav-list .lnb-area .text-area .nav-tit {
    font-size: 16px;
    font-weight: 700;
    color: #1a212b;
  }
  #gnb .gnb-nav-list .lnb-area .text-area .nav-desc {
    font-weight: 400;
    font-size: 12px;
    color: #4b5563;
    word-break: keep-all;
  }
  #gnb .gnb-nav-list .gap-plugin {
    margin-left: 6px;
  }
  #gnb .toggle-submenu-wrap {
    display: none;
  }
}
@media (max-width: 939px) {
  #gnb {
    display: none;
  }
}

#btn-allmenu {
  width: 48px;
  height: 48px;
}
@media (min-width: 940px) {
  #btn-allmenu {
    display: none !important;
  }
}

.allmenu-opened {
  overflow: hidden;
}
@media (max-width: 939px) {
  .allmenu-opened #gnb {
    border-top: 1px solid #f3f4f6;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow-y: auto;
  }
  .allmenu-opened #gnb .gnb-nav-list > li {
    position: relative;
  }
  .allmenu-opened #gnb .gnb-nav-list > li:first-child {
    padding-top: 12px;
  }
  .allmenu-opened #gnb .gnb-nav-list > li:last-child {
    padding-bottom: 20px;
  }
  .allmenu-opened #gnb .gnb-nav-list > li > a,
  .allmenu-opened #gnb .gnb-nav-list > li > .menu {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 32px;
    width: 100%;
    height: 56px;
    color: var(--black, #000);
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
  }
  .allmenu-opened #gnb .gnb-nav-list .lnb-area {
    padding: 12px 8px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    background: #f9fafb;
  }
  .allmenu-opened #gnb .gnb-nav-list .lnb-area dl + dl {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
  }
  .allmenu-opened #gnb .gnb-nav-list .lnb-area dt {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    color: var(--gray500, #6b7280);
  }
  .allmenu-opened #gnb .gnb-nav-list .lnb-area a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    color: var(--gray-text-primary, #1f2937);
  }
  .allmenu-opened #gnb .gnb-nav-list .lnb-area a .ico {
    flex: 0 0 auto;
  }
  .allmenu-opened #gnb .gnb-nav-list .lnb-area .submenu-depth01 {
    display: flex;
    width: 100%;
    padding: 7px 12px;
  }
  .allmenu-opened #gnb .gnb-nav-list .lnb-area .text-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: calc(100% - 28px);
  }
  .allmenu-opened #gnb .gnb-nav-list .lnb-area .nav-tit {
    line-height: 1.2;
  }
  .allmenu-opened #gnb .gnb-nav-list .lnb-area .nav-desc {
    font-weight: 400;
    color: #4b5563;
    white-space: normal;
    word-break: keep-all;
  }
  .allmenu-opened #gnb .gnb-nav-list .lnb-area .nav-desc br {
    display: none;
  }
  .allmenu-opened #gnb .gnb-nav-list .has-submenu .lnb-area {
    display: none;
  }
  .allmenu-opened #gnb .gnb-nav-list .has-submenu .menu {
    padding-right: 58px;
  }
  .allmenu-opened #gnb .gnb-nav-list .has-submenu.submenu-open {
    background: #f9fafb;
  }
  .allmenu-opened #gnb .gnb-nav-list .has-submenu.submenu-open .lnb-area {
    display: flex;
    flex-direction: column;
    padding: 0 20px 20px;
  }
  .allmenu-opened #gnb .gnb-nav-list .has-submenu.submenu-open .toggle-submenu-wrap .ico {
    transform: rotate(180deg);
  }
  .allmenu-opened #gnb .gnb-nav-list .has-submenu.submenu-open .submenu-group > dt {
    padding: 7px 12px;
  }
  .allmenu-opened #gnb .gnb-nav-list .has-submenu.submenu-open .submenu-group > dt:has(.submenu-depth01) {
    padding: 0;
  }
  .allmenu-opened #gnb .gnb-nav-list .has-submenu.submenu-open .submenu-group .active > a {
    font-weight: 700;
  }
  .allmenu-opened #gnb .gnb-nav-list .toggle-submenu-wrap {
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
  }
  .allmenu-opened #top-banner ~ .header-container #gnb {
    top: 128px;
  }
  .allmenu-opened #sidebar {
    display: flex;
    top: 56px;
  }
}

.header-sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.header-sticky + #content {
  margin-top: 60px;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* 사이드 바 */
#sidebar {
  flex: 0 0 260px;
  height: 100vh;
  top: 0;
  background-color: #fff;
  border-right: 1px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  z-index: 200;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
#sidebar .sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#sidebar.expert-mode {
  background-color: #eff6ff;
}
#sidebar .sidebar-header {
  flex: 0 0 auto;
}
#sidebar .sidebar-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: auto;
}
#sidebar #gnb-area {
  flex: 1 1 auto;
}
#sidebar .nodata {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 100%;
}
#sidebar .nodata strong {
  display: block;
  margin-bottom: 4px;
  line-height: 18.2px;
  font-weight: 500;
}
#sidebar .nodata span {
  font-size: 12px;
  line-height: 15.6px;
  color: #6b7280;
}
@media (max-width: 1024.98px) {
  #sidebar {
    display: none;
    height: unset;
    border: unset;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

.sidebar-header {
  display: flex;
  height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 23px 20px;
}
.sidebar-header .sidebar-title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 30px;
}
.sidebar-header .sidebar-title a {
  display: block;
  font-size: 10px;
}
.sidebar-header .sidebar-title img {
  vertical-align: top;
  height: 100%;
}
.sidebar-header .sidebar-title .sidebar-logo {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}
.sidebar-header .sidebar-title .mode-text {
  position: absolute;
  left: 35px;
  bottom: 0;
  font-weight: 400;
  font-size: 10px;
  color: #1f2937;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4em;
  line-height: 1.4em;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  max-width: calc(100% - 35px);
}
.sidebar-header .sidebar-title.works-mode .sidebar-logo:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 92px;
  width: 8px;
  height: 8px;
  background-image: url(/_next/static/media/ico-arrow-down-sm@2x.0c48a880.png);
  background-size: 8px auto;
}
.sidebar-header .sidebar-title.works-mode.on .sidebar-logo:after {
  transform: rotate(180deg);
}
.sidebar-header .btn-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 22px;
  padding: 0 6px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-weight: 400;
  font-size: 10px;
  color: #1f2937;
}
.sidebar-header .btn-mode:hover {
  background-color: #f3f4f6;
}
@media (max-width: 1024.98px) {
  .sidebar-header {
    display: none;
  }
}

.sidebar-body {
  display: flex;
  flex-direction: column;
}
@media (max-width: 1024.98px) {
  .sidebar-body {
    padding-top: 20px;
  }
}
.sidebar-body .site-search {
  flex: 0 0 auto;
  padding: 9px 20px;
}
.sidebar-body .nav-item {
  flex: 0 0 auto;
  margin-top: 16px;
  padding-inline: 20px;
}
.sidebar-body .nav-item + .nav-item {
  margin-top: 20px;
}
.sidebar-body .nav-item.item-sm {
  margin-block: 12px 4px;
}
.sidebar-body .nav-item.item-sm + .nav-item {
  margin-top: 24px;
}
.sidebar-body .nav-tit-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  margin-bottom: 4px;
}
.sidebar-body .nav-tit {
  display: block;
  padding-inline: 9px;
  font-weight: 500;
  font-size: 12px;
  color: #6b7280;
}
.sidebar-body .btn-search-xs {
  width: 24px;
  height: 24px;
  padding-inline: 6px;
  border-radius: 7px;
}
.sidebar-body .btn-search-xs:hover, .sidebar-body .btn-search-xs:focus-visible {
  background-color: #e5e7eb;
}
.sidebar-body .btn-search {
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 7px 15px;
  border-radius: 20px;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  color: #6b7280;
  vertical-align: middle;
  line-height: 24px;
}
.sidebar-body .btn-search + .nav-area-top {
  margin-top: 16px;
}
.sidebar-body .btn-alt-write {
  width: 100%;
  font-size: 14px;
}
.sidebar-body .btn-alt-write + .alt-text-popup {
  display: none;
  top: 74px;
  left: calc(100% - 20px);
  margin-left: -20px;
  padding-left: 20px;
}
.sidebar-body .alttext-hover-area:hover .alt-text-popup {
  display: block !important;
}
.sidebar-body .label {
  display: inline-flex;
  height: 18px;
  padding: 0 6px 0 4px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 500;
}
.sidebar-body .label.new {
  padding: 0;
  position: relative;
}
.sidebar-body .label:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #ef4444;
}
.sidebar-body .nav-area-top .ico-link-md {
  margin-bottom: 2.5px;
}
.sidebar-body .nav-area-top .list-sidebar::after {
  content: none;
}
.sidebar-body .nav-area-mid .count {
  min-width: 25px;
  text-align: right;
  font-size: 12px;
  color: #6b7280;
}
.sidebar-body .nav-area-mid .count + .ico {
  margin-left: 4px;
}
.sidebar-body .nav-area-mid .list-sidebar li.on .ico-arrow-down-sm {
  background: url(/_next/static/media/ico-arrow-up-sm@2x.5fef0197.png);
  background-size: 8px auto;
}
.sidebar-body .list-sidebar {
  position: relative;
  width: 100%;
}
.sidebar-body .list-sidebar > li {
  padding-left: 0;
}
.sidebar-body .list-sidebar > li + li {
  margin-top: 0;
}
.sidebar-body .list-sidebar > li::before {
  content: none;
}
.sidebar-body .list-sidebar > li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
}
.sidebar-body .list-sidebar > li a:has(.label.new) {
  justify-content: start;
}
.sidebar-body .list-sidebar > li a:hover {
  color: #1f2937;
}
.sidebar-body .list-sidebar > li a:hover .text {
  font-weight: 700;
}
.sidebar-body .list-sidebar > li.on > a {
  background: #f3f4f6;
  color: #1f2937;
}
.sidebar-body .list-sidebar > li.on > a .text {
  font-weight: 700;
}
.sidebar-body .list-sidebar > li.on .ico-dashboard-md {
  background-image: url(/_next/static/media/ico-dashboard-md-on@2x.a22486f5.png);
}
.sidebar-body .list-sidebar > li.on .ico-manager-md {
  background-image: url(/_next/static/media/ico-manager-md-on@2x.75689104.png);
}
.sidebar-body .list-sidebar > li.on .ico-alt-md {
  background-image: url(/_next/static/media/ico-alt-md-on@2x.fdbd4383.png);
}
.sidebar-body .list-sidebar > li.on .ico-folder-md {
  background-image: url(/_next/static/media/ico-folder-md-on@2x.5bd0ac64.png);
}
.sidebar-body .list-sidebar > li.on .ico-site-md {
  background-image: url(/_next/static/media/ico-site-md-on@2x.bcb3daa3.png);
}
.sidebar-body .list-sidebar > li.on .ico-notice-md {
  background-image: url(/_next/static/media/ico-notice-md-on@2x.75ce84c9.png);
}
.sidebar-body .list-sidebar > li.on .ico-community-md {
  background-image: url(/_next/static/media/ico-community-md-on@2x.74c75281.png);
}
.sidebar-body .list-sidebar > li.on .ico-resource-md {
  background-image: url(/_next/static/media/ico-resource-md-on@2x.1c63e140.png);
}
.sidebar-body .list-sidebar > li.on .ico-help-md {
  background-image: url(/_next/static/media/ico-help-md-on@2x.c84a41c0.png);
}
.sidebar-body .list-sidebar > li .text {
  font-weight: 500;
}
.sidebar-body .list-sidebar .tit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-body .list-sidebar .tit .ico {
  min-width: 16px;
}
.sidebar-body .nav-area-tools {
  flex: 0 0 auto;
}
.sidebar-body .nav-area-tools .list-sidebar li a {
  height: 32px;
  font-size: 14px;
  padding: 0 8px;
}
.sidebar-body .nav-area-tools .list-sidebar li .ico {
  width: 20px;
  height: 20px;
}
.sidebar-body .assigned-expert {
  margin-top: 4px;
  padding-bottom: 8px;
}
.sidebar-body .assigned-expert .btn-expert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  height: 52px;
  border-radius: 9px;
  justify-content: space-between;
  padding: 8px 8px 8px 10px;
  background-color: #f3f4f6;
  border-radius: 9px;
  font-size: 14px;
  color: #1f2937;
}
.sidebar-body .assigned-expert .btn-expert + .btn-expert {
  margin-top: 4px;
}
.sidebar-body .assigned-expert .btn-expert .profile-thumb {
  flex: 0 0 auto;
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  vertical-align: middle;
  overflow: hidden;
  background-image: url(/_next/static/media/ico-user-gray-md@2x.24b02def.png);
  background-size: 16px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.sidebar-body .assigned-expert .btn-expert .profile-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sidebar-body .assigned-expert .btn-expert .expert-profile {
  position: relative;
}
.sidebar-body .assigned-expert .btn-expert .expert-profile:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background-image: url(/_next/static/media/ico-badge-md@2x.428f6115.png);
  background-size: 14px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.sidebar-body .assigned-expert .btn-expert .expert-name {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
}
.sidebar-body .assigned-expert .btn-expert .expert-name .expert-tit {
  font-weight: 400;
  font-size: 10px;
  color: #4b5563;
}
.sidebar-body .assigned-expert .btn-expert .expert-inquiry {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  font-size: 12px;
  color: #4b5563;
}

.sidebar-footer {
  flex: 0 0 auto;
  margin: 0 20px;
}
.sidebar-footer .contact-area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 4px;
  padding: 0 0 16px;
  font-size: 14px;
}
.sidebar-footer .contact-area .line {
  width: 1px;
  height: 18px;
  flex: 0 0 auto;
  background: #d9d9d9;
}
.sidebar-footer .contact-area .btn {
  flex: 1 1 auto;
  gap: 4px;
  padding: 0;
}
.sidebar-footer .contact-area .btn-sm {
  width: 93.5px;
  height: 32px;
  font-weight: 500;
  font-size: 16px;
}
.sidebar-footer .contact-area .btn-md {
  flex: 1 1 100%;
}
.sidebar-footer .nav-area-foot {
  padding-block: 13px;
}
.sidebar-footer .nav-area-foot .list-sidebar {
  position: relative;
  width: 100%;
}
.sidebar-footer .nav-area-foot .list-sidebar > li {
  padding-left: 0;
}
.sidebar-footer .nav-area-foot .list-sidebar > li + li {
  margin-top: 0;
}
.sidebar-footer .nav-area-foot .list-sidebar > li::before {
  content: none;
}
.sidebar-footer .nav-area-foot .list-sidebar > li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
}
.sidebar-footer .nav-area-foot .list-sidebar > li a:hover {
  color: #1f2937;
}
.sidebar-footer .nav-area-foot .list-sidebar > li a:hover .text {
  font-weight: 700;
}
.sidebar-footer .nav-area-foot .list-sidebar > li.on > a {
  background: #f3f4f6;
}
.sidebar-footer .nav-area-foot .list-sidebar > li.on > a .text {
  font-weight: 700;
}
.sidebar-footer .nav-area-foot .list-sidebar > li.on > a .ico-notification-md {
  background-image: url(/_next/static/media/ico-notification-md-on@2x.e0ea3ce8.png);
}
.sidebar-footer .nav-area-foot .list-sidebar > li.on > a .ico-setting-md {
  background-image: url(/_next/static/media/ico-setting-md-on@2x.4c987942.png);
}
.sidebar-footer .nav-area-foot .list-sidebar > li .text {
  font-weight: 500;
}
.sidebar-footer .nav-area-foot .list-sidebar .tit {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.sidebar-footer .nav-area-foot .list-sidebar .tit .ico {
  min-width: 16px;
}
.sidebar-footer .user-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e5e7eb;
  padding: 16px 0;
}
.sidebar-footer .user-info .user-info-area {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.sidebar-footer .user-info .user-info-area .profile {
  display: flex;
  width: 100%;
}
.sidebar-footer .user-info .user-info-area .profile-thumb {
  flex: 0 0 auto;
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  vertical-align: middle;
  overflow: hidden;
  background-image: url(/_next/static/media/ico-user-gray-md@2x.24b02def.png);
  background-size: 16px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.sidebar-footer .user-info .user-info-area .profile-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sidebar-footer .user-info .user-info-area .profile-thumb + .profile-name {
  margin-left: 8px;
}
.sidebar-footer .user-info .user-info-area .badge-profile {
  position: absolute;
  bottom: -6px;
  left: -7px;
  min-width: 58px;
  height: 16px;
  padding: 2px 14px 2px 3px;
}
.sidebar-footer .user-info .user-info-area .badge-profile::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-image: url(/_next/static/media/ico-mode-white-xs@2x.b7ee7b12.png);
  background-size: 10px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.sidebar-footer .user-info .user-info-area .profile-name {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  width: calc(100% - 32px);
  text-align: left;
  font-size: 16px;
  font-weight: 700;
}
.sidebar-footer .user-info .user-info-area .profile-name .name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-height: 2.8rem;
  line-height: 1.4rem;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  margin-left: 8px;
}
.sidebar-footer .user-info .user-info-area .profile-name .name + .more-info {
  margin-left: 4px;
}
.sidebar-footer .user-info .user-info-area .profile-name .more-info .ico {
  margin-top: -2px;
}
.sidebar-footer .user-info .use-info-num {
  flex: 0 0 auto;
  margin-left: 8px;
}
.sidebar-footer .user-info .use-info-num a {
  display: flex;
  align-items: center;
}
.sidebar-footer .user-info .use-info-num .ico {
  flex: 0 0 auto;
}
.sidebar-footer .user-info .use-info-num .ico + .use-num {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.sidebar-footer .user-info .use-info-num .remain-text {
  flex: 0 0 auto;
  font-weight: 400;
  color: #4b5563;
}
.sidebar-footer .user-info .use-info-num .use-num {
  font-weight: 500;
}
.sidebar-footer .user-info .use-info-num .num {
  flex: 1 1 auto;
  margin-left: 4px;
  font-weight: 700;
}
.sidebar-footer .user-info .use-info-num .coin-info {
  gap: 4px;
}
.sidebar-footer .user-info .use-info-num .coin-info .num {
  margin-left: 0;
}

.alarm-popup {
  margin-left: 24px;
}

.setting-popup {
  margin-top: 8px;
  margin-left: -8px;
}
.setting-popup .popup-inner {
  width: 170px;
  border-radius: 12px;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2509803922);
}
.setting-popup .popup-body {
  padding: 8px;
  overflow-y: hidden;
}
.setting-popup .info-detail .btn-group {
  gap: 0;
  margin: 0;
}
.setting-popup .info-detail .btn {
  display: flex;
  white-space: nowrap;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  font-weight: 500;
  color: #1f2937;
  height: auto;
}
.setting-popup .info-detail .btn:hover {
  background-color: #f3f4f6;
}

.works-select-popup {
  height: 100%;
  max-height: 470px;
  margin-top: 5px;
  margin-left: -8px;
}
.works-select-popup .popup-inner {
  width: 348px;
  height: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1490196078);
  overflow: visible;
}
.works-select-popup .popup-body {
  height: 100%;
  padding: 0;
  overflow: visible;
}
.works-select-popup .works-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.works-select-popup .works-header {
  flex: 0 0 auto;
  padding: 16px;
  background-color: #f9fafb;
}
.works-select-popup .works-header .works-info {
  display: flex;
  align-items: center;
  gap: 6px;
}
.works-select-popup .works-header .works-info .works-details {
  flex: 1 1 auto;
  max-width: calc(100% - 76px);
  padding-block: 2.5px;
}
.works-select-popup .works-header .works-info .works-details .works-name-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  gap: 2px;
}
.works-select-popup .works-header .works-info .works-details .works-name {
  font-size: 16px;
  font-weight: 700;
  color: #0f1318;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4rem;
  line-height: 1.4rem;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.works-select-popup .works-header .works-info .works-details .works-plan-area {
  display: flex;
  align-items: center;
  height: 22px;
  margin: 0;
  font-weight: 400;
  font-size: 10px;
  color: #4b5563;
}
.works-select-popup .works-header .works-info .works-details .works-plan {
  color: #4b5563;
}
.works-select-popup .works-header .works-info .works-details .plan-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.works-select-popup .works-header .works-info .works-details .plan-item dt {
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}
.works-select-popup .works-header .works-info .works-details .plan-item dd {
  font-weight: 400;
  font-size: 12px;
  color: #4b5563;
}
.works-select-popup .works-header .works-info .works-details .plan-item + .plan-item {
  position: relative;
  margin-left: 7px;
  padding-left: 6px;
}
.works-select-popup .works-header .works-info .works-details .plan-item + .plan-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: #e5e7eb;
  border-radius: 0.5px;
}
.works-select-popup .works-header .works-info .tooltip-copy .btn-copy-text {
  max-width: 100px;
}
.works-select-popup .works-header .works-info .tooltip-copy .tooltip-content {
  display: none;
}
.works-select-popup .works-header .works-info .tooltip-copy .tooltip-content .tooltip-inner {
  width: -moz-fit-content;
  width: fit-content;
}
.works-select-popup .works-header .works-info .tooltip-copy:hover .tooltip-content {
  display: block;
  font-size: 14px;
}
.works-select-popup .works-header .works-info .btn-setting {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 5px;
}
.works-select-popup .works-header .works-info .btn-setting:hover {
  background-color: #e5e7eb;
}
.works-select-popup .btn-close {
  position: absolute;
  top: 8.5px;
  right: 8px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 20px;
  height: 20px;
  font-size: 10px;
  color: #1f2937;
  line-height: 1;
}
.works-select-popup .works-body {
  flex: 1 1 auto;
  background-color: #fff;
  max-height: calc(100% - 136px);
}
.works-select-popup .works-footer {
  flex: 0 0 auto;
}
.works-select-popup .works-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}
.works-select-popup .works-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works-select-popup .account-group + .account-group {
  margin-top: 20px;
}
.works-select-popup .account-group .account-label {
  padding: 16px 16px 4px;
  font-size: 10px;
  font-weight: 400;
  color: #6b7280;
}
.works-select-popup .account-group .works-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 296px;
}
.works-select-popup .works-item {
  position: relative;
  width: 100%;
  padding: 0;
  border-bottom: 1px solid #f3f4f6;
}
.works-select-popup .works-item:hover {
  background-color: #f9fafb;
}
.works-select-popup .works-item.selected::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url(/_next/static/media/ico-org-checked-primary@2x.cd0f561b.png);
  background-size: 16px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.works-select-popup .works-item .item-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-height: 56px;
  padding: 8px 40px 8px 16px;
}
.works-select-popup .works-item .item-inner .works-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
}
.works-select-popup .works-item .item-inner .works-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  min-width: 0;
}
.works-select-popup .works-item .item-inner .works-info .works-name {
  max-width: calc(100% - 46px);
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-height: 2.6;
  line-height: 1.3;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.works-select-popup .works-item .item-inner .selected-indicator {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #1364ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.works-select-popup .works-item .item-inner .selected-indicator .check-icon {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}
.works-select-popup .btn-new-workspace {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 56px;
  padding: 12px 16px;
  color: #1364ff;
  font-size: 14px;
  font-weight: 500;
}

.wrapper:has(.workspace-setting-popup) .works-select-popup .works-header .works-info .btn-setting {
  background: #000;
  background-color: #e5e7eb;
}

.workspace-setting-popup {
  margin-top: -4px;
}
.workspace-setting-popup .popup-inner {
  width: 190px;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2509803922);
  overflow: hidden;
}
.workspace-setting-popup .popup-body {
  padding: 0;
  overflow-y: hidden;
}
.workspace-setting-popup .setting-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.workspace-setting-popup .setting-list {
  display: flex;
  flex-direction: column;
}
.workspace-setting-popup .setting-list .setting-item {
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border-radius: 8px;
}
.workspace-setting-popup .setting-list .setting-item .setting-text {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}
.workspace-setting-popup .setting-list .setting-item:hover {
  background: #f3f4f6;
}

.workspace-create-popup .form-group {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.alt-text-popup {
  margin-left: -8px;
}
.alt-text-popup .popup-inner {
  width: 316px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1490196078);
  overflow: hidden;
}
.alt-text-popup .popup-body {
  padding: 0;
  overflow-y: hidden;
}
.alt-text-popup .alt-text-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}
.alt-text-popup .alt-text-content .title {
  font-weight: 700;
  font-size: 16px;
}
.alt-text-popup .alt-text-content .option-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alt-text-popup .alt-text-content .btn-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 11px;
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
  text-align: left;
}
.alt-text-popup .alt-text-content .btn-option:hover {
  background-color: #eff6ff;
  border-color: #60a5fa;
  box-shadow: 0px 2px 15px 0px rgba(19, 100, 255, 0.1490196078);
}
.alt-text-popup .alt-text-content .btn-option .option-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alt-text-popup .alt-text-content .btn-option .option-text {
  flex: 1 1 auto;
  font-weight: 500;
}
.alt-text-popup .alt-text-content .btn-option .option-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  background-color: #e5e7eb;
  border: 1px solid #d1d5db;
  border-radius: 9px;
  font-size: 10px;
  color: #6b7280;
}

.file-upload-popup .upload-options {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
  height: 170px;
}
.file-upload-popup .upload-options .upload-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(50% - 6px);
  height: 100%;
  padding: 32px;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 16px;
}
.file-upload-popup .upload-options .upload-option:hover {
  background-color: #eff6ff;
  border-color: #60a5fa;
  box-shadow: 0px 2px 15px 0px rgba(19, 100, 255, 0.1490196078);
}
.file-upload-popup .upload-options .upload-option .ico {
  flex: 0 0 auto;
}
.file-upload-popup .upload-options .upload-option .option-title {
  font-weight: 700;
  margin-block: 8px 2px;
}
.file-upload-popup .upload-options .upload-option .option-desc {
  font-weight: 400;
  font-size: 12px;
  color: #4b5563;
}

.modal-popup .popup-inner .popup-footer .btn-group .btn-inline {
  flex: 0 0 auto;
  min-width: auto;
  width: 100px;
}

#widget .community-widget {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
#widget .community-widget .title {
  display: flex;
  align-items: center;
  height: 24px;
  color: var(--gray-text-primary, #1f2937);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
#widget .popular {
  position: relative;
  margin-top: 8px;
}
#widget .popular .popular-resources {
  padding: 12px 8px;
  border-radius: 20px;
  background: var(--white, #fff);
}
#widget .popular .popular-resources .info {
  max-width: 188px;
}
#widget .popular .more {
  position: absolute;
  right: 0;
  top: 0;
  height: 24px;
  display: flex;
  align-items: center;
}
#widget .sns-list {
  padding: 8px;
  border-radius: 20px;
  background: var(--white, #fff);
}
#widget .sns-list li + li {
  border-top: 1px solid var(--gray200, #e5e7eb);
}
#widget .sns-list a {
  display: flex;
  padding: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}
#widget .sns-list a:hover, #widget .sns-list a:focus {
  border-radius: 16px;
  background: var(--gray100, #f3f4f6);
}
#widget .sns-list strong {
  display: flex;
  align-items: center;
  gap: 4px;
}
#widget .sns-list span {
  font-size: 14px;
}
@media (min-width: 1025px) {
  #widget {
    width: 300px;
    flex: 0 0 300px;
  }
}
@media (min-width: 768px) {
  #widget {
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
    max-height: calc(100vh - 80px);
  }
}
@media (min-width: 576px) and (max-width: 1024.98px) {
  #widget {
    margin-top: 40px;
  }
  #widget .community-widget {
    display: grid;
    grid-gap: 20px;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(min-content, max-content);
  }
}
@media (max-width: 767.98px) {
  #widget {
    padding: 40px 20px;
  }
}

.footer-landing {
  background: #1f2937;
  color: #fff;
  padding: 60px 24px 60px;
}
.footer-landing .container {
  position: relative;
  max-width: 1180px;
  margin: auto;
  padding: 0 40px !important;
}
.footer-landing .footer-menu a,
.footer-landing .footer-menu button {
  font-size: 14px;
  font-weight: 500;
}
.footer-landing .footer-btn-wrap {
  position: absolute;
  top: 3px;
  right: 40px;
}
.footer-landing .address {
  word-break: keep-all;
  font-style: normal;
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.3;
}
.footer-landing .company-name {
  display: inline-block;
  font-weight: 700;
  color: #fff;
  font-size: 14px;
}
.footer-landing .company-name .ci {
  display: block;
  height: 22px;
  margin-bottom: 20px;
}
.footer-landing .company-info {
  margin-top: 8px;
}
.footer-landing .company-info li + li {
  margin-top: 4px;
}
.footer-landing .company-info span {
  opacity: 0.4;
  margin: 0 0.5em;
}
.footer-landing .copyright {
  margin-top: 8px;
  font-size: 10px;
}
.footer-landing .sns-list {
  display: flex;
  gap: 12px;
}
.footer-landing .sns-list img {
  width: 36px;
  height: 36px;
  vertical-align: top;
}
@media (min-width: 768px) {
  .footer-landing .footer-menu {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
  }
  .footer-landing .sns-list {
    position: absolute;
    right: 40px;
    bottom: 0;
  }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .footer-landing {
    padding-left: 24px !important;
  }
}
@media (max-width: 1024.98px) {
  .footer-landing .container {
    padding: 0 !important;
  }
  .footer-landing .footer-btn-wrap {
    right: 0;
  }
  .footer-landing .sns-list {
    position: relative;
    margin-top: 20px;
    right: 0;
  }
}
@media (max-width: 767.98px) {
  .footer-landing {
    padding: 24px 20px;
  }
  .footer-landing .footer-menu li + li {
    margin-top: 14px;
  }
  .footer-landing .address {
    margin-top: 40px;
  }
  .footer-landing .address .company-info {
    line-height: 20px;
  }
  .footer-landing .address .company-info li + li {
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px solid #4b5563;
  }
  .footer-landing .address .company-info span {
    display: block;
    font-size: 0;
    line-height: 0;
  }
  .footer-landing .address .company-info a,
  .footer-landing .address .company-info a[href^=tel] {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none;
    cursor: default;
  }
  .footer-landing .sns-list {
    margin-top: 20px;
  }
}

.layout-home,
.layout-full {
  min-height: 100vh;
}
.layout-home .util-area,
.layout-full .util-area {
  display: flex;
  align-items: center;
  gap: 20px;
}
.layout-home .profile-wrap .profile,
.layout-full .profile-wrap .profile {
  display: flex;
  align-items: center;
  gap: 8px;
}
.layout-home .profile-wrap .profile-thumb,
.layout-full .profile-wrap .profile-thumb {
  flex: 0 0 auto;
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #bafd02;
  vertical-align: middle;
  overflow: hidden;
}
.layout-home .profile-wrap .profile-thumb img,
.layout-full .profile-wrap .profile-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.layout-home .profile-wrap .profile-name,
.layout-full .profile-wrap .profile-name {
  flex: 1 1 auto;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1em;
  line-height: 1em;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  font-size: 16px;
  max-width: 80px;
}
@media (max-width: 767.98px) {
  .layout-home .profile-wrap .profile-thumb,
  .layout-full .profile-wrap .profile-thumb {
    width: 22px;
    height: 22px;
  }
  .layout-home .profile-wrap .profile-name,
  .layout-full .profile-wrap .profile-name {
    font-size: 14px;
  }
}
.layout-home #content,
.layout-full #content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.layout-home .container,
.layout-full .container {
  flex: 1 1 auto;
  padding: 60px 0;
}
.layout-home .profile-more-popup,
.layout-full .profile-more-popup {
  margin-top: 4px;
  padding-left: 10px;
}
.layout-home .profile-more-popup .popup-inner,
.layout-full .profile-more-popup .popup-inner {
  width: 92px;
  border-radius: 12px;
}
.layout-home .profile-more-popup .popup-body,
.layout-full .profile-more-popup .popup-body {
  padding: 8px;
  overflow-y: hidden;
}
.layout-home .profile-more-popup .info-detail .btn-group,
.layout-full .profile-more-popup .info-detail .btn-group {
  gap: 0;
  margin: 0;
}
.layout-home .profile-more-popup .info-detail .btn,
.layout-full .profile-more-popup .info-detail .btn {
  display: flex;
  white-space: nowrap;
  justify-content: space-between;
  width: 100%;
  padding: 0 12px;
  border-radius: 6px;
  font-weight: 500;
  color: #1f2937;
}
.layout-home .profile-more-popup .info-detail .btn:hover,
.layout-full .profile-more-popup .info-detail .btn:hover {
  background-color: #f3f4f6;
}
@media (max-width: 767.98px) {
  .layout-home .container,
  .layout-full .container {
    padding: 24px;
  }
}

@media (min-width: 768px) {
  .layout-full .header-full {
    width: unset;
    position: fixed;
    left: 0;
    right: 16px;
    background: none;
  }
  .layout-full .container {
    padding-top: 120px;
  }
}
@media (max-width: 767.98px) {
  .layout-full .header-full {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #e5e7eb;
  }
}
.layout-full #content {
  position: relative;
}

.layout-default #content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.layout-default #content > div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.layout-default .content-box {
  flex: 1 1 auto;
}
@media (min-width: 1025px) {
  .layout-default {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 100%;
    min-width: 1180px;
    overflow: hidden;
  }
  .layout-default.mode-public {
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  .layout-default {
    background-color: #f3f4f6;
  }
  .layout-default .container {
    padding: 40px;
    padding-right: 24px;
    overflow-y: scroll;
  }
  .layout-default .container ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background-color: transparent;
  }
  .layout-default .container ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background-clip: padding-box;
    border: 6px solid transparent;
  }
  .layout-default .container ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.15);
  }
  .layout-default .container ::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.15);
  }
  .layout-default .container ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .layout-default .container ::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  @supports (-moz-appearance: none) {
    .layout-default .container * {
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    }
    .layout-default .container:hover {
      scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    }
    .layout-default .container:active {
      scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    }
  }
  .layout-default .content-box {
    padding: 40px;
    border-radius: 36px;
    background: #fff;
  }
}
@media (max-width: 1024.98px) {
  .layout-default {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .layout-default .container {
    padding: 20px;
  }
}

.body-community {
  background-color: #f3f4f6;
  overflow-y: scroll;
}

@media (min-width: 940px) {
  .layout-community {
    padding-top: 60px !important;
  }
}
.layout-community #content {
  background: #fff;
}
.layout-community .page-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--gray-text-primary, #1f2937);
}
@media (min-width: 768px) {
  .layout-community {
    display: flex;
    width: 100%;
  }
  .layout-community.mode-public {
    flex-direction: column;
  }
  .layout-community #container {
    display: flex;
    justify-content: center;
    gap: 36px;
    max-width: 1180px;
    width: 100%;
    padding: 40px;
    margin: 0 auto;
  }
  .layout-community #header {
    position: static;
    width: 100%;
  }
  .layout-community #content {
    flex: 1 1 auto;
    border-radius: 36px;
    min-width: 600px;
  }
  .layout-community #content .container {
    padding: 48px 40px;
  }
  .layout-community #footer {
    flex: 1 1 auto;
  }
}
@media (min-width: 1025px) {
  .layout-community {
    flex-direction: column;
  }
}
@media (max-width: 1024.98px) {
  .layout-community #container {
    display: block;
  }
}
@media (max-width: 767.98px) {
  .layout-community #content .container {
    padding: 48px 20px;
  }
  .layout-community .page-title {
    font-size: 28px;
  }
}
@media (max-width: 1024.98px) {
  .layout-community {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .layout-community .container {
    padding: 20px;
  }
}

.layout-details {
  position: relative;
  display: flex;
  flex-direction: row;
  background-color: #f3f4f6;
}
.layout-details #content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.layout-details #content > div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1025px) {
  .layout-details {
    min-width: 1180px;
    height: 100%;
    overflow: hidden;
  }
}
@media (max-width: 1024.98px) {
  .layout-details {
    display: block;
  }
}
.layout-details .container {
  overflow: hidden;
}
.layout-details .header-details {
  z-index: 200;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 76px;
  padding: 20px 24px;
  border-bottom: 1px solid #d1d5db;
  background-color: #fff;
}
@media (min-width: 1025px) {
  .layout-details .header-details {
    min-width: 880px;
  }
}
.layout-details .header-details .title3 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin: 0;
}
.layout-details .header-details .title3 .ico + span {
  margin-left: 12px;
}
.layout-details .header-details .tit-file {
  flex: 0 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 775px;
  padding-right: 24px;
  overflow: hidden;
}
.layout-details .header-details .tit-file span {
  display: inline-block;
  line-height: 2;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.layout-details .header-details .tit-file .btn-edit {
  flex: 0 0 auto;
  position: absolute;
  right: 0;
  display: flex;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  transition-delay: 0.1s;
}
.layout-details .header-details .tit-file .btn-edit:focus {
  opacity: 1;
}
.layout-details .header-details .tit-file:hover .btn-edit, .layout-details .header-details .tit-file:focus .btn-edit {
  position: absolute;
  right: -24px;
  right: 0;
  opacity: 1;
}
.layout-details .header-details .info-area {
  text-align: right;
}
.layout-details .header-details .save-text {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.layout-details .header-details .save-text .ico {
  margin-top: 2px;
}
.layout-details .header-details .save-text .ico + .time {
  margin-left: 4px;
}
.layout-details .header-details .save-text .time {
  font-weight: 400;
}
.layout-details .header-details .save-text .time + .text {
  margin-left: 4px;
}
.layout-details .header-details .save-text .text {
  font-weight: 400;
}
.layout-details .header-details .save-text .link {
  font-weight: 400;
  color: #1364ff;
}
.layout-details .header-details .warning {
  margin-top: 2px;
  font-size: 12px;
  color: #93959a;
}
@media (max-width: 1024.98px) {
  .layout-details .header-details {
    justify-content: unset;
    gap: 8px;
  }
  .layout-details .header-details .title3 .ico + span {
    display: none;
  }
  .layout-details .header-details .tit-file {
    align-items: flex-start;
  }
  .layout-details .header-details .info-area {
    flex: 1 1 auto;
  }
  .layout-details .header-details .info-area .save-text {
    display: block;
  }
}
@media (max-width: 767.98px) {
  .layout-details .header-details .info-area {
    display: none;
  }
}
.layout-details .body-details {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  overflow: hidden;
}
.layout-details .body-details .scroll-inner {
  overflow: auto;
}
.layout-details .body-details .scroll-inner ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
.layout-details .body-details .scroll-inner ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background-clip: padding-box;
  border: 6px solid transparent;
}
.layout-details .body-details .scroll-inner ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
.layout-details .body-details .scroll-inner ::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.layout-details .body-details .scroll-inner ::-webkit-scrollbar-track {
  background-color: transparent;
}
.layout-details .body-details .scroll-inner ::-webkit-scrollbar-corner {
  background-color: transparent;
}
@supports (-moz-appearance: none) {
  .layout-details .body-details .scroll-inner * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .layout-details .body-details .scroll-inner:hover {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .layout-details .body-details .scroll-inner:active {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
}
.layout-details .footer-details {
  padding: 0 20px;
  border-top: 1px solid #d1d5db;
  background-color: #fff;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  z-index: 170;
}
.layout-details .footer-details .guide-area {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 48px;
  border-radius: 100px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
}
.layout-details .footer-details .guide-area.complete {
  border-color: #000;
  background: #000;
}
.layout-details .footer-details .guide-area.complete p {
  color: #fff;
}
.layout-details .footer-details .guide-area .ico {
  margin-right: 8px;
  flex: 0 0 auto;
}
.layout-details .footer-details .guide-area p {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #1f2937;
}
.layout-details .footer-details .wrap-left,
.layout-details .footer-details .wrap-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.layout-details .footer-details .wrap-left {
  gap: 12px;
}
@media (max-width: 1024.98px) {
  .layout-details .footer-details {
    height: 80px;
    display: flex;
    gap: 6px;
    padding: 12px;
  }
  .layout-details .footer-details .guide-area {
    max-width: 280px;
  }
  .layout-details .footer-details .wrap-left,
  .layout-details .footer-details .wrap-right {
    gap: 6px;
  }
  .layout-details .footer-details .btn-lg {
    height: 36px;
    font-size: 14px;
    padding: 0 12px;
  }
}
@media (max-width: 767.98px) {
  .layout-details .footer-details {
    gap: 6px;
    flex-direction: column;
    height: auto;
    align-items: unset;
  }
  .layout-details .footer-details .wrap-right {
    justify-content: flex-end;
  }
}

.edit-popup .popup-inner .popup-body {
  padding: 36px 36px 20px;
}
.edit-popup .popup-inner .popup-footer {
  padding: 20px 36px 36px;
}
.edit-popup .inner {
  margin-top: 12px;
}
.edit-popup .text-count {
  display: block;
  margin-top: 9px;
  text-align: right;
  font-size: 14px;
  color: #6b7280;
}
.edit-popup .btn-close-popup {
  display: none;
}

.page-header:has(.btn-back) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.page-header .btn-back {
  width: 36px;
  height: 36px;
  padding: 8px;
  background-color: #f3f4f6;
  border-radius: 6px;
}
.page-header .title-area {
  display: flex;
  flex-direction: column;
}
.page-header:has(.breadcrumb) {
  min-height: 60px;
  padding-block: 1.5px;
}
.page-header .content-header.has-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.page-header .content-header.has-content .left {
  flex: 1 1 auto;
}
.page-header .content-header.has-content .left:has(.btn-back) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.agreement-popup,
.privacy-popup {
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.14px;
  color: #1f2937;
}
.agreement-popup .popup-header::before,
.privacy-popup .popup-header::before {
  left: 24px;
  width: calc(100% - 48px);
}
@media (min-width: 768px) {
  .agreement-popup .popup-header,
  .privacy-popup .popup-header {
    min-height: 72px;
    padding: 8px 64px 8px 40px;
  }
  .agreement-popup .popup-header::before,
  .privacy-popup .popup-header::before {
    left: 40px;
    width: calc(100% - 80px);
  }
  .agreement-popup .popup-body,
  .privacy-popup .popup-body {
    padding: 24px 40px 24px;
    padding-right: 24px;
  }
  .agreement-popup .btn-close-popup,
  .privacy-popup .btn-close-popup {
    right: 40px;
    top: 24px;
  }
}

.agreement-container {
  padding: 24px;
}
.agreement-container .agreement-title {
  margin-bottom: 12px;
}
.agreement-article {
  white-space: pre-wrap;
}
.agreement-article strong {
  margin-top: 0.5em;
  margin-bottom: 0.3em;
  display: inline-block;
}

.popup-plugin-connect .popup-section .q-title {
  font-weight: 700;
  font-size: 14px;
  color: #1f2937;
}
.popup-plugin-connect .popup-section .q-title + .list-wrap {
  margin-top: 12px;
}
.popup-plugin-connect .popup-section .box-info {
  padding: 20px;
}
.popup-plugin-connect .popup-section .box-info .list4 > li + li {
  margin-top: 0;
}
.popup-plugin-connect .popup-section .faq-info {
  display: flex;
  align-items: center;
  gap: 17px;
}
.popup-plugin-connect .popup-section .faq-info > dt {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
}
.popup-plugin-connect .popup-section .faq-info > dd {
  position: relative;
  font-weight: 400;
  font-size: 14px;
  color: #4b5563;
}
.popup-plugin-connect .popup-section .faq-info > dd:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -9px;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: #e5e7eb;
}

.popup-notification .popup-inner {
  width: 400px;
  height: 664px;
  margin-bottom: -106px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1490196078);
}
.popup-notification .popup-header {
  display: none;
}
.popup-notification .popup-body {
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.popup-notification .notifi-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.popup-notification .notifi-content ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: transparent;
}
.popup-notification .notifi-content ::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 3px;
  background-clip: padding-box;
  border: 0px solid transparent;
}
.popup-notification .notifi-content ::-webkit-scrollbar-thumb:hover {
  background-color: rgb(194.6951219512, 199.9390243902, 207.8048780488);
}
.popup-notification .notifi-content ::-webkit-scrollbar-thumb:active {
  background-color: rgb(180.3902439024, 186.8780487805, 196.6097560976);
}
.popup-notification .notifi-content ::-webkit-scrollbar-track {
  background-color: transparent;
}
.popup-notification .notifi-content ::-webkit-scrollbar-corner {
  background-color: transparent;
}
@supports (-moz-appearance: none) {
  .popup-notification .notifi-content * {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
  }
  .popup-notification .notifi-content:hover {
    scrollbar-color: rgb(194.6951219512, 199.9390243902, 207.8048780488) transparent;
  }
  .popup-notification .notifi-content:active {
    scrollbar-color: rgb(180.3902439024, 186.8780487805, 196.6097560976) transparent;
  }
}
.popup-notification .tabmenu-type2 {
  flex: 0 0 auto;
}
.popup-notification .tabmenu-type2 .tab-list {
  padding-inline: 16px 48px;
}
.popup-notification .tabmenu-type2 .tab-list li {
  height: 56px;
}
.popup-notification .tabmenu-type2 .tab-button {
  font-size: 16px;
  font-weight: 500;
  color: #4b5563;
}
.popup-notification .tabmenu-type2 .tab-button.on {
  color: #1f2937;
}
.popup-notification .notifi-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: calc(100% - 56px);
  overflow-y: auto;
}
.popup-notification .notifi-wrapper {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.popup-notification .notifi-items-area {
  flex: 1 1 auto;
}
.popup-notification .notifi-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 155px;
  gap: 4x;
  padding: 24px;
  background-color: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.popup-notification .notifi-item.unread {
  background-color: #eff6ff;
}
.popup-notification .notifi-item:hover {
  background-color: #f9fafb;
}
.popup-notification .notifi-item .notifi-date {
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}
.popup-notification .notifi-item .notifi-badges {
  width: 4px;
  margin: 0 2px;
}
.popup-notification .notifi-item .notifi-badges .new-badge {
  position: relative;
  display: inline-block;
  text-indent: -9999px;
}
.popup-notification .notifi-item .notifi-badges .new-badge::before {
  content: "new";
  position: absolute;
  top: 2px;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: #ef4444;
  border-radius: 50%;
}
.popup-notification .notifi-item .item-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.popup-notification .notifi-item .notifi-title {
  font-size: 16px;
  font-weight: 500;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4em;
  line-height: 1.4em;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  max-width: calc(100% - 30px);
}
.popup-notification .notifi-item .item-cont {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.popup-notification .notifi-item .notifi-text {
  font-size: 14px;
  font-weight: 400;
  color: #4b5563;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-height: 4.2;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.popup-notification a.notifi-item {
  position: relative;
}
.popup-notification a.notifi-item::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 16px;
  height: 16px;
  background-image: url(/_next/static/media/ico-arrow-lg-lightgray@2x.b243b73f.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
}
.popup-notification a.notifi-item .item-title {
  position: relative;
}
.popup-notification .item-action {
  margin-top: 12px;
}
.popup-notification .notifi-more {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}
.popup-notification .notifi-more .btn-notifi-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
}
.popup-notification .notifi-more .btn-notifi-more:hover {
  background-color: #f9fafb;
}
.popup-notification .btn-group-wrap {
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.popup-notification .btn-group-wrap .btn {
  width: 32px;
  height: 32px;
}
.popup-notification .btn-group-wrap .btn:hover {
  background-color: #f9fafb;
}
.popup-notification .notifi-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  font-size: 14px;
  font-weight: 400;
  color: #4b5563;
}
.popup-notification .notifi-empty .notifi-title {
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
}

.popup-credit-charge .charge-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.popup-credit-charge .charge-item .charge-top {
  padding-inline: 4px;
}
.popup-credit-charge .charge-item .charge-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 18px;
  color: #1a212b;
  line-height: 1;
}
.popup-credit-charge .charge-item .charge-title + .desc {
  margin-top: 6px;
  font-size: 14px;
  color: #4b5563;
}
.popup-credit-charge .charge-item .discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  background-color: #fff9f0;
  border: 1px solid #ffc49a;
  font-weight: 400;
  font-size: 14px;
  color: #df5b00;
  line-height: 1.2;
}
.popup-credit-charge .charge-item .charge-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}
.popup-credit-charge .charge-item .charge-list .check-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: calc(50% - 6px);
}
.popup-credit-charge .charge-item .charge-list .check-item.full {
  width: 100%;
}
.popup-credit-charge .charge-item .charge-list .check-item label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 12px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}
.popup-credit-charge .charge-item .charge-list .check-item label:before {
  margin: 0;
}
.popup-credit-charge .charge-item .charge-list .check-item .credit-area {
  flex: 1 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 243px;
  color: #4b5563;
}
.popup-credit-charge .charge-item .charge-list .check-item .credit-area input {
  border: 1px solid #d1d5db;
}
.popup-credit-charge .charge-item .charge-list .check-item .credit-area input::-webkit-outer-spin-button, .popup-credit-charge .charge-item .charge-list .check-item .credit-area input::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}
.popup-credit-charge .charge-item .charge-list .check-item .credit-area > strong {
  font-weight: 700;
  font-size: 18px;
  color: #0f1318;
  line-height: 1;
}
.popup-credit-charge .charge-item .charge-list .check-item .credit-area.credit-discount {
  width: auto;
}
.popup-credit-charge .charge-item .charge-list .check-item .credit-area.credit-discount .unit {
  font-size: 14px;
  color: #4b5563;
}
.popup-credit-charge .charge-item .charge-list .check-item .price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.3;
  text-align: right;
}
.popup-credit-charge .charge-item .charge-list .check-item .price-info .price {
  font-weight: 400;
  font-size: 16px;
  color: #1364ff;
  line-height: 1;
}
.popup-credit-charge .charge-item .charge-list .check-item .price-info .price strong {
  font-weight: 700;
}
.popup-credit-charge .charge-item .charge-list .check-item .price-info .per-unit .ico {
  margin-right: 2px;
}
.popup-credit-charge .charge-item + .charge-item {
  margin-top: 32px;
}
.popup-credit-charge .guide-text {
  margin-top: 4px;
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}
.popup-credit-charge .guide-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 20px;
  border-radius: 12px;
  background-color: #eff6ff;
}
.popup-credit-charge .guide-banner .left {
  flex: 1 1;
}
.popup-credit-charge .guide-banner .title-wrap .title {
  font-weight: 700;
  color: #0f1318;
}
.popup-credit-charge .guide-banner .title-wrap .desc {
  margin-top: 2px;
  font-size: 14px;
  color: #6b7280;
}
.popup-credit-charge .popup-body + .popup-footer {
  margin-top: 0;
}

.popup-service-payment .service-item .service-top {
  margin-bottom: 6px;
}
.popup-service-payment .service-item .service-title {
  font-weight: 700;
  font-size: 16px;
  color: #1f2937;
}
.popup-service-payment .service-item + .service-item {
  margin-top: 20px;
}
.popup-service-payment .box-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.popup-service-payment .box-card dt {
  font-size: 14px;
}
.popup-service-payment .box-card dd {
  font-size: 14px;
  color: #4b5563;
}
.popup-service-payment .box-card .bank {
  display: inline-block;
  height: 29px;
  border-radius: 4px;
  gap: 10px;
  padding: 4px 6px;
  background-color: #f3f4f6;
  font-weight: 500;
  font-size: 16px;
  color: #1f2937;
}
.popup-service-payment .box-card .bank + .card-number {
  margin-left: 8px;
  font-size: 16px;
}
.popup-service-payment .box-card .data-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0;
}
.popup-service-payment .box-card .data-item .date-tit {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  color: #6b7280;
}
.popup-service-payment .box-card .data-item .date {
  position: relative;
  padding-left: 6px;
  font-size: 14px;
  color: #4b5563;
}
.popup-service-payment .box-card .data-item .date:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 10px;
  background-color: #d1d5db;
}
.popup-service-payment .box-card.no-card > dt {
  font-weight: 400;
  font-size: 16px;
  color: #6b7280;
}
.popup-service-payment .box-card.no-card > dt > strong {
  font-weight: 500;
  color: #4b5563;
}
.popup-service-payment .box-card.no-card > dt .desc {
  margin-top: 4px;
  font-size: 12px;
}
.popup-service-payment .popup-body + .popup-footer {
  margin-top: 0;
}

.card-payment {
  position: relative;
  width: 100%;
  padding: 4px;
  border-radius: 12px;
}
.card-payment .inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: white;
  border-radius: 12px;
}
.card-payment::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(270.68deg, #e5e7eb -1.65%, #e5e7eb 99.91%);
  border-radius: 16px;
  z-index: -1;
}
.card-payment.plan-starter::before {
  background: linear-gradient(270.68deg, #aae8cb -1.65%, rgba(170, 232, 203, 0.4) 99.91%);
}
.card-payment.plan-pro::before {
  background: linear-gradient(270.68deg, #b5d9ff -1.65%, rgba(181, 217, 255, 0.3) 99.91%);
}
.card-payment.plan-team::before {
  background: linear-gradient(270.68deg, #d7aeff -1.65%, rgba(215, 174, 255, 0.3) 99.91%);
}
.card-payment.plan-enterprise::before {
  background: linear-gradient(270.68deg, #b1c2f0 -1.65%, rgba(177, 194, 240, 0.3) 99.91%);
}
.card-payment .item-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.card-payment .item-top .left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.card-payment .item-top .left .plan-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.card-payment .item-top .left .plan-info .title {
  font-weight: 700;
  font-size: 22px;
  color: #1f2937;
}
.card-payment .item-top .left .plan-info .desc {
  font-size: 14px;
  color: #4b5563;
}
.card-payment .item-top .right {
  flex: 0 0 auto;
  padding-top: 10px;
}
.card-payment .item-top .right .data-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0;
}
.card-payment .item-top .right .data-item dt {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}
.card-payment .item-top .right .data-item dd {
  position: relative;
  padding-left: 6px;
  font-size: 14px;
  color: #4b5563;
}
.card-payment .item-top .right .data-item dd:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 10px;
  background-color: #d1d5db;
}
.card-payment .item-top .right .data-item + .data-item {
  margin-top: 4px;
}
.card-payment .item-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card-payment .payment-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 12px;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.card-payment .payment-summary .price-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.card-payment .payment-summary .price-item dt {
  font-size: 12px;
  color: #6b7280;
}
.card-payment .payment-summary .price-item dd {
  font-size: 14px;
  color: #4b5563;
}
.card-payment .payment-summary .price-item dd > strong {
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
}
.card-payment .payment-summary .price-item.total dt {
  font-weight: 500;
  font-size: 16px;
  color: #4b5563;
}
.card-payment .payment-summary .price-item.total dd {
  font-size: 16px;
  color: #1364ff;
}
.card-payment .payment-summary .price-item.total dd > strong {
  font-weight: 700;
  font-size: 16px;
  color: #1364ff;
}

.payment-guide .list3 li {
  position: relative;
  padding-left: 14px;
  font-weight: 400;
  font-size: 10px;
  color: #6b7280;
  line-height: 1.2;
}
.payment-guide .list3 li:before {
  content: "";
  position: absolute;
  left: 3px;
  width: 3px;
  height: 3px;
  margin-top: -3px;
  background-color: #d1d5db;
  border-radius: 50%;
}
.payment-guide .list3 li + li {
  margin-top: 2px;
}
.payment-guide .list3 .link {
  margin-left: 2px;
  text-decoration: underline;
  text-underline-offset: 1px;
}

.popup-low-credits .popup-body {
  padding-bottom: 0;
}
.popup-low-credits .popup-body + .popup-footer {
  margin-top: 0;
}
.popup-low-credits .credits-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.popup-low-credits .credits-top .desc {
  font-weight: 400;
  font-size: 16px;
  color: #1f2937;
}
.popup-low-credits .credits-top .btn-link {
  position: relative;
  padding-right: 14px;
  font-weight: 400;
  font-size: 14px;
  color: #4b5563;
}
.popup-low-credits .credits-top .btn-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 12px;
  height: 12px;
  background-image: url(/_next/static/media/ico-link-sm@2x.9ee58bbb.png);
  background-size: 12px auto;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}

.credit-panel {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.credit-panel .top-panel {
  padding: 16px 20px;
}
.credit-panel .top-panel + .btm-panel {
  border-top: 1px solid #e5e7eb;
}
.credit-panel .btm-panel {
  padding: 24px 20px;
  background-color: #f9fafb;
}
.credit-panel .item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 32px;
  font-weight: 400;
  font-size: 16px;
  color: #6b7280;
}
.credit-panel .item-row .tit {
  display: inline-block;
}
.credit-panel .item-row .value {
  color: #4b5563;
}
.credit-panel .top-cont .tit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 18px;
  color: #1a212b;
}
.credit-panel .top-cont .tit + .notice-text {
  margin-top: 8px;
}
.credit-panel .top-cont .notice-text {
  font-weight: 400;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.4;
}
.credit-panel .top-cont + .btm-cont {
  margin-top: 12px;
}
.credit-panel .member-profile {
  position: relative;
  top: -2px;
  display: inline-flex;
  align-items: center;
  width: auto;
  margin-right: 4px;
}
.credit-panel .member-profile .profile {
  display: inline-flex;
  width: 20px;
  height: 20px;
  box-shadow: none;
}
.credit-panel .member-profile .name {
  margin-right: 0;
}
.credit-panel .member-profile .badge-role {
  padding: 0 4px;
}
.credit-panel .credit-guide {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.credit-panel .credit-guide .left {
  flex: 1 1 auto;
}
.credit-panel .credit-guide .right {
  flex: 0 0 auto;
}
.credit-panel .credit-guide .credit-info {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-left: 14px;
  font-weight: 400;
  font-size: 14px;
  color: #4b5563;
}
.credit-panel .credit-guide .credit-info:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 42px;
  background-color: #d1d5db;
  border-radius: 1px;
}
.credit-panel .credit-guide .credit-info .info-value {
  font-weight: 400;
  font-size: 16px;
  color: #1f2937;
}
.credit-panel .credit-guide .credit-info .value {
  font-weight: 400;
  color: #1364ff;
}
.credit-panel .recharge-form .input-group .input-addon {
  margin-left: 2px;
}
.credit-panel .recharge-form .input-group .form-control-sm {
  font-weight: 400;
  font-size: 14px;
  text-align: right;
}
.credit-panel .recharge-form .input-group .form-control-sm::-webkit-outer-spin-button, .credit-panel .recharge-form .input-group .form-control-sm::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.credits-request-wrap .member-profile .profile {
  box-shadow: none;
}
.credits-request-wrap .member-profile .email {
  color: #4b5563;
  font-weight: 400;
}

.box-divider-y {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  margin-block: 28px 16px;
  padding-block: 8px;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.box-divider-y > dt {
  padding-block: 12px;
  font-weight: 400;
  font-size: 14px;
  color: #6b7280;
}
.box-divider-y > dd {
  padding-block: 12px;
}

.alert-team-profile .box-guidelist {
  padding: 16px 14px;
}
.alert-team-profile .box-guidelist .list3 > li {
  padding-left: 11px;
}
.alert-team-profile .box-guidelist .list3 li + li {
  margin-top: 10px;
}
.alert-team-profile .credits-request-wrap .box-divider-y {
  border-color: #d1d5db;
  gap: 26px;
  margin-block: 36px 0px;
  padding-block: 6px 10px;
}
.alert-team-profile .credits-request-wrap .box-divider-y > dd {
  padding-block: 12px 10px;
}
.alert-team-profile .credits-request-wrap .box-divider-y .info {
  gap: 0px;
}
.alert-team-profile .credits-request-wrap .box-divider-y .top {
  display: flex;
  align-items: center;
  justify-content: start;
}
.alert-team-profile .credits-request-wrap .box-divider-y .top .badge-role {
  gap: 2px;
}
.alert-team-profile .credits-request-wrap .box-divider-y .btm {
  margin-top: -1px;
}

body:has(.start-ally-popup) {
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .start-ally-popup .popup-body {
    padding-inline: 20px;
  }
}
.start-ally-popup .start-ally-content {
  text-align: center;
}
.start-ally-popup .promo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-block: 40px 32px;
}
.start-ally-popup .promo-section .ico-area {
  display: flex;
  justify-content: center;
  align-items: center;
}
.start-ally-popup .promo-section .promo-text {
  font-size: 20px;
  font-weight: 700;
  color: #0f1318;
  line-height: 1.3;
}
.start-ally-popup .promo-section .promo-text .credit-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-right: 3px;
  font-weight: 700;
}
.start-ally-popup .promo-section .promo-text .credit-amount .ico {
  flex: 0 0 auto;
  position: relative;
  top: 1px;
}
.start-ally-popup .btn-group-column {
  flex-direction: column;
  gap: 12px;
  padding: 8px 16px 40px;
}
.start-ally-popup .btn-group-column .btn {
  position: relative;
  padding-left: 20px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.3;
  text-align: center;
}
.start-ally-popup .btn-group-column .btn::before {
  content: "";
  position: absolute;
  top: calc(50% - 8px);
  left: 24px;
  width: 16px;
  height: 16px;
}
.start-ally-popup .btn-group-column .btn span {
  padding-left: 23px;
}
.start-ally-popup .btn-group-column .google::before {
  background: url(/_next/static/media/ico-google@2x.ec53bed3.png);
  background-size: 16px 16px;
}
.start-ally-popup .btn-group-column .naver::before {
  background: url(/_next/static/media/ico-naver@2x.aa829310.png);
  background-size: 16px 16px;
}
.start-ally-popup .btn-group-column .email::before {
  background: url(/_next/static/media/ico-email-line@2x.62693163.png);
  background-size: 16px 16px;
}
.start-ally-popup .btn-group-column .separator {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: #6b7280;
  text-align: center;
}
@media (max-width: 767.98px) {
  .start-ally-popup .btn-group-column {
    padding-inline: 0px;
  }
}
.start-ally-popup .existing-section {
  margin-inline: 20px;
  padding-block: 20px 16px;
  border-top: 1px solid #d9d9d9;
}
.start-ally-popup .existing-section .existing-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: #6b7280;
}
.start-ally-popup .existing-section .existing-text .accent {
  font-weight: 500;
  color: #1f2937;
}
.start-ally-popup .existing-section .login-link {
  gap: 2px;
  height: 24px;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: #4b5563;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.start-ally-popup .existing-section .login-link:hover {
  color: #1364ff;
}
.start-ally-popup .existing-section .login-link:hover .ico-arrow-right-sm-gray {
  background-image: url(/_next/static/media/ico-arrow-right-sm-primary@2x.9a09bdd6.png);
}
@media (max-width: 767.98px) {
  .start-ally-popup .existing-section {
    margin-inline: 0px;
  }
}

.markup-guide {
  display: flex;
  flex-direction: column;
  padding: 20px 180px 100px;
  background-color: #fff;
}
.markup-guide .title2 {
  margin-top: 0;
}
.markup-guide .guide-content {
  flex: 1 1 auto;
  max-width: 1440px;
  padding: 40px;
}
.markup-guide .guide-content > div {
  margin: 40px 0;
}

#guide-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 180px;
  padding: 15px;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.95);
}
#guide-nav .sidebar-title {
  width: 100px;
}
#guide-nav .nav-title {
  margin: 20px 0;
  padding: 10px 0;
  border-top: 1px solid #9ca3af;
  border-bottom: 1px solid #9ca3af;
  font-size: 18px;
  font-weight: 700;
}
#guide-nav .link-scroll {
  display: block;
  padding: 5px 0;
  cursor: pointer;
}
#guide-nav .link-scroll #logo img {
  object-fit: contain;
}

.gnb-list {
  display: flex;
  margin: 20px 0;
  padding-right: 24px;
  gap: 20px;
}
.gnb-list > li {
  min-width: 100px;
  flex: 0 0 auto;
}
.gnb-list strong {
  display: block;
  font-size: 18px;
  font-weight: bold;
}
.gnb-list ul {
  margin-top: 8px;
}
.gnb-list ul li {
  line-height: 1.5;
  border-left: 3px solid #e5e7eb;
  padding-left: 8px;
}
.gnb-list a:hover {
  color: #0658f5;
  text-decoration: underline;
}

.home-page .container-md {
  max-width: 1200px;
  margin: auto;
}
.home-page .section-home {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  gap: 40px;
  background: #000;
}
.home-page .section-home .section-body .container-md {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-gap: 40px;
  gap: 40px;
  align-items: stretch;
}
.home-page .section-home .section-body .service-overview {
  grid-column: 1/3;
  grid-row: 1/2;
}
.home-page .section-home .section-body .promotion {
  grid-column: 1/2;
  grid-row: 2/3;
}
.home-page .section-home .section-body .promotion > * {
  height: 100%;
}
.home-page .section-home .section-body .popular {
  position: relative;
  max-width: 580px;
  grid-column: 2/3;
  grid-row: 2/3;
  height: 320px;
  padding: 32px;
  border-radius: 32px;
  background: var(--white, #fff);
  overflow: hidden;
}
.home-page .section-home .section-body .popular:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}
.home-page .section-home .section-body .popular .title {
  height: 34px;
  margin-bottom: 12px;
  color: var(--black, #000);
  font-size: 24px;
  font-weight: 700;
}
.home-page .section-home .section-body .popular .data-list a {
  padding: 8px 12px;
}
.home-page .section-home .section-body .popular .more {
  position: absolute;
  right: 32px;
  top: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
.home-page .section-home .section-header {
  text-align: center;
  color: #fff;
}
.home-page .section-home .section-header .slogan-title {
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
}
.home-page .section-home .section-header .slogan-title .a11y-embelem {
  margin-top: -6px;
  vertical-align: middle;
}
.home-page .section-home .section-header .desc {
  margin-top: 8px;
  opacity: 0.8;
}
@media (max-width: 1024.98px) {
  .home-page .section-home {
    align-items: stretch;
    padding: 72px 0;
  }
  .home-page .section-home .title {
    justify-content: center;
    font-size: 32px;
  }
  .home-page .section-home .title .a11y-embelem {
    width: 32px;
    height: 32px;
  }
  .home-page .section-home .section-body .container-md {
    column-gap: 12px;
    padding: 0 20px;
  }
  .home-page .section-home .section-body .popular {
    max-width: none;
  }
  .home-page .section-home .cta-area {
    font-size: 14px;
  }
}
@media (max-width: 767.98px) {
  .home-page .section-home {
    gap: 20px;
  }
  .home-page .section-home .section-header .slogan-title {
    font-size: 32px;
  }
  .home-page .section-home .section-header .slogan-title svg {
    width: 32px;
    height: 32px;
  }
  .home-page .section-home .section-header .desc {
    font-size: 14px;
  }
  .home-page .section-home .section-body .container-md {
    display: flex;
    flex-direction: column;
    padding: 20px;
  }
  .home-page .section-home .section-body .popular {
    padding: 28px 20px;
  }
  .home-page .section-home .section-body .popular .more {
    top: 28px;
    right: 20px;
  }
  .home-page .section-home .section-body .popular .data-list .info {
    max-width: calc(100vw - 180px);
  }
}
.home-page .section-community {
  padding: 120px 20px;
  overflow: hidden;
}
.home-page .section-community .section-header {
  text-align: center;
}
.home-page .section-community .section-header .title {
  font-weight: bold;
  font-size: 36px;
  color: var(--black, #000);
}
.home-page .section-community .section-header .desc {
  margin-top: 4px;
  font-size: 16px;
  color: var(--gray-text-secondary, #4b5563);
}
.home-page .section-community .section-body {
  padding-top: 16px;
}
.home-page .section-community .btn-group-center {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.home-page .section-community .article-container .default-nodata {
  height: 100px;
  min-height: auto;
}
.home-page .section-community .article-container + .article-container .default-nodata {
  display: none;
}
.home-page .section-community .article-container:first-child .article-list {
  animation: scrollRight 400s linear infinite;
  animation-delay: -200s;
}
.home-page .section-community .article-container:last-child .article-list {
  animation: scrollLeft 400s linear infinite;
  animation-delay: -100s;
}
@keyframes scrollRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes scrollLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
.home-page .section-community .article-list {
  margin-top: 24px;
  display: flex;
  width: max-content;
  gap: 24px;
}
.home-page .section-community .article-list .article-item {
  flex: 0 0 auto;
  width: 320px;
  height: 200px;
  padding: 24px;
  overflow: hidden;
}
.home-page .section-community .article-list .article-item .content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-height: 69px;
  line-height: 23px;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  max-height: none;
}
.home-page .section-community .article-list .article-item button:hover {
  text-decoration: none;
  cursor: text;
}
@media (max-width: 1024.98px) {
  .home-page .section-community {
    padding: 80px 20px;
  }
}
@media (max-width: 767.98px) {
  .home-page .section-community {
    padding: 60px 20px;
  }
  .home-page .section-community .section-header .title {
    font-size: 28px;
  }
  .home-page .section-community .section-header .desc {
    font-size: 14px;
  }
}
.home-page .landing-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 480px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 1024.98px) {
  .home-page .landing-upload {
    width: 100%;
    max-width: 480px;
    padding-block: 16px;
    margin: 0 auto;
  }
}
.home-page .landing-upload .loading-overlay {
  border-radius: 20px;
  overflow: hidden;
}
.home-page .landing-upload .loading-overlay .loading-text {
  font-size: 14px;
  font-weight: 500;
}
.home-page .upload-util {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.home-page .upload-util .left {
  flex: 1 1 auto;
}
.home-page .upload-util .right {
  flex: 0 0 auto;
}
@media (max-width: 1024.98px) {
  .home-page .upload-util {
    flex-direction: column;
    gap: 8px;
  }
  .home-page .upload-util .left,
  .home-page .upload-util .right {
    width: 100%;
  }
}
.home-page .util-mode {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-page .util-mode > dt {
  display: flex;
  align-items: center;
  gap: 2px;
}
.home-page .util-mode .util-label {
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
}
@media (max-width: 1024.98px) {
  .home-page .util-mode .tooltip-squre .tooltip-content {
    width: 100%;
  }
  .home-page .util-mode .tooltip-squre .tooltip-content.bottom-center {
    top: 100%;
    left: -17px;
    transform: translateX(0);
  }
  .home-page .util-mode .tooltip-squre .tooltip-content::before {
    left: 17px;
  }
  .home-page .util-mode .tooltip-squre .tooltip-content .tooltip-inner {
    width: -moz-fit-content;
    width: fit-content;
  }
}
.home-page .section-upload .cta-check-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  max-width: 166px;
  height: 32px;
}
.home-page .section-upload .cta-check-toggle + .action-area {
  margin-top: 0;
}
.home-page .section-upload .cta-check-toggle .check-switch {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.home-page .section-upload .cta-check-toggle .check-switch .label {
  display: flex;
  min-width: auto;
  width: 100%;
  height: 100%;
  padding: 2px;
  border-radius: 9px;
  overflow: visible;
  background-color: #e5e7eb;
  background-image: none;
}
.home-page .section-upload .cta-check-toggle .check-switch .label::before {
  border-radius: 9px;
  overflow: hidden;
  opacity: 1;
  background-color: #e5e7eb;
  box-sizing: border-box;
}
.home-page .section-upload .cta-check-toggle .check-switch .label::after {
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 1px rgba(0, 0, 0, 0.02);
}
.home-page .section-upload .cta-check-toggle .check-switch .label:hover .text-checked,
.home-page .section-upload .cta-check-toggle .check-switch .label:hover .text-uncheck, .home-page .section-upload .cta-check-toggle .check-switch .label:focus-visible .text-checked,
.home-page .section-upload .cta-check-toggle .check-switch .label:focus-visible .text-uncheck {
  font-weight: 400;
  color: #6b7280;
}
.home-page .section-upload .cta-check-toggle .check-switch input:checked + .label:after {
  top: 2px;
  left: 2px;
}
.home-page .section-upload .cta-check-toggle .check-switch input:checked + .label .text-checked {
  font-weight: 500;
  color: #1f2937;
}
.home-page .section-upload .cta-check-toggle .check-switch input:checked + .label .text-checked::before {
  background-image: url(/_next/static/media/ico-mode-ally-gray@2x.a720f3c6.png);
}
.home-page .section-upload .cta-check-toggle .check-switch input:checked + .label:hover::before, .home-page .section-upload .cta-check-toggle .check-switch input:checked + .label:focus-visible::before {
  background: #d1d5db;
}
.home-page .section-upload .cta-check-toggle .check-switch input:not(:checked) + .label:after {
  top: 2px;
  left: 50%;
}
.home-page .section-upload .cta-check-toggle .check-switch input:not(:checked) + .label .text-uncheck {
  font-weight: 500;
  color: #1f2937;
}
.home-page .section-upload .cta-check-toggle .check-switch input:not(:checked) + .label .text-uncheck::before {
  background-image: url(/_next/static/media/ico-mode-minimal-gray@2x.0b9c4da2.png);
}
.home-page .section-upload .cta-check-toggle .check-switch input:not(:checked) + .label:hover::before, .home-page .section-upload .cta-check-toggle .check-switch input:not(:checked) + .label:focus-visible::before {
  background: #d1d5db;
}
.home-page .section-upload .cta-check-toggle .check-switch input:hover + .label::before, .home-page .section-upload .cta-check-toggle .check-switch input:focus-visible + .label::before {
  background: #d1d5db;
}
.home-page .section-upload .cta-check-toggle .check-switch input:hover:checked + .label .text-uncheck, .home-page .section-upload .cta-check-toggle .check-switch input:focus-visible:checked + .label .text-uncheck {
  font-weight: 400;
  color: #6b7280;
}
.home-page .section-upload .cta-check-toggle .check-switch input:hover:checked + .label .text-uncheck::before, .home-page .section-upload .cta-check-toggle .check-switch input:focus-visible:checked + .label .text-uncheck::before {
  transition-duration: 0.3s;
  background-image: url(/_next/static/media/ico-mode-minimal-lightgray@2x.429c2571.png);
}
.home-page .section-upload .cta-check-toggle .check-switch input:hover:not(:checked) + .label .text-checked, .home-page .section-upload .cta-check-toggle .check-switch input:focus-visible:not(:checked) + .label .text-checked {
  font-weight: 400;
  color: #6b7280;
}
.home-page .section-upload .cta-check-toggle .check-switch input:hover:not(:checked) + .label .text-checked::before, .home-page .section-upload .cta-check-toggle .check-switch input:focus-visible:not(:checked) + .label .text-checked::before {
  transition-duration: 0.3s;
  background-image: url(/_next/static/media/ico-mode-ally-lightgray@2x.40c4b0e1.png);
}
.home-page .section-upload .cta-check-toggle .check-switch .text-checked,
.home-page .section-upload .cta-check-toggle .check-switch .text-uncheck {
  position: relative;
  display: block !important;
  width: 50%;
  opacity: 1;
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.4;
  z-index: 1;
}
.home-page .section-upload .cta-check-toggle .check-switch .text-checked::before,
.home-page .section-upload .cta-check-toggle .check-switch .text-uncheck::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 2px;
}
.home-page .section-upload .cta-check-toggle .check-switch .text-checked::before {
  background-image: url(/_next/static/media/ico-mode-ally-lightgray@2x.40c4b0e1.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.home-page .section-upload .cta-check-toggle .check-switch .text-uncheck::before {
  background-image: url(/_next/static/media/ico-mode-minimal-lightgray@2x.429c2571.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 1024.98px) {
  .home-page .section-upload .cta-check-toggle {
    max-width: 100%;
  }
}
.home-page .btn-ai-generate {
  background-color: #000;
  border-radius: 11px;
  color: #fff;
}
.home-page .btn-ai-generate:disabled {
  background-color: #7f7f7f;
}
@media (max-width: 1024.98px) {
  .home-page .btn-ai-generate {
    width: 100%;
  }
}
.home-page .upload-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  background: url(/_next/static/media/bg-upload@2x.7acaa45d.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.home-page .upload-wrap .multiple-dropzone {
  height: 204px;
  background-color: transparent;
  border-color: #d1d5db;
}
.home-page .upload-wrap .multiple-dropzone .guide-text .text-sm {
  font-size: 16px !important;
}
.home-page .upload-wrap .multiple-dropzone .guide-text .text-custom {
  font-size: 14px;
}
.home-page .upload-wrap .multiple-dropzone .btn-file {
  text-underline-offset: 2px;
}
@media (min-width: 1025px) {
  .home-page .upload-wrap .multiple-dropzone {
    max-width: 450px;
    width: 100%;
  }
}
.home-page .upload-file-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 204px;
  padding: 20px 20px 12px;
  border: 1px dashed #d1d5db;
  border-radius: 16px;
}
.home-page .upload-file-area .upload-item {
  width: 100%;
}
.home-page .upload-file-area .file-info {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-block: 9px;
}
.home-page .upload-file-area .img-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}
.home-page .upload-file-area .img-area > img {
  object-fit: contain;
}
.home-page .upload-file-area .info-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.home-page .upload-file-area .filename {
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.home-page .upload-file-area .filesize {
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}
.home-page .upload-file-area .progress-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 16px;
  margin-top: 10px;
}
.home-page .upload-file-area .progress-area .progress-bar {
  flex: 1 1 auto;
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.home-page .upload-file-area .progress-area .progress-bar .progress-value {
  height: 100%;
  background: #1364ff;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.home-page .upload-file-area .progress-area .progress-bar::-webkit-progress-bar {
  background: #dbeafe;
  border-radius: 3px;
}
.home-page .upload-file-area .progress-area .progress-bar::-webkit-progress-value {
  background: #1364ff;
  border-radius: 3px;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.home-page .upload-file-area .progress-area .progress-bar::-moz-progress-bar {
  background: #1364ff;
  border-radius: 2px;
  -moz-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.home-page .upload-file-area .progress-area .progress-text {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
}
.home-page .upload-file-area .btn-delete {
  position: absolute;
  top: 0;
  right: calc(50% - 48px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  background: #6b7280;
  border-radius: 50%;
  z-index: 10;
}
.home-page .blocked-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  z-index: 10;
}
.home-page .blocked-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: url(/_next/static/media/bg-blocked@2x.681b020e.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  filter: blur(2px);
  overflow: hidden;
}
.home-page .blocked-wrap .blocked-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.home-page .blocked-wrap .blocked-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  height: 100%;
  padding: 20px;
  color: #fff;
  z-index: 10;
}
.home-page .blocked-wrap .blocked-inner .title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}
.home-page .blocked-wrap .blocked-inner .desc {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}
.home-page .blocked-wrap .blocked-inner .text-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 33px;
  padding-inline: 2px;
  background: #bafd02;
  border-radius: 6px;
  color: #000;
  line-height: 1;
}
@media (max-width: 1024.98px) {
  .home-page .blocked-wrap {
    border-radius: 20px;
  }
  .home-page .blocked-wrap .blocked-inner .title {
    font-size: 24px;
  }
  .home-page .blocked-wrap .blocked-inner .text-accent {
    margin-right: 2px;
    min-height: 29px;
    line-height: 0.8;
  }
}
@media (max-width: 767.98px) {
  .home-page .blocked-wrap::before {
    background-size: cover;
  }
}
.home-page .result-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}
.home-page .result-wrap .result-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: 16px 20px 36px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 16px 16px 0 0;
  background: #f9fafb;
  overflow: hidden;
}
.home-page .result-wrap .result-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: -34px;
  padding: 24px 20px 20px;
  border-radius: 16px;
  z-index: 1;
}
.home-page .result-wrap .result-content::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2px);
  height: calc(100% - 4px);
  background: #fff url(/_next/static/media/bg-result-content@2x.b88c2fa7.png);
  background-size: 498px auto;
  background-position: top left;
  background-repeat: no-repeat;
  border-radius: 16px;
}
.home-page .result-wrap .result-content .border-1 {
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(160deg, #d1ed7b 0%, #a0eae8 39%, #97b3eb 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border-radius: 16px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.home-page .result-wrap .file-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 100%;
}
.home-page .result-wrap .file-info .img-area {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}
.home-page .result-wrap .file-info .img-area > img {
  object-fit: contain;
}
.home-page .result-wrap .info-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 52px);
}
.home-page .result-wrap .filename {
  width: 100%;
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
  text-align: left;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.home-page .result-wrap .filesize {
  width: 100%;
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
  text-align: left;
}
.home-page .result-wrap .content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 18px;
  font-weight: 700;
  color: #0f1318;
}
.home-page .result-wrap .content-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  z-index: 1;
}
.home-page .result-wrap .content-desc {
  width: 100%;
}
.home-page .result-wrap .content-desc .desc {
  line-height: 1.4;
  font-weight: 500;
  color: #0f1318;
}
.home-page .result-wrap .content-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}
.home-page .result-wrap .content-title {
  display: flex;
  align-items: center;
  font-weight: 700;
}
.home-page .result-wrap .detail-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}
.home-page .result-wrap .detail-item .item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 20px;
  background: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
  padding-left: 8px;
  font-weight: 400;
  font-size: 12px;
  color: #4b5563;
}
.home-page .result-wrap .detail-item .alttext-textarea {
  position: relative;
  width: 100%;
  padding: 0;
  background-color: #fff;
}
.home-page .result-wrap .detail-item .alttext-textarea .textarea {
  resize: none;
  width: 100%;
  height: 100%;
  padding: 9px 12px;
  background-color: #fff;
  border: none;
  font-size: 16px;
  color: #0f1318;
  line-height: 1.3;
}
.home-page .result-wrap .detail-item .alttext-textarea .textarea:focus {
  outline: none;
}
.home-page .result-wrap .detail-item .alttext-textarea .textarea::placeholder {
  color: #9ca3af;
}
.home-page .result-wrap .detail-item .alttext-textarea .count-text {
  padding: 1px;
  background-color: #fff;
  border-radius: 4px;
}
.home-page .result-wrap .detail-item .alttext-title {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 400;
}
.home-page .result-wrap .detail-item .btn-copy-default {
  gap: 0;
  font-weight: 400;
}
.home-page .result-wrap .description-area .alttext-textarea .textarea {
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 12px;
  color: #1a212b;
  line-height: 1.4;
}
.home-page .result-wrap .result-mode {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}
.home-page .result-wrap .result-mode > dt {
  font-weight: 400;
  color: #6b7280;
}
.home-page .result-wrap .result-mode > dd {
  font-weight: 500;
  color: #4b5563;
}
.home-page .result-wrap .result-mode .label-mode {
  display: flex;
  align-items: center;
  gap: 2px;
}
.home-page .result-wrap .label-img-type {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 22px;
  margin-inline: 2px;
  padding: 1px 3px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  color: #1f2937;
  line-height: 1;
}

.result-type-test-panel {
  position: fixed;
  top: 100px;
  right: 0;
  width: 66px;
  padding: 10px 4px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1000;
}
.result-type-test-panel .panel-title {
  display: inline-block;
  width: 100%;
  margin-bottom: 12px;
  font-size: 10px;
  text-align: right;
  line-height: 1.2;
}
.result-type-test-panel .panel-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
}
.result-type-test-panel .panel-buttons .btn {
  width: 100%;
  padding-inline: 2px;
  height: auto;
}

.notice-page {
  min-height: 100vh;
  background-color: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  line-height: 1.6;
  color: #1f2937;
  /* Header */
  /* Main Content */
  /* Typography Hierarchy */
  /* Sections */
  /* CTA Button */
  /* Footer */
  /* Responsive */
}
.notice-page .container {
  width: 100%;
  max-width: 600px;
  background: white;
  margin: 20px auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  overflow: hidden;
  padding: 52px 50px;
}
.notice-page .header {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 32px;
  border-bottom: 1px solid #d9d9d9;
  font-size: 14px;
  color: #4b5563;
}
.notice-page .logo-image {
  width: auto;
  height: 32px;
  display: block;
}
.notice-page .main-content {
  padding: 48px 0;
  border-bottom: 1px solid #d9d9d9;
}
.notice-page .main-title {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.56px;
  line-height: 39px;
  margin-bottom: 20px;
}
.notice-page .section-title {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.56px;
  line-height: 39px;
  margin-bottom: 16px;
}
.notice-page .highlight-info {
  font-size: 20px;
  font-weight: 700;
  color: #1364ff;
  letter-spacing: -0.4px;
  line-height: 28px;
  margin-bottom: 12px;
}
.notice-page .body-text {
  font-size: 16px;
  font-weight: 400;
  color: #4b5563;
  letter-spacing: -0.32px;
  line-height: 24px;
  margin-bottom: 20px;
}
.notice-page .body-text:last-child {
  margin-bottom: 0;
}
.notice-page .section + .section {
  margin-top: 48px;
}
.notice-page .cta-button {
  display: inline-block;
  padding: 16px 20px;
  border-radius: 11px;
  background: #1364ff;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
  box-shadow: 0 4px 6px rgba(19, 100, 255, 0.25);
}
.notice-page .cta-button:hover {
  background: #0f52d9;
  color: white;
  text-decoration: none;
}
.notice-page .footer {
  padding-top: 32px;
  text-align: left;
}
.notice-page address {
  font-style: normal;
}
.notice-page address p {
  margin-bottom: 4px;
}
.notice-page .footer-links {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #6b7280;
  line-height: 20px;
  letter-spacing: -0.14px;
  margin-bottom: 16px;
}
.notice-page .footer-links a {
  text-decoration: none;
  font-weight: 500;
}
.notice-page .footer-links a:hover {
  text-decoration: underline;
}
.notice-page .footer-links .divider {
  margin: 0 12px;
  color: #9ca3af;
  font-size: 10px;
  opacity: 0.6;
}
.notice-page .company-info {
  font-size: 13px;
  color: #6b7280;
  line-height: 18px;
  letter-spacing: -0.13px;
  margin-bottom: 8px;
}
.notice-page .company-info strong {
  color: #1f2937;
  font-weight: 600;
}
.notice-page .copyright {
  font-size: 12px;
  color: #9ca3af;
  line-height: 16px;
  letter-spacing: -0.12px;
}
@media (max-width: 640px) {
  .notice-page .container {
    border-radius: 12px;
    box-shadow: none;
    padding: 0;
    background: none;
  }
  .notice-page .logo-image {
    height: 20px;
  }
  .notice-page .main-title,
  .notice-page .section-title {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.48px;
  }
  .notice-page .highlight-info {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.36px;
  }
  .notice-page .body-text {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.3px;
  }
  .notice-page .footer-links {
    font-size: 13px;
  }
  .notice-page .footer-links .divider {
    margin: 0 8px;
  }
  .notice-page .company-info {
    font-size: 12px;
  }
  .notice-page .copyright {
    font-size: 11px;
  }
}

.service-overview .slider-container {
  display: flex;
  overflow: hidden;
}
.service-overview .slider-container .service-item {
  position: relative;
  display: none;
  flex: 0 0 auto;
  width: 1200px;
  height: 400px;
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.service-overview .slider-container .service-item.active {
  display: flex;
  opacity: 1;
}
.service-overview .slider-container .service-item .info {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 48px;
  color: #000;
  background: #fff;
  transition: width 1s ease-in-out 3s;
  width: 50%;
}
.service-overview .slider-container .service-item .info .subject {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  animation: fadeIn 1s forwards;
}
.service-overview .slider-container .service-item .info .subject .copy {
  font-size: 28px;
  font-weight: bold;
  color: var(--black, #000);
}
.service-overview .slider-container .service-item .info .subject .desc {
  display: none;
  margin-top: 4px;
  font-size: 16px;
  color: var(--gray-text-secondary, #4b5563);
}
.service-overview .slider-container .service-item .info dd {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.service-overview .slider-container .service-item .info dd .chat {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.service-overview .slider-container .service-item .info dd .chat li {
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(20px); /* 추가 */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out; /* 수정 */
}
.service-overview .slider-container .service-item .info dd .chat li:nth-child(1) {
  animation: fadeInUp 1s forwards 1s; /* 수정 */
}
.service-overview .slider-container .service-item .info dd .chat li:nth-child(2) {
  animation: fadeInUp 1s forwards 1.6s; /* 수정 */
}
.service-overview .slider-container .service-item .info dd .chat li.left {
  justify-content: start;
}
.service-overview .slider-container .service-item .info dd .chat li.right {
  justify-content: end;
  flex-direction: row-reverse;
}
.service-overview .slider-container .service-item .info dd .chat li.right .comment {
  border-radius: 24px 2px 24px 24px;
}
.service-overview .slider-container .service-item .info dd .chat li .emoji {
  flex: 0 0 auto;
  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  background: var(--primary300, #bfdbfe);
  font-size: 16px;
  line-height: 1;
}
.service-overview .slider-container .service-item .info dd .chat li .comment {
  max-width: 300px;
  padding: 16px;
  border-radius: 2px 24px 24px 24px;
  background: var(--gray100, #f3f4f6);
  color: var(--gray-text-secondary, #4b5563);
}
.service-overview .slider-container .service-item .info dd .chat li .comment strong {
  color: var(--black, #000);
}
.service-overview .slider-container .service-item .info dd .btn {
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  animation: fadeIn 1s forwards 2.2s;
}
.service-overview .slider-container .service-item .visual {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
.service-overview .slider-container .service-item .visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -100px;
  right: -100px;
  top: -200px;
  bottom: -200px;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px); /* 블러 효과 */
  transform: translate(50%, 0%, 0);
}
.service-overview .slider-container .service-item .visual .img-content {
  width: 600px;
  height: 400px;
  vertical-align: top;
  transition: transform 0.5s ease-in-out;
}
.service-overview .slider-container .service-item .visual.shrink::after {
  left: 50%;
  right: 50%;
  top: 50%;
  bottom: 50%;
  transition: 1s;
}
.service-overview .paging {
  margin-top: 24px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: #fff;
}
.service-overview .paging .btn-paging {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: 12px;
  height: 12px;
  border: 1px solid var(--gray400, #9ca3af);
  border-radius: 6px;
  transition: 1s;
}
.service-overview .paging .btn-paging.active {
  font-weight: bold;
  width: 32px;
  height: 12px;
  background: var(--white, #fff);
  border-color: transparent;
}
.service-overview .paging .btn-control {
  margin-left: 8px;
  width: 20px;
  height: 20px;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* 추가 */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* 추가 */
  }
}
@media (max-width: 1024.98px) {
  .service-overview .slider-container .service-item {
    width: 100%;
    height: 420px;
  }
  .service-overview .slider-container .service-item .info {
    height: 420px;
    padding: 40px 32px;
  }
  .service-overview .slider-container .service-item .info .chat {
    margin-bottom: 20px;
  }
  .service-overview .slider-container .service-item .visual .img-content {
    width: auto;
    height: 100%;
  }
}
@media (max-width: 767.98px) {
  .service-overview .slider-container .service-item {
    flex-direction: column;
    height: auto;
  }
  .service-overview .slider-container .service-item.active {
    display: flex;
  }
  .service-overview .slider-container .service-item .info {
    max-width: 600px;
    width: auto;
    padding: 32px 28px;
    margin: auto;
    height: auto;
  }
  .service-overview .slider-container .service-item .info .subject {
    text-align: center;
    padding: 0 20px;
    word-break: keep-all;
  }
  .service-overview .slider-container .service-item .info dd {
    align-items: stretch;
  }
  .service-overview .slider-container .service-item .info .chat {
    font-size: 14px;
    margin-bottom: 0;
  }
  .service-overview .slider-container .service-item .visual {
    position: relative;
    width: auto;
  }
  .service-overview .slider-container .service-item .visual .img-content {
    width: 100%;
    height: auto;
  }
  .service-overview .slider-container .service-item .btn-group {
    display: none;
  }
}

.promo-page.url-scan-page {
  display: flex;
  flex-direction: column;
}
.promo-page .scan-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  min-height: 584px;
  padding: 80px 40px;
  background-image: url(/_next/static/media/bg-scan@2x.880f2fb7.png);
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.promo-page .scan-section:has(.scan-preview) {
  padding-bottom: 0;
}
.promo-page .scan-header {
  text-align: center;
}
.promo-page .scan-header .title {
  font-weight: 700;
  font-size: 52px;
  color: #0f1318;
  line-height: 1.4;
}
.promo-page .scan-header .desc {
  margin-top: 6px;
  font-weight: 400;
  font-size: 18px;
  color: #1f2937;
  line-height: 1.5;
}
.promo-page .scan-header .desc strong {
  font-weight: 700;
}
@media (max-width: 767.98px) {
  .promo-page .scan-header .title {
    font-size: 40px;
  }
}
.promo-page .scan-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 720px;
}
.promo-page .scan-content.full {
  max-width: 1100px;
}
.promo-page .scan-content.full .scan-result {
  max-width: 1100px;
}
.promo-page .scan-content .spinner-wrapper {
  border-radius: 20px;
  border: 1px solid #e5e7eb;
}
.promo-page .scan-content .spinner-wrapper .spinner-message {
  color: #1f2937;
}
.promo-page .scan-content .scan-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}
.promo-page .scan-content .scan-form form {
  width: 100%;
}
.promo-page .scan-content .scan-form .form-control {
  width: 100%;
}
.promo-page .scan-content .scan-form .form-control::placeholder {
  color: #6b7280;
}
.promo-page .scan-content .check-toggle {
  margin-block: 0;
}
.promo-page .scan-content .check-toggle .check-switch {
  justify-content: center;
  width: 216px;
}
.promo-page .scan-content .check-toggle .check-switch:hover .label::before, .promo-page .scan-content .check-toggle .check-switch:focus-visible .label::before {
  background-image: none;
  background-color: #dbeafe;
  border: 1px solid rgba(19, 100, 255, 0.3);
}
.promo-page .scan-content .check-toggle .check-switch:hover input + .label .text-checked,
.promo-page .scan-content .check-toggle .check-switch:hover input + .label .text-uncheck, .promo-page .scan-content .check-toggle .check-switch:focus-visible input + .label .text-checked,
.promo-page .scan-content .check-toggle .check-switch:focus-visible input + .label .text-uncheck {
  opacity: 1;
}
.promo-page .scan-content .check-toggle .check-switch .label::before {
  background-image: none;
  background-color: #fff;
  border: 1px solid #bfdbfe;
}
.promo-page .scan-content .check-toggle .check-switch .label::after {
  background-color: #1364ff;
}
.promo-page .scan-content .scan-form-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.promo-page .url-form {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 450px;
}
.promo-page .url-form .url-form-inner {
  flex: 1 1 auto;
}
.promo-page .url-form .form-control {
  width: 300px;
  padding-inline: 20px;
  border-radius: 11px;
  border: 2px solid #1364ff;
}
.promo-page .url-form .btn-submit {
  flex: 0 0 auto;
  padding-inline: 10px;
  border-radius: 11px;
}
.promo-page .url-form .btn-submit:disabled {
  background: #1364ff;
}
.promo-page .url-form:has(.error-text) {
  margin-bottom: 24px;
}
.promo-page .url-form .error-text {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  margin-top: 0;
  padding-inline: 8px;
  font-weight: 400;
  color: #ef4444;
  z-index: 10;
}
@media (min-width: 768px) {
  .promo-page .url-form .form-control {
    width: 300px;
    border-radius: 11px 0 0 11px;
    border: 2px solid #1364ff;
    border-right: 0;
  }
  .promo-page .url-form .btn-submit {
    flex: 0 0 auto;
    width: 150px;
    border-radius: 0 11px 11px 0;
  }
}
@media (max-width: 767.98px) {
  .promo-page .url-form {
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 420px;
  }
  .promo-page .url-form .error-text {
    position: relative;
    margin-top: 6px;
  }
  .promo-page .url-form:has(.error-text) {
    margin-bottom: 0;
  }
}
.promo-page .scan-preview {
  display: flex;
  width: 100%;
  max-width: 970px;
  max-height: 546px;
  margin-top: 8px;
}
.promo-page .scan-preview img {
  width: 100%;
  height: auto;
  object-fit: contain;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 4px 28px 0 rgba(0, 0, 0, 0.15);
}
@media (max-width: 1024.98px) {
  .promo-page .scan-preview {
    max-width: 970px;
    max-height: 530px;
  }
}
.promo-page .scan-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 1224px;
}
.promo-page .scan-result .top-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}
.promo-page .result-box {
  width: 100%;
  height: 100%;
  min-height: 130px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
}
.promo-page .result-box .result-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
}
.promo-page .result-box .result-data {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 24px;
  font-weight: 500;
  font-size: 20px;
  color: #1f2937;
}
.promo-page .result-box .result-data dt {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 84px;
  min-height: 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #4b5563;
}
.promo-page .result-box .result-data dd {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: 24px;
  max-width: calc(100% - 94px);
}
.promo-page .result-box .result-data .mode-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}
.promo-page .result-box .result-data .mode-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: #6b7280;
}
.promo-page .result-box .result-url {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.promo-page .result-box .result-url .ico {
  flex: 0 0 auto;
}
.promo-page .result-box .result-url .url-link {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  font-weight: 500;
  font-size: 20px;
  color: #1f2937;
  font-size: 14px;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.promo-page .result-box .result-url .url-link:hover, .promo-page .result-box .result-url .url-link:focus-visible {
  color: #1364ff;
}
.promo-page .result-box .result-text {
  display: block;
  width: 100%;
  font-weight: 500;
}
.promo-page .result-box .result-text + .result-guide {
  margin-top: 4px;
}
.promo-page .result-box .result-guide {
  width: 100%;
  font-weight: 400;
  font-size: 14px;
  color: #4b5563;
}
.promo-page .result-box .result-list {
  position: relative;
  height: 478px;
  overflow: hidden;
}
.promo-page .result-box .result-list .alttext-img-list {
  max-width: 1100px;
}
.promo-page .result-box .result-list .alttext-img-list .panel {
  min-width: auto;
}
@media (max-width: 767.98px) {
  .promo-page .result-box .result-list {
    min-height: 522px;
  }
}
.promo-page .result-box .result-promo {
  position: absolute;
  top: 82px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(50% - 2px);
  max-width: 547px;
  height: 100%;
  height: calc(100% - 82px);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 100;
}
.promo-page .result-box .result-promo .promo-text {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #0f1318;
  letter-spacing: -0.22px;
}
.promo-page .result-box .result-promo .promo-text .accent-text {
  font-weight: 700;
  color: #1364ff;
}
.promo-page .result-box .result-promo .promo-text .bg-accent {
  display: inline-block;
  height: 28px;
  padding: 0 1px;
  background: #bafd02;
  border-radius: 5px;
  font-weight: 700;
  line-height: 1.2;
}
.promo-page .result-box .result-promo .promo-title {
  font-weight: 700;
  font-size: 28px;
  text-align: center;
  color: #fff;
}
.promo-page .result-box .result-promo .promo-desc {
  margin-bottom: 8px;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  color: #fff;
  opacity: 0.8;
}
.promo-page .result-box .result-promo .btn-start {
  margin-top: 12px;
}
@media (max-width: 900px) {
  .promo-page .result-box .result-promo .promo-text {
    font-size: 18px;
  }
  .promo-page .result-box .result-promo .promo-text .bg-accent {
    height: 22px;
  }
}
@media (max-width: 767.98px) {
  .promo-page .result-box {
    max-width: 640px;
  }
  .promo-page .result-box .result-data {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px 10px;
  }
  .promo-page .result-box .result-data dt {
    min-height: 20px;
  }
  .promo-page .result-box .result-data dd {
    flex-direction: column;
    align-items: flex-start;
    min-height: 18px;
    max-width: 100%;
  }
  .promo-page .result-box .result-data dd .url-link {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    max-height: 2.6;
    line-height: 1.3;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
    flex-shrink: 1;
  }
  .promo-page .result-box .result-promo {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    gap: 12px;
    height: 318px;
    padding: 60px 20px 40px 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 8.33%, #fff 40.42%);
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
  }
  .promo-page .result-box .btn-start {
    max-width: 280px;
    width: 100%;
  }
}
.promo-page .check-toggle {
  margin-left: 16px;
}
.promo-page .scan-section.result-section {
  gap: 32px;
  background-image: none;
  background: #f1fbfe;
}
@media (max-width: 1024.98px) {
  .promo-page .scan-section {
    background-size: 1024px auto;
  }
}
@media (max-width: 767.98px) {
  .promo-page .scan-section {
    padding-inline: 20px;
  }
}
.promo-page .result-section .result-top {
  position: relative;
  min-height: 104px;
  padding: 28px 24px 24px;
  background-image: url(/_next/static/media/bg-scan-sm@2x.6d85bf51.png);
  background-size: 448px auto;
  background-position: left top;
  background-repeat: no-repeat;
}
.promo-page .result-section .empty-result {
  width: 50%;
  min-height: 396px;
}
@media (max-width: 767.98px) {
  .promo-page .result-section .result-top {
    gap: 12px;
    padding: 20px;
  }
}

.scan-step-area {
  height: 52px;
  margin: 0 auto;
}
.scan-step-area ol {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.scan-step-area .step-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 80px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 400;
}
.scan-step-area .step-item strong {
  font-weight: 400;
  color: #4b5563;
  font-size: 14px;
}
.scan-step-area .step-item .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-block: 3px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d1d5db;
  color: #4b5563;
  font-size: 12px;
  font-weight: 500;
  z-index: 1;
}
.scan-step-area .step-item:not(:last-child)::after {
  position: absolute;
  top: 13px;
  left: 50%;
  content: "";
  width: 100%;
  height: 1px;
  background: #d1d5db;
}
.scan-step-area .step-item.active strong {
  color: #1f2937;
  font-weight: 700;
}
.scan-step-area .step-item.active .num {
  border-color: #0658f5;
  background: #0658f5;
  color: #fff;
  font-weight: 400;
  outline: 3px solid #bfdbfe;
  outline-offset: 0px;
  animation: outline-pulse 1.5s ease-in-out infinite;
}
@keyframes outline-pulse {
  0%, 100% {
    outline-color: #bfdbfe;
    outline-width: 3px;
  }
  50% {
    outline-color: #eff6ff;
    outline-width: 3px;
  }
}

.result-loading {
  position: absolute;
  top: 82px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: calc(100% - 2px);
  height: calc(100% - 82px);
  padding: 48px 20px;
  background-color: #fff;
  z-index: 100;
}
.result-loading .loading-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 60px;
  width: 100%;
  max-width: 564px;
}
.result-loading .loading-content .left {
  flex: 0 0 auto;
}
.result-loading .loading-content .right {
  flex: 1 1 auto;
}
.result-loading .loading-content .info-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 204px;
  margin-bottom: 20px;
}
.result-loading .loading-content .info-area .loading-title {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #0f1318;
}
.result-loading .loading-content .info-area .loading-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.14px;
  text-align: center;
  color: #4b5563;
}
.result-loading .loading-content .steps-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-top: 4px;
}
.result-loading .loading-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.result-loading .loading-steps .step-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  min-height: 1.3;
  color: #1f2937;
}
.result-loading .loading-steps .step-item .step-content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.result-loading .loading-steps .step-item .step-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.result-loading .loading-steps .step-item .step-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.result-loading .loading-steps .step-item .step-icon-svg {
  display: block;
  width: 22px;
  height: 22px;
}
.result-loading .loading-steps .step-item .step-icon-lottie-inner {
  width: 22px;
  height: 22px;
}
.result-loading .loading-steps .step-item .step-lottie-test-inner {
  width: 18px;
  height: 18px;
}
.result-loading .loading-steps .step-item .step-icon-spinner {
  animation: spinner-rotate 0.9s linear infinite;
  transform-origin: center;
}
.result-loading .loading-steps .step-item .step-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 20px;
}
.result-loading .loading-steps .step-item.step-active .step-text {
  font-weight: 700;
}
.result-loading .loading-steps .step-item.step-completed .step-text {
  color: #6b7280;
}
.result-loading .loading-steps .step-item .step-progress {
  width: 272px;
  height: 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 999px;
  overflow: hidden;
}
.result-loading .loading-steps .step-item .step-progress::-webkit-progress-bar {
  background-color: #e5e7eb;
  border-radius: 999px;
}
.result-loading .loading-steps .step-item .step-progress::-webkit-progress-value {
  background-color: #1364ff;
  border-radius: 999px;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.result-loading .loading-steps .step-item .step-progress::-moz-progress-bar {
  background-color: #1364ff;
  border-radius: 999px;
}
.result-loading .loading-steps .step-item .infinite-progress {
  width: 272px;
}
.result-loading .loading-steps .step-item .infinite-progress .progress-bar-container {
  width: 100%;
}
.result-loading .loading-steps .step-item .infinite-progress .progress-bar-container .progress-bar {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.result-loading .loading-steps .step-item .infinite-progress .progress-bar-container .progress-bar .progress-fill {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, #006aff, #01fff7, #006aff, #01fff7, #006aff);
  background-size: 300%;
  animation: slide 10s linear infinite;
}
@keyframes slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 300%;
  }
}
@media (max-width: 767.98px) {
  .result-loading {
    min-height: calc(100% - 82px);
    height: auto;
    padding-block: 40px;
  }
  .result-loading .loading-content {
    flex-direction: column;
    gap: 20px;
  }
  .result-loading .loading-content .info-area {
    margin-bottom: 0;
  }
  .result-loading .loading-content .info-area .loading-title {
    margin-top: 0;
    font-size: 20px;
  }
  .result-loading .loading-content .steps-area {
    gap: 12px;
    width: 100%;
    max-width: 280px;
    margin-top: 0;
  }
  .result-loading .loading-steps {
    width: 100%;
  }
  .result-loading .loading-steps .step-item .step-progress {
    width: 100%;
  }
  .result-loading .loading-steps .step-item .infinite-progress {
    width: 100%;
  }
  .result-loading .ico-page-loading {
    width: 64px;
    height: 64px;
    line-height: 64px;
  }
}

.result-list:has(.result-loading) .alttext-img-list .alttext-item::before {
  display: none !important;
}

.plugin-landing-page {
  background: #13151a;
  color: white;
  line-height: 1.6;
}
.plugin-landing-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.plugin-landing-page .desc {
  text-align: center;
}
.plugin-landing-page h1,
.plugin-landing-page h2,
.plugin-landing-page h3 {
  font-weight: bold;
  line-height: 1.4;
}
.plugin-landing-page img {
  vertical-align: top;
}
.plugin-landing-page .btn-xl {
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 48px;
}
.plugin-landing-page .badge {
  display: inline-block;
  background: rgba(186, 253, 2, 0.1);
  border: 1px solid #bafd02;
  color: #bafd02;
  padding: 8px 16px;
  border-radius: 24px;
  margin-bottom: 24px;
}
.plugin-landing-page .early-tag {
  padding: 8px 16px;
  border-radius: 4px;
  opacity: 0.8;
  font-weight: normal;
}
.plugin-landing-page .button {
  display: inline-block;
  background: #0066ff;
  color: white;
  padding: 16px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.2s;
}
.plugin-landing-page .button:hover {
  transform: translateY(-2px);
}
.plugin-landing-page section {
  padding: 100px 0;
}
.plugin-landing-page section h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}
.plugin-landing-page .hero {
  background: #1a1a1a;
  text-align: center;
}
.plugin-landing-page .hero h1 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  font-weight: 700;
}
.plugin-landing-page .hero .hero-description {
  font-size: 1.25rem;
  margin-bottom: 2rem;
}
.plugin-landing-page .features {
  background: linear-gradient(180deg, #1a1a1a 0%, #13151a 100%);
}
.plugin-landing-page .features .features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px;
  gap: 32px;
}
.plugin-landing-page .features .feature-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 32px;
  transition: transform 0.3s;
}
.plugin-landing-page .features .feature-card svg {
  display: block;
  margin-bottom: 8px;
}
.plugin-landing-page .features .feature-card:hover {
  transform: translateY(-8px);
}
.plugin-landing-page .features .feature-card .feature-icon {
  width: 48px;
  height: 48px;
  background: #0066ff;
  border-radius: 12px;
  margin-bottom: 24px;
}
.plugin-landing-page .features .feature-card h3 {
  margin-bottom: 1rem;
  font-size: 22px;
}
.plugin-landing-page .target-users {
  background: linear-gradient(to bottom, #13151a 0%, #13151a 40%, #0a0a0a 70%, #000 100%);
}
.plugin-landing-page .target-users .users-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 24px;
  gap: 24px;
}
.plugin-landing-page .target-users .user-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 32px;
}
.plugin-landing-page .target-users .user-card h3 {
  margin-bottom: 1rem;
}
.plugin-landing-page .target-users .user-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.plugin-landing-page .target-users .user-card ul li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.plugin-landing-page .target-users .user-card ul li:before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background-color: #bafd02;
}
.plugin-landing-page .ai-tech {
  background: linear-gradient(180deg, #003db1 0%, #1364ff 100%);
  text-align: center;
}
.plugin-landing-page .ai-tech .tech-description {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}
.plugin-landing-page .ai-tech .tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px;
  gap: 32px;
}
.plugin-landing-page .ai-tech .tech-card {
  background: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 32px;
}
.plugin-landing-page .ai-tech .tech-card h3 {
  margin-bottom: 4px;
}
.plugin-landing-page .ai-tech .tech-visual {
  margin-top: 20px;
}
.plugin-landing-page .ai-tech .tech-visual .img-cert1 {
  max-width: 465px;
}
.plugin-landing-page .ai-tech .tech-visual .img-cert2 {
  max-width: 391px;
}
.plugin-landing-page .ai-tech .tech-visual .tech-cert {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 32px;
}
.plugin-landing-page .ai-tech .tech-visual .screen-container {
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.plugin-landing-page .ai-tech .tech-visual .screen-container .youtube-movie {
  position: absolute;
  width: 95.52%;
  top: 3%;
  bottom: 3%;
  aspect-ratio: 16/9.7;
  left: 2.24%;
  right: 2.24%;
}
.plugin-landing-page .ai-tech .tech-visual .img-a11y {
  margin-top: -1px;
  max-width: 1000px;
}
.plugin-landing-page .process {
  background: rgba(0, 102, 255, 0.0509803922);
}
.plugin-landing-page .process .timeline {
  position: relative;
  max-width: 800px;
  margin: 40px auto 0;
  padding: 60px 0 100px;
}
.plugin-landing-page .process .timeline:before {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, #13151a 0%, #0066ff 5%, #0066ff 100%);
  transform: translateX(-50%);
  top: 0;
}
.plugin-landing-page .process .timeline-item {
  margin-bottom: 40px;
  position: relative;
}
.plugin-landing-page .process .timeline-item:last-child {
  margin-bottom: 0;
}
.plugin-landing-page .process .timeline-content {
  width: calc(50% - 30px);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 32px;
  position: relative;
}
.plugin-landing-page .process .timeline-item:nth-child(odd) .timeline-content {
  margin-left: calc(50% + 30px);
}
.plugin-landing-page .process .timeline-number {
  position: absolute;
  width: 36px;
  height: 36px;
  background: #bafd02;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #1a1a1a;
  left: 50%;
  top: 50%;
  margin-top: -18px;
  transform: translateX(-50%);
  z-index: 1;
  /* 그라데이션 배경 설정 */
  background: radial-gradient(circle at center, #bafd02 0%, #bafd02 30%, rgba(19, 21, 26, 0.6) 70%, rgba(19, 21, 26, 0.4) 90%, #13151a 100%);
  box-shadow: 0 0 15px rgba(186, 253, 2, 0.4);
}
.plugin-landing-page .partners {
  background: linear-gradient(to bottom, #13151a 0%, #0a0a0a 100%);
  text-align: center;
  padding: 100px 0 120px;
}
.plugin-landing-page .partners h2 {
  margin-bottom: 1rem;
}
.plugin-landing-page .partners .partners-subtitle {
  max-width: 700px;
  margin: 0 auto 60px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
}
.plugin-landing-page .partners .partners-showcase {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.plugin-landing-page .partners .partners-group {
  position: relative;
}
.plugin-landing-page .partners .partners-header {
  margin-bottom: 20px;
}
.plugin-landing-page .partners .partners-badge {
  display: inline-block;
  background: rgba(186, 253, 2, 0.05);
  color: #fff;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 400;
  line-height: 130%; /* 18.2px */
  background: rgba(255, 255, 255, 0.1);
}
.plugin-landing-page .partners .partners-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 60px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}
.plugin-landing-page .partners .partners-group:last-child .partners-list:after {
  display: none;
}
.plugin-landing-page .partners .partner-item img {
  height: 82px;
}
.plugin-landing-page .partners .partners-metrics {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.plugin-landing-page .partners .metric-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  padding: 24px 40px;
  min-width: 200px;
  transition: all 0.3s ease;
}
.plugin-landing-page .partners .metric-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  line-height: 1;
  margin-bottom: 8px;
}
.plugin-landing-page .partners .metric-number .metric-plus {
  color: #bafd02;
  font-size: 2rem;
  vertical-align: top;
  position: relative;
  top: -5px;
}
.plugin-landing-page .partners .metric-label {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
}
@media (max-width: 1024.98px) {
  .plugin-landing-page .partners .partners-list {
    gap: 40px;
  }
  .plugin-landing-page .partners .partner-item img {
    height: 60px;
  }
  .plugin-landing-page .partners .metric-number {
    font-size: 2.2rem;
  }
  .plugin-landing-page .partners .metric-number .metric-plus {
    font-size: 1.8rem;
  }
}
@media (max-width: 767.98px) {
  .plugin-landing-page .partners {
    padding: 80px 0 100px;
  }
  .plugin-landing-page .partners .partners-subtitle {
    font-size: 1rem;
    word-break: keep-all;
    margin-bottom: 40px;
  }
  .plugin-landing-page .partners .partners-showcase {
    gap: 50px;
    margin-bottom: 50px;
  }
  .plugin-landing-page .partners .partners-list {
    gap: 8px 28px;
  }
  .plugin-landing-page .partners .metric-item {
    padding: 20px 30px;
  }
  .plugin-landing-page .partners .metric-number {
    font-size: 2rem;
  }
  .plugin-landing-page .partners .metric-number .metric-plus {
    font-size: 1.6rem;
  }
  .plugin-landing-page .partners .metric-label {
    font-size: 0.9rem;
  }
}
.plugin-landing-page .benefits {
  padding: 100px 0;
  background-color: #13151a;
  color: white;
}
.plugin-landing-page .benefits .section-title {
  margin-bottom: 48px;
  text-align: center;
}
.plugin-landing-page .benefits .section-desc {
  margin: -32px auto 40px;
  max-width: 600px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}
.plugin-landing-page .benefits .benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 60px;
}
@media (max-width: 1024.98px) {
  .plugin-landing-page .benefits .benefits-grid {
    grid-template-columns: 1fr;
  }
}
.plugin-landing-page .benefits .benefit-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}
.plugin-landing-page .benefits .benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}
.plugin-landing-page .benefits .benefit-card.highlight {
  border-color: #bafd02;
  background: linear-gradient(rgba(19, 21, 26, 0.8), rgba(19, 21, 26, 0.8)), linear-gradient(to right bottom, #0066ff, rgb(0, 61.2, 153));
}
.plugin-landing-page .benefits .benefit-card .benefit-timing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.plugin-landing-page .benefits .benefit-card .benefit-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(186, 253, 2, 0.2);
  color: #bafd02;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 16px;
}
.plugin-landing-page .benefits .benefit-card .benefit-icon {
  font-size: 24px;
}
.plugin-landing-page .benefits .benefit-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.plugin-landing-page .benefits .benefit-card .benefit-list {
  list-style: none;
  padding: 0;
  margin: 0 0 auto 0;
  flex-grow: 1;
}
.plugin-landing-page .benefits .benefit-card .benefit-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.9);
}
.plugin-landing-page .benefits .benefit-card .benefit-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #bafd02;
}
.plugin-landing-page .benefits .benefit-card .benefit-list li strong {
  display: flex;
  align-items: center;
  color: white;
  font-weight: 600;
}
.plugin-landing-page .benefits .benefit-card .benefit-list li small {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  margin-top: 2px;
}
.plugin-landing-page .benefits .benefit-card .benefit-list li .value-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #bafd02;
  background: rgba(186, 253, 2, 0.1);
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 4px;
  vertical-align: text-top;
  height: 18px;
  position: relative;
  top: -1px;
  line-height: 1;
}
.plugin-landing-page .benefits .benefit-card .benefit-action {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
}
.plugin-landing-page .benefits .benefit-card .benefit-action .delivery-time {
  display: block;
  color: rgba(255, 255, 255, 0.7);
}
.plugin-landing-page .benefits .benefit-card .benefit-action .discount-timer {
  display: block;
  color: #bafd02;
  font-size: 14px;
}
.plugin-landing-page .benefits .benefit-card .benefit-action .discount-timer strong {
  font-weight: 700;
}
.plugin-landing-page .benefits .benefit-card .benefit-action .btn {
  margin-top: 8px;
}
.plugin-landing-page .benefits .promotion-timeline-container {
  position: relative;
  margin-top: 52px;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-title {
  text-align: center;
  margin-bottom: 2.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: white;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  position: relative;
  max-width: 800px;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline:before {
  content: "";
  position: absolute;
  top: 2rem;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(0, 102, 255, 0.3);
  z-index: 1;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline:after {
  content: "";
  position: absolute;
  top: 2rem;
  left: 0;
  height: 2px;
  background: #bafd02;
  transition: width 0.5s ease;
  z-index: 2;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline.phase-1-active:after {
  width: 16.67%;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline.phase-2-active:after {
  width: 50%;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline.phase-3-active:after {
  width: 83.33%;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline.completed:after {
  width: 100%;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item {
  position: relative;
  z-index: 5;
  width: 33.333%;
  text-align: center;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item .phase-marker {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  background: #13151a;
  border: 2px solid rgba(0, 102, 255, 0.5);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(186, 253, 2, 0.2);
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item .phase-marker .phase-number {
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item .phase-content {
  padding: 0 0.5rem;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item .phase-content .phase-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item .phase-content .phase-date {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item .phase-content .phase-countdown {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  padding: 0.4rem 1rem;
  margin-top: 0.5rem;
  display: inline-block;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item .phase-content .phase-countdown .countdown-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 0.5rem;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item .phase-content .phase-countdown .countdown-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: #bafd02;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item.completed .phase-marker {
  background-color: #13151a;
  border-color: rgba(255, 255, 255, 0.4);
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item.completed .phase-marker .phase-number {
  display: none;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item.completed .phase-marker:after {
  content: "✓";
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item.completed .phase-name {
  color: rgba(255, 255, 255, 0.6);
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item.active .phase-marker {
  background-color: #13151a;
  border-color: #bafd02;
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(186, 253, 2, 0.6);
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item.active .phase-marker .phase-number {
  color: #bafd02;
  font-weight: 800;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item.active .phase-name {
  color: #bafd02;
  font-weight: 700;
}
.plugin-landing-page .benefits .promotion-timeline-container .promotion-cta {
  text-align: center;
  background: rgba(19, 21, 26, 0.5);
  border-radius: 8px;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}
.plugin-landing-page .benefits .promotion-timeline-container .promotion-cta .urgency-message {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.plugin-landing-page .benefits .promotion-timeline-container .promotion-cta .highlight {
  font-weight: 700;
  color: #bafd02;
  font-size: 1.2rem;
}
.plugin-landing-page .benefits .promotion-timeline-container .promotion-cta .btn-lg {
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}
.plugin-landing-page .benefits .promotion-timeline-container .promotion-cta .btn-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.plugin-landing-page .benefits .promotion-timeline-container .promotion-cta .ended-message {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 1rem 0;
}
.plugin-landing-page .benefits .promotion-timeline-container.all-phases-completed .phase-timeline {
  opacity: 0.7;
}
.plugin-landing-page .benefits .promotion-timeline-container.all-phases-completed .phase-timeline:before {
  background: rgba(255, 255, 255, 0.15);
}
.plugin-landing-page .benefits .promotion-timeline-container.all-phases-completed .phase-timeline:after {
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
}
.plugin-landing-page .benefits .promotion-timeline-container.all-phases-completed .phase-timeline .phase-item .phase-marker {
  border-color: rgba(255, 255, 255, 0.4);
}
.plugin-landing-page .benefits .promotion-timeline-container.all-phases-completed .phase-timeline .phase-item .phase-marker .phase-number {
  display: none !important;
}
.plugin-landing-page .benefits .promotion-timeline-container.all-phases-completed .phase-timeline .phase-item .phase-marker:after {
  content: "✓";
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
  background-color: #13151a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plugin-landing-page .benefits .promotion-timeline-container.all-phases-completed .phase-timeline .phase-item:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.15) !important;
}
.plugin-landing-page .benefits .promotion-timeline-container .timeline-stamp-container {
  position: relative;
  width: 100%;
}
.plugin-landing-page .benefits .promotion-timeline-container .phase-timeline {
  position: relative;
  z-index: 1;
}
.plugin-landing-page .benefits .promotion-timeline-container .promotion-completed-message {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  padding: 1.5rem 2.5rem;
  background: rgba(255, 0, 0, 0.08);
  border-radius: 8px;
  max-width: 400px;
  border: 6px double rgba(255, 0, 0, 0.7);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
  z-index: 100;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  white-space: nowrap;
  background-image: radial-gradient(rgba(255, 0, 0, 0.05) 15%, transparent 16%), radial-gradient(rgba(255, 0, 0, 0.05) 15%, transparent 20%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}
.plugin-landing-page .benefits .promotion-timeline-container .promotion-completed-message::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0.05) 0%, rgba(255, 0, 0, 0.15) 90%, rgba(255, 0, 0, 0.2) 100%);
  z-index: -1;
  opacity: 0.5;
  mix-blend-mode: multiply;
  border-radius: 4px;
}
.plugin-landing-page .benefits .promotion-timeline-container .promotion-completed-message h4 {
  color: rgba(255, 0, 0, 0.7);
  font-size: 1.4rem;
  margin-bottom: 0.3rem;
  line-height: 1.2;
  font-weight: 700;
  text-shadow: 1px 1px 0 rgba(255, 0, 0, 0.1);
}
.plugin-landing-page .benefits .promotion-timeline-container .promotion-completed-message p {
  color: rgba(255, 0, 0, 0.6);
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  text-shadow: 1px 1px 0 rgba(255, 0, 0, 0.1);
}
.plugin-landing-page .benefits .promotion-timeline-container.all-phases-completed .phase-timeline {
  opacity: 0.4;
}
.plugin-landing-page .cta {
  text-align: center;
  background: #000;
}
.plugin-landing-page .cta .cta-description {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 1024.98px) {
  .plugin-landing-page .container {
    padding: 0 16px;
  }
  .plugin-landing-page section {
    padding: 80px 0;
  }
  .plugin-landing-page .features {
    word-break: keep-all;
  }
  .plugin-landing-page .features .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .plugin-landing-page .target-users .users-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .plugin-landing-page .ai-tech .tech-grid {
    word-break: keep-all;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .plugin-landing-page .ai-tech .tech-card {
    padding: 20px;
  }
  .plugin-landing-page .ai-tech .tech-visual .tech-cert {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .plugin-landing-page .ai-tech .tech-visual .img-a11y {
    max-width: 100%;
  }
  .plugin-landing-page .process .timeline {
    padding: 40px 0 60px;
    max-width: 400px;
    margin: auto;
  }
  .plugin-landing-page .process .timeline:before {
    left: 24px;
  }
  .plugin-landing-page .process .timeline-item {
    margin-bottom: 40px;
  }
  .plugin-landing-page .process .timeline-content {
    width: calc(100% - 48px);
    margin-left: 48px !important;
  }
  .plugin-landing-page .process .timeline-content p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    word-break: keep-all;
  }
  .plugin-landing-page .process .timeline-number {
    left: 24px;
    transform: translateX(-50%);
  }
  .plugin-landing-page .benefits .promotion-timeline-container .phase-title {
    font-size: 1.6rem;
  }
  .plugin-landing-page .benefits .promotion-timeline-container .phase-timeline {
    flex-direction: column;
    align-items: flex-start;
    max-width: 320px;
    margin: 0 auto;
  }
  .plugin-landing-page .benefits .promotion-timeline-container .phase-timeline:before {
    top: 0;
    left: 2rem;
    width: 2px;
    height: 100%;
    background: rgba(0, 102, 255, 0.3);
  }
  .plugin-landing-page .benefits .promotion-timeline-container .phase-timeline:after {
    top: 0;
    left: 2rem;
    width: 2px;
    height: 0;
  }
  .plugin-landing-page .benefits .promotion-timeline-container .phase-timeline.phase-1-active:after {
    width: 2px;
    height: 0;
  }
  .plugin-landing-page .benefits .promotion-timeline-container .phase-timeline.phase-2-active:after {
    width: 2px;
    height: 153px;
  }
  .plugin-landing-page .benefits .promotion-timeline-container .phase-timeline.phase-3-active:after, .plugin-landing-page .benefits .promotion-timeline-container .phase-timeline.completed:after {
    width: 2px;
    height: 212px;
  }
  .plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    text-align: left;
  }
  .plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item:last-child {
    margin-bottom: 1.5rem;
  }
  .plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item .phase-marker {
    margin: 0;
    margin-right: 1rem;
  }
  .plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item .phase-content {
    padding-top: 0.5rem;
  }
  .plugin-landing-page .benefits .promotion-timeline-container .phase-timeline .phase-item:not(:last-child)::after {
    top: 2rem;
    left: 2rem;
    width: 2px;
    height: calc(100% + 2rem);
    transform: none;
  }
  .plugin-landing-page .promotion-phase {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .plugin-landing-page section {
    padding: 60px 0;
  }
  .plugin-landing-page h1 {
    font-size: 1.8rem !important;
  }
  .plugin-landing-page h2 {
    font-size: 1.6rem !important;
  }
  .plugin-landing-page .features .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .plugin-landing-page .target-users .users-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .plugin-landing-page .ai-tech .tech-description {
    word-break: keep-all;
  }
  .plugin-landing-page .ai-tech .tech-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .plugin-landing-page .ai-tech .tech-visual .img-cert1,
  .plugin-landing-page .ai-tech .tech-visual .img-cert2 {
    max-width: 80%;
  }
  .plugin-landing-page .benefits {
    padding: 4rem 0;
  }
  .plugin-landing-page .benefits .benefits-grid {
    grid-template-columns: 1fr;
  }
  .plugin-landing-page .benefits .promotion-timeline-container .promotion-completed-message {
    padding: 1rem 1.5rem;
  }
  .plugin-landing-page .benefits .promotion-timeline-container .promotion-completed-message h4 {
    font-size: 1.2rem;
  }
  .plugin-landing-page .benefits .promotion-timeline-container .promotion-completed-message p {
    font-size: 1rem;
  }
  .plugin-landing-page .feature-card,
  .plugin-landing-page .user-card,
  .plugin-landing-page .tech-card,
  .plugin-landing-page .timeline-content,
  .plugin-landing-page .benefit-card {
    padding: 24px;
  }
}

.faq {
  padding: 80px 0;
  background: rgba(255, 255, 255, 0.03);
}
.faq h2 {
  text-align: center;
  margin-bottom: 48px;
  font-size: 36px;
}
.faq .faq-accordion {
  max-width: 680px;
  margin: 0 auto;
}
.faq .faq-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.faq .faq-item.active .faq-question {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.faq .faq-item.active .faq-question .arrow {
  transform: rotate(180deg);
}
.faq .faq-item.active .faq-answer {
  max-height: none;
  padding: 24px 32px;
  opacity: 1;
}
.faq .faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  background: transparent;
  border: none;
  text-align: left;
  color: #bafd02;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.faq .faq-question .arrow {
  transition: transform 0.3s ease;
}
.faq .faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 32px;
  transition: all 0.3s ease;
}
.faq .faq-answer p {
  margin: 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
.faq .faq-answer .youtube-movie {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16/9;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
@media (max-width: 1024.98px) {
  .faq {
    padding: 60px 0;
  }
  .faq h2 {
    font-size: 28px;
    margin-bottom: 32px;
  }
  .faq .faq-question {
    padding: 20px 24px;
    font-size: 16px;
  }
  .faq .faq-item .faq-answer {
    padding: 0 24px;
  }
  .faq .faq-item.active .faq-answer {
    padding: 20px 24px;
  }
}

.discount-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.discount-tiers .discount-tier {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.discount-tiers .discount-tier.active {
  background: rgba(186, 253, 2, 0.2);
  color: #bafd02;
  font-weight: 600;
}

.discount-timer {
  margin-top: 4px;
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.discount-timer strong {
  color: #bafd02;
  font-weight: 700;
}

.video-showcase {
  padding: 80px 0;
  background-color: #f8f9fa;
}

.video-wrapper {
  margin-top: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.video-showcase .section-description {
  margin-top: 16px;
  font-size: 18px;
  text-align: center;
  color: #666;
}

.video-showcase h2 {
  text-align: center;
  font-weight: bold;
}

.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.error-page .error-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.error-page .logo {
  width: 142px;
  height: 30px;
}
.error-page .logo img {
  display: block;
  width: 100%;
}
.error-page .error-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  word-break: keep-all;
}
.error-page .error-area img {
  width: 64px;
  height: 64px;
}
.error-page .error-area .message {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.48px;
  color: #1f2937;
}
.error-page .error-area .desc {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #4b5563;
}
.error-page .error-area .btn-group {
  gap: 8px;
  margin-top: 40px;
}

.info-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100vh - 56px);
}
.info-page .info-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.info-page .logo {
  width: 142px;
  height: 30px;
}
.info-page .logo img {
  display: block;
  width: 100%;
}
.info-page .info-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  word-break: keep-all;
}
.info-page .info-area img {
  width: 64px;
  height: 64px;
}
.info-page .info-area .message {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.48px;
  color: #1f2937;
}
.info-page .info-area .desc {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #4b5563;
}
.info-page .info-area .text-guide {
  display: flex;
  align-items: center;
  gap: 2px;
}
.info-page .info-area .text-guide .ico {
  margin-top: 2px;
}
.info-page .info-area .btn-group {
  gap: 8px;
  margin-top: 40px;
}

.landing-section .section-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1180px;
  margin: auto;
  padding: 100px 40px;
}
.landing-section .section-inner:has(.right) {
  flex-direction: row;
  justify-content: space-between;
  gap: 94px;
}
.landing-section .section-inner > .left {
  align-items: flex-start;
  justify-content: flex-start;
}
.landing-section .section-inner > .left.section-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  width: 100%;
}
.landing-section .section-inner > .right {
  align-items: flex-start;
}
.landing-section .section-header {
  text-align: center;
}
.landing-section .section-header .title {
  font-size: 40px;
  font-weight: 700;
  color: #0f1318;
  line-height: 1.2;
}
.landing-section .section-header .sub-title {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 400;
  color: #1f2937;
}
.landing-section .section-header .desc {
  font-size: 18px;
  font-weight: 400;
  color: #4b5563;
}
@media (max-width: 1024.98px) {
  .landing-section .section-header .title {
    font-size: 32px;
    line-height: 1.4;
  }
  .landing-section .section-header .desc {
    margin-top: 2px;
    line-height: 1.3;
  }
}
.landing-section.landing-header .section-header {
  width: 100%;
  text-align: left;
}
.landing-section.landing-header .section-header .title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.4;
  color: #1a212b;
}
.landing-section.landing-header .section-header .desc {
  font-size: 18px;
  color: #4b5563;
}
.landing-section.bg-gray {
  background-color: #f3f4f6;
}
.landing-section .sub-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 34px;
  padding: 6px 12px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: #0f1318;
}
.landing-section .img-landing-area {
  width: 240px;
  height: 240px;
  border-radius: 32px;
  border: 8px solid #fff;
  box-shadow: 0 0 4.4px 0 rgba(0, 0, 0, 0.06), 0 5px 19px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.landing-section .img-landing-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1024.98px) {
  .landing-section .section-inner {
    padding-inline: 20px;
  }
  .landing-section .section-inner:has(.right) {
    flex-direction: column;
    gap: 40px;
  }
}

.section-upload .section-header .desc {
  font-size: 16px;
  font-weight: 400;
  color: #374151;
}
.section-upload .tooltip-area {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  margin-bottom: 8.5px;
}
.section-upload .tooltip-area .tooltip {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 22px;
  margin-bottom: 5px;
  padding: 0 12px;
  background-color: #0f1318;
  border-radius: 11px;
}
.section-upload .tooltip-area .tooltip::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  background: url(/_next/static/media/img-tooltip-arrow-sm@2x.7ef49581.png);
  background-size: 14px auto;
  background-repeat: no-repeat;
  background-position: center;
}
.section-upload .tooltip-area .tooltip-inner {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.section-upload .multiple-dropzone {
  width: 554px;
}
.section-upload .multiple-dropzone .guide-text {
  width: 100%;
  margin-top: 44px;
  color: #1f2937;
}
.section-upload .multiple-dropzone .guide-text:before {
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background-size: 32px auto;
}
.section-upload .multiple-dropzone .guide-text .btn-file {
  font-weight: 400;
}
.section-upload .multiple-dropzone .guide-text .text-custom {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
}
.section-upload .cta-check-toggle {
  min-width: 166px;
}
.section-upload .action-area {
  margin-top: 27px;
}
.section-upload .upload-list-area .upload-list {
  width: 100%;
}
.section-upload .upload-list-area .upload-item {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.section-upload .upload-list-area .list-area {
  padding: 0;
  background-color: transparent;
}
@media (min-width: 1025px) {
  .section-upload .multiple-dropzone {
    width: 446px;
  }
}
@media (max-width: 1024.98px) {
  .section-upload .section-body {
    width: 100%;
  }
  .section-upload .section-inner {
    padding-block: 80px;
  }
  .section-upload .multiple-dropzone {
    width: 100%;
  }
}

.section-promotion {
  background-color: #1364ff !important;
}
.section-promotion .section-inner {
  gap: 48px;
  overflow: hidden;
}
.section-promotion .section-header {
  width: 100%;
  text-align: left;
}
.section-promotion .section-header .title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.section-promotion .section-header .desc {
  margin-top: 10px;
  font-size: 18px;
  color: #fff;
}
.section-promotion .img-promotion-area {
  width: 100%;
  max-width: 1186px;
  margin-bottom: -104px;
}

.pricing-page .pricing-section .section-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
}
.pricing-page .pricing-section .section-header .title {
  font-size: 52px;
  color: #0f1318;
  line-height: 1.4;
}
.pricing-page .pricing-section .section-header .desc-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pricing-page .pricing-section .section-body {
  width: 100%;
}
@media (max-width: 1279.98px) {
  .pricing-page .pricing-section .plan-header .billing-toggle .tooltip-label {
    right: -30px;
  }
}
@media (max-width: 1024.98px) {
  .pricing-page .pricing-section .section-inner {
    gap: 130px;
    padding-block: 80px;
  }
  .pricing-page .pricing-section .plan-header .billing-toggle .tooltip-label {
    right: -50px;
  }
  .pricing-page .pricing-section .section-header {
    align-items: center;
  }
  .pricing-page .pricing-section .section-header .title {
    font-size: 40px;
  }
  .pricing-page .pricing-section .section-header .desc {
    font-size: 16px;
    text-align: center;
  }
  .pricing-page .pricing-section .plan-cards .plan-card {
    min-width: calc(50% - 12px);
  }
}
@media (max-width: 767.98px) {
  .pricing-page .pricing-section .plan-cards .plan-card {
    min-width: 100%;
  }
}

.trial-promotion {
  background-color: #000;
  background-image: url(/_next/static/media/bg-trial-promotion.4ade7a24.png);
  background-size: auto 100%;
  background-position: top 0 center;
  background-repeat: no-repeat;
}
.trial-promotion .section-inner {
  padding-block: 60px;
}
.trial-promotion .section-header .sub-title {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.trial-promotion .section-header .title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}
.trial-promotion .highlight-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 42px;
  margin-inline: 8px;
  padding: 2px 4px;
  background-color: #bafd02;
  border-radius: 8px;
  color: #000;
  line-height: 1;
}
.trial-promotion .credit-info {
  margin-top: 32px;
}
.trial-promotion .promotion-desc {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #d1d5db;
}
.trial-promotion .promotion-desc .text + .text {
  position: relative;
  margin-left: 15px;
}
.trial-promotion .promotion-desc .text + .text::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0.4;
}
@media (max-width: 1024.98px) {
  .trial-promotion {
    background-color: #000;
    background-image: url(/_next/static/media/bg-trial-promotion-mobile.c304ec20.png);
    background-size: auto 242px;
    background-position: top 0 center;
    background-repeat: no-repeat;
  }
  .trial-promotion .section-header .title {
    font-size: 32px;
  }
  .trial-promotion .section-header .highlight-badge {
    width: 65px;
    height: 40px;
    padding-inline: 3px;
    font-size: 32px;
  }
}

.comparison-section .section-inner {
  gap: 72px;
}
.comparison-section .section-header .desc {
  margin-top: 14px;
}
.comparison-section .section-body {
  width: 100%;
}
.comparison-section .comparison-container {
  width: 100%;
}
.comparison-section .comparison-container .mobile-comparison {
  display: none;
}
.comparison-section .comparison-container .desktop-comparison {
  display: block;
}
@media (max-width: 1024.98px) {
  .comparison-section .comparison-container .desktop-comparison {
    display: none;
  }
  .comparison-section .comparison-container .mobile-comparison {
    display: block;
  }
}
.comparison-section .comparison-table {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.comparison-section .comparison-table .table-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: 90px;
}
.comparison-section .comparison-table .table-header .feature-column {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 193px;
  height: 100%;
}
.comparison-section .comparison-table .table-header .feature-column .label {
  font-weight: 600;
  font-size: 16px;
  color: #374151;
}
.comparison-section .comparison-table .table-header .plan-columns {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 100%;
}
.comparison-section .comparison-table .table-header .plan-columns .plan-column {
  position: relative;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.comparison-section .comparison-table .table-header .plan-columns .plan-column:has(.badge-popular) {
  border-radius: 0 0 12px 12px;
  border: 2px solid #005eff;
  box-sizing: border-box;
  box-shadow: 0 0 20px 0 rgba(36, 116, 255, 0.2);
}
.comparison-section .comparison-table .table-header .plan-columns .plan-column:has(.badge-personalized) {
  border-radius: 0 0 12px 12px;
}
.comparison-section .comparison-table .table-header .plan-columns .badge-popular {
  position: absolute;
  top: -24px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% + 4px);
  height: 24px;
  padding-inline: 6px;
  transform: translateX(-50%);
  background: #005eff;
  border: 2px solid #005eff;
  box-sizing: border-box;
  border-radius: 12px 12px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.comparison-section .comparison-table .table-header .plan-columns .badge-personalized {
  position: absolute;
  top: -24px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 24px;
  padding-inline: 6px;
  transform: translateX(-50%);
  background: #315ac9;
  outline: 2px solid #315ac9;
  outline-offset: -1px;
  border-radius: 12px 12px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.comparison-section .comparison-table .table-header .plan-columns .plan-badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  height: 32px;
}
.comparison-section .comparison-table .table-header .plan-columns .plan-badge .ico {
  vertical-align: unset;
  line-height: 0;
}
.comparison-section .comparison-table .table-header .plan-columns .plan-badge.starter {
  color: #007f61;
}
.comparison-section .comparison-table .table-header .plan-columns .plan-badge.pro {
  color: #005eff;
}
.comparison-section .comparison-table .table-header .plan-columns .plan-badge.team {
  color: #7e11e6;
}
.comparison-section .comparison-table .table-header .plan-columns .plan-badge.team .form-control-sm {
  font-size: 18px;
  font-weight: 700;
  color: #7e11e6;
  background-position: right 12px center;
  border-radius: 9px;
  border: 1px solid #d1d5db;
  line-height: 1.4;
}
.comparison-section .comparison-table .table-header .plan-columns .plan-badge.enterprise {
  color: #0a319a;
}
.comparison-section .comparison-table .table-header .plan-columns .name {
  font-size: 22px;
  font-weight: 700;
}
.comparison-section .comparison-table .table-header .plan-columns .desc {
  font-size: 14px;
  font-weight: 400;
  color: #1f2937;
  letter-spacing: -0.04em;
}
.comparison-section .comparison-table .table-body {
  border-top: 1px solid #d1d5db;
}
.comparison-section .comparison-table .table-body .label {
  padding: 12px 12px 6px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.4;
}
.comparison-section .comparison-table .table-body .feature-row {
  display: flex;
  border-bottom: 1px solid #f3f4f6;
}
.comparison-section .comparison-table .table-body .feature-row .feature-cell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 196px;
  min-height: 40px;
  padding: 4px 12px;
  background: #fff;
  line-height: 1.4;
}
.comparison-section .comparison-table .table-body .feature-row .feature-cell .feature-name {
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
}
.comparison-section .comparison-table .table-body .feature-row .plan-cells {
  flex: 1 1;
  display: flex;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #1f2937;
}
.comparison-section .comparison-table .table-body .feature-row .plan-cells .plan-cell {
  flex: 1 1;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comparison-section .comparison-table .table-body .row-depth {
  background: #f9fafb;
}
.comparison-section .comparison-table .table-body .row-depth .feature-cell {
  position: relative;
  padding-left: 26px;
  background: #f9fafb;
}
.comparison-section .comparison-table .table-body .row-depth .feature-cell::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 16px;
  width: 7.5px;
  height: 7.5px;
  background-image: url(/_next/static/media/ico-depth@2x.42b6b940.png);
  background-size: 7.5px auto;
  background-repeat: no-repeat;
}
.comparison-section .mobile-comparison {
  /* 탭 네비게이션 */
}
.comparison-section .mobile-comparison .tab-navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
.comparison-section .mobile-comparison .tab-navigation .tab-btn {
  flex: 1 1;
  min-width: 77px;
  height: 36px;
  padding: 0 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  font-weight: 600;
  font-size: 16px;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.comparison-section .mobile-comparison .tab-navigation .tab-btn.starter {
  color: #007f61;
}
.comparison-section .mobile-comparison .tab-navigation .tab-btn.pro {
  color: #005eff;
}
.comparison-section .mobile-comparison .tab-navigation .tab-btn.team {
  color: #7e11e6;
}
.comparison-section .mobile-comparison .tab-navigation .tab-btn.enterprise {
  color: #0a319a;
}
.comparison-section .mobile-comparison .tab-navigation .tab-btn.active {
  background: #1a212b;
  border: 1px solid #1a212b;
  color: #fff;
}
.comparison-section .mobile-comparison .mobile-plan-content {
  margin-top: 16px;
}
.comparison-section .mobile-comparison .mobile-plan-content .plan-header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #f3f4f6;
}
.comparison-section .mobile-comparison .mobile-plan-content .plan-header .plan-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 18px;
}
.comparison-section .mobile-comparison .mobile-plan-content .plan-header .plan-badge.starter {
  color: #007f61;
}
.comparison-section .mobile-comparison .mobile-plan-content .plan-header .plan-badge.pro {
  color: #005eff;
}
.comparison-section .mobile-comparison .mobile-plan-content .plan-header .plan-badge.team {
  color: #7e11e6;
}
.comparison-section .mobile-comparison .mobile-plan-content .plan-header .plan-badge.enterprise {
  color: #0a319a;
}
.comparison-section .mobile-comparison .mobile-plan-content .plan-header .plan-badge .name {
  font-size: 18px;
  font-weight: 700;
}
.comparison-section .mobile-comparison .mobile-plan-content .plan-header .plan-badge .team-select {
  margin-left: 8px;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
  color: #374151;
}
.comparison-section .mobile-comparison .mobile-plan-content .plan-header .desc {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}
.comparison-section .mobile-comparison .features-list {
  border-top: 1px solid #d1d5db;
}
.comparison-section .mobile-comparison .features-header {
  display: flex;
  align-items: center;
  align-self: stretch;
  height: 40px;
  border-bottom: 1px solid #f3f4f6;
}
.comparison-section .mobile-comparison .features-header .section-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 180px;
  padding: 12px 12px 4px;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}
.comparison-section .mobile-comparison .features-header .team-option-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 0 4px;
}
.comparison-section .mobile-comparison .features-header .feature-value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  text-align: center;
}
.comparison-section .mobile-comparison .features-header .feature-value .value {
  flex: 1 1 auto;
  width: 33.333%;
}
.comparison-section .mobile-comparison .features-header .feature-value .value + .value {
  position: relative;
}
.comparison-section .mobile-comparison .features-header .feature-value .value + .value::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: #e5e7eb;
}
.comparison-section .mobile-comparison .feature-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  border-bottom: 1px solid #f3f4f6;
}
.comparison-section .mobile-comparison .feature-item:last-child {
  border-bottom: none;
}
.comparison-section .mobile-comparison .feature-item .feature-info {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 180px;
  padding: 9px 12px;
}
.comparison-section .mobile-comparison .feature-item .feature-info .feature-name {
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
}
.comparison-section .mobile-comparison .feature-item .feature-value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 400;
  color: #1f2937;
  text-align: center;
}
.comparison-section .mobile-comparison .feature-item .feature-value .value {
  flex: 1 1 auto;
  width: 33.333%;
}
.comparison-section .mobile-comparison .feature-item .feature-value .value + .value {
  position: relative;
}
.comparison-section .mobile-comparison .feature-item .feature-value .value + .value::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: #e5e7eb;
}
.comparison-section .mobile-comparison .feature-item.row-depth {
  background: #f9fafb;
}
.comparison-section .mobile-comparison .feature-item.row-depth .feature-info {
  position: relative;
  padding-left: 26px;
}
.comparison-section .mobile-comparison .feature-item.row-depth .feature-info::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 16px;
  width: 6px;
  height: 6px;
  border-left: 1px solid #9ca3af;
  border-bottom: 1px solid #9ca3af;
  border-radius: 0 0 0 2px;
}
.comparison-section .info-tooltip-container {
  position: relative;
}
.comparison-section .info-tooltip-container:hover .info-tooltip + .info-tooltip-content {
  display: flex;
}
.comparison-section .info-tooltip-container .info-tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: #9ca3af;
}
.comparison-section .info-tooltip-container .info-tooltip:focus + .info-tooltip-content {
  display: flex;
}
.comparison-section .info-tooltip-container .info-tooltip .ico {
  vertical-align: unset;
  line-height: 0;
}
.comparison-section .info-tooltip-container .info-tooltip-content {
  position: absolute;
  top: 0;
  left: 20px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 245px;
  padding: 16px;
  background: #1f2937;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  z-index: 20;
}
@media (max-width: 1279.98px) {
  .comparison-section .desktop-comparison .table-header {
    height: auto;
    min-height: 90px;
  }
  .comparison-section .desktop-comparison .table-header .feature-column {
    width: 186px;
  }
  .comparison-section .desktop-comparison .table-header .plan-columns {
    align-items: stretch;
  }
  .comparison-section .desktop-comparison .table-header .plan-columns .plan-badge {
    align-items: flex-start;
    height: auto;
    min-height: 32px;
  }
  .comparison-section .desktop-comparison .table-header .plan-columns .plan-badge .ico {
    flex: 0 0 auto;
    margin-top: 6px;
  }
  .comparison-section .desktop-comparison .table-header .plan-columns .plan-column {
    height: auto;
    padding: 16px;
  }
  .comparison-section .desktop-comparison .table-header .plan-columns .form-control-sm {
    min-width: 100px;
  }
  .comparison-section .desktop-comparison .table-header .plan-column {
    min-width: calc(25% - 6px);
  }
  .comparison-section .desktop-comparison .table-body .feature-row .feature-cell {
    width: 186px;
  }
}
@media (max-width: 1024.98px) {
  .comparison-section .section-inner {
    gap: 40px;
    padding-block: 80px;
  }
  .comparison-section .section-header .title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
  }
  .comparison-section .section-header .desc {
    margin-top: 12px;
    font-size: 16px;
  }
  .comparison-section .info-tooltip-container .info-tooltip-content {
    width: 165px;
  }
}

.credit-section {
  position: relative;
}
.credit-section:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 320px;
  background: linear-gradient(180deg, #f6ffdc 0%, rgba(252, 255, 243, 0) 100%);
  z-index: -1;
}
.credit-section .section-header .desc {
  margin-top: 12px;
}
.credit-section .section-body {
  width: 100%;
}
.credit-section .credit-modes {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 48px;
}
.credit-section .credit-modes .credit-mode {
  display: flex;
  flex-direction: row;
  gap: 40px;
}
.credit-section .credit-modes .mode-header {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 6px;
}
.credit-section .credit-modes .credit-table {
  flex: 0 0 auto;
  width: 630px;
}
.credit-section .credit-modes .mode-title {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  color: #1f2937;
}
.credit-section .credit-modes .mode-title .ico {
  flex: 0 0 auto;
  margin-top: 5.5px;
}
.credit-section .credit-modes .mode-title .name {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-weight: 700;
  text-align: left;
}
.credit-section .credit-modes .mode-desc {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #4b5563;
}
.credit-section .credit-modes .mode-tag {
  display: inline-flex;
  min-width: 40px;
  height: 23px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  background: #0f1318;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.credit-section .credit-table {
  display: flex;
  flex-direction: column;
  border: 1px solid #dbe7b8;
  border-radius: 12px;
  overflow: hidden;
}
.credit-section .credit-table .table-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 44px;
  background: #edf7d0;
  color: #4b5563;
}
.credit-section .credit-table .cell {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  height: 100%;
  padding: 8px 24px;
}
.credit-section .credit-table .type-cell {
  width: 100%;
  border-right: 1px solid #dbe7b8;
}
.credit-section .credit-table .credit-cell {
  flex: 0 0 auto;
  justify-content: center;
  width: 90px;
  padding-inline: 12px;
  gap: 2px;
  text-align: center;
}
.credit-section .credit-table .table-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.credit-section .credit-table .table-row + .table-row {
  border-top: 1px solid #dbe7b8;
}
.credit-section .credit-table .table-row.highlight .type-info {
  background: #d9ed9f;
}
.credit-section .credit-table .table-row.row-depth .type-cell {
  position: relative;
  padding-left: 52px;
}
.credit-section .credit-table .table-row.row-depth .type-cell::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 34px;
  width: 8px;
  height: 8px;
  border-left: 1px solid #9ca3af;
  border-bottom: 1px solid #9ca3af;
  border-radius: 0 0 0 2px;
}
.credit-section .credit-table .table-body .table-row {
  min-height: 64px;
}
.credit-section .credit-table .table-body .table-row .cell {
  padding-block: 18px;
}
.credit-section .credit-table .type-info {
  flex: 0 0 auto;
  display: flex;
  height: 28px;
  padding: 0 5px;
  justify-content: center;
  align-items: center;
  gap: 2px;
  background: #f3f4f6;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
}
.credit-section .credit-table .type-info .ico {
  vertical-align: unset;
  line-height: 0;
}
.credit-section .credit-table .type-desc {
  font-weight: 400;
  color: #4b5563;
}
.credit-section .credit-note {
  font-size: 14px;
  font-weight: 400;
  color: #636a4f;
}
.credit-section .credit-note > li {
  line-height: 1.3;
}
.credit-section .credit-note .detail-link {
  position: relative;
  top: -1px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: -2px;
  margin-left: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #636a4f;
  line-height: 1.3;
}
.credit-section .credit-note .detail-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-text-decoration-color: #636a4f;
          text-decoration-color: #636a4f;
}
@media (max-width: 1024.98px) {
  .credit-section .section-inner {
    padding-block: 80px;
  }
  .credit-section .section-header .title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
  }
  .credit-section .section-header .desc {
    font-size: 16px;
    font-weight: 400;
    color: #4b5563;
    text-align: center;
  }
  .credit-section .credit-modes {
    gap: 34px;
    margin-top: 36px;
  }
  .credit-section .credit-modes .credit-mode {
    flex-direction: column;
    gap: 14px;
  }
  .credit-section .credit-modes .mode-title {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
  }
  .credit-section .credit-modes .mode-title .ico {
    margin-top: 4.5px;
    width: 22px;
    height: 22px;
    background-size: 22px auto;
  }
  .credit-section .credit-modes .mode-desc {
    margin-top: 8px;
  }
  .credit-section .credit-modes .credit-table {
    width: 100%;
  }
  .credit-section .credit-table .table-header {
    align-items: stretch;
  }
  .credit-section .credit-table .table-header .type-cell {
    padding-inline: 18px;
  }
  .credit-section .credit-table .cell {
    height: auto;
  }
  .credit-section .credit-table .type-cell {
    flex: 1 1 auto;
    gap: 8px;
    width: auto;
  }
  .credit-section .credit-table .credit-cell {
    flex: 0 0 auto;
    width: 84px;
    padding-inline: 10px;
  }
  .credit-section .credit-table .table-body .type-cell {
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    padding: 16px 18px;
  }
  .credit-section .credit-table .table-body .table-row {
    min-height: auto;
  }
  .credit-section .credit-table .table-body .table-row .cell {
    padding-block: 16px;
  }
  .credit-section .credit-table .table-body .table-row.row-depth .type-cell {
    padding-left: 16px;
  }
  .credit-section .credit-table .table-body .table-row.row-depth .type-cell .type-info {
    margin-left: 24px;
  }
  .credit-section .credit-table .table-body .table-row.row-depth .type-cell::before {
    top: 24px;
    left: 20px;
    width: 10px;
    height: 10px;
    border-left: 1px solid #9ca3af;
    border-bottom: 1px solid #9ca3af;
    border-radius: 0 0 0 2px;
  }
  .credit-section .credit-note {
    margin-top: 12px;
    font-size: 12px;
  }
}

.plan-section {
  width: 100%;
}
.plan-section .plan-header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
}
.plan-section .plan-header .billing-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
}
.plan-section .plan-header .billing-toggle .check-switch input:checked + .label:after {
  top: 4px;
  left: calc(100% - 22px);
}
.plan-section .plan-header .billing-toggle .check-switch input:checked + .label .text-checked {
  font-weight: 700;
  color: #000;
}
.plan-section .plan-header .billing-toggle .check-switch input:not(:checked) + .label:after {
  top: 4px;
  left: 4px;
}
.plan-section .plan-header .billing-toggle .check-switch input:not(:checked) + .label .text-uncheck {
  font-weight: 700;
  color: #000;
}
.plan-section .plan-header .billing-toggle .check-switch .label {
  min-width: 52px;
  height: 26px;
  border-radius: 13px;
  overflow: visible;
}
.plan-section .plan-header .billing-toggle .check-switch .label::before {
  border-radius: 13px;
  overflow: hidden;
}
.plan-section .plan-header .billing-toggle .check-switch .text-checked {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + 6px);
  display: block !important;
  opacity: 1;
  font-size: 20px;
  color: #4b5563;
}
.plan-section .plan-header .billing-toggle .check-switch .text-uncheck {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(100% + 6px);
  display: block !important;
  opacity: 1;
  font-size: 20px;
  color: #4b5563;
}
.plan-section .plan-header .billing-toggle .tooltip-label {
  position: absolute;
  top: -104px;
  right: -50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #483400;
  white-space: nowrap;
  z-index: 1;
}
.plan-section .plan-header .billing-toggle .tooltip-label .inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 237px;
  height: 94.5px;
  padding: 14px 14px 22px;
  text-align: center;
  background: url(/_next/static/media/bg-tooltip-type04@2x.12a2f582.png);
  background-size: 237px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.plan-section .plan-header .billing-toggle .tooltip-label .title {
  font-weight: 700;
  font-size: 16px;
}
.plan-section .plan-cards {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  margin-top: 24px;
}
.plan-section .plan-cards .plan-card {
  flex: 1 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: calc(25% - 12px);
  min-width: 224px;
  height: 100%;
  min-height: 500px;
  padding: 40px 20px 20px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.plan-section .plan-cards .plan-card .plan-head {
  margin-bottom: 12px;
  color: #1f2937;
}
.plan-section .plan-cards .plan-card .plan-head .plan-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-section .plan-cards .plan-card .plan-head .plan-title .name {
  font-weight: 700;
  font-size: 22px;
}
.plan-section .plan-cards .plan-card .plan-head .plan-title + .description {
  margin-top: 8px;
}
.plan-section .plan-cards .plan-card .plan-head .plan-title .form-control-sm {
  min-width: 82px;
  background-color: #fff;
  background-position: right 12px center;
  border: 1px solid #d1d5db;
  font-weight: 700;
  font-size: 18px;
  color: #7e11e6;
  line-height: 1.4;
}
.plan-section .plan-cards .plan-card .plan-head .description {
  font-weight: 400;
  font-size: 14px;
}
.plan-section .plan-cards .plan-card .plan-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-section .plan-cards .plan-card .plan-body:not(:has(.plan-action)) + .plan-features {
  margin-top: 52px;
}
.plan-section .plan-cards .plan-card .plan-specs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-section .plan-cards .plan-card .plan-specs .spec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 14px;
  color: #6b7280;
}
.plan-section .plan-cards .plan-card .plan-specs .spec-item dt {
  display: flex;
  align-items: center;
  gap: 4px;
}
.plan-section .plan-cards .plan-card .plan-specs .spec-item dt .ico {
  line-height: 0;
  vertical-align: unset;
}
.plan-section .plan-cards .plan-card .plan-specs .spec-item dd {
  font-weight: 500;
  color: #4b5563;
}
.plan-section .plan-cards .plan-card .plan-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 52px;
}
.plan-section .plan-cards .plan-card .plan-pricing .original-price {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  font-size: 14px;
}
.plan-section .plan-cards .plan-card .plan-pricing .original-price .discount-rate {
  font-weight: 400;
  color: #df5b00;
}
.plan-section .plan-cards .plan-card .plan-pricing .original-price .original-amount {
  font-weight: 500;
  color: #9ca3af;
}
.plan-section .plan-cards .plan-card .plan-pricing .current-price {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.1;
}
.plan-section .plan-cards .plan-card .plan-pricing .current-price .amount {
  font-weight: 700;
  font-size: 28px;
  color: #0f1318;
}
.plan-section .plan-cards .plan-card .plan-pricing .current-price .contact {
  font-weight: 700;
  font-size: 30px;
  color: #9ca3af;
}
.plan-section .plan-cards .plan-card .plan-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
}
.plan-section .plan-cards .plan-card .plan-action .btn {
  width: 100%;
}
.plan-section .plan-cards .plan-card .plan-action .btn-plan {
  background-color: #e5e7eb;
  color: #6b7280;
}
.plan-section .plan-cards .plan-card .plan-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  font-weight: 400;
  font-size: 14px;
  color: #1f2937;
}
.plan-section .plan-cards .plan-card .plan-features .features-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 14px;
}
.plan-section .plan-cards .plan-card .plan-features .features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-section .plan-cards .plan-card .plan-features .features-list li {
  position: relative;
  padding-left: 16px;
}
.plan-section .plan-cards .plan-card .plan-features .features-list li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 12px;
  height: 12px;
  background: url(/_next/static/media/ico-check-primary-xs@2x.b86824fe.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.plan-section .plan-cards .plan-starter .plan-head .plan-title {
  color: #007f61;
}
.plan-section .plan-cards .plan-pro .plan-head .plan-title {
  color: #005eff;
}
.plan-section .plan-cards .plan-team .plan-head .plan-title {
  color: #7e11e6;
}
.plan-section .plan-cards .plan-enterprise .plan-head .plan-title {
  color: #0a319a;
}
.plan-section .plan-cards .plan-popular {
  border: 2px solid #005eff;
  box-shadow: 0px 0px 20px 0px rgba(36, 116, 255, 0.2);
}
.plan-section .plan-cards .plan-popular .badge-popular {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: 25px;
  padding: 4px;
  background-color: #005eff;
  border-radius: 10px 10px 0 0;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.plan-section .plan-cards .plan-recommended {
  border: 2px solid #005eff;
  box-shadow: 0px 0px 20px 0px rgba(36, 116, 255, 0.2);
  padding: 39px 19px 19px;
}
.plan-section .plan-cards .plan-recommended .badge-recommended {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: 25px;
  padding: 4px;
  background-color: #005eff;
  border-radius: 10px 10px 0 0;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.plan-section .plan-cards .plan-personalized .badge-personalized {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: 25px;
  padding: 5px;
  background-color: #315ac9;
  border-radius: 10px 10px 0 0;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.plan-section .plan-footer {
  margin-block: 4px 16px;
}
.plan-section .plan-footer .vat-notice {
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}
@media (max-width: 1024.98px) {
  .plan-section .plan-header {
    align-items: center;
  }
  .plan-section .plan-cards .plan-card {
    gap: 6px;
    min-height: 460px;
    padding: 20px 20px 20px;
  }
  .plan-section .plan-cards .plan-card .plan-pricing {
    min-height: 32px;
  }
  .plan-section .plan-cards .plan-card .plan-pricing .current-price .contact {
    font-size: 28px;
  }
  .plan-section .plan-cards .plan-card .plan-features {
    margin-top: 30px;
  }
  .plan-section .plan-cards .plan-card.plan-popular, .plan-section .plan-cards .plan-card.plan-personalized, .plan-section .plan-cards .plan-card.plan-recommended {
    padding-top: 40px;
  }
}

.account-page .btn-back {
  gap: 0;
  padding: 0;
  font-size: 16px;
  color: #4b5563;
}
.account-page .title1 {
  margin: 40px 0 12px;
}
.account-page .form-group {
  padding-bottom: 0;
}
.account-page .form-item {
  margin-top: 39px;
}
.account-page .form-item:first-child {
  margin-top: 0;
}
.account-page .form-item + .error-text, .account-page .form-item + .guide-text, .account-page .form-item + .waiting-text {
  margin-top: 9px;
}
.account-page .form-item dt {
  margin-bottom: 9px;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  color: #1f2937;
}
.account-page .form-item dt label {
  display: inline-block;
}
.account-page .input-btn-group {
  position: relative;
}
.account-page .error-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #dc2626;
}
.account-page .error-text + .form-item, .account-page .error-text + .form-control, .account-page .error-text + .input-btn-group {
  margin-top: 12px;
}
.account-page .guide-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #6b7280;
}
.account-page .guide-text + .form-item {
  margin-top: 40px;
}
.account-page .waiting-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #059669;
}
.account-page .form-control + .btn-form-inline {
  position: absolute;
  right: 10px;
  top: calc(50% - 18px);
  min-width: 80px;
}
.account-page .req {
  display: inline-block;
  position: relative;
  right: -6px;
  top: -17px;
  margin: 0 !important;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.account-page .req::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 4px;
  background-color: #ef4444;
  border-radius: 50%;
}
.account-page .padding-right-100 {
  padding-right: 100px;
}
@media (min-width: 768px) {
  .account-page {
    max-width: 400px;
    width: 400px;
    margin: 0 auto;
  }
}

.login-page {
  padding-top: 28px;
}
.login-page .btn-group-column {
  flex-direction: column;
  gap: 12px;
  font-weight: 700;
}
.login-page .btn-group-column .btn {
  position: relative;
  padding-left: 20px;
}
.login-page .btn-group-column .btn::before {
  content: "";
  position: absolute;
  top: calc(50% - 8px);
  left: 24px;
  width: 16px;
  height: 16px;
}
.login-page .btn-group-column .google::before {
  background: url(/_next/static/media/ico-google@2x.ec53bed3.png);
  background-size: 16px 16px;
}
.login-page .btn-group-column .naver::before {
  background: url(/_next/static/media/ico-naver@2x.aa829310.png);
  background-size: 16px 16px;
}
.login-page .btn-group-column + p {
  margin: 20px 0;
  text-align: center;
  font-weight: 400;
  line-height: 130%;
  color: #6b7280;
}
.login-page .idpw-find-list {
  position: relative;
  height: 21px;
  margin-top: 24px;
}
.login-page .idpw-find-list .btn {
  position: absolute;
  height: 21px;
  padding: 0;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.24px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.login-page .idpw-find-list .btn.join {
  top: 0;
  left: 0;
  color: #1364ff;
}
.login-page .idpw-find-list .btn.find-id {
  top: 0;
  right: 117px;
}
.login-page .idpw-find-list .btn.reset-pw {
  top: 0;
  right: 0;
}
@media (max-width: 767.98px) {
  .login-page .idpw-find-list .btn-lg {
    font-size: 13px;
  }
}
.login-page .form-group {
  padding-bottom: 40px;
}
@media (min-width: 768px) {
  .login-page .form-group {
    min-height: 278px;
  }
}

.login-popup-page .popup-inner {
  max-height: calc(100% - 20px);
}
.login-popup-page .btn-close-popup {
  right: 24px;
}
.login-popup-page .login-popup-area {
  padding-bottom: 16px;
}
.login-popup-page .login-popup-area .btn-group-column + p {
  margin: 12px 0;
}
.login-popup-page .form-item {
  margin-top: 20px;
}
.login-popup-page .form-item:first-child {
  margin-top: 0;
}
.login-popup-page .form-item + .error-text, .login-popup-page .form-item + .guide-text, .login-popup-page .form-item + .waiting-text {
  margin-top: 9px;
}
.login-popup-page .form-item dt {
  margin-bottom: 9px;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  color: #1f2937;
}
.login-popup-page .form-item dt label {
  display: inline-block;
}
.login-popup-page .input-btn-group {
  position: relative;
}
.login-popup-page .error-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #dc2626;
}
.login-popup-page .error-text + .form-item, .login-popup-page .error-text + .form-control, .login-popup-page .error-text + .input-btn-group {
  margin-top: 12px;
}
.login-popup-page .guide-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #6b7280;
}
.login-popup-page .guide-text + .form-item {
  margin-top: 40px;
}
.login-popup-page .waiting-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #059669;
}
.login-popup-page .form-control + .btn-form-inline {
  position: absolute;
  right: 10px;
  top: calc(50% - 18px);
  min-width: 80px;
}
@media (min-width: 768px) {
  .login-popup-page .login-popup-area .btn-group-column + p {
    margin: 24px 0;
  }
  .login-popup-page .form-item {
    margin-top: 39px;
  }
  .login-popup-page .popup-body {
    padding-left: 40px;
    padding-right: 24px;
  }
  .login-popup-page .login-popup-area {
    padding-top: 40px;
  }
}

.join-page {
  padding-top: 28px;
}
.join-page .pw-chk {
  margin-top: 12px;
}
.join-page .guide-text + .error-text + .form-item {
  margin-top: 40px;
}
.join-page .agree-area {
  margin: 60px 0 40px;
}
.join-page .agree-area .all-agree-check-area {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}
.join-page .agree-area .all-agree-check-area label {
  display: inline-block;
  height: 21px;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.24px;
}
.join-page .agree-area .agree-check-list li {
  display: flex;
  justify-content: space-between;
}
.join-page .agree-area .agree-check-list li + li {
  margin-top: 16px;
}
.join-page .agree-area .agree-check-list .btn {
  height: 18px;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #1364ff;
}
.join-page input:disabled {
  color: #1f2937;
}
.join-page .certi-number-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
}
.join-page .certi-number-area * {
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.14px;
  color: #1364ff;
}
.join-page .certi-number-area.waiting p {
  color: #059669;
}
.join-page .certi-number-area.invalid span,
.join-page .certi-number-area.invalid p {
  color: #dc2626;
}
.join-page .input-btn-group + .error-text {
  margin-top: 9px;
}
.join-page .input-group-form + .guide-text, .join-page .input-group-form + .error-text {
  margin-top: 9px;
}

.findid-page .subject {
  margin-bottom: 48px;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.24px;
}
.findid-page .subject-area {
  margin-bottom: 40px;
}
.findid-page .subject-area .subject {
  margin-bottom: 4px;
}
.findid-page .subject-area .subtext {
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #4b5563;
}
.findid-page form + .btn-group {
  margin-top: 40px;
}
.findid-page .certi-number-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
}
.findid-page .certi-number-area * {
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.14px;
  color: #1364ff;
}
.findid-page .certi-number-area.waiting p {
  color: #059669;
}
.findid-page .certi-number-area.invalid span,
.findid-page .certi-number-area.invalid p {
  color: #dc2626;
}

.findid-result-page .subject {
  margin-bottom: 48px;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.24px;
}
.findid-result-page .subject-area {
  margin-bottom: 40px;
}
.findid-result-page .subject-area .subject {
  margin-bottom: 4px;
}
.findid-result-page .subject-area .subtext {
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #4b5563;
}
.findid-result-page .box-point {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 120px;
  border-radius: 11px;
}
.findid-result-page .box-point p {
  font-size: 18px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.36px;
  color: #1f2937;
}

.findid-page .result-area {
  margin-block: 60px 40px;
  padding-top: 60px;
  border-top: 1px solid #e5e7eb;
}
.findid-page .result-area .subject-area {
  margin-bottom: 20px;
}
.findid-page .result-area .subject {
  margin-bottom: 0;
  font-weight: 500;
}
.findid-page .result-area .subtext {
  margin-top: 4px;
  color: #4b5563;
}
.findid-page .result-area .box-point {
  padding: 24px;
  border-radius: 11px;
}
.findid-page .result-area .box-point .list1 li {
  font-weight: 700;
  color: #1f2937;
}
.findid-page .result-area .box-point .list1 li:before {
  left: 0;
  background: #6b7280;
}
.findid-page .result-area .box-point .list1 li + li {
  margin-top: 16px;
}

.findpw-page .subject {
  margin-bottom: 48px;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.24px;
}
.findpw-page .subject-area {
  margin-bottom: 40px;
}
.findpw-page .subject-area .subject {
  margin-bottom: 4px;
}
.findpw-page .subject-area .subtext {
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #4b5563;
}
.findpw-page .form-group {
  min-height: 126px;
}
.findpw-page .form-item:last-child {
  min-height: 239px;
}
.findpw-page .form-item:first-child {
  min-height: auto;
}
.findpw-page .error-text + .form-item {
  margin-top: 40px;
}
.findpw-page .input-group-form .form-control + .guide-text, .findpw-page .input-group-form .form-control + .error-text, .findpw-page .input-group-form .form-control + .waiting-text {
  margin-top: 9px;
}
.findpw-page .input-group-form + .error-text, .findpw-page .input-group-form + .waiting-text {
  margin-top: 9px;
}
.findpw-page .input-group-form .guide-text + .form-control {
  margin-top: 12px;
}
.findpw-page .input-group-form .guide-text.error {
  color: #dc2626;
}
.findpw-page .certi-number-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
}
.findpw-page .certi-number-area * {
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.14px;
  color: #1364ff;
}
.findpw-page .certi-number-area.waiting p {
  color: #059669;
}
.findpw-page .certi-number-area.invalid span,
.findpw-page .certi-number-area.invalid p {
  color: #dc2626;
}

.settings .settings-list dl {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 84px;
  padding: 24px 0 23px;
  border-bottom: 1px solid #e5e7eb;
}
.settings .settings-list dl.sns dd {
  justify-content: flex-start;
  gap: 20px;
}
.settings .settings-list dt {
  min-width: 120px;
  font-size: 16px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #1f2937;
}
.settings .settings-list dd {
  display: flex;
  align-items: center;
  column-gap: 8px;
  width: 656px;
  min-height: 21px;
}
.settings .settings-list .con-area {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
}
.settings .settings-list .con-area.dir-col {
  flex-direction: column;
}
.settings .settings-list .con-area .img {
  width: 16px;
  height: 16px;
}
.settings .settings-list .con-area .img img {
  width: 16px;
  height: 16px;
}
.settings .settings-list .con-area p {
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #1f2937;
}
.settings .settings-list .con-area .input-btn-group {
  display: flex;
  flex-direction: column;
}
.settings .settings-list .btn-area {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.settings .settings-list .btn-area .btn {
  min-width: 80px;
}
.settings .settings-list p.error-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #dc2626;
}
.settings .settings-list p.guide-text {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #6b7280;
}
@media (max-width: 767.98px) {
  .settings .settings-list dl {
    display: block;
  }
  .settings .settings-list dl dt {
    margin-bottom: 8px;
  }
  .settings .settings-list dl dd {
    width: auto;
  }
}
.settings .tabmenu-type2 .tab-list li {
  height: 56px;
}
.settings .settings-container {
  max-width: 1020px;
}
.settings .settings-container .promotion-banner {
  margin-top: 66px;
}
.settings .settings-container .promotion-banner.type-card {
  display: none;
}
@media (max-width: 767.98px) {
  .settings .settings-container .promotion-banner.type-band {
    display: none;
  }
  .settings .settings-container .promotion-banner.type-card {
    display: flex;
  }
}

.member-profile {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}
.member-profile .profile {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0px 1.67px 3.33px 0px rgba(0, 0, 0, 0.1019607843);
  font-weight: 500;
  font-size: 10px;
}
.member-profile .info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: calc(100% - 24px);
}
.member-profile .name {
  margin-right: 4px;
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
}
.member-profile .email {
  width: 100%;
  font-size: 12px;
  color: #6b7280;
}
.member-profile .badge-role {
  padding: 0 4px;
}

.setting-activity-page .my-flower-pot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.user-level-tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  color: #1f2937;
  font-size: 14px;
  line-height: 1;
  background: rgba(229, 231, 235, 0.8);
}
.user-level-tag.small {
  height: 19px;
  padding: 0 3px;
  font-size: 12px;
  border-radius: 4px;
  border-color: transparent;
}

.setting-activity-page .plant-history {
  position: relative;
  padding-left: 20px;
}
.setting-activity-page .plant-history::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: 10px;
  width: 2px;
  background: #e5e7eb;
}
.setting-activity-page .plant-history li {
  position: relative;
  padding-left: 10px;
}
.setting-activity-page .plant-history li + li {
  margin-top: 10px;
}
.setting-activity-page .plant-history li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0;
  margin-top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
  border: 2px solid #fff;
}
.setting-activity-page .plant-history li .undefined {
  min-width: 48px;
  justify-content: center;
  border-color: transparent;
  color: #6b7280;
  opacity: 0.6;
  border-color: transparent;
}
.setting-activity-page .plant-history li.active {
  position: relative;
}
.setting-activity-page .plant-history li.active::before {
  border-color: #e5e7eb;
  background: #1364ff;
  animation: blink 1.5s infinite;
}
.setting-activity-page .plant-history li:last-child {
  margin-bottom: 0;
}

.setting-account-page .content-inner {
  min-height: calc(100vh - 297px);
}
.setting-account-page .content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.setting-account-page .profile .con-area {
  align-items: center;
  gap: 16px;
}
.setting-account-page .profile .con-area .img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
}
.setting-account-page .profile .con-area .img img {
  width: 64px;
  height: 64px;
  object-fit: cover;
}
.setting-account-page .profile .con-area .user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.setting-account-page .profile .con-area .user-info .user-type {
  color: #1f2937;
  background: #e5e7eb;
  font-size: 12px;
  border-radius: 4px;
  padding: 3px 4px;
  line-height: 1;
}

.change-number-popup .guide-text {
  margin-top: 9px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #6b7280;
}

.popup-profile-img {
  display: block;
  width: 80px;
  height: 80px;
  margin: 32px auto 0;
  overflow: hidden;
  border-radius: 50%;
}
.popup-profile-img img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.change-photo-popup .box-outline {
  margin-top: 20px;
  margin-bottom: 0;
  padding: 12px;
  border-radius: 8px;
}
.change-photo-popup .info-area {
  position: relative;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.change-photo-popup .info-area strong {
  font-size: 12px;
  line-height: 130%;
  color: #1f2937;
}
.change-photo-popup .info-area::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 12px;
  height: 12px;
  background: url(/_next/static/media/ico-info-xs@2x.84cae63b.png);
  background-size: 12px 12px;
}
.change-photo-popup .bul-list {
  margin-top: 4px;
}
.change-photo-popup .bul-list li {
  position: relative;
  padding-left: 18px;
  font-size: 12px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.12px;
  color: #4b5563;
}
.change-photo-popup .bul-list li::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  left: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4b5563;
}

.change-pw-popup .form-group {
  padding-bottom: 0;
}
.change-pw-popup .form-item {
  margin-top: 39px;
}
.change-pw-popup .form-item:first-child {
  margin-top: 0;
}
.change-pw-popup .form-item + .error-text, .change-pw-popup .form-item + .guide-text, .change-pw-popup .form-item + .waiting-text {
  margin-top: 9px;
}
.change-pw-popup .form-item dt {
  margin-bottom: 9px;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  color: #1f2937;
}
.change-pw-popup .form-item dt label {
  display: inline-block;
}
.change-pw-popup .input-group-form .form-control + .guide-text, .change-pw-popup .input-group-form .form-control + .error-text, .change-pw-popup .input-group-form .form-control + .waiting-text {
  margin-top: 9px;
}
.change-pw-popup .input-group-form .guide-text + .form-control {
  margin-top: 12px;
}
.change-pw-popup .input-group-form .guide-text.error {
  color: #dc2626;
}
.change-pw-popup .error-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #dc2626;
}
.change-pw-popup .error-text + .form-item, .change-pw-popup .error-text + .form-control, .change-pw-popup .error-text + .input-btn-group {
  margin-top: 12px;
}
.change-pw-popup .guide-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #6b7280;
}
.change-pw-popup .guide-text + .form-item {
  margin-top: 40px;
}
.change-pw-popup .guide-text + .form-control {
  margin-top: 12px;
}
.change-pw-popup .guide-text.error {
  color: #dc2626;
}
.change-pw-popup .waiting-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #059669;
}

.change-secondary-email-popup .form-group {
  padding-bottom: 0;
}
.change-secondary-email-popup .error-text {
  margin-top: 9px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #dc2626;
}

.secession-check-list li + li {
  margin-top: 20px;
}
.secession-check-list .check-item + .input-group-form {
  margin-top: 12px;
}
.secession-check-list .check-item [type=checkbox] + label:before {
  margin-right: 8px;
}

.btn-red {
  background: #ef4444;
  color: #fff;
}
.btn-red:disabled {
  color: #fff;
  background: #fca5a5;
}

.leave-btn-area {
  margin: 24px 0;
}

.setting-license-page .content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.setting-license-page .settings-list dd .btn {
  min-width: 128px;
}
.setting-license-page .license-input-item dd {
  align-items: flex-start;
}
.setting-license-page .license-input-item .con-area {
  flex-direction: column;
}
.setting-license-page .available-licenses-item .con-area {
  flex-direction: column;
  gap: 0;
}
.setting-license-page .box-guide {
  max-width: 1020px;
}
.setting-license-page .btn-group-center {
  max-width: 1020px;
}
.setting-license-page .tooltip-wrapper .tooltip-content {
  display: none;
}
.setting-license-page .tooltip-wrapper .tooltip-content .tooltip-inner {
  width: auto;
  white-space: nowrap;
}
.setting-license-page .tooltip-wrapper.accent-wrap .tooltip-content {
  display: block;
}
.setting-license-page .tooltip-wrapper.accent-wrap .btn {
  box-shadow: 0px 0px 16px 0px #bafd02;
}

.license-results-alert .popup-inner {
  width: 460px !important;
}
.license-results-alert .box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 12px;
  padding: 20px;
}
.license-results-alert .box .text {
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.24px;
}
.license-results-alert .box .num {
  flex: 1 0 auto;
  min-width: 56px;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.24px;
  color: #1364ff;
  text-align: right;
}
.license-results-alert .license-results-notice {
  margin-top: 20px;
  line-height: 1.4;
}
.license-results-alert .license-results-notice strong {
  color: #000;
  font-weight: bold;
}
.license-results-alert .license-results-notice p {
  margin-top: 8px;
}
.license-results-alert .license-results-notice .text-output {
  white-space: pre-line;
}

.event-code-alert .popup-inner {
  width: 460px !important;
}
.event-code-alert .box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 12px;
  padding: 20px;
}
.event-code-alert .box .text {
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.24px;
}
.event-code-alert .box .num {
  flex: 1 0 auto;
  min-width: 56px;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.24px;
  color: #1364ff;
  text-align: right;
}
.event-code-alert .license-results-notice {
  margin-top: 20px;
  line-height: 1.4;
}
.event-code-alert .license-results-notice strong {
  color: #000;
  font-weight: bold;
}
.event-code-alert .license-results-notice p {
  margin-top: 8px;
}
.event-code-alert .license-results-notice .text-output {
  white-space: pre-line;
}

.license-popup .popup-inner {
  max-height: calc(100vh - 120px);
}
.license-popup .popup-body {
  min-height: 234px;
}
.license-popup .license-list-area {
  display: flex;
  height: 100%;
  padding-bottom: 24px;
}
.license-popup .license-list-area > div {
  width: 100%;
}
.license-popup .license-list-area .subject {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #4b5563;
}
.license-popup .license-list-area .license-list {
  margin-top: 12px;
  border-bottom: 1px solid #e5e7eb;
}
.license-popup .license-list-area .license-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  padding: 23px 20px;
  border-top: 1px solid #e5e7eb;
}
.license-popup .license-list-area .license-list .content {
  max-width: 616px;
  width: auto;
}
.license-popup .license-list-area .license-list .content strong {
  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: -0.36px;
  color: #1f2937;
}
.license-popup .license-list-area .license-list .content p {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  color: #4b5563;
}
.license-popup .license-list-area .license-list .content .date {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #6b7280;
}
.license-popup .license-list-area .license-list .content .date span + span {
  position: relative;
}
.license-popup .license-list-area .license-list .content .date span + span::before {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  left: -5px;
  width: 1px;
  height: 14px;
  border-radius: 100px;
  background: #e5e7eb;
}
.license-popup .license-list-area .license-list .num {
  flex: 0 0 auto;
  min-width: 56px;
  width: auto;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.24px;
  color: #1364ff;
  text-align: right;
}
@media (max-width: 767.98px) {
  .license-popup .license-list-area .license-list li {
    gap: 20px;
    padding: 20px 0;
  }
  .license-popup .license-list-area .license-list .content strong {
    font-size: 16px;
    line-height: unset;
  }
}
.license-popup .nodata-area {
  width: 100%;
}
.license-popup .nodata-area p {
  margin-top: 76px;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: -0.48px;
  color: #6b7280;
  text-align: center;
}

.box:has(.team-info) {
  border-radius: 20px;
}

.setting-team-page .table-list td {
  height: 64px;
}

.team-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
}
.team-info .left {
  flex: 1 1 auto;
}
.team-info .top-info .title {
  margin-right: 2px;
  font-weight: 500;
  font-size: 14px;
  color: #4b5563;
}
.team-info .top-info .btn-edit {
  height: 24px;
  padding-inline: 8px;
}
.team-info .top-info + .btm-info {
  margin-top: 4px;
}
.team-info .btm-info {
  display: flex;
  align-items: center;
  gap: 4px;
}
.team-info .team-name {
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
  color: #1f2937;
}
.team-info .id-area {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 22px;
  margin-top: 1px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 0 6px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
}
.team-info .id-area dt {
  position: relative;
  color: #6b7280;
}
.team-info .id-area dt::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
  width: 1px;
  height: 10px;
  background-color: #d1d5db;
}
.team-info .id-area dd {
  color: #4b5563;
}
@media (max-width: 1024.98px) {
  .team-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.team-edit-popup .text-value {
  display: block;
  font-weight: 500;
  font-size: 16px;
  color: #0f1318;
}
.team-edit-popup .text-value .value {
  color: #1364ff;
}
.team-edit-popup .member-value {
  display: inline-block;
  margin-right: 3px;
}

.alert-team-invite .message {
  margin-bottom: 30px;
  text-align: left;
  color: #1f2937;
}
.alert-team-invite .team-invite-info {
  border-top: 1px solid #d1d5db;
  border-bottom: 1px solid #d1d5db;
  padding-block: 8px;
}
.alert-team-invite .team-invite-info .item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
.alert-team-invite .team-invite-info .item-row dt {
  width: 140px;
  height: 100%;
  font-weight: 400;
  font-size: 14px;
  color: #6b7280;
}
.alert-team-invite .team-invite-info .item-row dd {
  width: calc(100% - 148px);
  height: 100%;
  font-weight: 500;
  font-size: 14px;
  color: #0f1318;
}

.team-role-popup .flex-table .cell-text {
  font-size: 16px;
}

.setting-referral-page .content-inner {
  padding-top: 24px;
}
.setting-referral-page .referral-section {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
}
.setting-referral-page .referral-section + .referral-section {
  margin-top: 40px;
}
@media (max-width: 1024.98px) {
  .setting-referral-page .referral-section {
    flex-direction: column;
  }
}
.setting-referral-page .referral-banner {
  height: 283px;
  width: 574px;
  padding: 32px 24px;
  border-radius: 16px;
  background-color: #000;
  border: 1px solid transparent;
  color: #fff;
}
.setting-referral-page .referral-banner .banner-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.setting-referral-page .referral-banner .banner-top .title {
  display: block;
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}
.setting-referral-page .referral-banner .banner-top .title strong {
  font-weight: 700;
}
.setting-referral-page .referral-banner .banner-top .subtitle {
  font-weight: 400;
  font-size: 12px;
  color: #9ca3af;
}
.setting-referral-page .referral-banner .coupon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 80px;
  color: #123300;
}
.setting-referral-page .referral-banner .coupon-box > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.setting-referral-page .referral-banner .coupon-box .coupon-label {
  font-weight: 500;
  font-size: 12px;
  opacity: 0.8;
}
.setting-referral-page .referral-banner .coupon-box .amount {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: #0a1b00;
}
.setting-referral-page .referral-banner .coupon-box .unit {
  font-weight: 400;
  font-size: 10px;
  opacity: 0.6;
}
.setting-referral-page .referral-banner .banner-content {
  margin-top: 63px;
  list-style: none;
}
.setting-referral-page .referral-banner .banner-content .list-num {
  counter-reset: condition-counter;
  padding: 0;
  margin: 0;
}
.setting-referral-page .referral-banner .banner-content .list-num li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-left: 30px;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  counter-increment: condition-counter;
}
.setting-referral-page .referral-banner .banner-content .list-num li + li {
  margin-top: 8px;
}
.setting-referral-page .referral-banner .banner-content .list-num li::before {
  position: absolute;
  top: 2px;
  content: counter(condition-counter);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: #333;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.setting-referral-page .referral-banner .banner-content .list-num li::after {
  content: none;
}
.setting-referral-page .referral-banner .banner-content .list-num li:last-child {
  margin-bottom: 0;
}
@media (max-width: 1024.98px) {
  .setting-referral-page .referral-banner {
    width: 100%;
  }
}
.setting-referral-page .share-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 430px;
  width: calc(100% - 590px);
  max-height: 283px;
}
.setting-referral-page .share-section .share-card {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 95px;
  padding: 20px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  word-break: keep-all;
}
.setting-referral-page .share-section .share-card .left {
  flex: 1 1 auto;
}
.setting-referral-page .share-section .share-card .right {
  flex: 0 0 auto;
}
.setting-referral-page .share-section .share-card .card-title {
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 12px;
  color: #6b7280;
}
.setting-referral-page .share-section .share-card .code-text {
  font-weight: 700;
  font-size: 22px;
}
.setting-referral-page .share-section .share-card + .share-card {
  max-height: 176px;
}
.setting-referral-page .share-section .share-text {
  font-weight: 400;
  font-size: 12px;
}
.setting-referral-page .share-section .link {
  display: inline-block;
  margin-top: 1px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 1024.98px) {
  .setting-referral-page .share-section {
    width: 100%;
  }
}
.setting-referral-page .history-section {
  width: 100%;
}
.setting-referral-page .history-section .section-title {
  margin-bottom: 22px;
  font-weight: 700;
  font-size: 18px;
  color: #0f1318;
}
.setting-referral-page .history-section .history-area {
  display: grid;
  grid-template-columns: repeat(4, minmax(243px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}
.setting-referral-page .history-section .history-area:has(.nodata-area) {
  grid-template-columns: repeat(1, minmax(243px, 1fr));
}
.setting-referral-page .history-section .history-area .history-card {
  min-width: 243px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.setting-referral-page .history-section .history-area .history-card .card-title {
  padding: 20px 20px 0;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 14px;
  color: #0f1318;
}
.setting-referral-page .history-section .history-area .history-card .card-details {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 20px 20px;
  line-height: 1.4;
}
.setting-referral-page .history-section .history-area .history-card .card-details::before {
  position: absolute;
  top: 0;
  content: "";
  width: calc(100% - 40px);
  height: 1px;
  background-color: #f3f4f6;
}
.setting-referral-page .history-section .history-area .history-card .card-details .detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3px;
}
.setting-referral-page .history-section .history-area .history-card .card-details .detail-item .label {
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}
.setting-referral-page .history-section .history-area .history-card .card-details .detail-item .value {
  font-weight: 400;
  font-size: 12px;
  color: #4b5563;
}
.setting-referral-page .history-section .history-area .history-card .card-action {
  display: flex;
  justify-content: center;
}
.setting-referral-page .history-section .history-area .history-card .card-action .btn {
  min-width: 100%;
  border-radius: 0 0 11px 11px;
}
.setting-referral-page .history-section .history-area .history-card .card-action .btn-credit-completed, .setting-referral-page .history-section .history-area .history-card .card-action .btn-credit-expired {
  background-color: #d1d5db;
  color: #6b7280;
}
.setting-referral-page .history-section .history-area .history-card .card-action .btn-credit-completed:disabled, .setting-referral-page .history-section .history-area .history-card .card-action .btn-credit-expired:disabled {
  background-color: #d1d5db;
  color: #6b7280;
}
@media (max-width: 1024.98px) {
  .setting-referral-page .history-section {
    width: 100%;
  }
  .setting-referral-page .history-section .history-area {
    grid-template-columns: repeat(2, minmax(243px, 1fr));
  }
}
@media (max-width: 767.98px) {
  .setting-referral-page .history-section .history-area {
    grid-template-columns: repeat(1, minmax(243px, 1fr));
  }
}
.setting-referral-page .history-section .nodata-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 134px;
  padding: 15px;
}
.setting-referral-page .history-section .nodata-area .empty-icon .ico {
  font-size: 48px;
  color: #d1d5db;
}
.setting-referral-page .history-section .nodata-area .nodata-content {
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  color: #6b7280;
}
.setting-referral-page .history-section .nodata-area .nodata-content .nodata-title {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 16px;
  color: #4b5563;
}
.setting-referral-page .referral-notes .notes-title {
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 12px;
  color: #4b5563;
}
.setting-referral-page .referral-notes .list-notes li {
  padding-left: 11px;
  margin-bottom: 4px;
  font-size: 10px;
  color: #6b7280;
}
.setting-referral-page .referral-notes .list-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 3px;
  background-color: #d1d5db;
  border-radius: 50%;
}
@media (max-width: 1024.98px) {
  .setting-referral-page .referral-notes {
    padding: 20px;
  }
}

.credit-coupon-popup .popup-body {
  padding-block: 24px 16px;
}

.setting-notifications-page .panel-title {
  margin-bottom: 12px;
}
.setting-notifications-page .panel-content {
  border-top: none;
}
.setting-notifications-page .option-section .row-option .option-item {
  border-bottom: 1px solid #e5e7eb;
}
.setting-notifications-page .option-section .row-option .option-item .title {
  color: #1f2937;
}
.setting-notifications-page .option-section .row-option .option-item + .option-item {
  border-top: none;
}
.setting-notifications-page .option-item .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 800px;
}
.setting-notifications-page .option-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.setting-notifications-page .option-wrap .sub-text {
  font-weight: 500;
  font-size: 14px;
  color: #4b5563;
}

.customer-support {
  position: relative;
}
.supersite-iframe {
  flex: 1 1 auto;
}

.content-page {
  position: relative;
}
.content-page .event-iframe {
  flex: 1 1 auto;
}

.dashboard-page {
  gap: 32px !important;
}
@media (min-width: 1600px) {
  .dashboard-page .promotion-banner {
    flex: 1 1 360px;
  }
}

.info-pannel {
  display: flex;
  gap: 24px;
}
@media (min-width: 768px) {
  .info-pannel {
    padding: 40px;
    padding-bottom: 24px;
    border-radius: 36px;
    min-height: 260px;
    background: var(--white, #fff);
  }
}
@media (min-width: 768px) and (max-width: 1024.98px) {
  .info-pannel {
    overflow-x: auto;
  }
}
@media (max-width: 767.98px) {
  .info-pannel {
    padding: 0;
    flex-direction: column;
  }
}
.info-pannel .col {
  position: relative;
}
.info-pannel .col .title {
  height: 28px;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
}
.info-pannel .col .more {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 28px;
}
.info-pannel .list-service {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
}
.info-pannel .list-service li {
  flex: 1 1 20%;
}
.info-pannel .list-service li .selector {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: 180px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.info-pannel .list-service li::before {
  content: none;
}
.info-pannel .list-service li .bg-white {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: #fff;
  background-size: 30px 30px;
}
.info-pannel .list-service li .text {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
}
.info-pannel .list-service li .text .ico {
  flex: 0 0 auto;
  margin-right: -4px;
}
.info-pannel .list-service .service-img2html {
  background: #1364ff;
}
.info-pannel .list-service .service-contrast {
  background: #a855f7;
}
.info-pannel .list-service .service-seo {
  background: #f97316;
}
.info-pannel .list-service .service-table {
  background: #059669;
}
@media (max-width: 1599.98px) {
  .info-pannel .list-service li {
    flex: 1 1 40%;
  }
  .info-pannel .list-service li .selector {
    justify-content: flex-start;
    flex-direction: row;
    height: 80px;
    padding: 0 20px;
    gap: 8px;
    border-radius: 16px;
  }
  .info-pannel .list-service li .selector .bg-white {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-size: 16px 16px;
  }
  .info-pannel .list-service li .selector .text .ico {
    display: none;
  }
}
.info-pannel .community {
  flex: 1 1 auto;
  min-width: 200px;
}
.info-pannel .community .article-list {
  display: flex;
  flex-wrap: wrap;
  height: 140px;
  overflow: hidden;
  gap: 12px;
}
.info-pannel .community .article-list .article-item {
  flex: 1 1 222px;
  height: 140px;
  gap: 8px;
  padding: 16px 16px 14px 16px;
  overflow: hidden;
}
.info-pannel .community .article-list .article-item dt {
  white-space: nowrap;
}
.info-pannel .community .article-list .article-item .content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
  height: 4.2em;
  max-height: none;
  line-height: 1.4em;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.info-pannel .community .article-list .article-item button:hover {
  text-decoration: none;
  cursor: text;
}
@media (max-width: 1599.98px) {
  .info-pannel .community .article-item {
    flex: 1 1 45%;
  }
}
.info-pannel .popular-resources {
  position: inherit;
  border-radius: 20px;
  padding: 12px 16px;
  background: var(--gray100, #f3f4f6);
  height: 140px;
  overflow: hidden;
}
.info-pannel .popular-resources:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
}
.info-pannel .popular-resources .data-list a {
  width: 100%;
}
.info-pannel .popular-resources .data-list .info {
  width: calc(100% - 86px);
}
.info-pannel .popular,
.info-pannel .promotion {
  overflow: hidden;
  flex: 0 0 auto;
}
@media (min-width: 768px) {
  .info-pannel .popular,
  .info-pannel .promotion {
    min-width: 320px;
    width: 320px;
  }
}
.info-pannel .promotion-banner {
  height: 180px;
}

.delete-page .guide-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #4b5563;
}
.delete-page .btn-area .btn-search::after {
  content: "";
  position: absolute;
  top: 2px;
  left: -20px;
  width: 1px;
  height: 24px;
  border-radius: 100px;
  background: #d1d5db;
}

.delete-font-red {
  color: #dc2626;
}

.delete-sub-text {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.14px;
  color: #4b5563;
}

.change-work-name-popup .btn-group {
  flex-wrap: nowrap;
  gap: 8px;
}
.change-work-name-popup .characters-long {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-top: 9px;
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.14px;
  color: #6b7280;
}

.more-popup .popup-inner {
  width: 179px;
  border-radius: 12px;
}
.more-popup .popup-body {
  padding: 8px 6px;
  overflow-y: hidden;
}
.more-popup .popup-body .btn-group {
  gap: 0;
  margin-top: 0;
}
.more-popup .popup-body .btn {
  justify-content: flex-start;
  width: 100%;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.14px;
  color: #1f2937;
  text-align: left;
}
.more-popup .popup-body .btn:hover, .more-popup .popup-body .btn:active {
  background: #f3f4f6;
}

.workitem-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.workitem-wrap .workitem-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
}
@media (max-width: 1024.98px) {
  .workitem-wrap .workitem-header {
    height: auto;
  }
  .workitem-wrap .workitem-header .title1 {
    white-space: nowrap;
  }
  .workitem-wrap .workitem-header .btn-area {
    display: none;
  }
}
.workitem-wrap .title-area,
.workitem-wrap .btn-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.workitem-wrap .workitem-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 24px;
}
@media (max-width: 1024.98px) {
  .workitem-wrap .workitem-body {
    overflow-x: auto;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.workitem-wrap .btn-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 41px;
}
.workitem-wrap .btn-area .btn-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  position: relative;
}
.workitem-wrap .btn-area .btn-search::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 48px;
  width: 1px;
  height: 24px;
  border-radius: 100px;
  background: #d1d5db;
}
.workitem-wrap .selected-option {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid #9ca3af;
  background: #fff;
}
.workitem-wrap .selected-option .option-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.workitem-wrap .selected-option .btn-cancel {
  padding: 5px 0 5px 10px;
  border-radius: 0;
}
.workitem-wrap .selected-option.hidden {
  display: none;
}
.workitem-wrap .checked-btn-area {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.workitem-wrap .checked-num {
  margin-right: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #1364ff;
}
.workitem-wrap .btn-outline-gray + .btn-outline-gray {
  margin-left: 6px;
}
.workitem-wrap .more-action {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.workitem-wrap .more-action:hover {
  background: #e5e7eb;
}
.workitem-wrap .more-action.on {
  background: #e5e7eb;
}
.workitem-wrap .more-action button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.workitem-card-wrap .sort-area {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  height: 24px;
}
.workitem-card-wrap .btn-sort {
  transition: all 0.3s;
  overflow: hidden;
}
.workitem-card-wrap .btn-sort.on {
  transform: rotate(180deg);
}
.workitem-card-wrap .btn-sort-division {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  line-height: 21px;
  color: #6b7280;
}
.workitem-card-wrap .dropdown {
  width: auto;
  min-width: 56px;
}
.workitem-card-wrap .dropdown dd {
  position: absolute;
  top: 22px;
  left: initial;
  right: 20px;
}
.workitem-card-wrap .data-area {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.workitem-card-wrap .file-size {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: #4b5563;
  position: relative;
}
.workitem-card-wrap .file-size::before {
  content: "";
  position: absolute;
  top: 2px;
  right: -5px;
  width: 1px;
  height: 12px;
  border-radius: 100px;
  background: #d1d5db;
}
.workitem-card-wrap .date-time,
.workitem-card-wrap .last-date {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: #4b5563;
}

.community-page .page-header {
  position: -webkit-sticky;
  position: sticky;
  top: -40px;
  text-align: center;
}
.community-page .category-filter {
  border-top: 1px solid #f3f4f6;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.community-page .category-filter .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.community-page .category-filter .btn {
  color: var(--gray-text-secondary, #4b5563);
}
.community-page .category-filter .btn.active {
  font-weight: 500;
  color: #1364ff;
}
@media (max-width: 1599.98px) {
  .community-page .category-filter {
    font-size: 14px;
    gap: 8px;
  }
  .community-page .category-filter .row {
    gap: 8px;
  }
}
.community-page .default-nodata {
  height: auto;
}
.community-page .article-list {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
@media (max-width: 767.98px) {
  .mode-public .community-page {
    width: 100%;
  }
  .mode-public .community-page .category-filter {
    max-width: 340px;
    margin: auto;
  }
}

.community-input {
  width: 510px;
  max-width: 100%;
  margin: 24px auto;
}
.community-input fieldset {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: center;
}
.community-input .emoji {
  flex: 0 0 auto;
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background: var(--gray200, #e5e7eb);
  padding: 0;
  font-size: 20px;
  line-height: 1;
}
.community-input .form-control {
  height: 72px;
  border-radius: 50px;
  padding: 0 94px 0 24px;
  border: 1px solid var(--primary300, #bfdbfe);
  background: #fff;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.05);
  font-size: 18px;
}
.community-input .form-control::placeholder {
  color: var(--gray-text-disabled, #6b7280);
  font-size: 18px;
}
.community-input .btn-md {
  position: absolute;
  right: 12px;
  display: flex;
  width: 70px;
  height: 40px;
  border-radius: 20px;
  font-size: 14px;
}
@media (max-width: 767.98px) {
  .community-input .form-control {
    font-size: 16px;
  }
  .community-input .form-control::placeholder {
    font-size: 16px;
  }
  .community-input .emoji {
    display: none;
  }
}

.resource-page .title-area {
  text-align: center;
  margin-bottom: 16px;
}
.resource-page .top-info {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
  padding: 18px 24px;
  gap: 16px;
  border-radius: 8px;
  background: var(--gray100, #f3f4f6);
}
.resource-page .top-info .label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 17px;
  padding: 0 4px;
  margin-top: -2px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: normal;
  vertical-align: middle;
  color: #000;
  border: 1px solid #000;
  background-color: #fff;
  animation: blinkBackground 2s infinite;
}
@keyframes blinkBackground {
  0% {
    background-color: #fff;
    border-color: #000;
  }
  50% {
    background-color: transparent;
    border-color: #999;
  }
  100% {
    background-color: #fff;
    border-color: #000;
  }
}
.resource-page .top-info .btn {
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .resource-page .top-info {
    text-align: center;
    flex-direction: column;
    gap: 12px;
  }
  .resource-page .top-info .label {
    margin-bottom: 8px;
  }
}
.resource-page .col-filter {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 14px;
}
.resource-page .col-filter .filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray200, #e5e7eb);
}
.resource-page .col-filter .filter-header .title {
  font-size: 16px;
  line-height: 40px;
  color: var(--gray-text-primary, #1f2937);
}
.resource-page .col-filter .filter-header .btn {
  color: var(--gray-text-secondary, #4b5563);
  gap: 2px;
}
.resource-page .col-filter .filter-header .btn:disabled {
  opacity: 0.5;
  border-color: transparent;
}
.resource-page .col-filter .filter-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 14px;
}
.resource-page .col-filter dt {
  color: var(--gray-text-primary, #1f2937);
  font-weight: 700;
  margin-bottom: 12px;
}
.resource-page .col-filter dd {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.resource-page .col-filter dd .check-item-btn {
  white-space: nowrap;
}
.resource-page .col-filter dd .check-item-btn .label,
.resource-page .col-filter dd .check-item-btn label {
  display: flex;
  padding: 0 8px;
}
.resource-page .col-list .list-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray200, #e5e7eb);
}
.resource-page .col-list .list-control .left {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
}
.resource-page .col-list .list-control .right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-text-disabled, #6b7280);
  font-size: 16px;
}
.resource-page .col-list .default-nodata {
  height: auto;
}
@media (min-width: 1025px) {
  .resource-page .list-container {
    display: flex;
    gap: 40px;
  }
  .resource-page .col-filter {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    max-height: 100vh;
    flex: 0 0 auto;
    width: 218px;
  }
  .resource-page .col-list {
    flex: 1 1 auto;
    max-width: calc(100% - 294px);
  }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .resource-page .mode-public .col-filter .filter-body {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .resource-page .mode-public .col-filter .filter-body dl {
    flex: 1 1 40%;
  }
}
@media (max-width: 767.98px) {
  .resource-page .col-filter {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray200, #e5e7eb);
    background: #fff;
    gap: 12px;
  }
  .resource-page .col-filter .filter-header {
    border-bottom: 0;
    padding: 0;
  }
  .resource-page .col-list {
    margin-top: 20px;
  }
  .resource-page .col-list .list-control {
    display: none;
    flex-direction: column;
    padding-bottom: 24px;
  }
  .resource-page .col-list .list-control .left {
    width: 100%;
  }
  .resource-page .col-list .list-control .form-control-md {
    width: 100%;
  }
  .resource-page .col-list .default-nodata {
    padding: 40px 0;
    min-height: auto;
  }
}

.data-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  border-radius: 16px;
  padding: 24px 0;
}
.data-item .link {
  display: flex;
  border-radius: 8px;
}
.data-item dt {
  margin-bottom: 6px;
}
.data-item .icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 8px;
}
.data-item .icon .badge {
  position: absolute;
  right: 0;
  top: 0;
  margin: -1px;
  color: #ef4444;
  background: currentColor;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  overflow: hidden;
}
.data-item .subject {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: bold;
}
.data-item .content {
  color: var(--gray-text-secondary, #4b5563);
  font-size: 16px;
}
.data-item:hover .subject, .data-item:focus-within .subject {
  color: #1364ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.data-item:hover .content, .data-item:focus-within .content {
  color: #000;
}
.data-item .info {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
}
.data-item .info span {
  display: flex;
  padding: 2px 6px;
  align-items: center;
  border-radius: 4px;
  border: 1px solid var(--gray300, #d1d5db);
  color: var(--gray-text-secondary, #4b5563);
  font-size: 14px;
}
.data-item .info .category {
  border-color: rgba(0, 0, 0, 0.04);
}
.data-item .btn-group {
  margin-top: 12px;
}
@media (min-width: 1025px) {
  .data-item {
    padding-left: 64px;
  }
  .data-item .icon {
    position: absolute;
    left: 0;
    top: 24px;
  }
}

.content-tooladd {
  display: flex;
  flex-direction: column;
}
.content-tooladd .info-area {
  position: relative;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.content-tooladd .info-area strong {
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: #1f2937;
}
.content-tooladd .info-area::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 20px;
  height: 20px;
  background: url(/_next/static/media/ico-info-md@2x.ea6c96b7.png);
  background-size: 20px 20px;
}
.content-tooladd .info-area .list {
  font-size: 15px;
}

.sample-images {
  display: flex;
  gap: 12px;
}
.sample-images .sample-image-item {
  transition: all 0.2s ease;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.sample-images .sample-image-item:hover {
  border-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.sample-images .sample-image-item img {
  width: 70px;
  height: 100px;
  object-fit: cover;
  vertical-align: top;
}

.tooladd-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.tooladd-wrap .tooladd-header .page-title {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}
.tooladd-wrap .tooladd-header .ico + span {
  margin-left: 12px;
}
.tooladd-wrap .tooladd-body .text-guide {
  font-size: 16px;
}
.tooladd-wrap .input-link {
  position: relative;
  display: block;
  height: 56px;
}
.tooladd-wrap .input-link .form-control {
  height: 100%;
  padding-left: 44px;
  border-radius: 11px;
}
.tooladd-wrap .input-link::after {
  position: absolute;
  top: calc(50% - 10px);
  left: 20px;
  display: block;
  width: 20px;
  height: 20px;
  background: url(/_next/static/media/ico-linkclip-md@2x.0536457f.png);
  background-size: 20px auto;
  content: "";
}
.tooladd-wrap .input-link + .error-text {
  margin-top: 9px;
}
.tooladd-wrap textarea.form-control {
  height: 100px;
  min-height: auto;
  border-radius: 12px;
  font-size: 16px;
}
.tooladd-wrap textarea.form-control::placeholder {
  font-size: 16px;
}
.tooladd-wrap .error-text {
  font-size: 14px;
  font-weight: 400;
  color: #dc2626;
}
.tooladd-wrap .between-text {
  display: block;
  margin: 16px 0;
  text-align: center;
}
.tooladd-wrap .text-guide {
  font-weight: 700;
  color: #1f2937;
}
.tooladd-wrap .text-guide + * {
  margin-top: 12px;
}

.conformity-level {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.conformity-level li {
  width: 50%;
}
.conformity-level li label {
  z-index: 0;
  width: 100%;
  padding: 11px 12px 11px 40px;
  border-radius: 100px;
  word-break: keep-all;
}
.conformity-level li label::before {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  left: 12px;
  margin-top: 0 !important;
}
.conformity-level li label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 1px solid #e5e7eb;
  border-radius: 100px;
  background: #fff;
}
.conformity-level li label:hover::after {
  background: #eff6ff;
}
.conformity-level li input:checked + label::after {
  top: -1px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px solid #1364ff;
  background: #eff6ff;
}
.conformity-level li .level {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.24px;
  color: #1f2937;
}
.conformity-level li .contrast {
  display: inline-block;
  margin-left: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.24px;
  color: #6b7280;
}
.conformity-level li .badge {
  display: inline-block;
  margin-left: 4px;
  min-width: 36px;
  padding: 0 2px;
  height: 21px;
  border-radius: 5px;
  background: #e2fff3;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #007241;
  text-align: center;
  line-height: 21px;
}
.conformity-level li .badge.hot {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}
.conformity-level li .label {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
}
@media (max-width: 767.98px) {
  .conformity-level li label::after {
    border-radius: 20px;
  }
}

@media (min-width: 768px) {
  .contrast-page .tool-file-upload .upload-area {
    height: 278px;
  }
}

@media (min-width: 768px) {
  .img2html-page .tool-file-upload .upload-area {
    height: calc(100vh - 641px);
  }
}

.step-area {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 7px;
  gap: 16px;
  border-radius: 100px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
}
.step-area li {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
}
.step-area li:first-child {
  position: relative;
}
.step-area li:first-child::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: -12px;
  width: 8px;
  height: 1px;
  border-radius: 100px;
  background: #9ca3af;
}
.step-area li:first-child.current .ico {
  display: none;
}
.step-area li:first-child .num {
  background: #0658f5;
  border-color: #0658f5;
  color: #fff;
}
.step-area li.current .num {
  background: #0658f5;
  border-color: #0658f5;
  color: #fff;
}
.step-area li.current .txt {
  font-weight: 700;
  color: #1f2937;
}
.step-area li .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
  text-align: center;
}
.step-area li .txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #4b5563;
}
@media (max-width: 1480px) {
  .step-area li:not(.current) .txt {
    display: none;
  }
}

@media (min-width: 1025px) {
  .img2html-work-detail-page .img2html-container {
    display: flex;
    height: 100%;
  }
  .img2html-work-detail-page .img2html-container .col {
    flex: 1 1 auto;
    width: 50%;
    overflow: hidden;
  }
  .img2html-work-detail-page .col-viewer {
    max-width: 50%;
  }
}
.img2html-work-detail-page .col-viewer {
  background: #f9fafb;
  overflow: hidden;
}
.img2html-work-detail-page .col-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.img2html-work-detail-page .col-editor .preview {
  flex: 1 1 auto;
  border: 0;
  width: 100%;
}
.img2html-work-detail-page .col-editor .form-control {
  height: 200px;
}
.img2html-work-detail-page .handle {
  flex: 0 0 auto;
  width: 8px;
  background: #e5e7eb;
}
.img2html-work-detail-page .loading-area {
  height: 100%;
  background: #f9fafb;
}
@media (max-width: 1024.98px) {
  .img2html-work-detail-page .col-viewer {
    height: calc(50vh - 76px);
  }
  .img2html-work-detail-page .col-editor {
    min-height: calc(50vh - 80px);
  }
}

.editor-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.editor-wrap .edit-area {
  flex: 1 1 auto;
  overflow-y: scroll;
}

.share-popup .box {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 24px 0 12px;
}
.share-popup .ico {
  flex: 0 0 auto;
}
.share-popup .ico + span {
  margin-left: 12px;
}
.share-popup .share-file {
  flex: 1 1 auto;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-height: 40px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}

.contrast-work-detail-page .contrast-container {
  position: relative;
}
@media (min-width: 1025px) {
  .contrast-work-detail-page .contrast-container {
    display: flex;
    height: 100%;
  }
  .contrast-work-detail-page .contrast-container .col {
    width: 50%;
    overflow: hidden;
  }
  .contrast-work-detail-page .contrast-container .col-viewer-origin {
    border-right: 1px solid #d1d5db;
  }
}
.contrast-work-detail-page .col-viewer {
  overflow: hidden;
  padding: 16px;
}
@media (min-width: 1025px) {
  .contrast-work-detail-page .col-viewer {
    display: flex;
    flex-direction: column;
    padding: 24px;
  }
}
.contrast-work-detail-page .col-viewer .title-area {
  flex: 0 0 auto;
  margin-bottom: 16px;
}
@media (min-width: 1025px) {
  .contrast-work-detail-page .col-viewer .title-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.contrast-work-detail-page .col-viewer .title-area .title3 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.36px;
}
.contrast-work-detail-page .col-viewer .title-area .level {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  height: 24px;
  margin-right: 4px;
  padding: 0 8px;
  border-radius: 100px;
}
.contrast-work-detail-page .col-viewer .title-area .level * {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.14px;
}
.contrast-work-detail-page .col-viewer .title-area .level span:first-child {
  position: relative;
  font-weight: 700;
}
.contrast-work-detail-page .col-viewer .title-area .level span:first-child::before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  right: -8px;
  width: 1px;
  height: 10px;
  border-radius: 100px;
}
.contrast-work-detail-page .col-viewer .title-area .level.level-aa {
  border: 1px solid #5bcd9e;
  background: #e2fff3;
  color: #085b39;
}
.contrast-work-detail-page .col-viewer .title-area .level.level-aa span:first-child::before {
  background: #5bcd9e;
}
.contrast-work-detail-page .col-viewer .title-area .level.level-a {
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #1f2937;
}
.contrast-work-detail-page .col-viewer .title-area .level.level-a span:first-child::before {
  background: #d1d5db;
}
.contrast-work-detail-page .col-viewer .title-area p {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.24px;
  color: #4b5563;
}
.contrast-work-detail-page .col-viewer .title-area .text-warning {
  font-weight: 700;
  color: #dc2626 !important;
}
.contrast-work-detail-page .col-viewer .title-area .info {
  display: flex;
  gap: 8px;
}
.contrast-work-detail-page .col-viewer .viewer-area {
  flex: 1 1 auto;
  border-radius: 20px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  overflow: hidden;
}
.contrast-work-detail-page .col-viewer .viewer-area .loading-area {
  height: 100%;
  background: #f9fafb;
}
.contrast-work-detail-page .col-viewer .image-viewer {
  height: 100%;
}
.contrast-work-detail-page .col-analysis {
  display: flex;
  flex-direction: column;
}
.contrast-work-detail-page .col-analysis + .col-viewer-result {
  display: none;
}
.contrast-work-detail-page .col-result-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
}

.contrast-analysis {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow-y: scroll;
}
.contrast-analysis ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
.contrast-analysis ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background-clip: padding-box;
  border: 6px solid transparent;
}
.contrast-analysis ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
.contrast-analysis ::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.contrast-analysis ::-webkit-scrollbar-track {
  background-color: transparent;
}
.contrast-analysis ::-webkit-scrollbar-corner {
  background-color: transparent;
}
@supports (-moz-appearance: none) {
  .contrast-analysis * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .contrast-analysis:hover {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .contrast-analysis:active {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
}
@media (min-width: 1025px) {
  .contrast-analysis {
    padding-right: 8px;
  }
}
.contrast-analysis .title-area {
  flex: 0 0 auto;
  display: flex;
}
@media (min-width: 1025px) {
  .contrast-analysis .title-area {
    align-items: center;
    justify-content: space-between;
    padding: 24px 0 16px 24px;
  }
}
@media (max-width: 1024.98px) {
  .contrast-analysis .title-area {
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }
  .contrast-analysis .title-area .right-area {
    display: flex;
    justify-content: flex-end;
  }
}
.contrast-analysis .title-area .title3 {
  margin: 0;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: -0.36px;
}
.contrast-analysis .title-area .analysis-info {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.24px;
  color: #4b5563;
}
.contrast-analysis .title-area .left-area {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contrast-analysis .level {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  height: 24px;
  margin-right: 4px;
  padding: 0 8px;
  border-radius: 100px;
  border: 1px solid #5bcd9e;
  background: #e2fff3;
}
.contrast-analysis .level * {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: -0.14px;
}
.contrast-analysis .level span:first-child {
  position: relative;
  font-weight: 700;
}
.contrast-analysis .level span:first-child::before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  right: -8px;
  width: 1px;
  height: 10px;
  border-radius: 100px;
}
.contrast-analysis .level.level-a {
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #1f2937;
}
.contrast-analysis .level.level-a span:first-child::before {
  background: #d1d5db;
}
.contrast-analysis .level.level-aa {
  border: 1px solid #5bcd9e;
  background: #e2fff3;
  color: #085b39;
}
.contrast-analysis .level.level-aa span:first-child::before {
  background: #5bcd9e;
}
.contrast-analysis .level.level-aaa {
  border: 1px solid #60a5fa;
  background: #eff6ff;
  color: #1364ff;
}
.contrast-analysis .level.level-aaa span:first-child::before {
  background: #60a5fa;
}
.contrast-analysis.step-hide .right-area {
  visibility: hidden;
}
@media (max-width: 767.98px) {
  .contrast-analysis.step-hide .right-area {
    display: none;
  }
}
.contrast-analysis .contrast-info-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.contrast-analysis .no-result {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}
@media (max-width: 1024.98px) {
  .contrast-analysis .no-result {
    padding: 60px 0 80px;
  }
}
.contrast-analysis .btn-close {
  position: absolute;
  top: 30px;
  right: 8px;
}
@media (max-width: 767.98px) {
  .contrast-analysis .btn-close {
    top: 17px;
  }
}

.contrast-info-item {
  position: relative;
  background: #fff;
  cursor: pointer;
  transition: 0.1s;
  transition-property: opacity;
  padding: 24px 0 24px 24px;
}
@media (max-width: 1024.98px) {
  .contrast-info-item {
    padding: 16px;
  }
}
.contrast-info-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: calc(100% - 24px);
  height: 1px;
  background: #d9d9d9;
}
@media (max-width: 1024.98px) {
  .contrast-info-item::before {
    left: 16px;
    right: 16px;
    width: auto;
  }
}
.contrast-info-item:last-child {
  border-bottom: none;
}
.contrast-info-item:not(.active) {
  opacity: 0.5;
  transition: all 0.3s;
}
.contrast-info-item:not(.active):hover {
  opacity: 1;
}
.contrast-info-item:not(.active):hover .info-item-before {
  background: #f3f4f6;
}
.contrast-info-item.active .info-item-before {
  background: #f3f4f6;
}
.contrast-info-item > dt {
  display: flex;
  align-items: center;
  height: 21px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 12px;
}
.contrast-info-item > dt .num {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  margin-right: 4px;
  border-radius: 50%;
  background: #4b5563;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
}
.contrast-info-item > dt .checking-area {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 21px;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 100px;
  background: #fee2e2;
  font-size: 12px;
  font-weight: 500;
  color: #dc2626;
}
.contrast-info-item > dd {
  display: flex;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  overflow: hidden;
}
.contrast-info-item .info-item {
  flex: 0 0 50%;
  padding: 19px;
}
.contrast-info-item .info-item .label {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 12px 0 4px;
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
}
.contrast-info-item .info-item .label small {
  font-size: 10px;
  font-weight: normal;
  color: #6b7280;
}
.contrast-info-item .info-item .label .level {
  gap: 9px;
  height: 16px;
  margin-right: 0;
  padding: 0 6px;
}
.contrast-info-item .info-item .label .level * {
  font-size: 10px;
  line-height: 10px;
}
.contrast-info-item .info-item .label .level span:first-child {
  font-weight: 500;
}
.contrast-info-item .info-item .label .level span:first-child::before {
  top: calc(50% - 3.5px);
  right: -5px;
  height: 7px;
}
.contrast-info-item .info-item-before {
  background: #e5e7eb;
  border-right: 1px solid #d1d5db;
}
.contrast-info-item .info-item-after {
  position: relative;
  background: #fff;
}
.contrast-info-item .info-item-after::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  background: #fff url(/_next/static/media/ico-arrow-double-right-@2x.d3e25ee7.png) center center no-repeat;
  background-size: 12px 12px;
}
.contrast-info-item .info-item .title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #1f2937;
}
.contrast-info-item .info-item .sub-ject {
  font-size: 10px;
  font-weight: 400;
  line-height: 13px;
  letter-spacing: -0.1px;
  color: #4b5563;
}
.contrast-info-item .info-item .text {
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.24px;
}
.contrast-info-item .info-item .color-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.contrast-info-item .info-item .color-info > .color-info-item,
.contrast-info-item .info-item .color-info > .chip-item {
  flex: 1 1 50%;
}
.contrast-info-item .info-item .color-info-item:first-child {
  color: #6b7280;
}
.contrast-info-item .info-item .check-item-sm {
  width: 50%;
}
.contrast-info-item .info-item .preview-pannel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
}
.contrast-info-item .info-item .contrast-ratio {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 120px;
  height: 38px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.15);
}
.contrast-info-item .info-item .contrast-ratio span {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: #4b5563;
}
.contrast-info-item .info-item .contrast-ratio strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #1f2937;
}
.contrast-info-item .info-item .contrast-ratio .ico {
  min-width: 16px;
}
.contrast-info-item .info-item .chip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0px 12px;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  text-transform: uppercase;
}
.contrast-info-item .info-item .chip-item.checked {
  border: 2px solid #1364ff;
  padding: 0px 11px;
  background: #eff6ff;
}
.contrast-info-item .info-item .check-item-xs {
  position: relative;
  padding: 0px 12px 0 36px;
  border: 1px solid #9ca3af;
}
.contrast-info-item .info-item .check-item-xs input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.contrast-info-item .info-item .check-item-xs:before {
  position: absolute;
  top: calc(50% - 8px);
  left: 11px;
  box-sizing: border-box;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  border-radius: 2px;
  background-color: #fff;
  content: "";
  transition-duration: 0.2s;
  transition-property: border-color, box-shadow, background-color;
  will-change: border-color, box-shadow, background-color;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #9ca3af;
}
.contrast-info-item .info-item .check-item-xs .color-value {
  color: #1f2937;
  margin-bottom: 2px;
}
.contrast-info-item .info-item .check-item-xs.checked {
  padding: 0px 11px 0 35px;
}
.contrast-info-item .info-item .check-item-xs.checked:before {
  box-sizing: border-box;
  border-color: #1364ff;
  background-color: #fff;
  box-shadow: 0 0 0 5px #1364ff inset;
}
.contrast-info-item .info-item .check-item-xs.checked:hover:before {
  box-shadow: inset 0 0 0 5px #1364ff;
}
.contrast-info-item .info-item .check-item-xs.checked.disabled {
  border-color: #d1d5db;
  background: #f3f4f6;
}
.contrast-info-item .info-item .check-item-xs.checked.disabled:before {
  border-color: #d1d5db;
  background-color: #fff;
  box-shadow: 0 0 0 5px #d1d5db inset;
}
.contrast-info-item .info-item .check-item-xs.checked.readonly {
  border-color: #d1d5db;
  background: #fff;
}
.contrast-info-item .info-item .check-item-xs.checked.readonly:before {
  border-color: #d1d5db;
  background-color: #fff;
  box-shadow: 0 0 0 5px #d1d5db inset;
}
.contrast-info-item .info-item .check-item-xs:hover {
  background: #eff6ff;
  cursor: pointer;
}
.contrast-info-item .info-item .check-item-xs:hover:before {
  box-shadow: inset 0 0 0 1px #e5e7eb;
  background-color: #e5e7eb;
}
.contrast-info-item .info-item .check-item-xs.disabled {
  border-color: #e5e7eb;
  background: #fff;
}
.contrast-info-item .info-item .check-item-xs.disabled::before {
  background: #f3f4f6;
  box-shadow: inset 0 0 0 1px #e5e7eb;
}
.contrast-info-item .info-item .chip {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
}
.contrast-info-item .info-item .color-value {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.14px;
}
.contrast-info-item .info-item .btn-question {
  position: absolute;
  bottom: 63px;
  right: 24px;
}
@media (max-width: 1788px) {
  .contrast-info-item > dd {
    flex-direction: column;
  }
  .contrast-info-item .info-item-before {
    border-right: none;
    border-bottom: 1px solid #d1d5db;
  }
  .contrast-info-item .info-item-after::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    background: #fff url(/_next/static/media/ico-arrow-double-bottom@2x.2441e2a5.png) center center no-repeat;
    background-size: 12px 12px;
  }
}

.seowork-page .title-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-height: 30px;
  padding-right: 157px;
}
.seowork-page .title-wrap .wrap-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.seowork-page .title-wrap .title3 {
  margin: 0;
}
.seowork-page .title-wrap .guide-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #4b5563;
}
.seowork-page .seowork-content {
  margin-top: 12px;
}
.seowork-page .seowork-content .list-metatitle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.seowork-page .seowork-content .check-item-sm {
  display: inline-flex;
  align-items: center;
  min-height: 45px;
}
.seowork-page .seowork-content .check-item-sm [type=checkbox] + .label,
.seowork-page .seowork-content .check-item-sm [type=checkbox] + label,
.seowork-page .seowork-content .check-item-sm [type=radio] + .label,
.seowork-page .seowork-content .check-item-sm [type=radio] + label {
  padding: 11px 11px 11px 35px;
  border-radius: 8px;
  border: 1px solid #9ca3af;
  background: #fff;
  position: relative;
}
.seowork-page .seowork-content .check-item-sm [type=checkbox] + .label::before,
.seowork-page .seowork-content .check-item-sm [type=checkbox] + label::before,
.seowork-page .seowork-content .check-item-sm [type=radio] + .label::before,
.seowork-page .seowork-content .check-item-sm [type=radio] + label::before {
  position: absolute;
  top: 13px;
  left: 11px;
  margin: 0;
}
.seowork-page .seowork-content .check-item-sm [type=checkbox] + .label:hover,
.seowork-page .seowork-content .check-item-sm [type=checkbox] + label:hover,
.seowork-page .seowork-content .check-item-sm [type=radio] + .label:hover,
.seowork-page .seowork-content .check-item-sm [type=radio] + label:hover {
  background: #eff6ff;
}
.seowork-page .seowork-content .check-item-sm [type=checkbox]:checked + .label,
.seowork-page .seowork-content .check-item-sm [type=checkbox]:checked + label,
.seowork-page .seowork-content .check-item-sm [type=radio]:checked + .label,
.seowork-page .seowork-content .check-item-sm [type=radio]:checked + label {
  z-index: 0;
}
.seowork-page .seowork-content .check-item-sm [type=checkbox]:checked + .label::after,
.seowork-page .seowork-content .check-item-sm [type=checkbox]:checked + label::after,
.seowork-page .seowork-content .check-item-sm [type=radio]:checked + .label::after,
.seowork-page .seowork-content .check-item-sm [type=radio]:checked + label::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: -1;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 2px solid #1364ff;
  border-radius: 8px;
  background: #eff6ff;
}
.seowork-page .seowork-content .btn-copy {
  position: absolute;
  top: 0;
  right: 0;
  height: 30px;
  padding: 5px 8px 6px;
  border-radius: 100px;
  background: #e5e7eb;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #1f2937;
}
.seowork-page .seowork-content .btn-copy:disabled {
  background: #e5e7eb;
  color: #6b7280;
  pointer-events: none;
}
.seowork-page .seowork-content .box-outline {
  padding: 24px;
  border-radius: 12px;
}
.seowork-page .seowork-content .box-outline .seo-description {
  pointer-events: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.24px;
  color: #1f2937;
}
.seowork-page .list-metaimg {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.seowork-page .list-metaimg .img-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid #9ca3af;
  border-radius: 10px;
  overflow: hidden;
}
.seowork-page .list-metaimg .img-item > img {
  position: absolute;
  width: 100%;
  height: auto;
}
.seowork-page .list-metaimg .img-item:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}
.seowork-page .list-metaimg .img-item:hover .btn {
  z-index: 10;
  opacity: 1;
}
.seowork-page .list-metaimg .btn {
  position: absolute;
  top: 10px;
  right: 11px;
  opacity: 0;
}
.seowork-page .comingsoon-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #6b7280;
}

.seowork-inner {
  flex: 1 1 auto;
}
@media (min-width: 1025px) {
  .seowork-inner {
    display: flex;
    flex-direction: row;
    height: 100%;
  }
}
.seowork-inner .codemirror-area {
  flex: 0 0 486px;
  display: flex;
  flex-direction: column;
  padding: 24px;
}
@media (min-width: 1025px) {
  .seowork-inner .codemirror-area {
    border-right: 1px solid #d1d5db;
  }
}
.seowork-inner .header-codemirror {
  flex: 0 0 auto;
  height: 104px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #d1d5db;
}
.seowork-inner .header-codemirror .title3 {
  margin-top: 0;
}
.seowork-inner .body-codemirror {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  overflow: hidden;
}
.seowork-inner .btn-question {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  vertical-align: middle;
}
.seowork-inner .btn-question .ico + span {
  margin-left: 4px;
}
.seowork-inner .meta-ara {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 24px;
  overflow-y: scroll;
}
@media (min-width: 1025px) {
  .seowork-inner .meta-ara {
    padding-right: 8px;
  }
}
.seowork-inner .meta-ara form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.seowork-inner .meta-ara .item {
  position: relative;
  padding-bottom: 24px;
  border-bottom: 1px solid #d1d5db;
}
.seowork-inner .meta-ara .item:last-child {
  border: none;
}
.seowork-inner .meta-ara .item:last-child {
  padding-bottom: 0;
}

.seo-codemirror-area {
  flex: 1 1 atuo;
  overflow-y: scroll;
}
.seo-codemirror-area ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
.seo-codemirror-area ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background-clip: padding-box;
  border: 6px solid transparent;
}
.seo-codemirror-area ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
.seo-codemirror-area ::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.seo-codemirror-area ::-webkit-scrollbar-track {
  background-color: transparent;
}
.seo-codemirror-area ::-webkit-scrollbar-corner {
  background-color: transparent;
}
@supports (-moz-appearance: none) {
  .seo-codemirror-area * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .seo-codemirror-area:hover {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .seo-codemirror-area:active {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
}
.seo-codemirror-area.cm-theme {
  background-color: #f9fafb;
}
.seo-codemirror-area .cm-gutter {
  background-color: #f3f4f6;
}
.seo-codemirror-area .cm-gutters {
  border-right: 1px solid #d1d5db;
}
.seo-codemirror-area .cm-foldGutter span[title="Fold line"] {
  display: inline-block;
  position: relative;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.seo-codemirror-area .cm-foldGutter span[title="Fold line"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: url(/_next/static/media/ico-code-mirror-arrow@2x.bb2f5d16.png) 0 0 no-repeat;
  background-size: 12px 12px;
}
.seo-codemirror-area .cm-foldGutter span[title="Unfold line"] {
  display: inline-block;
  position: relative;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.seo-codemirror-area .cm-foldGutter span[title="Unfold line"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: url(/_next/static/media/ico-code-mirror-arrow@2x.bb2f5d16.png) 0 0 no-repeat;
  background-size: 12px 12px;
  transform: rotate(270deg);
}
.seo-codemirror-area .cm-gutterElement {
  width: 22px;
  padding-right: 8px;
  text-align: right;
  color: #6b7280;
}
.seo-codemirror-area .cm-lineNumbers .cm-gutterElement {
  width: 38px;
  padding-left: 8px;
  padding-right: 0;
  text-align: left;
}
.seo-codemirror-area .cm-content {
  padding: 8px 0;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  color: #6b7280;
  line-height: 18px;
}

.popup-seocreate .popup-inner {
  max-width: 1200px;
  max-height: calc(100vh - 60px);
}
.popup-seocreate .popup-inner .popup-body {
  padding: 24px;
  overflow: hidden;
}
.popup-seocreate .popup-inner .popup-footer {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 25px;
}
@media (max-width: 767.98px) {
  .popup-seocreate .popup-inner .popup-footer {
    gap: 8px;
    flex-direction: column;
    padding-top: 16px;
    margin-top: 0;
  }
}
.popup-seocreate .popup-inner .popup-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: calc(100% - 48px);
  height: 1px;
  background: #d1d5db;
}
.popup-seocreate .popup-inner .popup-footer .btn-group .btn {
  min-width: auto;
}
.popup-seocreate .popup-inner .popup-footer .wrap-left .guide-area {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  height: 56px;
  border-radius: 100px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
}
.popup-seocreate .popup-inner .popup-footer .wrap-left .guide-area .ico {
  margin-right: 8px;
  flex: 0 0 auto;
}
.popup-seocreate .popup-inner .popup-footer .wrap-left .guide-area p {
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.24px;
  color: #1f2937;
}
.popup-seocreate .popup-inner .popup-footer .wrap-right {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}
.popup-seocreate .seocreate-result .cm-editor {
  padding: 8px 0;
}
.popup-seocreate .seocreate-result .cm-mergeView .ͼ1 {
  height: 100% !important;
}
.popup-seocreate .seocreate-result .box {
  border-radius: 12px;
}
.popup-seocreate .seocreate-result .box strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.24px;
  color: #1f2937;
}
@media (min-width: 1025px) {
  .popup-seocreate .seocreate-result .title-area {
    display: flex;
    align-items: flex-end;
  }
}
.popup-seocreate .seocreate-result .title-area strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.popup-seocreate .seocreate-result .title-area .num {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4b5563;
  text-align: center;
  line-height: 20px;
  font-family: "Spoqa Han Sans Neo", "malgun gothic", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.popup-seocreate .seocreate-result .title-area .title3 {
  flex: 0 0 50%;
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.24px;
  color: #000;
}
@media (min-width: 1025px) {
  .popup-seocreate .seocreate-result .title-area .title3 {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}
.popup-seocreate .seocreate-result .title-area code {
  display: inline-block;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.14px;
}
.popup-seocreate .seocreate-result .title-area code.font-green {
  color: #386500;
}
.popup-seocreate .seocreate-result .title-area code.font-red {
  color: #e1382f;
}
.popup-seocreate .seocreate-result .title-area .btn-xs {
  font-size: 14px;
}
.popup-seocreate .seocreate-result .ͼ1 .cm-content {
  white-space: break-spaces;
  word-break: break-word;
  overflow-wrap: anywhere;
  flex-shrink: 1;
}
.popup-seocreate .seocreate-result .ͼ1 .cm-content {
  padding: 0;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #bdee81;
}
.popup-seocreate .seocreate-result .ͼ2r,
.popup-seocreate .seocreate-result .ͼ2l,
.popup-seocreate .seocreate-result .ͼ2o,
.popup-seocreate .seocreate-result .ͼ2k {
  color: #bdee81;
}
.popup-seocreate .seocreate-result .ͼ2v {
  color: #6b7280;
  font-style: normal;
}
.popup-seocreate .seocreate-result .cm-gutterElement {
  padding: 0 8px;
  text-align: left;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #6b7280;
}
.popup-seocreate .seocreate-result .cm-gutter.cm-foldGutter,
.popup-seocreate .seocreate-result .cm-gutter.cm-changeGutter {
  border: 1px solid white !important;
  display: none !important;
}
.popup-seocreate .seocreate-result .ͼ1 .cm-line {
  padding: 0 4px;
}
.popup-seocreate .seocreate-result .diff-area .code-mirror-merge {
  height: calc(100vh - 314px);
  overflow-y: auto;
}
.popup-seocreate .seocreate-result .diff-area .cm-merge-a,
.popup-seocreate .seocreate-result .diff-area .cm-merge-b {
  min-height: calc(100vh - 314px);
  overflow: hidden;
}
.popup-seocreate .seocreate-result .diff-area .cm-merge-a {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  opacity: 0.9;
}
.popup-seocreate .seocreate-result .diff-area .cm-merge-b {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  background: #2e3235;
}

.popup-seo-guide .popup-inner {
  max-height: calc(100vh - 60px);
}
.popup-seo-guide .seo-guide-list li + li {
  margin-top: 20px;
}
.popup-seo-guide .seo-guide-list li:first-child .img-box {
  height: 300px;
}
.popup-seo-guide .seo-guide-list li:first-child .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.popup-seo-guide .seo-guide-list li:last-child .img-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 33px 0;
}
.popup-seo-guide .seo-guide-list li:last-child .img-box img {
  width: 322px;
  height: auto;
}
.popup-seo-guide .seo-guide-list .title-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
.popup-seo-guide .seo-guide-list .title-area .num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6b7280;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.14px;
  color: #fff;
  text-align: center;
}
.popup-seo-guide .seo-guide-list .title-area p {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #1f2937;
}
.popup-seo-guide .seo-guide-list .img-box {
  width: 724px;
  margin: 8px 0 0 28px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  overflow: hidden;
}
.popup-seo-guide .seo-guide-list .img-box img {
  display: block;
  width: 100%;
  height: auto;
}

.linter-detail-container {
  display: flex;
  height: 100%;
}
.linter-detail-container .col-code-lint {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
}
.linter-detail-container .col-code-lint ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
.linter-detail-container .col-code-lint ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background-clip: padding-box;
  border: 6px solid transparent;
}
.linter-detail-container .col-code-lint ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
.linter-detail-container .col-code-lint ::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.linter-detail-container .col-code-lint ::-webkit-scrollbar-track {
  background-color: transparent;
}
.linter-detail-container .col-code-lint ::-webkit-scrollbar-corner {
  background-color: transparent;
}
@supports (-moz-appearance: none) {
  .linter-detail-container .col-code-lint * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .linter-detail-container .col-code-lint:hover {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .linter-detail-container .col-code-lint:active {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
}
.linter-detail-container .col-code-lint .code-mirror-html {
  flex: 1 1 auto;
}
.linter-detail-container .col-code-lint .code-line-info {
  padding: 2px;
  right: 36px;
  bottom: 4px;
  position: absolute;
  font-size: 14px;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
}
.linter-detail-container .col-code-lint .axe-results {
  flex: 0 0 auto;
  background: #f3f4f6;
}
.linter-detail-container .col-result {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 400px;
  border-left: 1px solid #d1d5db;
  background: #f3f4f6;
}
.linter-detail-container .step-area {
  flex: 0 0 auto;
  border-bottom: 1px solid #d1d5db;
}
.linter-detail-container .step-area .step-list {
  display: flex;
  justify-content: space-around;
  padding: 12px;
}
.linter-detail-container .step-area .step-list li.on {
  font-weight: bold;
}
.linter-detail-container .results-area {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.linter-detail-container .results-area ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
.linter-detail-container .results-area ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background-clip: padding-box;
  border: 6px solid transparent;
}
.linter-detail-container .results-area ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
.linter-detail-container .results-area ::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.linter-detail-container .results-area ::-webkit-scrollbar-track {
  background-color: transparent;
}
.linter-detail-container .results-area ::-webkit-scrollbar-corner {
  background-color: transparent;
}
@supports (-moz-appearance: none) {
  .linter-detail-container .results-area * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .linter-detail-container .results-area:hover {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .linter-detail-container .results-area:active {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
}
.linter-detail-container .results-area .table-message {
  padding: 32px 0;
  text-align: center;
}

.axe-validator .title-area {
  flex: 0 0 auto;
  border-bottom: 1px solid #d1d5db;
  padding-left: 12px;
  font-weight: 500;
  font-size: 16px;
  line-height: 40px;
  background: #f3f4f6;
  z-index: 10;
}
.axe-validator .axe-result-area {
  flex: 1 1 auto;
}
.axe-validator .axe-violation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  padding-right: 0;
}
.axe-validator .axe-violation-list .linter-list {
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #fff;
}
.axe-validator .axe-violation-list dt {
  padding: 12px;
  font-weight: 500;
  border-bottom: 1px solid #d1d5db;
}
.axe-validator .axe-violation-list dd {
  padding: 12px;
}
.axe-validator .axe-violation-list .item-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.axe-validator .axe-violation-list .item-list code {
  background-color: #f3f4f6;
  border-radius: 4px;
  font-size: 14px;
  color: #ef4444;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  white-space: pre;
}
.axe-validator .axe-violation-list .title .description {
  color: #059669;
}
.axe-validator .axe-violation-list .title .description::before {
  content: "❓";
  margin-right: 4px;
}
.axe-validator .axe-violation-list .title.serious .description {
  color: #ef4444;
}
.axe-validator .axe-violation-list .title.serious .description::before {
  content: "⛔";
}
.axe-validator .axe-violation-list .title.critical .description {
  color: #ef4444;
}
.axe-validator .axe-violation-list .title.critical .description::before {
  content: "⛔";
}
.axe-validator .axe-violation-list .solution {
  margin: 8px 0 4px;
}
.axe-validator .axe-violation-list .fail-list {
  font-size: 14px;
}
.axe-validator .axe-violation-list .fail-list li:not(:only-child) {
  margin-left: 1em;
  list-style-type: decimal;
}

.linter-code-compare-page .codemirror-merge-container {
  overflow-y: auto;
}
.linter-code-compare-page .codemirror-merge-container ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
.linter-code-compare-page .codemirror-merge-container ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background-clip: padding-box;
  border: 6px solid transparent;
}
.linter-code-compare-page .codemirror-merge-container ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
.linter-code-compare-page .codemirror-merge-container ::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.linter-code-compare-page .codemirror-merge-container ::-webkit-scrollbar-track {
  background-color: transparent;
}
.linter-code-compare-page .codemirror-merge-container ::-webkit-scrollbar-corner {
  background-color: transparent;
}
@supports (-moz-appearance: none) {
  .linter-code-compare-page .codemirror-merge-container * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .linter-code-compare-page .codemirror-merge-container:hover {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .linter-code-compare-page .codemirror-merge-container:active {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
}

.table-work-detail-page {
  display: flex;
  height: 100%;
}
.table-work-detail-page .body-details {
  overflow-y: scroll;
  background: none;
  padding: 16px;
}
@media (min-width: 1025px) {
  .table-work-detail-page .body-details {
    padding: 24px;
    padding-right: 8px;
  }
}
.table-work-detail-page .col-editor {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 24px;
}
.table-work-detail-page .col-editor .title-area {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  height: 36px;
  align-items: center;
  margin-bottom: 16px;
}
.table-work-detail-page .col-editor .title-area .title {
  font-weight: 700;
}
.table-work-detail-page .col-editor .editor-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.table-work-detail-page .col-editor .inner {
  display: flex;
  height: 100%;
}
.table-work-detail-page .col-result {
  display: flex;
  flex-direction: column;
  flex: 0 0 40%;
  border-left: 1px solid #d1d5db;
  background: #f3f4f6;
}
.table-work-detail-page .results-area {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.table-work-detail-page .results-area ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
.table-work-detail-page .results-area ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background-clip: padding-box;
  border: 6px solid transparent;
}
.table-work-detail-page .results-area ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
.table-work-detail-page .results-area ::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.table-work-detail-page .results-area ::-webkit-scrollbar-track {
  background-color: transparent;
}
.table-work-detail-page .results-area ::-webkit-scrollbar-corner {
  background-color: transparent;
}
@supports (-moz-appearance: none) {
  .table-work-detail-page .results-area * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .table-work-detail-page .results-area:hover {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  .table-work-detail-page .results-area:active {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
}
.table-work-detail-page .results-area .table-message {
  padding: 32px 0;
  text-align: center;
}
.table-work-detail-page .content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 34px;
  margin-bottom: 16px;
}
@media (max-width: 1024.98px) {
  .table-work-detail-page .content-header {
    flex-direction: column;
    align-items: unset;
    gap: 4px;
  }
}
.table-work-detail-page .content-header .title-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-work-detail-page .content-header .title-area .title {
  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: -0.36px;
  color: #1f2937;
}
.table-work-detail-page .content-header .guide-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 2px 11px;
  border-radius: 100px;
  border: 1px solid #fca5a5;
  background: #fef2f2;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #1f2937;
}
.table-work-detail-page .content-header .step-area {
  background: #fff;
}
.table-work-detail-page .table-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.table-work-detail-page .table-acc-loading {
  min-height: 400px;
  box-shadow: none !important;
}

.table-acc-item {
  position: relative;
  border-radius: 12px;
  padding: 7px 23px;
  border: 1px solid #d1d5db;
  background: #fff;
  transition: box-shadow 0.5s ease;
  overflow: hidden;
}
@media (max-width: 1024.98px) {
  .table-acc-item {
    padding: 3px 15px;
  }
}
.table-acc-item:hover, .table-acc-item:focus-within, .table-acc-item.active {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
}
.table-acc-item.opened .table-item-header .step-area {
  display: none !important;
}
.table-acc-item.opened .caption-text {
  display: none !important;
}
.table-acc-item:not(.opened) .table-item-body {
  height: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  margin: 0;
}
.table-acc-item .table-item-header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}
.table-acc-item .table-item-header .title {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0px 12px;
  border-radius: 18px;
  background: #4b5563;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.table-acc-item .table-item-header .left,
.table-acc-item .table-item-header .right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.table-acc-item .table-item-header .left {
  flex-grow: 0;
  flex-shrink: 1;
}
.table-acc-item .table-item-header .right {
  flex-shrink: 0;
}
.table-acc-item .table-item-header .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 36px;
  padding: 0 11px 0 7px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
}
.table-acc-item .table-item-header .badge-pass {
  border: 1px solid #5bcd9e;
  background: #ecfdf5;
  color: #085b39;
}
.table-acc-item .table-item-header .badge-violation {
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #dc2626;
}
@media (max-width: 1480px) {
  .table-acc-item .table-item-header .step-area li:not(.current) .txt {
    display: block;
  }
}
@media (max-width: 767.98px) {
  .table-acc-item .table-item-header .step-area {
    display: none;
  }
}
.table-acc-item .table-item-header .btn-toggle {
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: #fff;
}
.table-acc-item .table-item-header .btn-toggle.on {
  transform: rotate(180deg);
}
.table-acc-item .table-item-body {
  min-height: 384px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid #d1d5db;
  overflow: hidden;
}
@media (min-width: 1025px) {
  .table-acc-item .table-item-body {
    display: flex;
  }
  .table-acc-item .table-item-body > * {
    max-height: calc(100vh - 356px);
  }
  .table-acc-item .table-item-body > * + * {
    border-left: 1px solid #d1d5db;
  }
}
.table-acc-item .table-item-body .step-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  height: 56px;
  border: 0;
  border-bottom: 1px solid #d1d5db;
  border-radius: 0;
  background: #fff;
}
.table-acc-item .table-item-body .step-area li .num {
  width: 24px;
  height: 24px;
}
.table-acc-item .table-item-body .step-area li .txt {
  font-size: 16px;
  line-height: 21px;
}
@media (max-width: 1480px) {
  .table-acc-item .table-item-body .step-area li:not(.current) .txt {
    display: block;
  }
}
@media (max-width: 1024.98px) {
  .table-acc-item .table-item-body .step-area {
    padding: 8px;
  }
  .table-acc-item .table-item-body .step-area li .txt {
    font-size: 14px;
  }
}
.table-acc-item .table-item-body .result-area {
  display: flex;
  flex-direction: column;
  flex: 0 0 40%;
}
.table-acc-item .table-item-body .preview-area {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: #f3f4f6;
  overflow: hidden;
  position: relative;
}
.table-acc-item .table-item-body .preview-area .html-preview {
  flex: 1 1;
  min-width: 0;
  padding: 20px;
  overflow-y: auto;
}
@media (min-width: 1025px) {
  .table-acc-item .table-item-body .preview-area {
    width: 60%;
    max-width: calc(60vw - 154px);
  }
}
.table-acc-item.step1 .result-area .title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: bold;
  color: #1f2937;
}
.table-acc-item.step1 .result-area .title small {
  font-size: 12px;
  font-weight: 400;
  color: #4b5563;
}
.table-acc-item.step2 .opened .badge {
  display: none;
}
.table-acc-item.step2 .caption-text {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  max-width: 600px;
  width: auto;
  height: 36px;
  padding: 0 8px;
  border-radius: 100px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
}
.table-acc-item.step2 .caption-text * {
  font-size: 12px;
  line-height: 16px;
}
.table-acc-item.step2 .caption-text .tit {
  flex: 1 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: #4b5563;
  line-height: 1.3;
}
.table-acc-item.step2 .caption-text .tit::before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  right: -7px;
  width: 1px;
  height: 10px;
  border-radius: 100px;
  background: #9ca3af;
}
.table-acc-item.step2 .caption-text .caption {
  flex: 0 1 auto;
  width: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-height: 40px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  font-weight: 400;
  color: #1f2937;
  -webkit-line-clamp: 1;
  line-height: 1.3em;
}
.table-acc-item.step2 .caption-result {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px;
  overflow-y: scroll;
}
@media (min-width: 1025px) {
  .table-acc-item.step2 .caption-result {
    padding: 20px;
    padding-right: 4px;
  }
}
.table-acc-item.step2 .btn-group-flex {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  margin-top: 24px;
}

.html-preview {
  font-family: "Spoqa Han Sans Neo", "malgun gothic", Arial, sans-serif;
}
.html-preview .a11y-warning,
.html-preview .a11y-editing,
.html-preview *[contenteditable=true] {
  opacity: 1 !important;
  outline: none;
}
.passed .html-preview .a11y-warning:is(th, td)::before {
  content: "요소";
  background-color: #059669;
}
.passed .html-preview .a11y-warning:is(th, td)::after {
  border-color: #059669;
}
.passed .html-preview .a11y-warning:is(caption) {
  border-color: #059669;
}
.passed .html-preview .a11y-warning:is(caption)::before {
  color: #059669;
}
.passed .html-preview .a11y-warning:is(caption)::after {
  display: none;
  background-color: #059669;
}
.html-preview .sr-only {
  position: relative;
  left: auto;
  width: auto;
  height: auto;
  margin: 0 !important;
  font-size: unset;
  line-height: initial;
  overflow: visible;
}
.html-preview caption.sr-only {
  margin-bottom: 8px !important;
}
.html-preview .react-transform-wrapper,
.html-preview .react-transform-component {
  width: 100% !important;
}
.html-preview table {
  position: relative;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;
  min-width: 100%;
  padding: 1px 2px 2px;
  border-radius: 3px;
  background: #d1d5db;
  border-left: hidden;
  border-right: hidden;
}
.html-preview table::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #6b7280;
}
.step2 .html-preview table thead,
.step2 .html-preview table tbody {
  opacity: 0.5;
  pointer-events: none;
}
.html-preview caption {
  min-height: 58px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #e5e7eb;
  font-weight: 500;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.24px;
  text-align: left;
  color: #1f2937;
}
.html-preview caption::before {
  content: "caption";
  display: block;
  margin-right: 4px;
  margin-top: -2px;
  white-space: nowrap;
  font-weight: normal;
  font-size: 12px;
  color: #6b7280;
}
.html-preview caption.a11y-warning, .html-preview caption.a11y-editing {
  padding: 7px 11px;
  border-radius: 8px;
  border: 2px solid #f97316;
  background: #e5e7eb;
}
.html-preview caption.a11y-warning:before, .html-preview caption.a11y-editing:before {
  content: "caption";
  color: #f97316;
}
.html-preview caption.a11y-warning:after, .html-preview caption.a11y-editing:after {
  content: "! 요소";
  position: absolute;
  z-index: 10;
  top: 9px;
  left: 57px;
  white-space: nowrap;
  font-weight: normal;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  background: #f97316;
}
.html-preview caption:focus-within {
  border-color: #ef4444 !important;
  box-shadow: 0px 4px 20px 0px rgba(239, 68, 68, 0.25);
}
.html-preview caption:focus-within:before {
  color: #ef4444 !important;
}
.html-preview caption:focus-within:after {
  display: block !important;
  content: "편집중" !important;
  border-color: #ef4444 !important;
  background: #ef4444 !important;
}
.step2 .html-preview caption {
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid #1364ff;
  background: #eff6ff;
  font-weight: 700;
}
.step2 .html-preview caption:before {
  content: "caption";
  color: #0658f5;
}
.html-preview thead,
.html-preview tbody {
  position: relative;
}
.html-preview thead::after,
.html-preview tbody::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #6b7280;
}
.html-preview thead + tbody::after {
  display: none;
}
.html-preview th,
.html-preview td {
  height: 48px;
  line-height: 18px;
  padding: 4px 16px;
  border: 0;
  background: #fff;
  border: 1px solid #d1d5db;
  vertical-align: middle;
  text-align: left;
  background: #fff;
  word-break: keep-all;
}
.html-preview th.a11y-warning, .html-preview th.a11y-editing,
.html-preview td.a11y-warning,
.html-preview td.a11y-editing {
  position: relative;
  outline: none;
}
.html-preview th.a11y-warning:before, .html-preview th.a11y-editing:before,
.html-preview td.a11y-warning:before,
.html-preview td.a11y-editing:before {
  content: "! 요소";
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  transform: translate(0, -100%);
  margin-top: -2px;
  max-width: 100px;
  white-space: nowrap;
  font-weight: normal;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  background: #f97316;
}
.html-preview th.a11y-warning:after, .html-preview th.a11y-editing:after,
.html-preview td.a11y-warning:after,
.html-preview td.a11y-editing:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  margin: -1px;
  border: 2px solid #f97316;
  pointer-events: none;
  z-index: 10;
}
.html-preview th:focus-within,
.html-preview td:focus-within {
  color: #ef4444;
}
.html-preview th:focus-within::before,
.html-preview td:focus-within::before {
  display: block !important;
  content: "편집중" !important;
  border-color: #ef4444 !important;
  background: #ef4444 !important;
}
.html-preview th:focus-within:after,
.html-preview td:focus-within:after {
  border-color: #ef4444 !important;
  box-shadow: 0px 4px 20px 0px rgba(239, 68, 68, 0.25);
}
.html-preview th {
  position: relative;
  background: #eff6ff;
}
.html-preview th > *,
.html-preview td > * {
  pointer-events: none;
  max-width: 100%;
}
.html-preview th input[type=text],
.html-preview th input[type=password],
.html-preview th input[type=email],
.html-preview th input[type=search],
.html-preview th input[type=number],
.html-preview th input[type=tel],
.html-preview th input[type=url],
.html-preview th select,
.html-preview td input[type=text],
.html-preview td input[type=password],
.html-preview td input[type=email],
.html-preview td input[type=search],
.html-preview td input[type=number],
.html-preview td input[type=tel],
.html-preview td input[type=url],
.html-preview td select {
  border: 1px solid #d1d5db;
  height: 28px;
  padding: 2px 12px;
  border-radius: 4px;
  font-size: 12px;
}

.axe-table-validator {
  position: relative;
  flex: 1 1 auto;
  overflow-y: scroll;
  padding: 20px 4px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.axe-table-validator .violations {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.axe-table-validator .violations .title {
  color: #1f2937;
}
.axe-table-validator .violations .btn-group-flex {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}
.axe-table-validator .result-list {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
}
.axe-table-validator .result-list .icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5db;
  border-radius: 50px;
  background: #fff;
}
.axe-table-validator .violation-item {
  flex: 1 1 auto;
  line-height: 1.3;
}
.axe-table-validator .violation-item .a11y-message {
  font-weight: bold;
  margin-bottom: 4px;
}
.axe-table-validator .violation-item .desc {
  font-size: 14px;
  font-weight: 500;
}
.axe-table-validator .violation-item .help {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #4b5563;
}
.axe-table-validator .item-find {
  margin-top: 8px;
}
.axe-table-validator .find-title {
  font-size: 12px;
}
.axe-table-validator .violation-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-top: 4px;
  gap: 4px;
}
.axe-table-validator .violation-list .btn {
  min-width: 24px;
  padding: 0 4px;
  font-size: 14px;
}
.axe-table-validator .no-result {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 24px;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}
.axe-table-validator .tooltip {
  position: absolute;
  bottom: 88px;
  left: calc(50% + 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 272px;
  transform: translateX(-50%);
  padding: 16px 8px;
  border-radius: 12px;
  background: #1f2937;
}
.axe-table-validator .tooltip::before {
  content: "";
  position: absolute;
  bottom: -14px;
  left: calc(50% - 12px);
  width: 24px;
  height: 14px;
  background: url(/_next/static/media/img-tooltip@2x.f0234146.png) 0 0 no-repeat;
  background-size: 24px 14px;
}
.axe-table-validator .tooltip p {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #fff;
}
.axe-table-validator .tooltip .subject {
  font-weight: 400;
}
.axe-table-validator .btn-group-flex {
  position: relative;
}
.axe-table-validator .btn-group-flex .btn:focus + .tooltip, .axe-table-validator .btn-group-flex .btn:hover + .tooltip {
  display: block;
}

.table-caption-checker {
  flex: 1 1 auto;
}
.table-caption-checker .title {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
  color: #1f2937;
}
.table-caption-checker .box {
  display: flex;
  align-items: center;
  padding: 11px;
  border-radius: 8px;
}
.table-caption-checker .box + .box {
  margin: 0;
}
.table-caption-checker .box .ico-area {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: #fff;
}
.table-caption-checker .box .caption {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #1f2937;
}
.table-caption-checker .box .caption .code {
  display: inline-block;
  height: 22px;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.12px;
  color: #e1382f;
}
.table-caption-checker .box .caption-cancel {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #1f2937;
  text-decoration: line-through;
}
.table-caption-checker dl {
  margin-top: 16px;
}
.table-caption-checker dt {
  gap: 13px;
  padding-right: 85px;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: #1f2937;
}
.table-caption-checker dt .text-gray {
  position: relative;
  margin-left: 13px;
  font-weight: 400;
}
.table-caption-checker dt .text-gray::before {
  content: "";
  position: absolute;
  top: 7px;
  left: -6px;
  width: 1px;
  height: 12px;
  border-radius: 100px;
  background: #d1d5db;
}
@media (max-width: 1439.98px) {
  .table-caption-checker dt .text-gray {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size: 14px;
    line-height: 18px;
  }
  .table-caption-checker dt .text-gray::before {
    display: none;
  }
}
.table-caption-checker dd {
  margin-top: 8px;
  position: relative;
}
.table-caption-checker dd .btn-copy {
  gap: 2px;
  position: absolute;
  top: -8px;
  transform: translateY(-100%);
  right: 0;
  height: 21px;
  line-height: 21px;
  margin: 0;
  padding: 0 6px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  font-weight: 400;
  font-size: 10px;
  color: #1f2937;
  z-index: 50;
}
.table-caption-checker .caption-info {
  padding-bottom: 16px;
}
.table-caption-checker .caption-suggestions {
  padding-top: 16px;
  border-top: 1px solid #d9d9d9;
}
.table-caption-checker .caption-suggestions .title {
  display: flex;
  align-items: center;
  gap: 4px;
}
.table-caption-checker .caption-suggestions .title span {
  font-size: 12px;
  font-weight: 400;
  color: #4b5563;
}
@media (max-width: 1439.98px) {
  .table-caption-checker .caption-suggestions .title {
    flex-wrap: wrap;
  }
  .table-caption-checker .caption-suggestions .title span {
    flex: 1 1 100%;
    line-height: 16px;
  }
}
.table-caption-checker .caption-suggestions .check-item-sm {
  width: 100%;
}
.table-caption-checker .caption-suggestions .check-item-sm [type=radio] + label {
  width: 100%;
  padding: 11px 11px 11px 43px;
  border-radius: 8px;
  border: 1px solid #9ca3af;
  background: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #1f2937;
}
.table-caption-checker .caption-suggestions .check-item-sm [type=radio] + label::before {
  position: absolute;
  top: 13px;
  left: 16px;
  margin: 0;
}
.table-caption-checker .caption-suggestions .check-item-sm [type=radio] + label:hover {
  background: #eff6ff;
}
.table-caption-checker .caption-suggestions .check-item-sm [type=radio]:checked + label {
  z-index: 0;
}
.table-caption-checker .caption-suggestions .check-item-sm [type=radio]:checked + label::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: -1;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 2px solid #1364ff;
  border-radius: 8px;
  background: #eff6ff;
}

.promotion-banner {
  text-align: left;
  color: #fff;
  background: #001aff;
  overflow: hidden;
}
.promotion-banner .text {
  font-size: 14px;
  line-height: 1.4;
}
.promotion-banner .text span {
  opacity: 0.85;
}
.promotion-banner .text strong {
  font-weight: 500;
}
.promotion-banner .text .text-lg {
  font-weight: 700;
  display: block;
  margin-top: 2px;
}
.promotion-banner .btn-cta {
  padding: 0px 12px;
  transition: 0.3s;
}
.promotion-banner .btn-cta.btn-md {
  font-size: 14px;
  font-weight: normal;
}
.promotion-banner .btn-cta .ico:last-child {
  margin-right: -4px;
}
.promotion-banner.type-card {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 0 0 auto;
  border-radius: 16px;
}
.promotion-banner.type-card .banner-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  padding: 24px;
}
.promotion-banner.type-card .banner-content .text {
  flex: 1 1 auto;
}
.promotion-banner.type-card .banner-content .img-gift {
  position: absolute;
  right: -58px;
  bottom: -40px;
  width: 230px;
}
.promotion-banner.type-card .banner-content .btn-cta {
  margin-top: 20px;
}
.promotion-banner.type-card-lg {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 0 0 auto;
  border-radius: 32px;
}
.promotion-banner.type-card-lg .banner-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  padding: 40px 48px;
}
.promotion-banner.type-card-lg .banner-content .text {
  flex: 1 1 auto;
  font-size: 16px !important;
  word-break: keep-all;
}
.promotion-banner.type-card-lg .banner-content .text-lg {
  margin-top: 8px;
  font-size: 28px !important;
}
.promotion-banner.type-card-lg .banner-content .img-gift {
  position: absolute;
  right: -112px;
  bottom: -80px;
  width: 460px;
}
.promotion-banner.type-card-lg .banner-content .btn-cta {
  margin-top: 20px;
}
@media (max-width: 1024.98px) {
  .promotion-banner.type-card-lg .banner-content {
    padding: 28px;
  }
  .promotion-banner.type-card-lg .banner-content .text-lg {
    font-size: 18px !important;
  }
  .promotion-banner.type-card-lg .banner-content .img-gift {
    position: absolute;
    top: 50%;
    right: -62px;
    top: unset;
    transform: translateY(0);
    bottom: -28px;
    width: 230px;
  }
  .promotion-banner.type-card-lg .banner-content .btn-cta {
    font-size: 14px;
  }
}
.promotion-banner.type-card-sm {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 0 0 auto;
  border-radius: 20px;
}
.promotion-banner.type-card-sm .banner-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
}
.promotion-banner.type-card-sm .banner-content .text {
  flex: 1 1 auto;
}
.promotion-banner.type-card-sm .banner-content .img-gift {
  position: absolute;
  right: -58px;
  bottom: -40px;
  width: 230px;
}
.promotion-banner.type-card-sm .banner-content .btn-cta {
  margin-top: 20px;
}
.promotion-banner.type-band {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 0 0 auto;
  padding: 16px 24px 16px 110px;
  border-radius: 20px;
}
.promotion-banner.type-band .banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.promotion-banner.type-band .banner-content .img-gift {
  position: absolute;
  left: -56px;
  top: 50%;
  transform: translateY(-50%);
  width: 230px;
}
.promotion-banner.type-band .banner-content .text {
  flex: 1 1 auto;
  margin-left: 8px;
}

@media (min-width: 1025px) {
  .layout-default {
    min-width: 100%;
  }
  .layout-default #content {
    width: 100%;
    overflow-y: auto;
  }
  .layout-default .content-box {
    min-width: 1100px;
  }
}
@media (max-width: 1024.98px) {
  .layout-default .container {
    overflow-y: hidden;
  }
}

.site-management-page .content-box {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.site-management-page .site-purpose {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.site-management-page .site-purpose .ico {
  margin-top: -1px;
}
.site-management-page.tab-page .panel-content {
  border-top: none;
}

.step-indicator {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}
.step-indicator .step {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding-top: 16px;
  font-size: 18px;
}
.step-indicator .step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #e5e7eb;
  border-radius: 2px;
}
.step-indicator .step.active .step-num {
  background-color: #1364ff;
  color: #fff;
}
.step-indicator .step.active .step-title {
  font-weight: 700;
  color: #000;
}
.step-indicator .step.active::after {
  background-color: #1364ff;
}
.step-indicator .step.completed .step-num {
  background-color: #b5b8bf;
  color: #fff;
}
.step-indicator .step.completed .step-title {
  color: #1f2937;
}
.step-indicator .step.completed::after {
  background-color: #6b7280;
  opacity: 0.4;
}
.step-indicator .step-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #e5e7eb;
  border-radius: 7px;
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
}
.step-indicator .step-title {
  flex: 1 1 auto;
  font-weight: 500;
  text-align: left;
  color: #4b5563;
}
@media (max-width: 1024.98px) {
  .step-indicator {
    flex-direction: column;
  }
}

.flex-table {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.flex-table.gap-sm {
  gap: 6px;
}
.flex-table.table-lg {
  gap: 12px;
}
.flex-table.table-lg .flex-cell {
  min-height: 56px;
}
.flex-table.table-lg .cell-label {
  min-height: 56px;
}
.flex-table.table-lg .cell-content {
  min-height: 56px;
}
.flex-table.table-lg .cell-text {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.flex-table .flex-row {
  display: flex;
  flex-direction: row;
  gap: 40px;
  width: 100%;
}
.flex-table .flex-cell {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 40px;
}
.flex-table .cell-label {
  flex: 0 0 140px;
  display: flex;
  align-items: center;
  max-width: 140px;
  min-height: 40px;
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
}
.flex-table .cell-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
  height: 100%;
}
.flex-table .cell-text {
  display: inline-block;
  min-height: 40px;
  padding-block: 10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #0f1318;
}
.flex-table .req {
  display: inline-block;
  position: relative;
  right: -6px;
  top: -17px;
  margin: 0 !important;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.flex-table .req::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 4px;
  background-color: #ef4444;
  border-radius: 50%;
}
@media (max-width: 1024.98px) {
  .flex-table .flex-row {
    flex-direction: column;
    gap: 20px;
  }
}
@media (max-width: 767.98px) {
  .flex-table .flex-cell {
    flex-direction: column;
  }
  .flex-table .cell-label {
    flex: 0 0 auto;
  }
}

.box-guide {
  display: flex;
  flex-direction: row;
  gap: 57px;
  width: 100%;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}
.box-guide .guide-section {
  flex: 1 1 auto;
}
.box-guide .guide-section.section-sm {
  flex: 0 0 auto;
  width: 320px;
}
.box-guide .guide-section + .guide-section {
  position: relative;
}
.box-guide .guide-section + .guide-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: -28px;
  width: 1px;
  height: 100%;
  background-color: #e5e7eb;
}
.box-guide .guide-section .title {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
}
.box-guide .guide-section .title .ico {
  flex: 0 0 auto;
  margin-top: 1.5px;
}
.box-guide .guide-section .text-desc {
  font-size: 14px;
  color: #4b5563;
}
.box-guide .row-list-group {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
}
.box-guide .row-list-group .info-item {
  display: flex;
  flex-direction: row;
  gap: 4px;
}
.box-guide .row-list-group .info-item dt {
  flex: 0 0 auto;
  width: 62px;
}
.box-guide .row-list-group .info-item dd {
  flex: 1 1 auto;
}
.box-guide .row-list-group .info-item .code {
  margin: 0;
}
@media (max-width: 1024.98px) {
  .box-guide {
    flex-direction: column;
    gap: 20px;
  }
  .box-guide .guide-section + .guide-section::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e5e7eb;
  }
}

.accordion-area .accordion-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 24px;
}
.accordion-area .accordion-header .btn-xs {
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 14px;
}
.accordion-area .accordion-header .btn-xs .ico {
  margin-bottom: -1px;
}
.accordion-area .accordion-header .btn-xs:hover {
  background-color: #e5e7eb;
}
.accordion-area .accordion-section {
  margin-top: 12px;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.accordion-area .accordion-section.expanded {
  max-height: 1000px;
}
.accordion-area .accordion-section.collapsed {
  max-height: 0;
}

.plugin-key {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: auto;
  min-height: 48px;
  padding: 12px 16px;
  background-color: #f9fafb;
  border-radius: 9px;
  border: 1px solid #e5e7eb;
}
.plugin-key.full {
  justify-content: space-between;
  width: 100%;
  min-height: 57px;
  padding: 16px 20px;
  color: #0f1318;
}
.plugin-key .text-key {
  position: relative;
  padding-left: 24px;
  font-weight: 400;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 12px;
  color: #4b5563;
  line-height: 1.6;
}
.plugin-key .text-key::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url(/_next/static/media/ico-key-gray@2x.ca8d55bb.png);
  background-size: 20px auto;
  background-repeat: no-repeat;
}
.plugin-key .text-script {
  position: relative;
  font-weight: 400;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 12px;
  color: #4b5563;
  line-height: 1.6;
}
.plugin-key .btn-copy {
  flex: 0 0 auto;
  min-width: 57px;
  height: 24px;
  gap: 2px;
  padding-inline: 9px;
  border-radius: 0;
  font-weight: 500;
  font-size: 14px;
  color: #1364ff;
}

.a11y-plugin-guide {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}
.a11y-plugin-guide .section-step {
  width: 100%;
}
.a11y-plugin-guide .section-step .step-title {
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 16px;
  color: #0f1318;
}
.a11y-plugin-guide .section-step .step-title .num {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background-color: #4b5563;
  border-radius: 50%;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  line-height: 24px;
  color: #fff;
}
.a11y-plugin-guide .section-step .step-title .code-group {
  position: relative;
  top: -1px;
  margin-inline: 8px;
}
.a11y-plugin-guide .section-step .step-desc {
  font-weight: 400;
  font-size: 14px;
  color: #4b5563;
}
.a11y-plugin-guide .section-step .step-desc > strong {
  font-weight: 700;
}

.panel-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  border-top: 1px solid #d1d5db;
  padding-top: 40px;
}
.panel-content.content-gap-md {
  gap: 32px;
}
.panel-content.content-gap-sm {
  gap: 28px;
}
.panel-content .panel-title {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  color: #0f1318;
  line-height: 32px;
}
.panel-content .panel-title .title {
  font-weight: 700;
  font-size: 20px;
}
.panel-content .panel-title .btn-sm {
  height: 32px;
  padding: 0 11px;
}
.panel-content .panel-title .btn-sm:hover {
  background-color: #e5e7eb;
}
.panel-content .panel-title + .box-outline-point {
  margin-top: -16px;
}
.panel-content .panel-title + .box-outline {
  margin-top: -8px;
}
.panel-content .panel-title .req {
  display: inline-block;
  position: relative;
  right: -6px;
  top: -17px;
  margin: 0 !important;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.panel-content .panel-title .req::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 4px;
  background-color: #ef4444;
  border-radius: 50%;
}
.panel-content .panel-section {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
}
.panel-content .panel-section .title-area {
  flex: 0 0 auto;
  width: 200px;
}
.panel-content .panel-section .panel-title {
  font-size: 16px;
  color: #1f2937;
}
.panel-content .panel-section .content-area {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: calc(100% - 240px);
}
.panel-content .panel-section .content-area .form-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40px;
}
@media (max-width: 1024.98px) {
  .panel-content .panel-section {
    flex-direction: column;
    gap: 20px;
  }
  .panel-content .panel-section .content-area {
    max-width: 100%;
  }
}

.panel-content:has(.a11y-plugin-guide) {
  gap: 28px;
}

.site-management-page .empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  text-align: center;
}
.site-management-page .empty-box .empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a212b;
}
.site-management-page .empty-box .empty-desc {
  margin-top: 4px;
  font-size: 16px;
  color: #4b5563;
}

.site-management-page .alttext-header {
  border-bottom: 1px solid #e5e7eb;
}
.site-management-page .table-alttext .connectionLost {
  background-color: #ffdede;
}
.site-management-page .table-alttext .disconnected,
.site-management-page .table-alttext .paused {
  background-color: #f9fafb;
}
.site-management-page .table-alttext .disconnected .title-wrap,
.site-management-page .table-alttext .paused .title-wrap {
  opacity: 0.5;
}
.site-management-page .table-alttext .badge-profile {
  margin-bottom: 4px;
}
.site-management-page .table-alttext .site-category {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 4px;
  font-size: 12px;
  color: #4b5563;
  line-height: 1;
}
.site-management-page .table-alttext .url {
  margin-top: 2px;
}
.site-management-page .table-alttext .btn-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  padding-inline: 8px;
  border-radius: 0;
  font-size: 14px;
  color: #1364ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-management-page .table-alttext .btn-link .ico {
  margin-bottom: -2px;
}
.site-management-page .table-alttext .plugin-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.site-management-page .table-alttext .plugin-progress .badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding-inline: 4px 6px;
  border-radius: 11px;
  background-color: #e5e7eb;
  font-weight: 400;
  font-size: 12px;
  color: #4b5563;
  line-height: 1;
}
.site-management-page .table-alttext .plugin-progress .badge .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #4b5563;
  font-size: 11px;
  font-weight: 400;
  color: #fff;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 1px;
}
.site-management-page .table-alttext .plugin-progress .badge-installed {
  display: inline-flex;
}
.site-management-page .table-alttext .plugin-progress .badge-scanning {
  background-color: #dbeafe;
  color: #1364ff;
}
.site-management-page .table-alttext .plugin-progress .badge-scanning .num {
  background-color: #1364ff;
}
.site-management-page .table-alttext .plugin-progress .badge-processing {
  background-color: #ede9fe;
  color: #7c3aed;
}
.site-management-page .table-alttext .plugin-progress .badge-processing .num {
  background-color: #7c3aed;
}
.site-management-page .table-alttext .plugin-progress .badge-monitoring {
  background-color: #dbfaf0;
  color: #059669;
}
.site-management-page .table-alttext .plugin-progress .badge-monitoring .num {
  background-color: #059669;
}
.site-management-page .table-alttext .plugin-progress .guide-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  color: #1f2937;
}
.site-management-page .table-alttext .plugin-progress .guide-wrap .desc {
  display: inline-flex;
  align-items: center;
  height: 22px;
  line-height: 1;
}
.site-management-page .table-alttext .plugin-progress .guide-wrap .btn-link {
  margin-top: 0;
}
.site-management-page .table-alttext .status-action {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 24px;
  margin-top: 2px;
  font-size: 14px;
  color: #6b7280;
}
.site-management-page .table-alttext .loading-spinner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-management-page .table-alttext .loading-spinner .ico {
  position: absolute;
  animation: spin 8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.site-management-page .tooltip-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.site-management-page .tooltip-manage .tooltip-inner {
  width: 248px;
}
.site-management-page .tooltip-manage .title {
  display: block;
  margin-bottom: 6px;
}
.site-management-page .tooltip-manage .custom-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.popup-guide-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 100px;
  padding-block: 16px;
}
.popup-guide-section .icon-wrap {
  margin-bottom: 16px;
}
.popup-guide-section .user-email {
  font-weight: 500;
  color: #1364ff;
}
.popup-guide-section .title {
  font-weight: 700;
  font-size: 18px;
  color: #0f1318;
}
.popup-guide-section .cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  text-align: center;
}
.popup-guide-section .text {
  font-size: 14px;
}
.popup-guide-section .text-xs {
  margin-top: 4px;
  font-size: 12px;
  color: #4b5563;
}
.popup-guide-section.error {
  padding-top: 40px;
}
.popup-guide-section .error-text {
  display: block;
}
.popup-guide-section .data-list {
  width: 100%;
  padding-block: 16px;
  border-top: 1px solid #d1d5db;
  border-bottom: 1px solid #d1d5db;
}
.popup-guide-section .data-list .data-item {
  display: flex;
  flex-direction: row;
  gap: 8px;
  min-height: 40px;
  padding-left: 0;
  padding-block: 10px;
  text-align: left;
}
.popup-guide-section .data-list .data-item dt {
  flex: 0 0 auto;
  width: 140px;
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  color: #6b7280;
}
.popup-guide-section .data-list .data-item dd {
  flex: 1 1 auto;
  font-weight: 500;
  color: #0f1318;
}
.popup-guide-section .form-wrap {
  width: 100%;
}
.popup-guide-section .form-wrap .text {
  text-align: left;
}
.popup-guide-section .form-wrap .text-accent {
  color: #dc2626;
}
.popup-guide-section .form-wrap .form-control {
  width: 100%;
  margin-top: 9px;
}

.box-progress-info {
  width: 100%;
  margin-top: 20px;
  padding: 24px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  text-align: left;
}
.box-progress-info .badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 30px;
  padding-inline: 4px 6px;
  border-radius: 15px;
  background-color: #e5e7eb;
  font-weight: 500;
  font-size: 16px;
  color: #4b5563;
  line-height: 1.4;
}
.box-progress-info .badge .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #4b5563;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 1px;
}
.box-progress-info .badge-installed {
  display: inline-flex;
}
.box-progress-info .badge-scanning {
  background-color: #dbeafe;
  color: #1364ff;
}
.box-progress-info .badge-scanning .num {
  background-color: #1364ff;
}
.box-progress-info .badge-processing {
  background-color: #ede9fe;
  color: #7c3aed;
}
.box-progress-info .badge-processing .num {
  background-color: #7c3aed;
}
.box-progress-info .badge-monitoring {
  background-color: #dbfaf0;
  color: #059669;
}
.box-progress-info .badge-monitoring .num {
  background-color: #059669;
}
.box-progress-info .progress-list li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  min-height: 67px;
}
.box-progress-info .progress-list li + li {
  position: relative;
  margin-top: 20px;
}
.box-progress-info .progress-list li + li::before {
  content: "";
  position: absolute;
  top: -29px;
  left: 26px;
  width: 2px;
  height: 24px;
  background-color: #9ca3af;
  border-radius: 1px;
}
.box-progress-info .progress-list li .text-wrap {
  padding-top: 11px;
}
.box-progress-info .progress-list li .desc {
  margin-top: 8px;
  padding-left: 8px;
  font-size: 14px;
  color: #4b5563;
}

.popup-member-manage .popup-inner {
  height: 100%;
}
.popup-member-manage .popup-body {
  padding: 24px;
  overflow-y: hidden;
}
.popup-member-manage .popup-body + .popup-footer {
  margin-top: 0;
}
.popup-member-manage .scroll-inner {
  height: 100%;
}
.popup-member-manage .box-member {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  overflow: hidden;
}
.popup-member-manage .member-header {
  flex: 0 0 auto;
  width: 100%;
  min-height: 159px;
  background-color: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
  padding: 20px;
}
.popup-member-manage .member-header .team-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
}
.popup-member-manage .member-header .left {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: calc(100% - 120px);
}
.popup-member-manage .member-header .right {
  flex: 0 0 auto;
  width: 120px;
  text-align: right;
}
.popup-member-manage .member-header .right .btn-link {
  padding: 0 10px;
  color: #4b5563;
}
.popup-member-manage .member-header .team-name {
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.popup-member-manage .member-header .id-area {
  flex: 0 0 auto;
  margin-top: 0;
}
.popup-member-manage .limit-wrap {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}
.popup-member-manage .member-limit {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}
.popup-member-manage .member-limit .label {
  flex: 1 1 auto;
  margin: 0;
}
.popup-member-manage .member-limit .label > strong {
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
}
.popup-member-manage .member-limit .label .desc {
  margin-top: 4px;
  font-size: 12px;
  color: #4b5563;
}
.popup-member-manage .member-limit .value {
  flex: 0 0 auto;
  width: 117px;
  text-align: right;
}
.popup-member-manage .member-limit .input-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.popup-member-manage .member-limit .input-wrap .form-control-sm {
  font-size: 14px;
}
.popup-member-manage .member-limit .input-wrap input[type=number]::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}
.popup-member-manage .member-limit .input-wrap .unit {
  font-size: 14px;
  color: #4b5563;
}
.popup-member-manage .member-list-wrap {
  flex: 1 1 auto;
  width: 100%;
  height: calc(100% - 159px);
  overflow-y: auto;
}

.member-list-wrap .table-member {
  max-height: 100%;
  overflow: auto;
}
.member-list-wrap .table-member th,
.member-list-wrap .table-member td {
  padding-inline: 20px;
}
.member-list-wrap .table-member .form-control-sm {
  min-width: 90px;
  background-position: right 9px center;
}

.member-detail .detail-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.member-detail .detail-list .list-item {
  display: flex;
}
.member-detail .profile {
  box-shadow: none;
}

.site-meta-box {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 12px;
  padding: 20px 24px;
  background-color: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 9px;
  box-sizing: border-box;
}
.site-meta-box .meta-header {
  flex: 0 0 auto;
  width: 187px;
}
.site-meta-box .meta-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
}
.site-meta-box .site-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 14px;
  color: #4b5563;
}
.site-meta-box .meta-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 200px;
}
.site-meta-box .meta-item + .meta-item {
  position: relative;
  margin-left: 25px;
}
.site-meta-box .meta-item + .meta-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -25px;
  transform: translateY(-50%);
  width: 1px;
  height: 100%;
  background-color: #e5e7eb;
  border-radius: 0.5px;
}
.site-meta-box .meta-item.full {
  flex: 1 1 auto;
  width: 100%;
}
.site-meta-box .meta-item .meta-title {
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}
.site-meta-box .meta-item .meta-value {
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
}
.site-meta-box .meta-item .site-url {
  font-weight: 400;
}
.site-meta-box .site-purpose {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.site-meta-box .site-purpose .ico {
  margin-top: 0px;
}
@media (max-width: 1024.98px) {
  .site-meta-box {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px;
  }
  .site-meta-box .meta-header {
    width: 140px;
  }
  .site-meta-box .meta-content {
    flex-direction: column;
    gap: 8px;
  }
  .site-meta-box .meta-item {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
  }
  .site-meta-box .meta-item .meta-title {
    width: 90px;
    line-height: 1;
  }
  .site-meta-box .meta-item + .meta-item {
    margin-left: 0;
  }
  .site-meta-box .meta-item + .meta-item::before {
    content: none;
  }
}

.site-management-page .content-box.box-gap-xs {
  gap: 12px;
}
.site-management-page .content-box.box-gap-sm {
  gap: 16px;
}
.site-management-page .input-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.site-management-page .input-wrap .form-control-sm {
  font-size: 14px;
}
.site-management-page .input-wrap .unit {
  font-size: 16px;
  color: #4b5563;
}
.site-management-page .select-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.site-management-page .select-wrap .btn-md {
  min-width: 70px;
}

.option-section {
  gap: 0;
}
.option-section + .option-section {
  padding-top: 40px;
  border-top: 1px solid #e5e7eb;
}
.option-section .row-option {
  display: flex;
  flex-direction: column;
}
.option-section .row-option .option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px;
}
.option-section .row-option .option-item:has(.top-inner) {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
.option-section .row-option .option-item .top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.option-section .row-option .option-item .top-inner .left {
  flex: 1 1 auto;
}
.option-section .row-option .option-item .top-inner .right {
  flex: 0 0 auto;
}
.option-section .row-option .option-item .bottom-inner {
  width: 100%;
}
.option-section .row-option .option-item .bottom-inner .box-outline-gray {
  width: 100%;
  background-color: #f3f4f6;
}
.option-section .row-option .option-item .list-language {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.option-section .row-option .option-item .list-language .item {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  min-width: 59px;
  height: 27px;
  padding: 2px 6px 2px 8px;
  background-color: #4b5563;
  border-radius: 13.5px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}
.option-section .row-option .option-item .list-language .item .text {
  flex: 1 1 auto;
  line-height: 1;
}
.option-section .row-option .option-item .list-language .item button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
}
.option-section .row-option .option-item .right {
  flex: 0 0 auto;
}
.option-section .row-option .option-item.disabled {
  opacity: 0.5;
}
.option-section .row-option .option-item .title-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.option-section .row-option .option-item .title {
  font-weight: 700;
  font-size: 16px;
  color: #1f2937;
}
.option-section .row-option .option-item .desc {
  margin-top: 4px;
  font-size: 14px;
  color: #4b5563;
}
.option-section .row-option .option-item + .option-item {
  border-top: 1px solid #e5e7eb;
}

.layout-details:has(.alttext-list-page) {
  min-width: 100%;
}
.layout-details:has(.alttext-list-page) #content {
  width: calc(100vw - 260px);
}
@media (max-width: 1024.98px) {
  .layout-details:has(.alttext-list-page) #content {
    width: 100%;
  }
}

#sidebar {
  flex: 0 0 260px;
  width: 260px;
  transform: translateX(0%);
  opacity: 1;
  transition: width 0.3s ease, transform 0.03s ease, flex 0.6s ease;
}
#sidebar .sidebar-inner {
  visibility: visible;
  opacity: 1;
  min-width: 260px;
  transition: all 0.6s ease;
}

#sidebar.editor-mode {
  flex: 0 0;
  width: 0;
  flex: 0 0;
  transform: translateX(-100%);
  transition: width 0.3s ease, transform 10s ease, flex 0.3s ease;
}
#sidebar.editor-mode .sidebar-inner {
  visibility: hidden;
  opacity: 0;
  transition: all 0.15s ease;
}
#sidebar.editor-mode + #content {
  width: 100vw;
}
#sidebar.editor-mode + #content .alttext-list-page .alttext-body .alttext-inner {
  min-width: 100%;
}
@media (max-width: 1279.98px) {
  #sidebar.editor-mode + #content {
    width: 100%;
  }
  #sidebar.editor-mode + #content .alttext-list-page .alttext-body .alttext-inner {
    overflow-x: hidden;
  }
}

.alttext-work-page .alttext-search {
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}
.alttext-work-page .alttext-header {
  border-bottom: 1px solid #f3f4f6;
}
.alttext-work-page .tab-filter-wrap {
  padding-inline: 12px;
  border-bottom: 1px solid #f3f4f6;
}
.alttext-work-page .tab-filter-wrap .tab-list {
  border-bottom: 0;
}
.alttext-work-page .tab-filter-wrap .tab-list li button {
  gap: 4px;
  padding-inline: 12px;
}
.alttext-work-page .tooltip-connect .tooltip-inner {
  width: 140px;
  font-size: 14px;
  text-align: center;
}

.list-search-group .search-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.list-search-group .filter-checkbox-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
}
.list-search-group .btn-group .btn-sm.btn-filter-sm {
  position: relative;
  margin-left: 17px;
  padding: 0 16px 0 4px;
  color: #4b5563;
}
.list-search-group .btn-group .btn-sm.btn-filter-sm::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  transform: translateY(-50%) rotate(0deg);
  display: block;
  width: 1px;
  height: 20px;
  background-color: #d1d5db;
}
.list-search-group .btn-group .btn-sm.btn-filter-sm::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%) rotate(0deg);
  display: block;
  width: 8px;
  height: 8px;
  background-image: url(/_next/static/media/ico-arrow-down-sm-gray@2x.6f2b8e7b.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 8px auto;
}
.list-search-group .btn-group .btn-sm.btn-filter-sm.active::after {
  transform: translateY(-50%) rotate(180deg);
}
.list-search-group .search-input {
  padding-left: 24px;
  background-image: url(/_next/static/media/ico-search-xs-gray@2x.7246c6a8.png);
  background-repeat: no-repeat;
  background-position: left 8px center;
  background-size: 12px auto;
}
.list-search-group .btn-group {
  gap: 2px;
}
.list-search-group .btn-group .btn-sm {
  height: 28px;
  padding: 0 8px;
  font-weight: 500;
  font-size: 12px;
}
.list-search-group .btn-group .btn-reset {
  color: #4b5563;
}

.alttext-list-area {
  width: 100%;
}
.alttext-list-area .table-alttext table {
  border-color: #f3f4f6;
}
.alttext-list-area .table-alttext th {
  height: 40px;
  padding: 9px 20px;
  font-weight: 400;
  font-size: 14px;
  color: #6b7280;
}
.alttext-list-area .table-alttext td {
  height: 96px;
  padding: 16px 12px;
  border-color: #f3f4f6;
}
.alttext-list-area .table-alttext .title-wrap .title {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: #1a212b;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.alttext-list-area .table-alttext .title-wrap .url {
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-height: 2.8;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.alttext-list-area .table-alttext .title-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.alttext-list-area .table-alttext .title-area .title {
  display: inline-block;
}
.alttext-list-area .table-alttext .work-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.alttext-list-area .table-alttext .work-status .status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 70px;
}
.alttext-list-area .table-alttext .work-status .status-item > dt {
  font-weight: 400;
  font-size: 10px;
  text-align: center;
  color: #6b7280;
}
.alttext-list-area .table-alttext .work-status .status-item > dd {
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  color: #4b5563;
}
.alttext-list-area .table-alttext .work-status .status-item.inprogress > dd {
  color: #f97316;
}
.alttext-list-area .table-alttext .work-status .status-item.completed > dd {
  color: #059669;
}
.alttext-list-area .table-alttext .btn-action {
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
}
.alttext-list-area .table-alttext .btn-action.btn-view, .alttext-list-area .table-alttext .btn-action.btn-edit {
  background-color: #f3f4f6;
}
.alttext-list-area .table-alttext .btn-action.btn-setting {
  background-color: #fff;
  border-color: #d1d5db;
}
.alttext-list-area .btn-sort {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  line-height: 21px;
  color: #6b7280;
}
.alttext-list-area .btn-sort .ico {
  transform: rotate(0deg);
}
.alttext-list-area .btn-sort.sort .ico {
  transform: rotate(180deg);
}
.alttext-list-area .table-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.alttext-list-area .table-header .cell {
  padding: 11px 20px;
  font-weight: 400;
  font-size: 14px;
  color: #6b7280;
}
.alttext-list-area .table-body {
  width: 100%;
}
.alttext-list-area .table-body .table-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.alttext-list-area .table-body .table-row .cell {
  height: 100%;
  padding: 20px 12px;
}

.status-progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 148px;
  margin: 0 auto;
  padding-inline: 12px;
}
.status-progress-wrap .top-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  width: 100%;
}
.status-progress-wrap .body-area {
  width: 100%;
}
.status-progress-wrap .percentage {
  font-weight: 500;
  font-size: 16px;
  color: #1364ff;
}
.status-progress-wrap .progress-bar {
  display: block;
  width: 100%;
  min-width: 124px;
  height: 10px;
  border: none;
  border-radius: 5px;
  overflow: hidden;
}
.status-progress-wrap .progress-bar::-webkit-progress-bar {
  background-color: #e5e7eb;
  border-radius: 2px;
}
.status-progress-wrap .progress-bar::-webkit-progress-value {
  background-color: #059669;
  border-radius: 5px;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.status-progress-wrap .progress-bar::-moz-progress-bar {
  background-color: #059669;
  border-radius: 2px;
  -moz-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.status-progress-wrap .percentage {
  font-weight: 500;
  font-size: 12px;
  color: #1f2937;
}
.status-progress-wrap .count-info {
  font-weight: 400;
  font-size: 10px;
  color: #6b7280;
}

.empty-progress {
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}

.text-center .record-info {
  justify-content: center;
}

.record-info {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px 24px;
  font-weight: 400;
  font-size: 12px;
}
.record-info .info-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.record-info .info-item:has(.empty-date) {
  width: 100%;
}
.record-info .info-item .profile {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  overflow: hidden;
}
.record-info .info-item .profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.record-info .info-item .profile .profile-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #4b5563;
  font-size: 10px;
  font-weight: 500;
}
.record-info .info-item .info .date {
  font-size: 12px;
  color: #4b5563;
}
.record-info .empty-date {
  display: inline-block;
  width: 100%;
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
  line-height: 1;
  text-align: center;
}

.list-setting-wrap {
  position: relative;
}
.list-setting-wrap .list-setting-popup {
  display: none;
}
.list-setting-wrap:hover .list-setting-popup {
  display: block;
}
.list-setting-wrap:hover:has(.btn-site-setting:disabled) .list-setting-popup {
  display: none;
}
.list-setting-wrap .list-setting-popup {
  margin-top: -4px;
}
.list-setting-wrap .list-setting-popup .popup-inner {
  width: 170px;
  border-radius: 8px;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2509803922);
}
.list-setting-wrap .list-setting-popup .popup-body {
  padding: 8px;
  overflow-y: auto;
}
.list-setting-wrap .list-setting-popup.popup-md .popup-inner {
  width: 190px;
}
.list-setting-wrap .detail-list {
  display: flex;
  flex-direction: column;
}
.list-setting-wrap .detail-list.detail-type {
  margin-block: 4px;
}
.list-setting-wrap .detail-list .list-item {
  width: 100%;
}
.list-setting-wrap .detail-list .list-item + .list-item {
  position: relative;
  margin-top: 12px;
  padding-top: 12px;
}
.list-setting-wrap .detail-list .list-item + .list-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: calc(100% + 16px);
  height: 1px;
  background-color: #f3f4f6;
}
.list-setting-wrap .detail-list .btn {
  width: 100%;
  padding-inline: 12px;
  justify-content: flex-start;
}
.list-setting-wrap .detail-list .btn:focus {
  outline: none;
}
.list-setting-wrap .detail-list .btn:hover, .list-setting-wrap .detail-list .btn:active {
  background: #f3f4f6;
}
.list-setting-wrap .detail-list .btn.disabled {
  color: #9ca3af;
}
.list-setting-wrap .detail-list .btn.btn-danger {
  color: #ef4444;
}
.list-setting-wrap .detail-list .plugin-status {
  display: flex;
  flex-direction: column;
  padding-left: 8px;
  font-size: 12px;
  color: #1f2937;
}
.list-setting-wrap .detail-list .plugin-status .status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 6px 12px;
}
.list-setting-wrap .detail-list .plugin-status .status-item.on dd {
  color: #1364ff;
}
.list-setting-wrap .detail-list .plugin-status .status-item.off dt,
.list-setting-wrap .detail-list .plugin-status .status-item.off dd {
  color: #9ca3af;
}

.alttext-list-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 8px 20px;
  font-weight: 500;
  font-size: 12px;
  color: #1a212b;
}
.alttext-list-header .left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.alttext-list-header .right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.alttext-list-header .total-count strong {
  font-weight: 500;
  color: #1364ff;
}
.alttext-list-header .form-control-sm {
  min-width: 80px;
  height: 20px;
  padding: 2px 14px 2px 4px;
  border-radius: 0;
  border-color: transparent;
  background: url(/_next/static/media/ico-arrow-down-sm-gray@2x.6f2b8e7b.png) no-repeat right 4px center;
  background-size: 8px auto;
  font-weight: 400;
  font-size: 12px;
  color: #4b5563;
  line-height: 1;
}
.alttext-list-header .form-control-sm:hover, .alttext-list-header .form-control-sm:focus {
  border-color: transparent;
  box-shadow: none;
}
.alttext-list-header .page-info {
  color: #6b7280;
}
.alttext-list-header .page-info strong {
  color: #1a212b;
}
.alttext-list-header .items-per-page {
  position: relative;
  padding-left: 3px;
}
.alttext-list-header .items-per-page::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  width: 1px;
  height: 10px;
  background: #e5e7eb;
  border-radius: 0.5;
}
.alttext-list-header .search-result {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin-right: 7px;
  font-size: 12px;
}
.alttext-list-header .search-result::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  width: 1px;
  height: 11px;
  background: #e5e7eb;
}
.alttext-list-header .search-result dt {
  font-weight: 400;
  color: #4b5563;
}
.alttext-list-header .search-result dd {
  color: #1364ff;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.3;
  line-height: 1.3;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  max-width: 130px;
}

.guide-tooltip-wrap {
  position: relative;
}
.guide-tooltip-wrap .guide-tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  width: max-content;
  min-width: 270px;
  min-height: 139px;
  margin-top: 12px;
  padding: 24px 20px;
  background-color: #000;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  z-index: 200;
}
.guide-tooltip-wrap .guide-tooltip.hide {
  display: none;
}
.guide-tooltip-wrap .guide-tooltip::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 16px;
  width: 14px;
  height: 8px;
  background-image: url(/_next/static/media/img-tooltip-arrow-black@2x.bd4fa1cb.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px auto;
}
.guide-tooltip-wrap .guide-tooltip .text-accent {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 16px;
  color: #bafd02;
}
.guide-tooltip-wrap .guide-tooltip .text-wrap {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 12px;
  font-weight: 400;
}
.guide-tooltip-wrap .guide-tooltip .icon-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background-color: #f3f4f6;
  border-radius: 3.5px;
}
.guide-tooltip-wrap .guide-tooltip .btn-close {
  background: rgba(255, 255, 255, 0.2);
}

.action-bar {
  position: fixed;
  bottom: 40px;
  left: calc(50% + 130px);
  transform: translateX(-50%);
  width: auto;
  min-width: max-content;
  height: 48px;
  padding: 8px 20px;
  background-color: #000;
  border-radius: 12px;
  z-index: 600;
  white-space: nowrap;
  display: none;
}
.action-bar.show {
  display: block;
}
.action-bar .bar-inner {
  display: flex;
  align-items: center;
  gap: 25px;
}
.action-bar .selected-count {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}
.action-bar .selected-count .count {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.action-bar .selected-count .text {
  font-size: 14px;
  color: #d1d5db;
}
.action-bar .selected-count:after {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 1px;
  height: 16px;
  background-color: #e5e7eb;
  opacity: 0.2;
}
.action-bar .action-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}
.action-bar .action-buttons .btn-text-lightgray {
  gap: 2px;
  color: #9ca3af;
  border-radius: 8px;
}
.action-bar .action-buttons .btn-text-lightgray:hover, .action-bar .action-buttons .btn-text-lightgray:active {
  background-color: rgba(255, 255, 255, 0.1);
}
.action-bar .action-buttons .btn-text-white {
  gap: 2px;
  color: #e5e7eb;
}
.action-bar .action-buttons .btn-ai-generate .text:after {
  width: calc(100% - 3px);
  height: calc(100% - 3px);
}

.keyword-count-wrap {
  flex: 1 1 auto;
  text-align: right;
}
.keyword-count-wrap .keyword-count {
  display: inline-block;
  margin-left: 8px;
  color: #1364ff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.alttext-work-page .file-wrap .project-info,
.alttext-work-page .file-wrap .image-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.alttext-work-page .file-wrap .project-info .thumbnail,
.alttext-work-page .file-wrap .image-info .thumbnail {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 50px;
  margin: 2px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f3f4f6;
  border: 1px solid #f3f4f6;
}
.alttext-work-page .file-wrap .project-info .thumbnail img,
.alttext-work-page .file-wrap .image-info .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.alttext-work-page .file-wrap .project-info .thumbnail .img-hash,
.alttext-work-page .file-wrap .image-info .thumbnail .img-hash {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 12px;
  padding: 1px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-weight: 400;
  font-size: 10px;
  text-align: center;
  color: #fff;
  line-height: 1;
  overflow: hidden;
}
.alttext-work-page .file-wrap .project-info .thumbnail-group,
.alttext-work-page .file-wrap .image-info .thumbnail-group {
  position: relative;
  display: flex;
  width: 74px;
  height: 50px;
  margin: 2px;
}
.alttext-work-page .file-wrap .project-info .thumbnail-group .thumbnail,
.alttext-work-page .file-wrap .image-info .thumbnail-group .thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 40px;
  margin: 0;
}
.alttext-work-page .file-wrap .project-info .thumbnail-group .thumbnail:nth-child(1),
.alttext-work-page .file-wrap .image-info .thumbnail-group .thumbnail:nth-child(1) {
  position: relative;
  z-index: 10;
}
.alttext-work-page .file-wrap .project-info .thumbnail-group .thumbnail:nth-child(2),
.alttext-work-page .file-wrap .image-info .thumbnail-group .thumbnail:nth-child(2) {
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
}
.alttext-work-page .file-wrap .project-info .thumbnail-group .image-count,
.alttext-work-page .file-wrap .image-info .thumbnail-group .image-count {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12px;
  padding: 0 4px;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6980392157);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 2px 0 0 0;
  line-height: 1;
  z-index: 20;
}
.alttext-work-page .file-wrap .project-info .text-info,
.alttext-work-page .file-wrap .image-info .text-info {
  flex: 1 1 auto;
  width: calc(100% - 90px);
}
.alttext-work-page .file-wrap .project-info .text-info .type-label,
.alttext-work-page .file-wrap .image-info .text-info .type-label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  margin-bottom: 2px;
  background-color: #f3f4f6;
  border-radius: 3px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1;
}
.alttext-work-page .file-wrap .project-info .text-info .file-name,
.alttext-work-page .file-wrap .image-info .text-info .file-name {
  display: block;
  width: 100%;
  font-weight: 500;
  font-size: 16px;
  color: #1a212b;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.alttext-work-page .file-wrap .image-info .thumbnail {
  border-color: #e5e7eb;
}

.alttext-work-page .content-box:has(.alttext-dashboard) {
  flex: 0 0 auto;
}
.alttext-work-page .alttext-dashboard {
  display: flex;
  flex-direction: row;
  gap: 81px;
}
.alttext-work-page .alttext-dashboard .dashboard-item {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
  width: 33.333%;
}
.alttext-work-page .alttext-dashboard .dashboard-item + .dashboard-item {
  position: relative;
}
.alttext-work-page .alttext-dashboard .dashboard-item + .dashboard-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -40px;
  width: 1px;
  height: 100%;
  background-color: #e5e7eb;
}
.alttext-work-page .alttext-dashboard .dashboard-item .item-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.alttext-work-page .alttext-dashboard .dashboard-item .item-content .label {
  display: block;
  font-size: 14px;
  color: #6b7280;
}
.alttext-work-page .alttext-dashboard .dashboard-item .item-content .count {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
}
.alttext-work-page .alttext-dashboard .dashboard-item .item-content .count > strong {
  font-weight: 700;
}
.alttext-work-page .alttext-dashboard .dashboard-item .item-content .count .unit {
  margin-left: 4px;
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}
.alttext-work-page .alttext-dashboard .dashboard-item .badge-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.alttext-work-page .scan-notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  margin-bottom: 24px;
  background: #eff6ff;
  border-radius: 12px;
}
.alttext-work-page .scan-notification .notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.alttext-work-page .scan-notification .notification-content .ico-check-circle {
  width: 24px;
  height: 24px;
  color: #1364ff;
}
.alttext-work-page .scan-notification .notification-content .title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}
.alttext-work-page .scan-notification .notification-content .desc {
  color: #4b5563;
  margin-left: 8px;
  font-size: 14px;
}
.alttext-work-page .scan-notification .notification-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(19, 100, 255, 0.05);
  border-radius: 8px;
}
.alttext-work-page .scan-notification .notification-tip .ico-info {
  width: 16px;
  height: 16px;
  color: #1364ff;
}
.alttext-work-page .scan-notification .notification-tip span {
  font-size: 14px;
  color: #1364ff;
}
.alttext-work-page .scan-notification .btn-close {
  padding: 4px;
  margin-left: 16px;
}
.alttext-work-page .scan-notification .btn-close .ico-close {
  width: 24px;
  height: 24px;
  color: #9ca3af;
}
.alttext-work-page .scan-notification .btn-close:hover .ico-close {
  color: #4b5563;
}

.notification-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  min-height: 128px;
  margin-block: -8px;
  padding: 32px 40px;
  background-image: url(/_next/static/media/bg-banner-type01.abc65654.png);
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 24px;
  color: #fff;
}
.notification-banner .left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.notification-banner .left .ico {
  flex: 0 0 auto;
}
.notification-banner .title-area .title {
  font-weight: 700;
  font-size: 22px;
}
.notification-banner .title-area .desc {
  font-weight: 400;
  font-size: 12px;
}
.notification-banner .notification-tip {
  display: flex;
  flex-direction: row;
  gap: 4px;
  width: 242px;
  min-height: 64px;
  padding: 14px;
  gap: 4px;
  background: rgba(0, 0, 0, 0.3019607843);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 8px;
  font-weight: 400;
  font-size: 14px;
}
.notification-banner .notification-tip::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(136.83deg, rgba(255, 255, 255, 0.5) 2.58%, rgba(255, 255, 255, 0.9) 21.05%, rgba(255, 255, 255, 0.5) 47.88%, rgba(255, 255, 255, 0.2) 94.05%);
  border-radius: 8px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  opacity: 0.8;
}
.notification-banner .notification-tip > strong {
  font-weight: 500;
  opacity: 1;
}
.notification-banner .notification-tip > p span {
  opacity: 0.8;
}
.notification-banner .notification-tip .ico {
  flex: 0 0 auto;
}
.notification-banner .btn-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.1490196078);
  border-radius: 4px;
}
.notification-banner .btn-close:hover {
  color: #9ca3af;
}
@media (min-width: 1025px) {
  .notification-banner {
    min-width: 1100px;
  }
}

.alttext-start-popup .alttext-content .top-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 24px;
}
.alttext-start-popup .alttext-content .guide-text {
  font-weight: 500;
  font-size: 18px;
  color: #1f2937;
}
.alttext-start-popup .alttext-content .guide-text > strong {
  font-weight: 700;
  color: #1364ff;
}
.alttext-start-popup .alttext-content .summary-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 216px;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.alttext-start-popup .alttext-content .summary-area .item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 1 auto;
  gap: 4px;
}
.alttext-start-popup .alttext-content .summary-area .item > dt {
  font-weight: 400;
  color: #4b5563;
}
.alttext-start-popup .alttext-content .summary-area .item > dt strong {
  font-weight: 400;
}
.alttext-start-popup .alttext-content .summary-area .item > dd {
  font-weight: 500;
  color: #1364ff;
}
.alttext-start-popup .alttext-content .start-options {
  display: flex;
  flex-direction: row;
  gap: 12px;
  min-height: 410px;
}
.alttext-start-popup .alttext-content .start-options .option-item {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 28px 24px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
}
.alttext-start-popup .alttext-content .start-options .option-item:focus {
  outline: none;
}
.alttext-start-popup .alttext-content .start-options .option-item:hover, .alttext-start-popup .alttext-content .start-options .option-item:focus-within {
  background-color: #eff6ff;
  border-color: #60a5fa;
  box-shadow: 0px 2px 15px 0px rgba(19, 100, 255, 0.1490196078);
}
.alttext-start-popup .alttext-content .start-options .option-item .icon-area {
  margin-bottom: 32px;
}
.alttext-start-popup .alttext-content .start-options .title {
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 22px;
  color: #0f1318;
}
.alttext-start-popup .alttext-content .start-options .desc {
  min-height: 36px;
  font-weight: 500;
  font-size: 14px;
  color: #4b5563;
}
.alttext-start-popup .alttext-content .tag-area {
  min-height: 87px;
  margin-block: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}
.alttext-start-popup .alttext-content .tag-area .notice-text {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  margin-top: 0;
  margin-bottom: 8px;
}
.alttext-start-popup .alttext-content .tag-area .option-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
.alttext-start-popup .alttext-content .tag-area .option-tags .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 6px;
  background: #e5e7eb;
  border-radius: 10px;
  font-weight: 400;
  font-size: 12px;
  color: #4b5563;
  line-height: 1;
}
.alttext-start-popup .alttext-content .notice-text {
  margin-top: 12px;
  font-weight: 400;
  font-size: 12px;
  color: #4b5563;
}

.site-edit-popup .popup-body {
  padding: 36px 36px 20px;
}
.site-edit-popup .title3 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin: 0;
}
.site-edit-popup .inner {
  margin-top: 12px;
}
.site-edit-popup .text-count {
  display: block;
  margin-top: 9px;
  text-align: right;
  font-size: 14px;
  color: #4b5563;
}
.site-edit-popup .popup-inner .popup-footer {
  padding: 20px 36px 36px;
}

.alttext-work-page .content-box.fit-content {
  flex: 0 0 auto;
}
.alttext-work-page .panel-content {
  margin-top: 32px;
}
.alttext-work-page .notice-text {
  font-weight: 400;
  font-size: 14px;
  color: #4b5563;
}
.alttext-work-page .storage-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alttext-work-page .storage-progress {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
.alttext-work-page .storage-progress .progress-bar {
  width: 210px;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
}
.alttext-work-page .storage-progress .progress-bar::-webkit-progress-bar {
  background-color: #e5e7eb;
  border-radius: 7px;
}
.alttext-work-page .storage-progress .progress-bar::-webkit-progress-value {
  background-color: #1364ff;
  border-radius: 7px;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.alttext-work-page .storage-progress .progress-bar::-moz-progress-bar {
  background-color: #1364ff;
  border-radius: 4px;
  -moz-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.alttext-work-page .storage-progress .progress-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  color: #1f2937;
}
@media (max-width: 1024.98px) {
  .alttext-work-page .storage-progress {
    flex-wrap: wrap;
  }
}

.alttext-work-page .mt-xs {
  margin-top: 6px;
}
.alttext-work-page .file-form .input-addon {
  margin-left: 6px;
}
.alttext-work-page .file-form .input-addon .btn {
  min-width: 87px;
}
.alttext-work-page .file-form .input-group + .guide-text {
  margin-top: 6px;
}
.alttext-work-page .file-form .form-control:-moz-read-only {
  background-color: #fff;
}
.alttext-work-page .file-form .form-control:read-only {
  background-color: #fff;
}

.editor-dimed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 500;
}

.alttext-editor-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(100% - 160px);
  z-index: 900;
  display: flex;
  background-color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0px 4px 80px 0px rgba(0, 0, 0, 0.4);
}
.alttext-editor-popup .alttext-dimed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  z-index: 100;
  transition: opacity 0.3s ease-in-out;
}
.alttext-editor-popup .alttext-dimed.visible {
  opacity: 1;
  pointer-events: auto;
}
.alttext-editor-popup .alttext-dimed.hidden {
  opacity: 0;
  pointer-events: none;
}
.alttext-editor-popup .alttext-dimed .loading-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.alttext-editor-popup .alttext-dimed .loading-bar .spinner {
  width: 60px;
  height: 60px;
}
.alttext-editor-popup .editor-handle {
  position: absolute;
  top: 0;
  left: -4px;
  width: 4px;
  height: 100%;
  background-color: #000000;
}
.alttext-editor-popup .alttext-editor {
  flex: 1 1;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.alttext-editor-popup .alttext-editor .editor-inner {
  display: flex;
  flex-direction: column;
  min-width: 1280px;
  height: 100%;
}
.alttext-editor-popup .editor-header {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 4px 8px;
  border-bottom: 1px solid #e5e7eb;
}
.alttext-editor-popup .editor-header .header-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 50%;
}
.alttext-editor-popup .editor-header .left {
  min-width: 520px;
  padding-right: 112px;
}
.alttext-editor-popup .editor-header .right {
  justify-content: flex-end;
  min-width: 520px;
  padding-left: 112px;
}
.alttext-editor-popup .editor-header .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex: 1 1;
  width: auto;
  justify-content: center;
  z-index: 10;
}
.alttext-editor-popup .editor-header .btn-panel-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.alttext-editor-popup .editor-header .btn-panel-group {
  display: flex;
  align-items: center;
  gap: 2px;
}
.alttext-editor-popup .editor-header .btn-panel-group + .btn-panel-group {
  position: relative;
  margin-left: 9px;
}
.alttext-editor-popup .editor-header .btn-panel-group + .btn-panel-group::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: #e5e7eb;
}
.alttext-editor-popup .editor-header .btn-panel {
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  border-radius: 7px;
}
.alttext-editor-popup .editor-header .btn-panel:hover, .alttext-editor-popup .editor-header .btn-panel:focus-visible {
  background-color: #f3f4f6;
}
.alttext-editor-popup .editor-header .img-info {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: calc(100% - 110px);
  white-space: nowrap;
}
.alttext-editor-popup .editor-header .img-title {
  font-weight: 500;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  color: #0f1318;
}
.alttext-editor-popup .editor-header .img-info-wrap {
  display: flex;
  align-items: center;
}
.alttext-editor-popup .editor-header .view-mode {
  display: flex;
  min-width: 140px;
  height: 28px;
  padding: 2px;
  background-color: #e5e7eb;
  border-radius: 7px;
  font-weight: 400;
  font-size: 14px;
  color: #6b7280;
}
.alttext-editor-popup .editor-header .view-mode .btn {
  min-width: 68px;
  padding-inline: 5px;
  border-radius: 6px;
}
.alttext-editor-popup .editor-header .view-mode .btn.active {
  background-color: #fff;
  font-weight: 500;
  color: #1f2937;
  box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.0509803922);
}
.alttext-editor-popup .editor-header .right .btn-panel-wrap {
  gap: 6px;
}
.alttext-editor-popup .editor-header .right .btn-panel-group {
  gap: 4px;
}
.alttext-editor-popup .editor-header .right .btn-panel {
  min-width: 32px;
  height: 32px;
}
.alttext-editor-popup .editor-header .status-area .status-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.alttext-editor-popup .editor-header .status-area .profile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: -4px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1019607843);
  z-index: 1;
}
.alttext-editor-popup .editor-header .status-area .profile img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}
.alttext-editor-popup .editor-header .status-area .profile.expert {
  position: relative;
}
.alttext-editor-popup .editor-header .status-area .profile.expert::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -1px;
  width: 12px;
  height: 12px;
  background-image: url(/_next/static/media/ico-badge-sm@2x.1ed99774.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 10;
}
.alttext-editor-popup .editor-header .status-area .profile .profile-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  color: #4b5563;
  font-size: 10px;
  font-weight: 500;
}
.alttext-editor-popup .editor-header .download-wrap {
  position: relative;
}
.alttext-editor-popup .editor-header .download-popup {
  right: -22px;
}
.alttext-editor-popup .editor-header .download-popup .popup-inner {
  width: 184px;
  border-radius: 12px;
}
.alttext-editor-popup .editor-header .download-popup .popup-body {
  padding: 8px;
  overflow-y: auto;
}
.alttext-editor-popup .editor-header .download-popup .btn-md {
  padding-inline: 12px;
  letter-spacing: -0.02em;
}
.alttext-editor-popup .img-repeat {
  position: relative;
  padding-left: 27px;
  font-weight: 400;
  font-size: 12px;
}
.alttext-editor-popup .img-repeat:before {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  background-color: #ccc;
  border-radius: 50%;
}
.alttext-editor-popup .img-repeat:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url(/_next/static/media/ico-repeat-sm-gray@2x.f5942e95.png);
  background-size: 14px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-editor-popup .editor-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.alttext-editor-popup .editor-content .content-preview {
  flex: 1 1;
  overflow: hidden;
}
.alttext-editor-popup .editor-content .content-viewer {
  flex: 1 1;
  overflow: hidden;
}
.alttext-editor-popup .editor-content .content-inner {
  display: flex;
  flex-direction: row;
  flex: 1 1;
}
.alttext-editor-popup .editor-content .content-inner .panel {
  width: calc(50% - 0.5px);
}
.alttext-editor-popup .editor-content .content-inner .panel-left {
  position: relative;
  width: 640px;
}
.alttext-editor-popup .editor-content .content-inner .panel-right {
  width: calc(100% - 640px);
}
.alttext-editor-popup .editor-content .panel-handle {
  flex: 0 0 auto;
  width: 1px;
  height: 100%;
  background-color: #e5e7eb;
}
.alttext-editor-popup .editor-content .panel-header {
  display: flex;
  align-items: center;
  height: 40px;
  padding-inline: 8px;
  background-color: #fff;
}
.alttext-editor-popup .editor-content .panel-content {
  display: none;
  height: 100%;
  height: calc(100vh - 88px);
  gap: 0;
  padding: 0;
  border-top: none;
  overflow: hidden;
}
.alttext-editor-popup .editor-content .panel-content.active {
  display: flex;
}
.alttext-editor-popup .editor-content .panel-content .viewer-area {
  flex: 1 1;
  overflow: hidden;
  background-color: #f3f4f6;
}
.alttext-editor-popup .editor-content .panel-content .image-viewer {
  height: 100%;
}
.alttext-editor-popup .editor-content .panel-content .image-viewer .tools {
  top: 8px;
  right: 8px;
}
.alttext-editor-popup .editor-content .panel-content .image-viewer .react-transform-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.alttext-editor-popup .editor-content .panel-content .image-viewer .react-transform-wrapper img {
  object-fit: contain;
  width: auto !important;
}
.alttext-editor-popup .editor-content .panel-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
}
.alttext-editor-popup .editor-content .panel-nav .btn-viewer,
.alttext-editor-popup .editor-content .panel-nav .btn-analysis {
  position: relative;
  height: 100%;
  padding-inline: 12px;
  font-weight: 400;
  font-size: 14px;
  color: #4b5563;
}
.alttext-editor-popup .editor-content .panel-nav .btn-viewer.active,
.alttext-editor-popup .editor-content .panel-nav .btn-analysis.active {
  font-weight: 700;
  color: #1f2937;
}
.alttext-editor-popup .editor-content .panel-nav .btn-viewer.active::after,
.alttext-editor-popup .editor-content .panel-nav .btn-analysis.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
}
.alttext-editor-popup .editor-content .panel-nav .btn-viewer.active .ico {
  background-image: url(/_next/static/media/ico-viewer-type01-active@2x.aabe1356.png);
}
.alttext-editor-popup .editor-content .panel-nav .btn-analysis.active .ico {
  background-image: url(/_next/static/media/ico-viewer-type02-active@2x.f78712e7.png);
}
.alttext-editor-popup .editor-content .panel-inner {
  height: 100%;
  overflow-y: auto;
  background-color: #f9fafb;
}
.alttext-editor-popup .editor-content .panel-section {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background-color: #f9fafb;
}
.alttext-editor-popup .editor-content .panel-section + .panel-section {
  border-top: 4px solid #e5e7eb;
}
.alttext-editor-popup .editor-content .panel-section .section-title {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}
.alttext-editor-popup .editor-content .panel-section .section-inner {
  flex: 1 1;
  width: 100%;
}
.alttext-editor-popup .editor-content .section-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.alttext-editor-popup .editor-content .section-item + .section-item {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}
.alttext-editor-popup .editor-content .section-item .info-img-wrap {
  flex: 0 0 auto;
  width: 72px;
  height: 48px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.alttext-editor-popup .editor-content .section-item .info-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.alttext-editor-popup .editor-content .section-item.row {
  flex-direction: row;
  gap: 38px;
}
.alttext-editor-popup .editor-content .section-item.row .info-detail {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  width: calc(100% - 110px);
}
.alttext-editor-popup .editor-content .section-item.row .info-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: auto;
  padding-right: 8px;
}
.alttext-editor-popup .editor-content .section-item.row .info-label {
  width: auto;
}
.alttext-editor-popup .editor-content .section-item.row .info-value {
  display: flex;
  align-items: center;
  height: 20px;
  max-width: none;
}
.alttext-editor-popup .editor-content .info-detail {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  gap: 12px 4px;
}
.alttext-editor-popup .editor-content .info-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  font-size: 12px;
}
.alttext-editor-popup .editor-content .info-item.half {
  width: calc(50% - 2px);
}
.alttext-editor-popup .editor-content .info-item .info-label {
  flex: 0 0 auto;
  width: 90px;
  font-weight: 400;
  color: #6b7280;
}
.alttext-editor-popup .editor-content .info-item .info-value {
  flex: 1 1 auto;
  max-width: calc(100% - 110px);
}
.alttext-editor-popup .editor-content .info-item .btn {
  height: 20px;
}
.alttext-editor-popup .editor-content .info-item .btn-hash-copy {
  padding-inline: 0 20px;
}
.alttext-editor-popup .editor-content .info-item .img-repeat {
  padding-left: 16px;
}
.alttext-editor-popup .editor-content .info-item .img-repeat:before {
  content: none;
}
.alttext-editor-popup .editor-content .info-item .img-repeat:after {
  left: 0;
}
.alttext-editor-popup .editor-content .info-item .btn-repeat {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
.alttext-editor-popup .editor-content .info-item .btn-repeat:hover, .alttext-editor-popup .editor-content .info-item .btn-repeat:focus-visible {
  background-color: #e5e7eb;
}
.alttext-editor-popup .editor-content .info-item .img-type {
  display: flex;
  align-items: center;
  height: 20px;
  line-height: 1;
}
.alttext-editor-popup .editor-content .info-item .img-type .ico {
  width: 12px;
  height: 12px;
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-editor-popup .editor-content .info-item .status-view {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  color: #f97316;
}
.alttext-editor-popup .editor-content .info-item .img-category {
  position: relative;
  padding-left: 14px;
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}
.alttext-editor-popup .editor-content .info-item .img-category:before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url(/_next/static/media/ico-image-sm-gray@2x.2e19542e.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-editor-popup .editor-content .info-item .img-category.category-img:before {
  background-image: url(/_next/static/media/ico-image-sm-gray@2x.2e19542e.png);
}
.alttext-editor-popup .editor-content .info-item .img-category.category-bg:before {
  background-image: url(/_next/static/media/ico-bg-sm-gray@2x.3290ff23.png);
}
.alttext-editor-popup .editor-content .info-item .link-url {
  position: relative;
  display: flex;
  padding-right: 20px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.alttext-editor-popup .editor-content .info-item .link-url span {
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.alttext-editor-popup .editor-content .info-item .link-url:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url(/_next/static/media/ico-alt-copy-gray@2x.5a19ebef.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-editor-popup .editor-content .info-item .info-priority {
  display: flex;
  align-items: center;
}
.alttext-editor-popup .editor-content .info-item .info-site + .link-url {
  display: flex;
  margin-bottom: 2px;
}
.alttext-editor-popup .editor-content .info-item .info-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-height: 2.6;
  line-height: 1.3;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.alttext-editor-popup .editor-content .info-item .code {
  height: 18px;
  font-size: 11px;
  background-color: #f3f4f6;
}
.alttext-editor-popup .editor-content .panel-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
}
.alttext-editor-popup .editor-content .panel-right .panel-section {
  gap: 0;
  padding: 0;
  background-color: #fff;
}
.alttext-editor-popup .editor-content .panel-right .panel-existing {
  flex: 0 0 auto;
  height: 180px;
}
.alttext-editor-popup .editor-content .panel-right .panel-new {
  flex: 1 1;
  overflow: hidden;
}
.alttext-editor-popup .editor-content .panel-right .panel-handle {
  height: 0px;
}
.alttext-editor-popup .editor-content .panel-right .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding-inline: 8px;
  background-color: #fff;
}
.alttext-editor-popup .editor-content .panel-right .section-header > .left {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.alttext-editor-popup .editor-content .panel-right .section-header > .right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.alttext-editor-popup .editor-content .panel-right .section-content {
  display: flex;
  flex: 1 1;
  width: 100%;
  overflow: auto;
  background-color: #f3f4f6;
}
.alttext-editor-popup .editor-content .panel-right .section-title {
  width: auto;
  font-size: 14px;
  font-weight: 500;
}
.alttext-editor-popup .editor-content .panel-right .created-date {
  font-size: 12px;
  color: #6b7280;
  line-height: 1;
}
.alttext-editor-popup .editor-content .panel-right .btn-ai .bg-blur-1 {
  display: none;
}
.alttext-editor-popup .editor-content .panel-right .section-item {
  flex: 1 1 auto;
  width: 100%;
}
.alttext-editor-popup .editor-content .panel-right .section-item .item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  height: 20px;
  background-color: #e5e7eb;
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
}
.alttext-editor-popup .editor-content .panel-right .section-item .item-header .btn-item {
  flex: 0 0 auto;
  gap: 0;
  width: 39px;
  height: 20px;
  padding-inline: 4px;
  border-radius: 0;
  font-size: 10px;
  color: #4b5563;
  line-height: 1;
}
.alttext-editor-popup .editor-content .panel-right .section-item .item-header .btn-item:hover, .alttext-editor-popup .editor-content .panel-right .section-item .item-header .btn-item:focus-visible {
  background-color: #d1d5db;
}
.alttext-editor-popup .editor-content .panel-right .section-item .item-header .btn-item.active {
  background-color: #d1d5db;
}
.alttext-editor-popup .editor-content .panel-right .section-item .item-header .alttext-title {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-inline: 4px;
  font-weight: 400;
  color: #6b7280;
}
.alttext-editor-popup .editor-content .panel-right .section-item + .section-item {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  border-left: 1px solid #f9fafb;
}
.alttext-editor-popup .editor-content .panel-existing .section-content {
  flex-direction: row;
}
.alttext-editor-popup .editor-content .panel-new .section-content {
  flex-direction: column;
  overflow: hidden;
}
.alttext-editor-popup .editor-content .panel-new .alt-area {
  flex: 0 0 auto;
  height: 159px;
}
.alttext-editor-popup .editor-content .panel-new .tiptap {
  margin-left: 12px;
  padding-top: 12px;
}
.alttext-editor-popup .editor-content .panel-new .alttext-textarea {
  position: relative;
  padding: 0 0 25px;
  background-color: #fff;
}
.alttext-editor-popup .editor-content .panel-new .alttext-textarea .textarea {
  resize: none;
  width: 100%;
  height: 100%;
  padding: 12px 12px 0;
  background-color: #fff;
  border: none;
  font-size: 14px;
  color: #1f2937;
}
.alttext-editor-popup .editor-content .panel-new .alttext-textarea .textarea:focus {
  outline: none;
}
.alttext-editor-popup .editor-content .panel-new .alttext-textarea .textarea::placeholder {
  color: #9ca3af;
}
.alttext-editor-popup .editor-content .panel-new .alttext-textarea .textarea-guide {
  position: absolute;
  bottom: 10px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-inline: 12px;
  font-weight: 400;
  font-size: 10px;
  color: #6b7280;
  line-height: 1;
}
.alttext-editor-popup .editor-content .panel-new .alttext-textarea .textarea-guide .guide-text {
  font-size: 10px;
}
.alttext-editor-popup .editor-content .panel-new .alttext-textarea .textarea-guide.text-warning > span {
  color: #ef4444;
}
.alttext-editor-popup .editor-content .panel-new .description-area {
  height: calc(100% - 159px);
}
.alttext-editor-popup .editor-content .panel-new .description-area .item-header {
  flex: 0 0 auto;
}
.alttext-editor-popup .editor-content .panel-new .description-area .editor-wrap {
  flex: 1 1;
  overflow: hidden;
}
.alttext-editor-popup .editor-content .panel-new .description-area .edit-area {
  height: calc(100% - 24px);
}
.alttext-editor-popup .editor-content .panel-new .code-mirror {
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 12px;
}
.alttext-editor-popup .editor-content .editor-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 20px);
  background-color: #fff;
}
.alttext-editor-popup .editor-content .editor-wrap > div {
  height: 100%;
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 24px;
  min-height: 24px;
  padding: 2px 4px;
  background-color: #fff;
  border-bottom: 1px solid #f3f4f6;
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar > button {
  min-width: 20px;
  height: 20px;
  padding: 0;
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .ico {
  min-width: 20px;
  width: auto;
  height: 20px;
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .ico-undo {
  background-image: url(/_next/static/media/ico-undo-lg@2x.16da42c5.png);
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .ico-redo {
  background-image: url(/_next/static/media/ico-redo-lg@2x.5d4adbd7.png);
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .btn-h1 {
  width: 22px;
  height: 20px;
  text-indent: -9999px;
  background-image: url(/_next/static/media/ico-h1-lg@2x.72efaf13.png);
  background-size: 22px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .btn-h2 {
  width: 22px;
  height: 20px;
  text-indent: -9999px;
  background-image: url(/_next/static/media/ico-h2-lg@2x.0a42e508.png);
  background-size: 22px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .btn-h3 {
  width: 22px;
  height: 20px;
  text-indent: -9999px;
  background-image: url(/_next/static/media/ico-h3-lg@2x.32c53eeb.png);
  background-size: 22px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .ico-paragraph-sm {
  background-image: url(/_next/static/media/ico-paragraph-lg@2x.be1f9d19.png);
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .ico-bold {
  background-image: url(/_next/static/media/ico-bold-lg@2x.a6c8aa04.png);
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .ico-italic {
  background-image: url(/_next/static/media/ico-italic-lg@2x.051401bf.png);
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .ico-underline {
  background-image: url(/_next/static/media/ico-underline-lg@2x.b9a4f048.png);
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .ico-strike {
  background-image: url(/_next/static/media/ico-strike-lg@2x.5acd2f3e.png);
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .ico-bullet-list {
  background-image: url(/_next/static/media/ico-bullet-list-lg@2x.ed7ac93a.png);
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .ico-ordered-list {
  background-image: url(/_next/static/media/ico-ordered-list-lg@2x.b27e2e52.png);
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .ico-table {
  background-image: url(/_next/static/media/ico-edittable-lg@2x.4b012659.png);
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .ico-link {
  background-image: url(/_next/static/media/ico-link-lg@2x.bbcbdb9c.png);
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .tool-line {
  padding: 0 2px;
}
.alttext-editor-popup .editor-content .editor-wrap .editor-toolbar .tool-line::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 8px;
  background-color: #d1d5db;
}
.alttext-editor-popup .editor-content .editor-wrap .tiptap {
  height: 100%;
}
.alttext-editor-popup .editor-content .editor-wrap .html-view {
  height: 100%;
}
.alttext-editor-popup .editor-content .editor-wrap .code-mirror {
  height: 100%;
}
.alttext-editor-popup .editor-content.mode-viewer .content-preview {
  display: none;
}
.alttext-editor-popup .editor-content.mode-viewer .panel-header.viewer {
  display: flex;
}
.alttext-editor-popup .editor-content.mode-viewer .panel-header.preview {
  display: none;
}
.alttext-editor-popup .editor-content.mode-preview .content-preview {
  display: flex;
}
.alttext-editor-popup .editor-content.mode-preview .panel-header {
  width: 100%;
}
.alttext-editor-popup .editor-content.mode-preview .panel-header.viewer {
  display: none;
}
.alttext-editor-popup .editor-content.mode-preview .panel-header.preview {
  display: flex;
  gap: 20px;
  width: 100%;
}
.alttext-editor-popup .editor-content.mode-preview .panel-header.preview .left {
  flex: 1 1 auto;
  width: calc(100% - 120px);
}
.alttext-editor-popup .editor-content.mode-preview .panel-header.preview .right {
  flex: 0 0 auto;
}
.alttext-editor-popup .editor-content.mode-preview .panel-content {
  height: calc(100% - 40px);
}
.alttext-editor-popup .editor-content.mode-preview .panel-new .section-content {
  flex-direction: row;
}
.alttext-editor-popup .editor-content.mode-preview .panel-new .section-item {
  width: 50%;
  height: 100%;
}
.alttext-editor-popup .editor-content.mode-preview .link-url {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 10px;
  font-size: 10px;
  color: #4b5563;
}
.alttext-editor-popup .editor-content.mode-preview .link-url span {
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.alttext-editor-popup .editor-content.mode-preview .link-url .ico {
  flex: 0 0 auto;
}
.alttext-editor-popup .editor-content.mode-preview .link-url:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-image: url(/_next/static/media/ico-link-xs@2x.1063593c.png);
  background-size: 8px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-editor-popup .editor-content.mode-preview .btn-analysis {
  gap: 2px;
  min-width: 99px;
  height: 26px;
  padding-inline: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-weight: 500;
  font-size: 10px;
  color: #1f2937;
  line-height: 1;
}
.alttext-editor-popup .editor-content.mode-preview .btn-analysis .ico {
  margin-top: 1px;
}
.alttext-editor-popup .editor-content.mode-preview .panel-analysis {
  display: none;
}
.alttext-editor-popup .editor-content .alttext-textarea {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 12px;
  padding-right: 0;
  background-color: #f3f4f6;
  font-size: 14px;
  color: #6b7280;
}
.alttext-editor-popup .editor-content .alttext-textarea:after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 6px;
  width: 6px;
  height: 12px;
  background-image: url(/_next/static/media/bg-textarea@2x.f854d3f7.png);
  background-size: 6px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-editor-popup .editor-content .alttext-textarea .inner {
  overflow-y: scroll;
}
.alttext-editor-popup .codemirror-wrap {
  width: 100%;
  height: 149px;
  max-height: 149px;
  padding: 0;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.alttext-editor-popup .codemirror-wrap .codemirror-area {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.alttext-editor-popup .codemirror-wrap .codemirror-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 39px;
  height: 100%;
  background-color: #f3f4f6;
  border-right: 1px solid #e5e7eb;
}
.alttext-editor-popup .codemirror-wrap .codemirror-area .cm-gutter {
  min-width: 15px;
  background-color: #f3f4f6;
}
.alttext-editor-popup .codemirror-wrap .codemirror-area .cm-activeLineGutter {
  background-color: transparent;
}
.alttext-editor-popup .codemirror-wrap .codemirror-area .cm-gutters {
  border-right: 1px solid #e5e7eb;
  font-size: 11px;
  color: #6b7280;
}
.alttext-editor-popup .codemirror-wrap .codemirror-area .cm-content {
  padding: 0;
  font-size: 11px;
  color: #6b7280 !important;
}
.alttext-editor-popup .codemirror-wrap .codemirror-area .cm-line {
  background-color: #fff;
}
.alttext-editor-popup .codemirror-wrap .codemirror-area .cm-line > span {
  color: #6b7280 !important;
}
.alttext-editor-popup .codemirror-wrap .codemirror-area .cm-gutterElement {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.alttext-editor-popup .panel-analysis {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 334px;
  padding: 8px;
  background-color: #f3f4f6;
}
.alttext-editor-popup .panel-analysis .analysis-inner {
  height: 100%;
  border-radius: 8px;
  padding: 10px 12px 12px;
  gap: 10px;
  background-color: #fff;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1490196078);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  overflow: hidden;
}
.alttext-editor-popup .panel-analysis .analysis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  margin-bottom: 10px;
}
.alttext-editor-popup .panel-analysis .analysis-title {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}
.alttext-editor-popup .panel-analysis .btn-more {
  display: flex;
  align-items: center;
  gap: 0;
  height: 24px;
  padding-inline: 4px;
  font-size: 12px;
  color: #4b5563;
  line-height: 1;
}
.alttext-editor-popup .panel-analysis .btn-more .ico {
  margin-top: 1px;
}
.alttext-editor-popup .panel-analysis .section-inner {
  height: 100%;
  overflow-y: auto;
}
.alttext-editor-popup .panel-analysis .section-inner .info-detail {
  gap: 8px;
}
.alttext-editor-popup .panel-analysis .section-inner .ellipsis01 {
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.3;
  line-height: 1.3;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.alttext-editor-popup .panel-analysis .codemirror-wrap {
  height: 72px;
  max-height: 72px;
}
.alttext-editor-popup .content-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid #000;
}
.alttext-editor-popup .content-preview::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
  pointer-events: none;
}
.alttext-editor-popup .content-preview::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.alttext-editor-popup .content-preview .preview-pin {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
}
.alttext-editor-popup .content-preview .preview-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 20px;
  border: 5px solid #4b5563;
  border-radius: 25px;
  overflow: hidden;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}
.alttext-editor-popup .content-preview .preview-container.pc-mode {
  margin-top: 0;
  border: none;
  border-radius: 0;
}
.alttext-editor-popup .content-preview .preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}
.alttext-editor-popup .content-preview .preview-toolbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
  z-index: 100;
}
.alttext-editor-popup .content-preview .toolbar-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 10px;
}
.alttext-editor-popup .content-preview .device-mode {
  width: auto;
  padding: 2px;
  background-color: #e5e7eb;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1490196078);
}
.alttext-editor-popup .content-preview .device-mode .btn-device {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 5px;
}
.alttext-editor-popup .content-preview .device-mode .btn-device.active {
  background-color: #fff;
}
.alttext-editor-popup .content-preview .device-mode .btn-device.active .ico-pc {
  background-image: url(/_next/static/media/ico-pc-active@2x.4ec0a13b.png);
}
.alttext-editor-popup .content-preview .device-mode .btn-device.active .ico-tablet {
  background-image: url(/_next/static/media/ico-tablet-active@2x.b62f395a.png);
}
.alttext-editor-popup .content-preview .device-mode .btn-device.active .ico-mobile {
  background-image: url(/_next/static/media/ico-mobile-active@2x.7ab0db52.png);
}
.alttext-editor-popup .content-preview .select-device {
  background-color: #fff !important;
  border: 1px solid #d1d5db !important;
}
.alttext-editor-popup .content-preview .btn-visibility {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding-inline: 9px;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 12px;
}
.alttext-editor-popup .content-preview .btn-visibility:hover, .alttext-editor-popup .content-preview .btn-visibility:focus-visible {
  background-color: #f3f4f6;
}
.alttext-editor-popup .content-preview .btn-visibility .tooltip-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  padding-right: 13px;
}
.alttext-editor-popup .content-preview .btn-visibility .tooltip-wrapper .tooltip-inner {
  width: 118px;
}
.alttext-editor-popup .content-preview .btn-visibility::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url(/_next/static/media/ico-pin@2x.47214e26.png);
  background-size: 16px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-editor-popup .content-preview .label-visibility {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding-inline: 9px;
  background-color: #fff;
  border-radius: 7px;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 12px;
  color: #f97316;
  line-height: 1;
}
.alttext-editor-popup .content-preview .label-visibility .ico {
  flex: 0 0 auto;
}
.alttext-editor-popup.is-fullscreen {
  width: 100%;
}
.description-area .cm-editor {
  height: 100%;
}
.description-area .ͼ1 .cm-content {
  white-space: break-spaces;
  word-break: break-word;
  overflow-wrap: anywhere;
  flex-shrink: 1;
}
.description-area .ͼ1 .cm-content {
  padding: 0;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #bdee81;
}
.description-area .ͼ2r,
.description-area .ͼ2l,
.description-area .ͼ2o,
.description-area .ͼ2k,
.description-area .ͼ2n {
  color: #bdee81;
}
.description-area .ͼ2v {
  color: #6b7280;
  font-style: normal;
}
.description-area .cm-gutterElement {
  padding: 0 8px;
  text-align: left;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: #6b7280;
}
.description-area .cm-gutter {
  min-width: 33px;
  color: #6b7280;
}
.description-area .ͼ1 .cm-lineNumbers .cm-gutterElement {
  padding: 0 3px 0 8px;
  font-size: 12px;
  text-align: left;
}
.description-area .cm-gutter.cm-foldGutter,
.description-area .cm-gutter.cm-changeGutter {
  border: 1px solid white !important;
  display: none !important;
}
.description-area .ͼ1 .cm-line {
  padding: 0 4px;
}

.content-composite {
  position: absolute;
  top: 62px;
  left: 20px;
}
.content-composite .view-mode {
  display: flex;
  min-width: 140px;
  height: 24px;
  padding: 2px;
  background-color: #e5e7eb;
  border-radius: 7px;
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}
.content-composite .view-mode .btn {
  min-width: 68px;
  padding-inline: 5px;
  border-radius: 6px;
}
.content-composite .view-mode .btn.active {
  background-color: #fff;
  font-weight: 500;
  color: #1f2937;
  box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.0509803922);
}
.content-composite .view-text {
  margin-top: 8px;
  padding-inline: 6px;
  font-weight: 500;
  font-size: 10px;
  color: #000;
}

.alttext-history-popup .history-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-width: 550px;
  height: 80px;
  gap: 20px;
}
.alttext-history-popup .history-item .left {
  flex: 1 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.alttext-history-popup .history-item .right {
  flex: 0 0 auto;
}
.alttext-history-popup .history-item .history-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #d1d5db;
  z-index: 1;
}
.alttext-history-popup .history-item .history-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}
.alttext-history-popup .history-item .history-avatar .text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 500;
}
.alttext-history-popup .history-item .history-avatar.expert::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background-image: url(/_next/static/media/ico-badge-md@2x.428f6115.png);
  background-size: 16px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-history-popup .history-item + .history-item {
  position: relative;
}
.alttext-history-popup .history-item + .history-item:before {
  content: "";
  position: absolute;
  top: -40px;
  left: 19px;
  width: 1px;
  height: calc(100% - 10px);
  background-color: #e5e7eb;
  z-index: -1;
}
.alttext-history-popup .history-item .log-text {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  color: #1f2937;
  line-height: 1;
}
.alttext-history-popup .history-item .log-text .status-badge {
  margin-inline: 6px;
}
.alttext-history-popup .history-item .log-date {
  display: inline-block;
  margin-top: 6px;
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}

.alttext-restore-popup .restore-wrap .section-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 530px;
  background-color: #f3f4f6;
  border-radius: 12px;
  overflow: hidden;
}
.alttext-restore-popup .restore-wrap .section-item {
  width: 50%;
  height: 100%;
}
.alttext-restore-popup .restore-wrap .section-item + .section-item {
  border-left: 1px solid #d1d5db;
}
.alttext-restore-popup .restore-wrap .description-area .item-header {
  padding-right: 0;
}
.alttext-restore-popup .restore-wrap .item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #e5e7eb;
  height: 20px;
  padding-inline: 8px;
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}
.alttext-restore-popup .restore-wrap .btn-item {
  height: 20px;
  padding-inline: 6.5px;
  font-size: 10px;
}
.alttext-restore-popup .restore-wrap .btn-item.active {
  background-color: #d1d5db;
  color: #1f2937;
}
.alttext-restore-popup .restore-wrap .alttext-title {
  display: flex;
  align-items: center;
  gap: 2px;
}
.alttext-restore-popup .restore-wrap .alttext-textarea {
  position: relative;
  height: calc(100% - 20px);
  padding: 0 0 12px;
  background-color: #f3f4f6;
}
.alttext-restore-popup .restore-wrap .alttext-textarea:after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 6px;
  width: 6px;
  height: 12px;
  background-image: url(/_next/static/media/bg-textarea@2x.f854d3f7.png);
  background-size: 6px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-restore-popup .restore-wrap .alttext-textarea .textarea {
  resize: none;
  width: 100%;
  height: 100%;
  padding: 12px;
  background-color: #f3f4f6;
  border: none;
  font-size: 14px;
  color: #1f2937;
}
.alttext-restore-popup .restore-wrap .alttext-textarea .textarea:focus {
  outline: none;
}
.alttext-restore-popup .restore-wrap .alttext-textarea .textarea::placeholder {
  color: #9ca3af;
}
.alttext-restore-popup .restore-wrap .editor-toolbar {
  display: none;
}
.alttext-restore-popup .restore-wrap .editor-wrap {
  height: calc(100% - 20px);
}
.alttext-restore-popup .restore-wrap .editor-wrap > div {
  height: 100%;
  padding: 12px;
}
.alttext-restore-popup .restore-wrap .edit-area {
  height: 100%;
}
.alttext-restore-popup .restore-wrap .edit-area .tiptap {
  margin: 0;
  padding: 12px;
}
.alttext-restore-popup .restore-wrap .edit-area .drag-handle {
  display: none;
}
.alttext-restore-popup .restore-wrap .html-view {
  height: 100%;
  overflow-y: auto;
}
.alttext-restore-popup .restore-wrap .html-view .cm-editor.cm-focused {
  outline: none;
}
.alttext-restore-popup .restore-wrap .html-view .cm-gutter {
  display: none !important;
}
.alttext-restore-popup .restore-wrap .html-view .ͼ38 {
  background-color: #f3f4f6;
  color: #1f2937;
}
.alttext-restore-popup .restore-wrap .html-view .ͼ38 .cm-gutters {
  border-right: none;
}
.alttext-restore-popup .restore-wrap .html-view .ͼ1 .cm-content {
  color: #1f2937;
}
.alttext-restore-popup .restore-wrap .html-view .ͼ2r,
.alttext-restore-popup .restore-wrap .html-view .ͼ2l,
.alttext-restore-popup .restore-wrap .html-view .ͼ2o,
.alttext-restore-popup .restore-wrap .html-view .ͼ2k,
.alttext-restore-popup .restore-wrap .html-view .ͼ2n,
.alttext-restore-popup .restore-wrap .html-view .ͼ3i {
  color: #1f2937;
}

.alttext-img-list {
  width: 100%;
  border-top: 1px solid #e5e7eb;
}
.alttext-img-list .imglist-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 40px;
  background-color: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
}
.alttext-img-list .imglist-header .title-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
}
.alttext-img-list .imglist-header .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: #1f2937;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
}
.alttext-img-list .imglist-header .info {
  font-size: 12px;
  color: #4b5563;
}
.alttext-img-list .panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(50% - 2px);
  min-width: 588px;
  padding-inline: 20px;
}
.alttext-img-list .panel-handle {
  position: relative;
  display: block;
  align-self: stretch;
  width: 4px;
  background-color: #f9fafb;
  border-left: 2px solid #e5e7eb;
  border-right: 2px solid #e5e7eb;
  margin: -1px 0;
}
.alttext-img-list .panel-handle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background-color: #f9fafb;
}
.alttext-img-list .imglist-body {
  width: 100%;
}
.alttext-img-list .imglist-body .alttext-header {
  position: -webkit-sticky;
  position: sticky;
  top: 40px;
  z-index: 50;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.alttext-img-list .imglist-body .alttext-header .cell {
  height: 40px;
  padding-block: 0;
}
.alttext-img-list .imglist-body .alttext-header .alttext-item,
.alttext-img-list .imglist-body .alttext-header .alttext-list-link {
  font-size: 14px;
  color: #6b7280;
}
.alttext-img-list .imglist-body .alttext-header .cell-status {
  width: 208px;
  text-align: center;
  justify-content: center;
}
.alttext-img-list .imglist-body .alttext-header .cell-preview {
  padding-left: 12px;
}
@media (max-width: 1024.98px) {
  .alttext-img-list .imglist-body .alttext-header .cell-status {
    width: 100px;
  }
  .alttext-img-list .imglist-body .alttext-header .right-panel .cell-text {
    flex: 1 1 auto;
    max-width: calc(100% - 200px);
  }
}
.alttext-img-list .imglist-body .alttext-list {
  border-bottom: 1px solid #e5e7eb;
}
.alttext-img-list .imglist-body .alttext-list > .alttext-item,
.alttext-img-list .imglist-body .alttext-list > .alttext-list-link {
  min-height: 72px;
  z-index: 0;
}
.alttext-img-list .imglist-body .alttext-list > .alttext-item:first-child {
  position: relative;
}
@media (max-width: 1024.98px) {
  .alttext-img-list .imglist-body .alttext-list .cell-status {
    display: none;
  }
  .alttext-img-list .imglist-body .alttext-list .right-panel .cell-text {
    flex: 1 1 auto;
    max-width: calc(100% - 200px);
  }
  .alttext-img-list .imglist-body .alttext-list .cell-action {
    flex: 0 0 auto;
  }
}
.alttext-img-list .alttext-item,
.alttext-img-list .alttext-list-link {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: 40px;
  transition: background-color 0.2s ease;
  position: relative;
}
.alttext-img-list .alttext-item + .alttext-item,
.alttext-img-list .alttext-list-link + .alttext-item {
  border-top: 1px solid #f3f4f6;
}
.alttext-img-list .alttext-item.error,
.alttext-img-list .alttext-list-link.error {
  position: relative;
}
.alttext-img-list .alttext-item.error::before,
.alttext-img-list .alttext-list-link.error::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: #ef4444;
}
.alttext-img-list .alttext-item.warning,
.alttext-img-list .alttext-list-link.warning {
  position: relative;
}
.alttext-img-list .alttext-item.warning::before,
.alttext-img-list .alttext-list-link.warning::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: #ffaa00;
}
.alttext-img-list .alttext-item.aiGenerated, .alttext-img-list .alttext-item.completed, .alttext-img-list .alttext-item.deployed,
.alttext-img-list .alttext-list-link.aiGenerated,
.alttext-img-list .alttext-list-link.completed,
.alttext-img-list .alttext-list-link.deployed {
  background-color: transparent;
}
.alttext-img-list .alttext-item.contextual-type,
.alttext-img-list .alttext-list-link.contextual-type {
  background-color: transparent;
}
.alttext-img-list .alttext-item.contextual-type .right-panel,
.alttext-img-list .alttext-list-link.contextual-type .right-panel {
  background-color: #f9fafb;
}
.alttext-img-list .alttext-item.contextual-type .cell-type,
.alttext-img-list .alttext-list-link.contextual-type .cell-type {
  opacity: 0.5;
}
.alttext-img-list .alttext-item.contextual-type .right-panel .cell-text .new-wrap,
.alttext-img-list .alttext-list-link.contextual-type .right-panel .cell-text .new-wrap {
  padding-left: 0;
  background-image: none;
}
.alttext-img-list .alttext-item.contextual-type .right-panel .cell-text .new-wrap .img-alt,
.alttext-img-list .alttext-list-link.contextual-type .right-panel .cell-text .new-wrap .img-alt {
  color: #6b7280;
  line-height: 1.4;
}
.alttext-img-list .alttext-item.contextual-type .right-panel .cell-text .img-alt,
.alttext-img-list .alttext-list-link.contextual-type .right-panel .cell-text .img-alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 16px;
  padding-inline: 4px;
  background: rgba(0, 0, 0, 0.0509803922);
  border-radius: 4px;
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
  text-align: left;
}
.alttext-img-list .alttext-item.contextual-type .alt-not-text,
.alttext-img-list .alttext-list-link.contextual-type .alt-not-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.alttext-img-list .alttext-item.contextual-type .alt-not-text .ico,
.alttext-img-list .alttext-list-link.contextual-type .alt-not-text .ico {
  flex: 0 0 auto;
  line-height: 0;
  vertical-align: unset;
}
.alttext-img-list .alttext-item.contextual-type .alt-not-text > span,
.alttext-img-list .alttext-list-link.contextual-type .alt-not-text > span {
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.3;
  line-height: 1.3;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.alttext-img-list .alttext-item.contextual-type .cell-action .btn-edit,
.alttext-img-list .alttext-list-link.contextual-type .cell-action .btn-edit {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  max-width: 32px;
}
.alttext-img-list .alttext-item.contextual-type .cell-action .btn-edit:hover,
.alttext-img-list .alttext-list-link.contextual-type .cell-action .btn-edit:hover {
  border-color: #d1d5db;
}
.alttext-img-list .alttext-item.contextual-type .cell-action .btn-ai-edit .border-2,
.alttext-img-list .alttext-list-link.contextual-type .cell-action .btn-ai-edit .border-2 {
  padding: 0.8px;
  background: linear-gradient(102.37deg, #e5e7eb 4.21%, #e5e7eb 95.02%);
  -webkit-mask: linear-gradient(#f9fafb 0 0) content-box, linear-gradient(#f9fafb 0 0);
  -webkit-mask-composite: xor;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.alttext-img-list .alttext-item.contextual-type .cell-action .btn-ai-edit .border-2:hover,
.alttext-img-list .alttext-list-link.contextual-type .cell-action .btn-ai-edit .border-2:hover {
  background: linear-gradient(102.37deg, #008cff 4.21%, #bafd02 95.02%);
  -webkit-mask: linear-gradient(#f9fafb 0 0) content-box, linear-gradient(#f9fafb 0 0);
  -webkit-mask-composite: xor;
}
.alttext-img-list .alttext-item.contextual-type .cell-action .btn-ai-edit .text,
.alttext-img-list .alttext-list-link.contextual-type .cell-action .btn-ai-edit .text {
  background-color: #fff;
  border-radius: 8px;
}
.alttext-img-list .alttext-item.contextual-type .cell-action .btn-ai-edit:hover .text,
.alttext-img-list .alttext-list-link.contextual-type .cell-action .btn-ai-edit:hover .text {
  background-color: transparent;
}
.alttext-img-list .alttext-item.checked,
.alttext-img-list .alttext-list-link.checked {
  background-color: #eff6ff;
}
.alttext-img-list .alttext-item.hovered .cell-action .btn-group,
.alttext-img-list .alttext-list-link.hovered .cell-action .btn-group {
  display: flex;
}
.alttext-img-list .alttext-item.active,
.alttext-img-list .alttext-list-link.active {
  position: relative;
  background-color: #eff6ff;
}
.alttext-img-list .alttext-item.active::after,
.alttext-img-list .alttext-list-link.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #60a5fa;
  z-index: 10;
}
.alttext-img-list .alttext-item.active::after,
.alttext-img-list .alttext-list-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #60a5fa;
  z-index: 10;
}
.alttext-img-list .alttext-item .panel,
.alttext-img-list .alttext-list-link .panel {
  padding-inline: 0;
}
.alttext-img-list .alttext-item .cell,
.alttext-img-list .alttext-list-link .cell {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 10px 12px;
  line-height: 1.4;
}
.alttext-img-list .alttext-item .cell-select,
.alttext-img-list .alttext-list-link .cell-select {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.alttext-img-list .alttext-item .cell-select .check-item-sm label::before,
.alttext-img-list .alttext-list-link .cell-select .check-item-sm label::before {
  margin-top: -2px;
}
.alttext-img-list .alttext-item .cell-group,
.alttext-img-list .alttext-list-link .cell-group {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 40px);
  height: auto;
  padding: 0;
}
.alttext-img-list .alttext-item .cell-context-id,
.alttext-img-list .alttext-list-link .cell-context-id {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 24px;
  margin-top: -6px;
  padding-top: 0;
  padding-left: 28px;
}
.alttext-img-list .alttext-item .context-id,
.alttext-img-list .alttext-list-link .context-id {
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 11px;
  color: #7c3aed;
  line-height: 1;
}
.alttext-img-list .alttext-item .context-id-label,
.alttext-img-list .alttext-list-link .context-id-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 82px;
  height: 14px;
  border-radius: 3px;
  padding: 1px 2px;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #fff;
  background-color: #7c3aed;
  line-height: 1.2;
}
.alttext-img-list .alttext-item .context-id-label .ico,
.alttext-img-list .alttext-list-link .context-id-label .ico {
  line-height: 0;
  vertical-align: unset;
}
.alttext-img-list .alttext-item .context-id-repeat,
.alttext-img-list .alttext-list-link .context-id-repeat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 12px;
  color: #6b7280;
}
.alttext-img-list .alttext-item .context-id-repeat .ico,
.alttext-img-list .alttext-list-link .context-id-repeat .ico {
  line-height: 0;
  vertical-align: unset;
}
.alttext-img-list .alttext-item .cell-preview,
.alttext-img-list .alttext-list-link .cell-preview {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 50%;
  padding-left: 28px;
}
.alttext-img-list .alttext-item .cell-text,
.alttext-img-list .alttext-list-link .cell-text {
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  width: 50%;
  font-weight: 400;
  font-size: 14px;
  text-align: left;
}
.alttext-img-list .alttext-item .cell-text > p,
.alttext-img-list .alttext-list-link .cell-text > p {
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  width: 100%;
}
.alttext-img-list .alttext-item .cell-text .error-text,
.alttext-img-list .alttext-list-link .cell-text .error-text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  color: #dc2626;
  letter-spacing: -0.1em;
}
.alttext-img-list .alttext-item .cell-text .error-text .ico,
.alttext-img-list .alttext-list-link .cell-text .error-text .ico {
  margin: 0;
}
.alttext-img-list .alttext-item .cell-text .warning-text,
.alttext-img-list .alttext-list-link .cell-text .warning-text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  color: #754e00;
  letter-spacing: -0.1em;
}
.alttext-img-list .alttext-item .cell-text .warning-text .ico,
.alttext-img-list .alttext-list-link .cell-text .warning-text .ico {
  margin: 0;
}
.alttext-img-list .alttext-item .cell-text .alt-not-text,
.alttext-img-list .alttext-list-link .cell-text .alt-not-text {
  font-weight: 400;
  color: #9ca3af;
}
.alttext-img-list .alttext-item .cell-text .img-alt,
.alttext-img-list .alttext-list-link .cell-text .img-alt {
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.3;
  line-height: 1.3;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  width: 100%;
  font-size: 14px;
  color: #6b7280;
}
.alttext-img-list .alttext-item .cell-text .img-alt.new,
.alttext-img-list .alttext-list-link .cell-text .img-alt.new {
  color: #1f2937;
}
.alttext-img-list .alttext-item .cell-text .img-description,
.alttext-img-list .alttext-list-link .cell-text .img-description {
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.3;
  line-height: 1.3;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  max-width: 100%;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.0784313725);
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-size: 12px;
  color: #6b7280;
}
.alttext-img-list .alttext-item .cell-text .new-wrap,
.alttext-img-list .alttext-list-link .cell-text .new-wrap {
  display: flex;
  padding-left: 16px;
  background-image: url(/_next/static/media/ico-ai-generate-black@2x.798a2ead.png);
  background-size: 12px auto;
  background-position: left center;
  background-repeat: no-repeat;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.3;
  line-height: 1.3;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.alttext-img-list .alttext-item .cell-text .new-wrap .img-alt,
.alttext-img-list .alttext-item .cell-text .new-wrap .img-description,
.alttext-img-list .alttext-list-link .cell-text .new-wrap .img-alt,
.alttext-img-list .alttext-list-link .cell-text .new-wrap .img-description {
  color: #1f2937;
}
.alttext-img-list .alttext-item .cell-type,
.alttext-img-list .alttext-list-link .cell-type {
  flex: 0 0 auto;
  justify-content: center;
  gap: 2px;
  width: 100px;
  text-align: center;
}
.alttext-img-list .alttext-item .cell-type .img-type,
.alttext-img-list .alttext-list-link .cell-type .img-type {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 22px;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  color: #1f2937;
}
.alttext-img-list .alttext-item .cell-type .img-type .ico,
.alttext-img-list .alttext-list-link .cell-type .img-type .ico {
  vertical-align: unset;
  line-height: 0;
}
.alttext-img-list .alttext-item .cell-status,
.alttext-img-list .alttext-list-link .cell-status {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  width: 114px;
  text-align: center;
}
.alttext-img-list .alttext-item .cell-status .status-wrap,
.alttext-img-list .alttext-list-link .cell-status .status-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.alttext-img-list .alttext-item .cell-status .status-wrap .profile,
.alttext-img-list .alttext-list-link .cell-status .status-wrap .profile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: -4px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1019607843);
  z-index: 1;
}
.alttext-img-list .alttext-item .cell-status .status-wrap .profile img,
.alttext-img-list .alttext-list-link .cell-status .status-wrap .profile img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}
.alttext-img-list .alttext-item .cell-status .status-wrap .profile.expert,
.alttext-img-list .alttext-list-link .cell-status .status-wrap .profile.expert {
  position: relative;
}
.alttext-img-list .alttext-item .cell-status .status-wrap .profile.expert::after,
.alttext-img-list .alttext-list-link .cell-status .status-wrap .profile.expert::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -1px;
  width: 12px;
  height: 12px;
  background-image: url(/_next/static/media/ico-badge-sm@2x.1ed99774.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 10;
}
.alttext-img-list .alttext-item .cell-status .status-wrap .profile .profile-initial,
.alttext-img-list .alttext-list-link .cell-status .status-wrap .profile .profile-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  color: #4b5563;
  font-size: 10px;
  font-weight: 500;
}
.alttext-img-list .alttext-item .cell-status .status-deployed,
.alttext-img-list .alttext-list-link .cell-status .status-deployed {
  display: flex;
}
.alttext-img-list .alttext-item .cell-action,
.alttext-img-list .alttext-list-link .cell-action {
  flex: 0 0 auto;
  width: 94px;
}
.alttext-img-list .alttext-item .cell-action .btn-ai-edit,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  line-height: 1;
}
.alttext-img-list .alttext-item .cell-action .btn-ai-edit .bg-blur-1,
.alttext-img-list .alttext-item .cell-action .btn-ai-edit .border-1,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit .bg-blur-1,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit .border-1 {
  opacity: 0;
}
.alttext-img-list .alttext-item .cell-action .btn-ai-edit .text,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit .text {
  width: 100%;
  height: 100%;
  padding-inline: 8px;
}
.alttext-img-list .alttext-item .cell-action .btn-ai-edit .text::after,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit .text::after {
  background-color: #f3f4f6;
  transition: background-color 0.5s ease-in-out;
}
.alttext-img-list .alttext-item .cell-action .btn-ai-edit:hover .text::after, .alttext-img-list .alttext-item .cell-action .btn-ai-edit:focus-visible .text::after,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit:hover .text::after,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit:focus-visible .text::after {
  background-color: #000;
}
.alttext-img-list .alttext-item .cell-action .btn-ai-edit:hover .text .ico, .alttext-img-list .alttext-item .cell-action .btn-ai-edit:focus-visible .text .ico,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit:hover .text .ico,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit:focus-visible .text .ico {
  background-image: url(/_next/static/media/ico-ai-generate-white@2x.d9558847.png);
}
.alttext-img-list .alttext-item .cell-action .btn-ai-edit:has(.loading-spinner),
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit:has(.loading-spinner) {
  cursor: default;
}
.alttext-img-list .alttext-item .cell-action .btn-ai-edit:has(.loading-spinner) .text::after,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit:has(.loading-spinner) .text::after {
  background: #d1d5db;
}
.alttext-img-list .alttext-item .cell-action .btn-ai-edit:has(.loading-spinner) .border-2,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit:has(.loading-spinner) .border-2 {
  opacity: 0.3 !important;
}
.alttext-img-list .alttext-item .cell-action .btn-ai-edit:has(.loading-spinner):hover .bg-blur-2, .alttext-img-list .alttext-item .cell-action .btn-ai-edit:has(.loading-spinner):focus-visible .bg-blur-2,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit:has(.loading-spinner):hover .bg-blur-2,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit:has(.loading-spinner):focus-visible .bg-blur-2 {
  opacity: 0;
}
.alttext-img-list .alttext-item .cell-action .btn-ai-edit:disabled,
.alttext-img-list .alttext-list-link .cell-action .btn-ai-edit:disabled {
  opacity: 1;
}
.alttext-img-list .alttext-item .cell-action .btn-edit,
.alttext-img-list .alttext-list-link .cell-action .btn-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  line-height: 1;
}
.alttext-img-list .alttext-item .cell-action .btn-edit:hover, .alttext-img-list .alttext-item .cell-action .btn-edit:focus-visible,
.alttext-img-list .alttext-list-link .cell-action .btn-edit:hover,
.alttext-img-list .alttext-list-link .cell-action .btn-edit:focus-visible {
  background-color: #e5e7eb;
}
.alttext-img-list .alttext-item .img-wrap,
.alttext-img-list .alttext-list-link .img-wrap {
  flex: 0 0 auto;
  position: relative;
  width: 72px;
  height: 48px;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
  border-radius: 4px;
}
.alttext-img-list .alttext-item .img-wrap img,
.alttext-img-list .alttext-list-link .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.alttext-img-list .alttext-item .img-wrap .img-hash,
.alttext-img-list .alttext-list-link .img-wrap .img-hash {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 12px;
  padding: 1px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  font-family: "Menlo", "IBM Plex Mono", "monaco", Consolas, "Courier New", Courier, Arial, "Spoqa Han Sans Neo", "malgun gothic", "굴림", sans-serif;
  font-weight: 400;
  font-size: 10px;
  text-align: center;
  color: #fff;
  line-height: 1;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.2;
  line-height: 1.2;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}
.alttext-img-list .alttext-item .img-info,
.alttext-img-list .alttext-list-link .img-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: calc(100% - 80px);
  text-align: left;
}
.alttext-img-list .alttext-item .img-info .img-file,
.alttext-img-list .alttext-list-link .img-info .img-file {
  font-weight: 400;
  font-size: 14px;
  max-width: 100%;
  white-space: nowrap;
  max-height: 1.4;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
  display: block;
  color: #1f2937;
}
.alttext-img-list .alttext-item .img-info .img-category,
.alttext-img-list .alttext-list-link .img-info .img-category {
  position: relative;
  padding-left: 14px;
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}
.alttext-img-list .alttext-item .img-info .img-category:before,
.alttext-img-list .alttext-list-link .img-info .img-category:before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url(/_next/static/media/ico-image-sm-gray@2x.2e19542e.png);
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-img-list .alttext-item .img-info .img-category.category-img:before,
.alttext-img-list .alttext-list-link .img-info .img-category.category-img:before {
  background-image: url(/_next/static/media/ico-image-sm-gray@2x.2e19542e.png);
}
.alttext-img-list .alttext-item .img-info .img-category.category-bg:before,
.alttext-img-list .alttext-list-link .img-info .img-category.category-bg:before {
  background-image: url(/_next/static/media/ico-bg-sm-gray@2x.3290ff23.png);
}
.alttext-img-list .alttext-item .img-info .img-category + .img-repeat,
.alttext-img-list .alttext-list-link .img-info .img-category + .img-repeat {
  padding-left: 27px;
}
.alttext-img-list .alttext-item .img-info .img-category + .img-repeat:before,
.alttext-img-list .alttext-list-link .img-info .img-category + .img-repeat:before {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}
.alttext-img-list .alttext-item .img-info .img-category + .img-repeat:after,
.alttext-img-list .alttext-list-link .img-info .img-category + .img-repeat:after {
  left: 11px;
}
.alttext-img-list .alttext-item .img-info .img-repeat,
.alttext-img-list .alttext-list-link .img-info .img-repeat {
  position: relative;
  padding-left: 16px;
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}
.alttext-img-list .alttext-item .img-info .img-repeat:after,
.alttext-img-list .alttext-list-link .img-info .img-repeat:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url(/_next/static/media/ico-repeat-sm@2x.08696997.png);
  background-size: 14px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.alttext-img-list .alttext-item .right-panel .cell-text,
.alttext-img-list .alttext-list-link .right-panel .cell-text {
  max-width: calc(100% - 310px);
}
.alttext-img-list .alttext-item .right-panel .cell-text > p:first-child,
.alttext-img-list .alttext-list-link .right-panel .cell-text > p:first-child {
  color: #9ca3af;
}
.alttext-img-list .alttext-item.disabled {
  background: #f9fafb;
}
.alttext-img-list .alttext-item.disabled .cell-type,
.alttext-img-list .alttext-item.disabled .cell-status {
  opacity: 0.3;
}
.alttext-img-list .alttext-item.disabled .left-panel .cell-text {
  opacity: 0.3;
}
.alttext-img-list .alttext-item.disabled .right-panel .cell-text:has(.disabled-message) {
  gap: 2px;
}
.alttext-img-list .alttext-item.disabled .right-panel .disabled-message {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  color: #9ca3af;
}
.alttext-img-list .alttext-item.disabled .right-panel .disabled-message .ico-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 2px;
}
.alttext-img-list .alttext-item.disabled .right-panel .date-wrap {
  display: flex;
  flex-direction: row;
  gap: 3px;
  padding-left: 20px;
  font-size: 12px;
  color: #9ca3af;
}
.alttext-img-list .alttext-item.disabled .check-item-sm {
  cursor: default;
}
.alttext-img-list .alttext-item.disabled .check-item-sm label {
  cursor: default;
}
.alttext-img-list .alttext-item.disabled .check-item-sm label::before {
  border-color: #e5e7eb !important;
  background-color: #f3f4f6 !important;
  box-shadow: none !important;
}
.alttext-img-list .alttext-item.disabled .btn-group {
  justify-content: flex-end;
  width: 100%;
}
.alttext-img-list .alttext-item.disabled .btn-view {
  padding-inline: 9px;
  border-radius: 8px;
}
.alttext-img-list .alttext-item.disabled .btn-view:hover {
  background: #e5e7eb;
  border: 1px solid #d1d5db;
}
.alttext-img-list .alttext-item.disabled.error::before, .alttext-img-list .alttext-item.disabled.warning::before {
  background: transparent;
}
@media (max-width: 767.98px) {
  .alttext-img-list .panel-handle {
    display: none;
  }
  .alttext-img-list .right-panel {
    display: none;
  }
  .alttext-img-list .left-panel {
    flex: 1 1 auto;
    width: 100%;
  }
}

.empty-result {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 285px;
  background-color: #fff;
}
.empty-result .empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.empty-result .empty-content .text {
  font-size: 16px;
  color: #6b7280;
}

.quickstart-page .alttext-Pagination {
  background-color: #fdfdfd;
}
.quickstart-page .quickstart-footer {
  position: relative;
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: 0px 4px 80px 0px rgba(0, 0, 0, 0.1490196078);
}
.quickstart-page .quickstart-footer .footer-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 10px 24px;
}
.quickstart-page .quickstart-footer .footer-inner .right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.quickstart-page .quickstart-footer .footer-inner .step-status {
  font-weight: 500;
  font-size: 14px;
  color: #0f1318;
}
.quickstart-page .quickstart-footer .footer-inner .step-guide {
  font-weight: 400;
  font-size: 14px;
  color: #4b5563;
}
.quickstart-page .action-bar {
  bottom: 100px;
}

.quickstart-guide-area {
  height: 212px;
  background-color: #fff;
  border-bottom: 1px solid #f3f4f6;
  background-image: url(/_next/static/media/bg-quickstart.f69730d3.png);
  background-size: auto 100%;
  background-position: left center;
  background-repeat: no-repeat;
}
.quickstart-guide-area .quickstart-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px;
}
.quickstart-guide-area .quickstart-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 14px;
  color: #4b5563;
}
.quickstart-guide-area .quickstart-title .title {
  font-size: 22px;
  font-weight: 700;
  color: #000;
}
.quickstart-guide-area .quickstart-step {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.quickstart-guide-area .quickstart-step .step-item {
  flex: 0 0 auto;
  position: relative;
  width: 386px;
}
.quickstart-guide-area .quickstart-step .step-item:last-child {
  flex: 1 1 auto;
  width: 100%;
}
.quickstart-guide-area .quickstart-step .step-item .step-num {
  background-color: #b4cffb;
}
.quickstart-guide-area .quickstart-step .step-item::after {
  background-color: #dbeafe;
}
.quickstart-guide-area .quickstart-step .step-item.active .step-num {
  background-color: #1364ff;
  border: 1px solid #dbeafe;
  box-shadow: 0px 2px 10px 0px rgba(19, 100, 255, 0.4);
}
.quickstart-guide-area .quickstart-step .step-item.active .title {
  opacity: 1;
}
.quickstart-guide-area .quickstart-step .step-item.active .desc {
  display: block;
}
.quickstart-guide-area .quickstart-step .step-item.active::after {
  background-color: #1364ff;
}
.quickstart-guide-area .quickstart-step .step-item.done .step-num {
  background-color: #b4cffb;
  background-image: url(/_next/static/media/ico-step-check@2x.392ef733.png);
  background-size: 16px auto;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
}
.quickstart-guide-area .quickstart-step .step-item::after {
  position: absolute;
  top: 11px;
  left: 20px;
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  z-index: 0;
}
.quickstart-guide-area .quickstart-step .step-num {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  line-height: 1;
  z-index: 10;
}
.quickstart-guide-area .quickstart-step .step-num .num {
  z-index: 1;
}
.quickstart-guide-area .quickstart-step .step-content {
  flex: 1 1 auto;
  margin-top: 12px;
}
.quickstart-guide-area .quickstart-step .step-content .title {
  font-size: 16px;
  font-weight: 700;
  opacity: 0.5;
}
.quickstart-guide-area .quickstart-step .step-content .desc {
  display: none;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #4b5563;
}

.ai-alttext-alert .popup-body {
  padding-bottom: 0;
}
.ai-alttext-alert .popup-title {
  position: relative;
  padding-left: 20px;
}
.ai-alttext-alert .popup-title::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url(/_next/static/media/ico-ai-generate-black@2x.798a2ead.png);
  background-size: 16px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.ai-alttext-alert .box {
  margin-top: 8px;
  background-color: #f9fafb;
  border-radius: 12px;
}
.ai-alttext-alert .progress-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.ai-alttext-alert .progress-status .left-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
}
.ai-alttext-alert .progress-status .left-wrap .title .ico {
  margin-top: -2px;
  margin-right: 2px;
}
.ai-alttext-alert .progress-status .left-wrap .count {
  color: #4b5563;
}
.ai-alttext-alert .progress-status .right-wrap .progress-percent {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}
.ai-alttext-alert .progress-bar-wrap {
  margin-top: 8px;
}
.ai-alttext-alert .progress-bar-wrap .progress-bar {
  display: block;
  width: 100%;
  height: 6px;
  border: none;
  border-radius: 3px;
  overflow: hidden;
}
.ai-alttext-alert .progress-bar-wrap .progress-bar::-webkit-progress-bar {
  background-color: #e5e7eb;
  border-radius: 2px;
}
.ai-alttext-alert .progress-bar-wrap .progress-bar::-webkit-progress-value {
  background: linear-gradient(94.93deg, #006aff 16.71%, #bafd02 110.85%);
  border-radius: 5px;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.ai-alttext-alert .progress-bar-wrap .progress-bar::-moz-progress-bar {
  background: linear-gradient(94.93deg, #006aff 16.71%, #bafd02 110.85%);
  border-radius: 2px;
  -moz-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.ai-alttext-alert .desc {
  margin-top: 10px;
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
}
.ai-alttext-alert .guide {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #4b5563;
}

.complete-confirm .popup-body {
  padding: 40px 24px 16px;
}
.complete-confirm .popup-header {
  display: none;
}
.complete-confirm .popup-inner .popup-footer {
  padding: 24px 24px 28px;
}
.complete-confirm .complete-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.complete-confirm .complete-wrap .title {
  font-weight: 700;
  font-size: 22px;
  color: #0f1318;
}
.complete-confirm .complete-wrap .desc {
  font-size: 14px;
  font-weight: 400;
  color: #1a212b;
  text-align: center;
}
.complete-confirm .btn-accent {
  border: 3px solid #bfdbfe;
}
.complete-confirm .btn-automation {
  padding-inline: 14px 8px;
  line-height: 1.6;
}