@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* Color variables */
.cm {
  --color-black-10: #2222221a;
  --color-black-100: #222222;
  --color-black-12: #2222221f;
  --color-black-2: #22222205;
  --color-black-20: #22222233;
  --color-black-3: #22222208;
  --color-black-30: #2222224d;
  --color-black-4: #2222220a;
  --color-black-40: #22222266;
  --color-black-50: #22222280;
  --color-black-6: #2222220f;
  --color-black-60: #22222299;
  --color-black-8: #22222214;
  --color-black-80: #222222cc;
  --color-black-90: #222222e5;
  --color-primary-dark-100: #1e40af;
  --color-primary-lig-100: #dbeafe;
  --color-primary-lig-40: #dbeafe66;
  --color-primary-med-100: #2563eb;
  --color-white-100: #ffffff;
  --color-white-60: #ffffff99;
}

/* Font & Spacing variables */
.cm {
  --font-family-main: Pretendard;
  --font-family-sub: Marcellus;
  --font-weight-100: 100;
  --font-weight-200: 200;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;
  --font-weight-900: 900;
  --spacing-contents-section-xs: 20px;
  --spacing-contents-section-s: 30px;
  --spacing-contents-section-ss: 40px;
  --spacing-contents-section-m: 60px;
  --spacing-contents-section-sl: 80px;
  --spacing-contents-section-l: 120px;
  --spacing-contents-section-xl: 180px;
  --spacing-element-xs: 1px;
  --spacing-element-s: 2px;
  --spacing-element-ss: 4px;
  --spacing-element-m: 6px;
  --spacing-element-sl: 8px;
  --spacing-element-l: 10px;
  --spacing-element-xl: 12px;
  --ft-size-micro: 11px;
  --ft-size-caption: 12px;
  --ft-size-defxs: 14px;
  --ft-size-defs: 15px;
  --ft-size-defm: 16px;
  --ft-size-defl: 18px;
  --ft-size-xs: 20px;
  --ft-size-s: 24px;
  --ft-size-m: 28px;
  --ft-size-l: 32px;
  --ft-size-xl: 36px;
  --ft-size-slogan: 48px;
  --ft-size-display: 48px;
  --margin: 40px;
  --margin-wide: 40px;
}

@media (max-width: 1280px) {
  .cm {
    --spacing-contents-section-xs: 16px;
    --spacing-contents-section-s: 24px;
    --spacing-contents-section-ss: 32px;
    --spacing-contents-section-m: 48px;
    --spacing-contents-section-sl: 64px;
    --spacing-contents-section-l: 96px;
    --spacing-contents-section-xl: 144px;
  }
}

@media (max-width: 768px) {
  .cm {
    --ft-size-defxs: 13px;
    --ft-size-defs: 14px;
    --margin: 20px;
    --margin-wide: 10px;
  }
}

/* ---------- FONT CLASSES  ---------- */
.cm .ft-caption-reg {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-400);
  font-size: var(--ft-size-caption);
  line-height: normal;
}

.cm .ft-caption-med {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-500);
  font-size: var(--ft-size-caption);
  line-height: normal;
}

.cm .ft-defxs-reg {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-400);
  font-size: var(--ft-size-defxs);
  line-height: 1.6;
}

.cm .ft-defs-reg {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-400);
  font-size: var(--ft-size-defs);
  line-height: 1.6;
}

.cm .ft-defs-med {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-500);
  font-size: var(--ft-size-defs);
  line-height: 1.6;
}

.cm .ft-defs-sb {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-600);
  font-size: var(--ft-size-defs);
  line-height: 1.6;
}

.cm .ft-defm-reg {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-400);
  font-size: var(--ft-size-defm);
  line-height: 1.6;
}

.cm .ft-m-sb {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-600);
  font-size: var(--ft-size-m);
  line-height: normal;
}

/* ---------- //FONT CLASSES  ---------- */
/* ---------- SPACING CLASSES  ---------- */
.cm .py-c-xs {
  padding-top: var(--spacing-contents-section-xs);
  padding-bottom: var(--spacing-contents-section-xs);
}

.cm .pt-c-s {
  padding-top: var(--spacing-contents-section-s);
}

.cm .pb-c-m {
  padding-bottom: var(--spacing-contents-section-m);
}

.cm .mt-c-xs {
  margin-top: var(--spacing-contents-section-xs);
}

.cm .mb-c-s {
  margin-bottom: var(--spacing-contents-section-s);
}

.cm .my-c-s {
  margin-top: var(--spacing-contents-section-s);
  margin-bottom: var(--spacing-contents-section-s);
}

.cm .mt-c-ss {
  margin-top: var(--spacing-contents-section-ss);
}

.cm .mb-c-ss {
  margin-bottom: var(--spacing-contents-section-ss);
}

.cm .mb-c-sl {
  margin-bottom: var(--spacing-contents-section-sl);
}

.cm .ml-auto {
  margin-left: auto;
}

.cm .mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.cm .py-e-sl {
  padding-top: var(--spacing-element-sl);
  padding-bottom: var(--spacing-element-sl);
}

.cm .ml-e-m {
  margin-left: var(--spacing-element-m);
}

.cm .mx-e-m {
  margin-left: var(--spacing-element-m);
  margin-right: var(--spacing-element-m);
}

.cm .mb-e-sl {
  margin-bottom: var(--spacing-element-sl);
}

/* ---------- //SPACING CLASSES  ---------- */
/* ---------- COLOR CLASSES  ---------- */
.cm .color-black-100 {
  color: var(--color-black-100);
}

.cm .color-black-80 {
  color: var(--color-black-80);
}

.cm .color-black-60 {
  color: var(--color-black-60);
}

.cm .color-black-30 {
  color: var(--color-black-30);
}

.cm .color-black-40 {
  color: var(--color-black-40);
}

.cm .color-black-20 {
  color: var(--color-black-20);
}

.cm .color-black-10 {
  color: var(--color-black-10);
}

.cm .color-black-8 {
  color: var(--color-black-8);
}

.cm .color-black-3 {
  color: var(--color-black-3);
}

.cm .color-black-2 {
  color: var(--color-black-2);
}

.cm .color-dark-gray-100 {
  color: var(--color-dark-gray-100);
}

.cm .color-dark-gray-80 {
  color: var(--color-dark-gray-80);
}

.cm .color-lig-gray-100 {
  color: var(--color-lig-gray-100);
}

.cm .color-med-gray-100 {
  color: var(--color-med-gray-100);
}

.cm .color-red-100 {
  color: var(--color-red-100);
}

.cm .color-white-100 {
  color: var(--color-white-100);
}

.cm .color-white-92 {
  color: var(--color-white-92);
}

.cm .color-white-80 {
  color: var(--color-white-80);
}

.cm .color-white-60 {
  color: var(--color-white-60);
}

.cm .color-white-20 {
  color: var(--color-white-20);
}

.cm .bg-primary-med-100 {
  background: var(--color-primary-med-100, #2563eb);
}

.cm .color-primary-med-100 {
  background: var(--color-primary-med-100, #2563eb);
}

/* ---------- //COLOR CLASSES  ---------- */
.cm .bd-r-ss {
  border-radius: var(--radius-S, 4px);
}

.cm {
  font-family: var(--font-family-main), sans-serif;
}

.cm * {
  line-height: calc(100% + 10px);
  box-sizing: border-box;
}

.cm a {
  color: inherit;
  display: inline-block;
}

.cm .sc {
  padding: 0 var(--margin, 40px);
  overflow: hidden;
}

.cm .sc-inner {
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.cm .overflow-visible {
  overflow: visible;
}

.cm.wide {
  --margin: var(--margin-wide);
}

.cm.cm--bg {
  background-color: var(--color-black-3, rgba(34, 34, 34, 0.03));
  min-height: 100vh;
  border-bottom: 0.1px solid transparent;
}

/* -------------- breadcrumbs -------------------- */
.cm .breadcrumbs {
  display: flex;
  align-items: center;
  overflow: visible;
}

.cm .breadcrumbs .box-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-element-s, 2px);
}

.cm .breadcrumbs .box-wrapper + .box-wrapper::before {
  display: block;
  content: "\f054";
  margin: 0 2px;
  color: var(--color-black-20, rgba(34, 34, 34, 0.2));
  font-family: "Font Awesome 6 Sharp";
  font-size: 12px;
}

.cm .breadcrumbs .box {
  border-radius: var(--radius-S, 4px);
  padding: var(--spacing-element-ss, 4px) var(--spacing-element-s, 2px);
  transition: background-color 0.3s;
}

.cm .breadcrumbs .selectbox {
  position: relative;
  cursor: pointer;
}

.cm .breadcrumbs .selectbox .txt::after {
  display: inline-block;
  vertical-align: middle;
  content: "\f0d7";
  margin-left: var(--spacing-element-ss, 4px);
  font-family: "Font Awesome 6 Pro";
  font-size: 12px;
  font-weight: 900;
  line-height: 160%;
  transition: color 0.3s;
}

.cm .breadcrumbs .selectbox.active {
  color: var(--color-black-90, rgba(34, 34, 34, 0.9));
}

.cm .breadcrumbs .selectbox.active .txt::after {
  transform: rotate(180deg);
}

.cm .breadcrumbs .dropdown {
  position: absolute;
  overflow: hidden;
  top: 100%;
  left: 0;
  z-index: 2;
  width: max-content;
  border-radius: var(--radius-S, 4px);
  border: 1px solid var(--color-black-10, rgba(34, 34, 34, 0.1));
  background: var(--color-white-100, #fff);
  display: none;
}

.cm .breadcrumbs .dropdown-child {
  display: block;
  padding: var(--spacing-element-m, 6px) var(--spacing-element-sl, 8px);
  transition: color 0.3s, background-color 0.3s;
}

@media (hover: hover) {
  .cm .selectbox:hover {
    background: var(--color-black-3, rgba(34, 34, 34, 0.03));
  }

  .cm .dropdown-child:hover {
    background: var(--color-black-3, rgba(34, 34, 34, 0.03));
    color: var(--color-black-80, rgba(34, 34, 34, 0.8));
  }
}

/* -------------- 리스트 -------------------- */
/* 리스트 헤더 */
.cm .sc.page-header {
  overflow: visible;
}

.cm .section-header {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-contents-section-s, 30px);
}

.cm .section-header .btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-element-ss, 4px);
  padding: var(--spacing-element-m, 6px) var(--spacing-element-xl, 12px);
  border-radius: var(--radius-S, 4px);
}

.cm .section-header .btn i {
  font-size: var(--ft-size-caption, 12px);
}

@media (max-width: 768px) {
  .cm .section-header {
    flex-direction: column;
  }
}

/* 리스트 탭 */
.cm .tabs {
  display: flex;
}

.cm .tab {
  cursor: pointer;
  width: fit-content;
  padding: var(--spacing-element-m, 6px) var(--spacing-element-sl, 8px);
  border-bottom: var(--color-black-12, rgba(34, 34, 34, 0.12)) 1px solid;
  color: var(--color-black-90);
}

.cm .tab--selected {
  border-bottom: 2px solid var(--color-primary-med-100, #2563eb);
  color: var(--color-primary-med-100, #2563eb);
}

/* list-nav */
.cm .c-list-nav .search {
  width: 320px;
}

.cm .c-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-element-ss, 4px);
}

.cm .c-pagination .pages {
  display: flex;
}

.cm .c-pagination .page {
  display: flex;
  width: 22px;
  height: 22px;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  color: var(--color-black-60, rgba(34, 34, 34, 0.6));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-caption, 12px);
  font-weight: 500;
  transition: background-color 0.3s;
}

.cm .c-pagination .page.on {
  color: var(--color-primary-med-100, #2563eb);
  font-weight: 800;
}

@media (hover: hover) {
  .cm .c-pagination .page:hover {
    background: var(--color-black-6, rgba(34, 34, 34, 0.06));
  }
}

/* 리스트 아이템 */
.cm .board-item {
  --board-list-padding: 20px;
  border-bottom: 1px solid var(--color-black-8, rgba(34, 34, 34, 0.08));
}

@media (max-width: 768px) {
  .cm .board-item {
    --board-list-padding: 10px;
  }
}

.cm .board-item .wrap {
  transition: background-color 0.3s;
}

.cm .board-item .info {
  display: flex;
  padding: var(--spacing-contents-section-xs, 20px)
    var(--board-list-padding, 20px);
  flex-direction: column;
  gap: var(--spacing-element-sl, 8px);
  transition: background-color 0.3s;
}

.cm .board-item .types {
  display: flex;
  align-items: center;
  gap: var(--spacing-element-sl, 8px);
}

.cm .board-item .category {
  color: var(--color-black-60, rgba(34, 34, 34, 0.6));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-caption, 12px);
  line-height: normal;
  padding: var(--spacing-element-ss, 4px) 0px;
}

.cm .board-item .type {
  color: var(--color-black-50, rgba(34, 34, 34, 0.5));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-caption, 12px);
  line-height: normal;
}

.cm .board-item .type i {
  color: var(--color-black-60, rgba(34, 34, 34, 0.6));
  font-size: 10px;
}

.cm .board-item .ttl-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-element-l, 10px);
}

.cm .board-item .ttl-label {
  padding: var(--spacing-element-ss, 4px) var(--spacing-element-sl, 8px);
  border-radius: var(--radius-S, 4px);
  background: var(--color-primary-med-100, #2563eb);
  color: var(--color-white-100, #fff);
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-caption, 12px);
  font-weight: 500;
  line-height: normal;
}

.cm .board-item .ttl-label-answered {
  color: var(--color-black-30, rgba(34, 34, 34, 0.3));
  background: var(--color-black-12, rgba(34, 34, 34, 0.12));
}

.cm .board-item .ttl {
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--color-black-100, #222);
  text-overflow: ellipsis;
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  line-height: 160%;
}

.cm .board-item .status {
  display: flex;
  align-items: center;
  gap: var(--spacing-element-sl, 8px);
  align-self: stretch;
}

.cm .board-item .status-label {
  padding: var(--spacing-element-ss, 4px) var(--spacing-element-sl, 8px);
  border-radius: var(--radius-S, 3px);
  background: var(--color-primary-med-100, #2563eb);
  color: var(--color-white-100, #fff);
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-caption, 12px);
  font-weight: 500;
  line-height: normal;
}

.cm .board-item .period {
  color: var(--color-black-100, #222);
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  line-height: 160%;
}

.cm .board-item .stats {
  display: flex;
  align-items: center;
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-micro, 11px);
  line-height: normal;
  color: var(--color-black-60, rgba(34, 34, 34, 0.6));
}

.cm .board-item .stat {
  position: relative;
}

.cm .board-item .stat-writer {
  color: var(--color-black-100);
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-caption, 12px);
}

.cm .board-item .stat-light {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
}

.cm .board-item .stat-light i {
  font-size: 10px;
}

.cm .board-item .stat + .stat::before {
  display: inline-block;
  content: "|";
  color: transparent;
  position: relative;
  left: 0;
  margin: 0 6px;
  z-index: 2;
  width: 1px;
  height: 100%;
  background-color: var(--color-black-10, rgba(34, 34, 34, 0.1));
}

.cm .board-item .stat.stat-writer + .stat::before {
  margin: 0 3px 0 6px;
}

/* board-item : 고정 */
.cm .board-item.board-item--fix {
  background: var(--color-black-4, rgba(34, 34, 34, 0.04));
}

@media (hover: hover) {
  .cm .board-item:hover .wrap {
    background: var(--color-black-4, rgba(34, 34, 34, 0.04));
  }

  .cm .board-item.board-item--fix:hover .wrap {
    background: var(--color-black-8, rgba(34, 34, 34, 0.08));
  }
}

/* board-item : 웹진형  */
.cm .board-item.board-item--webzine .wrap {
  display: flex;
  align-items: center;
  padding: var(--spacing-contents-section-xs, 20px) 0px;
}

.cm .board-item.board-item--webzine .img {
  aspect-ratio: 4/3;
  display: block;
  width: 180px;
}

@media (max-width: 768px) {
  .cm .board-item.board-item--webzine .wrap {
    flex-direction: column;
    padding: 0;
  }

  .cm .board-item.board-item--webzine .img {
    width: 100%;
  }
}

/* board-item : 아코디언형  */
.cm .board-item.board-item--accoridon {
  cursor: pointer;
}

.cm .board-item.board-item--accoridon .answer {
  display: none;
  padding: var(--spacing-contents-section-xs, 20px)
    var(--board-list-padding, 20px) var(--spacing-contents-section-ss, 40px)
    var(--board-list-padding, 20px);
  gap: var(--spacing-element-xl, 12px);
  background: var(--color-black-4, rgba(34, 34, 34, 0.04));
  color: var(--color-black-90, rgba(34, 34, 34, 0.9));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  line-height: 160%;
}

.cm .board-item.board-item--accoridon.active .ttl-btn {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .cm .board-item.board-item--accoridon.active:hover .wrap {
    background-color: initial;
  }
}

/* board-item : 갤러리형  */
.cm .board-item.board-item--gallery {
  border-bottom: none;
}

@media (hover: hover) {
  .cm .board-item.board-item--gallery:hover .wrap {
    background-color: initial;
  }
}

.cm .board-item.board-item--gallery .img {
  aspect-ratio: 1;
  display: block;
  width: 100%;
  object-fit: cover;
}

.cm .board-item.board-nav {
  border-top: 1px solid transparent;
  transition: background-color 0.3s;
}

.cm .board-item.board-nav .wrap {
  margin: var(--spacing-contents-section-xs, 20px) 0;
}

@media (hover: hover) {
  .cm .board-item.board-nav:hover {
    background: var(--color-black-4, rgba(34, 34, 34, 0.04));
  }

  .cm .board-nav.board-item:hover .wrap {
    background-color: transparent;
  }
}

.cm .board-item .nav-name {
  padding: 0px var(--board-list-padding, 20px) var(--spacing-element-m, 6px)
    var(--board-list-padding, 20px);
  color: var(--color-black-20, rgba(34, 34, 34, 0.2));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
}

.cm .board-item.board-item--head .info {
  padding: var(--spacing-contents-section-ss, 40px) 0;
  gap: var(--spacing-element-l, 10px);
}

.cm .board-item.board-item--head .btns {
  margin-left: auto;
  display: flex;
}

.cm .board-item.board-item--head .btn {
  background-color: transparent;
  border: none;
  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  color: var(--color-black-60, rgba(34, 34, 34, 0.6));
  font-size: 16px;
  font-weight: 300;
  line-height: 160%;
  transition: background-color 0.3s, color 0.3s;
  border-radius: var(--radius-S, 4px);
  cursor: pointer;
}

.cm .board-item.board-item--head .btn:disabled {
  pointer-events: none;
  color: var(--color-black-20, rgba(34, 34, 34, 0.2));
}

.cm .board-item.board-item--head .ttl {
  color: var(--color-black-100, #222);
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-s, 24px);
  line-height: normal;
}

.cm .board-item.board-item--head .stats {
  padding: var(--spacing-element-l, 10px) 0px;
}

@media (max-width: 768px) {
  .cm .board-item--head.board-item .ttl-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (hover: hover) {
  .cm .board-item.board-item--head:hover .wrap {
    background-color: unset;
  }

  .cm .board-item--head .btn:hover {
    background: var(--color-black-4, rgba(34, 34, 34, 0.04));
    color: var(--color-black-80);
  }
}

/* 갤러리형 리스트  */
.cm .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-contents-section-ss, 40px);
}

@media (max-width: 1280px) {
  .cm .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cm .gallery {
    grid-template-columns: 1fr;
  }
}

/*-------------------------------- 작성 페이지 ------------------------------------*/
.cm .write-container {
  background-color: #fff;
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--spacing-contents-section-ss, 40px) var(--margin, 40px);
}

.cm .write-container .form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-contents-section-m, 60px);
}

.cm .write-container .info-container {
  display: flex;
  gap: var(--spacing-contents-section-ss, 40px);
}

.cm .write-container .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-contents-section-xs, 20px);
}

.cm .write-container .info-input {
  width: 320px;
}

.cm .write-container .user-info {
  display: flex;
  gap: var(--spacing-element-l, 10px);
}

.cm .write-container .user-info--vertical {
  flex-direction: column;
}

.cm .write-container .content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-element-sl, 8px);
  align-items: stretch;
}

.cm .write-container .btns {
  display: flex;
  align-self: center;
  gap: var(--spacing-contents-section-xs, 20px);
}

@media (max-width: 768px) {
  .cm .write-container .info-container {
    flex-direction: column;
  }

  .cm .write-container .info {
    align-items: stretch;
    flex-direction: column;
  }

  .cm .write-container .info-input {
    width: 100%;
  }

  .cm .write-container .user-info {
    flex-direction: column;
    align-items: stretch;
  }

  .cm .write-container .info-container .c-file {
    align-self: center;
  }
}

/* 쓰기 페이지 옵션 레이아웃 */
.cm .write-container .options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-contents-section-ss, 40px);
}

.cm .write-container .option {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-element-l, 10px);
}

.cm .write-container .option-label {
  color: var(--color-black-90, rgba(34, 34, 34, 0.9));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-m, 16px);
  font-weight: 500;
  line-height: 160%;
}

.cm .write-container .row-name {
  width: max-content;
  padding-right: 25px;
}

.cm .write-container .required.row-name::after {
  content: "*";
  display: inline-block;
  color: #ff3c3c;
}

.cm .write-container .option-box {
  padding: var(--spacing-element-sl, 8px);
}

.cm .write-container .option-box--bg {
  border-radius: var(--radius-M, 8px);
  background: var(--color-black-4, rgba(34, 34, 34, 0.04));
}

.cm .write-container .option-box--wrap {
  flex-wrap: wrap;
  display: flex;
  gap: var(--spacing-element-xl, 12px);
}

.cm .write-container .option-box--col4 {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(calc(1200px / 4 - 10px * 3), 1fr)
  );
  row-gap: var(--spacing-element-m, 6px);
  column-gap: var(--spacing-element-l, 10px);
}

.cm .write-container .option-box--rows-s {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-element-m, 6px);
}

.cm .write-container .option-box--rows-m {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-element-l, 10px);
}

.cm .write-container .option-box--table {
  display: table;
}

.cm .write-container .option-box-tr {
  display: table-row;
}

.cm .write-container .option-box-tr > * {
  display: table-cell;
}

.cm .write-container .option-box-tr + .option-box-tr > * {
  padding-top: var(--spacing-contents-section-xs, 16px);
}

.cm .write-container .option-box-tr > *:nth-child(2) {
  width: 100%;
  padding-left: var(--spacing-contents-section-xs, 16px);
}

@media (max-width: 768px) {
  .cm .write-container .option-box--wrap {
    flex-direction: column;
  }

  .cm .write-container .option-box--table {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-contents-section-xs, 16px);
  }

  .cm .write-container .option-box-tr {
    display: flex;
    flex-direction: column;
  }

  .cm .write-container .option-box-tr > *:nth-child(n) {
    padding: 0;
  }
}

/*------------------------------- 상세페이지 레이아웃---------------------------*/
.cm .post-detail {
  padding-bottom: var(--spacing-contents-section-s, 30px);
}

.cm .post-detail img {
  display: block;
  max-width: 100%;
}

.cm .output {
  display: flex;
  padding: var(--spacing-contents-section-xs) 0;
  align-items: center;
  cursor: pointer;
  width: fit-content;
}

.cm .output i:nth-child(1) {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
  font-family: "Font Awesome 6 Pro";
  font-size: 14px;
  font-weight: 300;
  line-height: 160%;
}

.cm .output i:last-child {
  color: var(--color-black-100, #222);
  font-family: "Font Awesome 6 Pro";
  font-size: 10px;
  font-weight: 300;
  line-height: 160%;
  margin-left: var(--spacing-element-ss);
}

.cm .post-detail img {
  display: block;
  max-width: 100%;
}

.cm .files {
  display: flex;
  padding: var(--spacing-contents-section-xs, 20px);
  flex-direction: column;
  gap: var(--spacing-element-l, 10px);
  border-radius: var(--radius-S, 4px);
  background: var(--color-black-3, rgba(34, 34, 34, 0.03));
}

.cm .files .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.cm .files .file {
  display: flex;
  align-items: center;
  gap: var(--spacing-element-ss, 4px);
}

.cm .files i {
  font-size: var(--ft-size-defs);
}

.cm .comments {
  background: var(--color-black-2, rgba(34, 34, 34, 0.02));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-contents-section-ss, 40px);
}

.cm .comments.comments-readonly {
  pointer-events: none;
}

.cm .comments .container {
  margin: 0 auto;
  width: 1280px;
  max-width: 100%;
}

.cm .comments .spaceholder {
  color: var(--color-black-20, rgba(34, 34, 34, 0.2));
  text-align: center;
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-l, 18px);
  font-weight: 600;
  line-height: 160%;
  padding: var(--spacing-contents-section-ss, 40px) 0px;
}

.cm .comments .thread {
  padding: var(--spacing-contents-section-xs, 20px) 0px;
  border-bottom: 1px solid var(--color-black-20, rgba(34, 34, 34, 0.2));
}

.cm .comments .thread:last-child {
  border-bottom: 1px solid transparent;
  padding-bottom: 0;
}

.cm .post-detail .options {
  padding: var(--spacing-contents-section-xs, 20px);
  border-radius: var(--radius-L, 12px);
  border: 1px solid var(--color-black-10, rgba(34, 34, 34, 0.1));
  background: var(--color-black-2, rgba(34, 34, 34, 0.02));
  display: flex;
  flex-direction: column;
  gap: var(--spacing-contents-section-s, 30px);
}

.cm .post-detail .option {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-element-ss, 4px);
}

.cm .post-detail .option-label {
  color: var(--color-black-90, rgba(34, 34, 34, 0.9));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-m, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.cm .post-detail .option-box {
  display: flex;
  color: var(--color-black-80, rgba(34, 34, 34, 0.8));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  font-weight: 400;
  line-height: 160%;
  padding: var(--spacing-element-ss, 4px) 0px;
}

.cm .post-detail .option-box.option-box--arrow {
  flex-wrap: wrap;
}

.cm
  .post-detail
  .option-box.option-box--arrow
  .option-item
  + .option-item::before {
  display: inline-block;
  content: "\f054";
  position: relative;
  width: 18px;
  height: 8px;
  text-align: center;
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
  font-family: "Font Awesome 6 Sharp";
  font-size: 9px;
  font-weight: 400;
  line-height: 160%;
}

.cm .post-detail .option-box.option-box--list {
  flex-direction: column;
  padding: var(--spacing-element-l, 10px) 0px;
  gap: var(--spacing-element-l, 10px);
}

.cm .post-detail .option-name {
  color: var(--color-black-90, rgba(34, 34, 34, 0.9));
  /* textstyles/defs/med */
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.cm .post-detail .option-name.required::after {
  display: inline-block;
  content: "*";
  color: #ff3c3c;
  margin-left: var(--spacing-element-s, 2px);
}

.cm .post-detail .option-box--labels {
  display: flex;
  flex-wrap: wrap;
}

.cm .post-detail .option-item.label {
  padding: var(--spacing-element-ss, 4px) var(--spacing-element-s, 2px);
}

.cm .post-detail .option-item.label span {
  display: block;
  padding: var(--spacing-element-xs, 1px) var(--spacing-element-sl, 8px);
  text-align: center;
  border-radius: var(--radius-L, 12px);
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-xs, 14px);
  font-weight: 500;
  line-height: 160%;
  color: var(--color-black-30, rgba(34, 34, 34, 0.3));
  background: var(--color-black-3, rgba(34, 34, 34, 0.03));
}

.cm .post-detail .option-item.label.selected span {
  background: var(--color-primary-med-100, #2563eb);
  color: var(--color-white-100, #fff);
}

.cm .post-detail .option-box.option-box--checkbox {
  flex-direction: column;
}

.cm .post-detail .option-item.checkbox {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-element-m, 6px);
}

.cm .post-detail .option-item.checkbox::before {
  flex-shrink: 0;
  display: inline-block;
  position: relative;
  text-align: center;
  width: 20px;
  content: "\f00c";
  font-weight: 300;
  color: var(--color-black-80, rgba(34, 34, 34, 0.8));
  font-family: "Font Awesome 6 Pro";
  font-size: 11px;
  line-height: 150%;
}

.cm .files {
  display: flex;
  padding: var(--spacing-contents-section-xs, 20px);
  flex-direction: column;
  gap: var(--spacing-element-l, 10px);
  border-radius: var(--radius-S, 4px);
  background: var(--color-black-3, rgba(34, 34, 34, 0.03));
}

.cm .files .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.cm .files .file {
  display: flex;
  align-items: center;
  gap: var(--spacing-element-ss, 4px);
}

.cm .files i {
  font-size: var(--ft-size-defs);
}

/* ----------------------------------- 인풋 요소 -------------------------------------------- */
/* 셀렉트 박스 */
.cm .select-group {
  position: relative;
}

.cm .select-group::after {
  display: inline-block;
  vertical-align: middle;
  content: "\f0d7";
  margin-right: var(--spacing-element-m, 6px);
  font-family: "Font Awesome 6 Pro";
  font-size: 12px;
  font-weight: 900;
  line-height: 160%;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.cm .select-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  outline: none;
  border-radius: var(--radius-S, 4px);
  border: none;
  border-bottom: 1px solid var(--color-black-10, rgba(34, 34, 34, 0.1));
  padding: var(--spacing-element-sl, 8px) var(--spacing-element-m, 6px);
  color: var(--color-black-90, rgba(34, 34, 34, 0.9));
  font-size: var(--font-size-defalut-s, 15px);
}

.cm .select-group.select-group--disabled::after {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
}

.cm .select-group select:disabled {
  background: var(--color-black-3, rgba(34, 34, 34, 0.03));
  color: var(--color-black-30, rgba(34, 34, 34, 0.3));
}

/* textarea */
.cm .txtarea {
  display: flex;
  outline: none;
  padding: var(--spacing-contents-section-xs, 20px)
    var(--spacing-element-m, 6px);
  border: none;
  color: var(--color-black-80, rgba(34, 34, 34, 0.8));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  line-height: 160%;
  resize: none;
}

.cm .txtarea::placeholder {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
}

/* 인풋 */
.cm .input-container {
  display: flex;
  min-width: 140px;
  padding: var(--spacing-element-sl, 8px) var(--spacing-element-m, 6px);
  align-items: center;
  gap: var(--spacing-element-sl, 8px);
  align-self: stretch;
  border-bottom: 1px solid var(--color-black-10, rgba(34, 34, 34, 0.1));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
}

.cm .input-container input {
  flex: 1;
  background-color: transparent;
  color: var(--color-black-80, rgba(34, 34, 34, 0.8));
  line-height: 160%;
  border: none;
  outline: none;
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  line-height: 160%;
}

.cm .input-container input::placeholder {
  overflow: hidden;
  font-size: inherit;
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
}

.cm .input-container .icon {
  cursor: pointer;
  text-align: center;
  width: 20px;
  aspect-ratio: 1;
  padding: 0;
  font-size: 10px;
  background-color: transparent;
  border: none;
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
}

.cm .input-container .icon.strong {
  color: var(--color-black-80, rgba(34, 34, 34, 0.8));
}

/* 인풋 커스텀 */
.cm .input-container.input--ttl {
  padding-top: var(--spacing-contents-section-xs, 20px);
  padding-bottom: var(--spacing-contents-section-xs, 20px);
  width: 100%;
}

.cm .input-container.input--ttl input {
  font-size: var(--font-size-xs, 20px);
}

.cm .input-container.input--disabled {
  background: var(--color-black-4, rgba(34, 34, 34, 0.04));
  pointer-events: none;
}

.cm .input-container input:disabled {
  color: var(--color-black-12, rgba(34, 34, 34, 0.12));
}

.cm .input-container.input--pw input[type="text"] ~ .icons .icon i:first-child {
  display: none;
}

.cm
  .input-container.input--pw
  input[type="password"]
  ~ .icons
  .icon
  i:nth-child(2) {
  display: none;
}

/* 라디오 */
.cm .radio-group {
  display: flex;
  padding: var(--spacing-element-ss, 4px);
  align-items: center;
  gap: var(--spacing-element-xl, 12px);
  border-radius: var(--radius-S, 4px);
}

.cm .radio-group input {
  display: none;
}

.cm .radio-group .radio {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-black-10, rgba(34, 34, 34, 0.1));
  background: var(--color-black-3, rgba(34, 34, 34, 0.03));
}

.cm .radio-group .radio::before {
  content: " ";
  display: block;
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-max, 9999px);
  aspect-ratio: 1;
  background: transparent;
}

.cm .radio-group .label {
  flex: 1;
  color: var(--color-black-100, #222);
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  font-weight: 500;
  line-height: 160%;
}

.cm .radio-group input:checked + .radio {
  background-color: var(--color-primary-med-100, #2563eb);
}

.cm .radio-group input:checked + .radio::before {
  background: var(--color-white-100, #fff);
}

.cm .radio-group--disabled {
  pointer-events: none;
}

.cm .radio-group--disabled .label {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
}

.cm .radio-group input:disabled + .radio {
  border: 1px solid var(--color-black-10, rgba(34, 34, 34, 0.1));
  background: var(--color-black-30, rgba(34, 34, 34, 0.3));
}

.cm .radio-group input:disabled:checked + .radio {
  border: 1px solid transparent;
}

.cm .radio-group input:disabled:checked + .radio::before {
  background: var(--color-white-60, rgba(255, 255, 255, 0.6));
}

@media (hover: hover) {
  .cm .radio-group:hover {
    background: var(--color-black-3, rgba(34, 34, 34, 0.03));
  }
}

/* 체크박스 */
.cm .checkbox-group {
  display: flex;
  padding: var(--spacing-element-ss, 4px);
  align-items: center;
  gap: var(--spacing-element-xl, 12px);
  border-radius: var(--spacing-element-ss, 4px);
}

.cm .checkbox-group .txt-box {
  flex: 1;
}

.cm .checkbox-group input {
  display: none;
}

.cm .checkbox-group .checkbox {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--spacing-element-ss, 4px);
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}

.cm .checkbox-group .checkbox::before {
  vertical-align: bottom;
  text-align: center;
  content: "\f00c";
  display: inline-block;
  font-family: "Font Awesome 6 Pro";
  font-size: 13px;
  font-weight: 900;
}

.cm .checkbox-group .checkbox {
  border: 1px solid var(--color-black-10, rgba(34, 34, 34, 0.1));
  background: var(--color-black-3, rgba(34, 34, 34, 0.03));
  color: var(--color-black-6, rgba(34, 34, 34, 0.06));
}

.cm .checkbox-group input:checked + .checkbox {
  border: 1px solid var(--color-primary-med-100, #2563eb);
  background: var(--color-primary-med-100, #2563eb);
  color: var(--color-white-100, #fff);
}

.cm .checkbox-group .label {
  color: var(--color-black-100, #222);
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  font-weight: 500;
}

.cm .checkbox-group .desc {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-caption, 12px);
  line-height: normal;
}

@media (hover: hover) {
  .cm .checkbox-group:hover {
    background: var(--color-black-3, rgba(34, 34, 34, 0.03));
  }
}

.cm .checkbox-group.checkbox-group--disabled {
  pointer-events: none;
}

.cm .checkbox-group.checkbox-group--disabled input + .checkbox {
  border: 1px solid transparent;
  background: var(--color-black-30, rgba(34, 34, 34, 0.3));
  color: transparent;
}

.cm .checkbox-group.checkbox-group--disabled input:checked + .checkbox {
  color: var(--color-white-100, #fff);
  border-radius: var(--spacing-element-ss, 4px);
  border: 1px solid var(--color-black-10, rgba(34, 34, 34, 0.1));
  background: var(--color-black-30, rgba(34, 34, 34, 0.3));
}

.cm .checkbox-group.checkbox-group--disabled .label {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
}

/* btn  */
.cm .c-btn {
  display: block;
  width: fit-content;
  border-radius: var(--radius-S, 4px);
  border: 1px solid transparent;
  padding: var(--spacing-element-ss, 4px)
    var(--spacing-contents-section-xs, 20px);
  color: var(--color-white-100, #fff);
  text-align: center;
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  line-height: 160%;
  transition: 0.3s background-color, 0.3s color;
  background-color: unset;
  cursor: pointer;
}

.cm .c-btn--main {
  background: var(--color-primary-med-100, #2563eb);
  color: var(--color-white-100, #fff);
}

.cm .c-btn--sub {
  background: transparent;
  color: var(--color-black-60, rgba(34, 34, 34, 0.6));
  border: 1px solid var(--color-black-20, rgba(34, 34, 34, 0.2));
}

.cm .c-btn--disabled {
  background: var(--color-black-12, rgba(34, 34, 34, 0.12));
  color: var(--color-black-20, rgba(34, 34, 34, 0.2));
  pointer-events: none;
}

.cm .c-btn.c-btn--md {
  padding: var(--spacing-element-sl, 8px)
    var(--spacing-contents-section-xs, 20px);
}

.cm .c-btn.c-btn--lg {
  padding: var(--spacing-element-xl, 12px)
    var(--spacing-contents-section-s, 30px);
}

@media (hover: hover) {
  .cm .c-btn--main:hover {
    background: var(--color-primary-dark-100, #1e40af);
    color: #fff;
  }

  .cm .c-btn--sub:hover {
    border: 1px solid var(--color-black-20, rgba(34, 34, 34, 0.2));
    background: var(--color-black-3, rgba(34, 34, 34, 0.03));
  }
}

/* 파일 */
.cm .c-file {
  position: relative;
}

.cm .c-file .droparea {
  display: block;
  position: relative;
  width: 275px;
  aspect-ratio: 1;
  border: 1px dashed var(--color-black-50, rgba(34, 34, 34, 0.5));
  border-radius: var(--spacing-element-ss, 4px);
  background: var(--color-black-3, rgba(34, 34, 34, 0.03));
  overflow: hidden;
  transition: background-color 0.3s, border-color 0.3s;
}

.cm .c-file .layer {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
  transition: color 0.3s, background-color 0.3s;
}

.cm .c-file .layer--delete {
  display: none;
  opacity: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  transition: opacity 0.3s, backdrop-filter 0.3s;
}

.cm .c-file .input {
  display: none;
}

.cm .c-file .icon-upload {
  font-size: 32px;
  line-height: 160%;
  margin-bottom: var(--spacing-element-m, 6px);
}

.cm .c-file .txt-upload {
  font-family: var(--font-family-main, "Noto Sans KR");
  font-size: 14px;
  line-height: 160%;
  margin-bottom: var(--spacing-contents-section-xs, 20px);
}

.cm .c-file .btn-upload {
  margin: 0 auto;
  display: flex;
  width: 32px;
  height: 32px;
  padding: var(--spacing-element-m, 6px) var(--spacing-element-xl, 12px);
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-max, 9999px);
  background: var(--color-primary-med-100, #2563eb);
  color: #fff;
  border: none;
  transition: color 0.3s, background-color 0.3s;
}

.cm .c-file .btn-delete {
  border-radius: var(--radius-S, 4px);
  border: 1px solid var(--color-white-100, #fff);
  background-color: transparent;
  color: #fff;
  padding: var(--spacing-element-m, 6px) var(--spacing-element-xl, 12px);
}

.cm .c-file .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cm .c-file .name {
  position: absolute;
  top: 100%;
  left: 0;
  padding: var(--spacing-element-m, 6px) 0px;
  color: var(--color-black-50, rgba(34, 34, 34, 0.5));
  font-size: 12px;
}

.cm .c-file--active .droparea {
  border: 1px dashed var(--color-primary-med-100, #2563eb);
  background: var(--color-primary-lig-40, rgba(219, 234, 254, 0.4));
  border-radius: var(--spacing-element-ss, 4px);
}

.cm .c-file--active .btn-upload {
  background: var(--color-primary-lig-100, #dbeafe);
  color: var(--color-primary-med-100, #2563eb);
}

.cm .c-file--active .layer--dragndrop {
  color: var(--color-primary-med-100, #2563eb);
}

.cm .c-file--complete .droparea {
  border: 1px dashed transparent;
}

.cm .c-file--complete .layer--dragndrop {
  display: none;
}

.cm .c-file--complete .layer--delete {
  display: flex;
  opacity: 0;
}

.cm .c-file--complete:hover .layer--delete {
  opacity: 1;
}

/* input date */
.cm .c-date-group {
  position: relative;
  border-bottom: 1px solid var(--color-black-10, rgba(34, 34, 34, 0.1));
  display: inline-flex;
  align-items: center;
  flex: 1;
  gap: var(--spacing-element-sl, 8px);
  padding: 0 var(--spacing-element-m, 6px);
}

.cm .c-date-group i {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
  font-size: 10px;
  line-height: 160%;
  display: flex;
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
}

.cm .c-date-group input {
  display: inline-block;
  flex: 1;
  padding: var(--spacing-element-sl, 8px) 0;
  outline: none;
  background-color: transparent;
  border: none;
  color: var(--color-black-80, rgba(34, 34, 34, 0.8));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  line-height: 160%;
}

.cm .c-date-group input[type="text"] {
  width: 100%;
  pointer-events: none;
}

.cm .c-date-group input[type="date"] {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.cm .c-date-group input::-moz-placeholder {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
}

.cm .c-date-group input::placeholder {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
}

.cm .c-date-group input:disabled {
  color: var(--color-black-12, rgba(34, 34, 34, 0.12));
}

.cm .c-date-group input[type="date"]::-webkit-calendar-picker-indicator {
  width: 100%;
  height: 100px;
  opacity: 0;
  cursor: pointer;
}

/* -------------------------- 댓글 ----------------------------------- */
.cm .c-comment {
  padding: var(--spacing-element-m, 6px) var(--margin, 40px);
}

.cm .c-comment .wrap {
  display: flex;
  position: relative;
  gap: var(--spacing-element-xl, 12px);
  padding: var(--spacing-element-m, 6px);
  border-radius: var(--radius-S, 4px);
  transition: background-color 0.3s;
}

.cm .c-comment--reply .wrap::before {
  content: " ";
  display: block;
  position: relative;
  width: 12px;
  height: 18px;
  border-bottom: 1px solid var(--color-black-20, rgba(34, 34, 34, 0.2));
  border-left: 1px solid var(--color-black-20, rgba(34, 34, 34, 0.2));
}

.cm .c-comment .content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-element-ss, 4px);
  flex: 1 0 0;
}

.cm .c-comment .head {
  display: flex;
  align-items: center;
}

.cm .c-comment .btn {
  margin-left: auto;
  cursor: pointer;
}

.cm .c-comment .author {
  display: flex;
  align-items: center;
  gap: var(--spacing-element-m, 6px);
}

.cm .c-comment .author-name {
  color: var(--color-black-100, #222);
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  line-height: 160%;
}

.cm .c-comment .admin {
  display: flex;
  align-items: center;
  gap: var(--spacing-element-m, 6px);
}

.cm .c-comment .author i {
  color: var(--color-primary-med-100, #2563eb);
  font-size: 14px;
  line-height: 160%;
}

.cm .c-comment .admin-name {
  color: var(--color-black-100, #222);
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  line-height: 160%;
}

.cm .c-comment .admin-label {
  color: var(--color-black-60, rgba(34, 34, 34, 0.6));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-caption, 12px);
  line-height: normal;
  padding: var(--spacing-element-s, 2px) var(--spacing-element-m, 6px);
  border-radius: var(--radius-S, 4px);
  background: var(--color-black-8, rgba(34, 34, 34, 0.08));
}

.cm .c-comment .head-info {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-micro, 11px);
}

.cm .c-comment .head-info::before {
  content: "·";
  margin: 0 var(--spacing-element-m, 6px);
  display: inline-block;
  position: relative;
  color: inherit;
}

.cm .c-comment .btn {
  background-color: transparent;
  border: none;
  display: flex;
  width: 26px;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  color: var(--color-black-60, rgba(34, 34, 34, 0.6));
  font-size: 16px;
  font-weight: 300;
  border-radius: var(--radius-S, 4px);
  transition: background-color 0.3s, color 0.3s;
}

.cm .c-comment .body {
  color: var(--color-black-90, rgba(34, 34, 34, 0.9));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-xs, 14px);
  line-height: 160%;
}

.cm .c-comment .to {
  color: var(--color-black-90, rgba(34, 34, 34, 0.9));
  font-weight: 700;
}

.cm .c-comment .footer {
  align-self: flex-end;
}

.cm .c-comment .reply {
  border: none;
  background-color: transparent;
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-micro, 11px);
  line-height: normal;
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
  cursor: pointer;
}

.cm .c-comment .footer i {
  color: var(--color-black-10, rgba(34, 34, 34, 0.1));
  font-size: 10px;
  font-weight: 900;
  line-height: 160%;
}

.cm .c-comment.c-comment--selected .admin-name {
  color: var(--color-black-60, rgba(34, 34, 34, 0.6));
}

.cm .c-comment.c-comment--selected .author-name {
  color: var(--color-black-60, rgba(34, 34, 34, 0.6));
}

.cm .c-comment.c-comment--selected .body .to {
  color: rgba(34, 34, 34, 0.6);
}

.cm .c-comment.c-comment--selected .body {
  color: rgba(34, 34, 34, 0.6);
}

.cm .c-comment.c-comment--del {
  pointer-events: none;
}

.cm .c-comment.c-comment--del .body {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
}

.cm .c-comment.c-comment--lock .body {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
}

.cm .c-comment-input {
  padding: var(--spacing-contents-section-s, 30px) var(--margin, 40px);
  background-color: #fff;
  margin-bottom: 20px;
}

.cm .c-comment-input:last-child {
  margin-bottom: 0;
}

.cm .c-comment-input .wrap {
  display: flex;
  position: relative;
  gap: var(--spacing-element-xl, 12px);
}

.cm .c-comment-input--reply {
  display: none;
}

.cm .c-comment-input.c-comment-input--reply .wrap::before {
  content: " ";
  display: block;
  position: relative;
  width: 12px;
  height: 18px;
  border-bottom: 1px solid var(--color-black-20, rgba(34, 34, 34, 0.2));
  border-left: 1px solid var(--color-black-20, rgba(34, 34, 34, 0.2));
}

.cm .c-comment-input .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-contents-section-xs, 20px);
}

.cm .c-comment-input .reply-alert {
  color: var(--color-black-60, rgba(34, 34, 34, 0.6));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-caption, 12px);
  line-height: normal;
}

.cm .c-comment-input .reply-to {
  color: var(--color-primary-med-100, #2563eb);
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-caption, 12px);
  line-height: normal;
}

.cm .c-comment-input .head {
  display: flex;
  gap: var(--spacing-element-ss, 4px) var(--spacing-element-m, 6px);
}

.cm .c-comment-input .head-input {
  max-width: 320px;
  flex: 1;
}

.cm .c-comment-input .textarea {
  width: 100%;
  display: block;
  border-radius: var(--radius-S, 4px);
  background: var(--color-black-3, rgba(34, 34, 34, 0.03));
  height: 100px;
  padding: var(--spacing-element-m, 6px) var(--spacing-element-sl, 8px);
  color: var(--color-black-80, rgba(34, 34, 34, 0.8));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  line-height: 160%;
  outline: none;
  border: none;
}

.cm .c-comment-input .textarea::placeholder {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
}

.cm .c-comment-input .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-contents-section-xs, 16px);
}

.cm .c-comment-input .footer-txt {
  color: var(--color-black-40, rgba(34, 34, 34, 0.4));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-micro, 11px);
  line-height: normal;
}

.cm .c-comment-input .btn {
  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-S, 4px);
  font-size: 13px;
  cursor: pointer;
}

.cm .c-comment-input .btns {
  display: flex;
  gap: var(--spacing-element-m, 6px);
}

.cm .ck-islock input[type="checkbox"] {
  display: none;
}

.cm .ck-islock input[type="checkbox"]:checked ~ .btn-lock i:nth-child(2) {
  display: none;
}

.cm .ck-islock input[type="checkbox"]:not(:checked) ~ .btn-lock i:nth-child(1) {
  display: none;
}

.cm .c-comment-input .fa-lock-keyhole-open {
  color: var(--color-black-20, rgba(34, 34, 34, 0.2));
}

.cm .c-comment-input .btn-send {
  background: var(--color-black-20, rgba(34, 34, 34, 0.2));
  color: var(--color-white-100, #fff);
  border: none;
  cursor: default;
}

.cm .c-comment-input .btn-send.active {
  background: var(--color-primary-med-100, #2563eb);
  color: var(--color-white-100, #fff);
  cursor: pointer;
}

@media (max-width: 768px) {
  .cm .c-comment-input.c-comment-input--reply .wrap::before {
    display: none;
  }

  .cm .c-comment-input .head {
    flex-direction: column;
  }

  .cm .c-comment-input .head-input {
    max-width: unset;
  }
}

@media (hover: hover) {
  .cm .c-comment:hover .wrap {
    background: var(--color-black-4, rgba(34, 34, 34, 0.04));
  }

  .cm .c-comment.c-comment--unhover:hover .wrap {
    background-color: unset;
  }

  .cm .c-comment .btn:hover {
    color: var(--color-black-80, rgba(34, 34, 34, 0.8));
    background: var(--color-black-4, rgba(34, 34, 34, 0.04));
  }

  .cm .c-comment-input .btn-lock:hover {
    background: var(--color-black-4, rgba(34, 34, 34, 0.04));
  }
}

/* ---------------------모달------------------------------------- */
.cm .c-modal-group {
  display: none;
  position: fixed;
  background-color: #eeeeee55;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

.cm .c-modal-group .wrap {
  padding: 0 var(--margin);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm .c-modal-group .modal {
  display: flex;
  width: 480px;
  padding: var(--margin, 40px);
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--radius-M, 8px);
  border: 1px solid var(--color-black-3, rgba(34, 34, 34, 0.03));
  background: var(--color-white-100, #fff);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
}

.cm .c-modal-group .ttl {
  color: var(--color-black-100, #222);
  text-align: center;
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-m, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.cm .c-modal-group .subttl {
  color: var(--color-black-80, rgba(34, 34, 34, 0.8));
  text-align: center;
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.cm .c-modal-group .inputs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-element-ss, 4px);
}

.cm .c-modal-group .dates {
  display: flex;
  gap: var(--spacing-contents-section-xs, 20px);
}

.cm .c-modal-group .btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-element-xl, 12px);
}

/* ---------------------케밥------------------------------------- */
.cm .kebab-group {
  position: relative;
}

.cm .kebab-group .kebabs {
  display: none;
  background-color: #fff;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: max-content;
}

.cm .kebab-group .kebab {
  cursor: pointer;
  display: flex;
  padding: var(--spacing-element-m, 6px) var(--spacing-element-xl, 12px);
  align-items: center;
  gap: var(--spacing-element-m, 6px);
  background: var(--color-white-100, #fff);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  color: var(--color-black-80, rgba(34, 34, 34, 0.8));
  font-family: var(--font-family-main, Pretendard);
  font-size: var(--font-size-defalut-s, 15px);
  line-height: 160%;
  transition: background-color 0.3s;
}

.cm .kebab-group .btn {
  cursor: pointer;
}

.cm .kebab .kebab i {
  font-size: 16px;
}

@media (hover: hover) {
  .cm .kebab .kebab:hover {
    background-color: var(--color-black-3, rgba(34, 34, 34, 0.03));
  }
}