@charset "utf-8";

/* [Reference] Pixel to Rem Converter
   Base Font Size: 16px = 1rem
   ---------------------------------
   10px = 0.625rem
   11px = 0.6875rem
   12px = 0.75rem   (작은 설명 텍스트)
   13px = 0.8125rem (보조 텍스트)
   14px = 0.875rem  (본문 텍스트 - 작게)
   15px = 0.9375rem (본문 텍스트 - 보통)
   16px = 1rem      (★ 기준 - 본문 기본)
   17px = 1.0625rem
   18px = 1.125rem  (서브 타이틀)
   19px = 1.1875rem
   20px = 1.25rem   (타이틀 - 소)
   21px = 1.3125rem
   22px = 1.375rem
   23px = 1.4375rem
   24px = 1.5rem    (타이틀 - 중)
*/

/* 템플릿 포인트 컬러 설정 */
:root {
  --point-color: #32c0b6;
  /* 메인 강조 색상 */
  --point-hover-color: #119a90;
  /* 메인 강조 호버 색상 */
  --point-border-color: #119a90;
  /* 보더용 진한 색상 (★ 세미콜론 누락 수정 — 이전엔 이 값 뒤에 이어붙어 --point-color-light 가 선언되지 않던 버그) */
  --point-color-light: #8fd2cd;
  /* 배경용 연한 색상 */
  --point-color-dark: #119a90;
  /* 배경용 진한 색상 */
  --point-text-color: #32c0b6;
  /* 포인트 컬러 글자색 */
  --text-on-point: #ffffff;
  /* 포인트 컬러 글자색 */
  --text-on-white-point: #ffffff;
  /* 포인트 컬러 위의 흰색 글자색 */
  --gradient-color-bar: linear-gradient(to right, #34c0b7, #34c0b7, #b142d6, #f12d85) 1;
  /* 포인트 그라데이션 색상 */
  --text-total-price-color: #dd0d00;
  /* 결제금액 색상 */
  --text-discount-color: #247de9;
  /* 할인금액 색상 */
  --text-link-color: #32c0b6;
  /* 텍스트링크 색상 */
  --text-coupon-color: #dd0d00;
  /* 텍스트쿠폰 색상 */
  --product-thumb-radius: 6px;
  /* 상품이미지 라운드 처리 */
}


/* 초기화 */
a {
  color: #666;
  text-decoration: none;
}

a:hover {
  color: #333;
  text-decoration: none;
}

ul li {
  list-style: none;
}

legend {
  display: none;
}

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

button[type="submit"] {
  color: inherit;
  font: inherit;
  margin: 0;
  border: 0;
  background: none;
  -webkit-appearance: button;
}

b, strong {font-weight:600;}

/* custom */
.hide {
  display: none !important;
}

.transition {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

/* 소셜버튼 */
.ui.facebook.color.button {
  background: #3b5998;
  color: #fff;
}

.ui.twitter.color.button {
  background: #00aced;
  color: #fff;
}

.ui.google.color.button {
  background: #d34836;
  color: #fff;
}


/* 모달창 */
.ui.dimmer {
  background-color: rgba(0, 0, 0, .6);
}

.ui.modal>.header {
  background:none;
  color: #333;
  padding:20px 20px;
  border-bottom: 0;
  font-family: "Pretendard Variable", "Pretendard", -apple-system, sans-serif !important;
}

.ui.modal>.header .title {
  font-weight: 700;
}

/* 닫기 X 는 배경이미지로 그린다. Fomantic 폰트 글리프(i.close.icon::before content:"\f00d")가 그 위에 겹쳐
   X 가 둘로 보이므로 font-size:0 으로 글리프를 죽인다. — 모달마다 각자 넣어 막던 것을 전역으로 올린 것. */
.ui.modal>.close {
  width: 24px;
  height: 24px;
  top:20px !important;
  right:20px !important;
  color: rgba(255, 255, 255, 1);
  font-size: 0 !important;
  background: url('/theme/default/default/mobile/assets/images/common_icon_big_close.png') no-repeat center center;
}

.ui.modal .actions>.button:not(.fluid) {
  margin-left: .25em;
}

/* 커스텀 모달창 */
.ui.modal.custom>.content {
  margin: 10px 20px 0px;
  padding: 20px;
  width: auto;
  background: #f8f8f8;
}

.ui.modal.custom>.actions {
  padding: 20px 0;
  text-align: center;
  background: none;
  border-top: 0px;
}


/* 알림창 */
.ui.alerts {
  position: fixed;
  z-index: 2060;
  padding: 22px;
  max-width: 500px;
  top: 20px;
  right: 20px;
  cursor: default;
}

.ui.alerts .progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.ui.alerts .progress .bar {
  min-width: 1px;
}

@media (min-width:500px) {
  .ui.alerts {
    max-width: 90%;
  }
}


/* 수량버튼 */
.ui.quantity button {
  cursor: pointer;
}

.ui.quantity button:active {
  background: #eee;
}

.ui.quantity button .icon {
  margin: 0 -.11428571em 0 -.11428571em !important;
}

.ui.quantity input {
  font-weight: bold;
  text-align: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
  border-right: 0;
}


/* 파일 업로드 */
.ui.file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.ui.file .text {
  width: auto !important;
  min-width: 150px;
  margin-right: 3px !important;
}


.ui.divider:not(.vertical):not(.horizontal) {
  border-top: 1px solid rgba(34, 36, 38, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* divder css 오류수정 */
.ui.horizontal.divider:before,
.ui.horizontal.divider:after {
  top: 0;
}



/***** semantic ui custom *****/

/*  Pagination 페이징버튼 */

/* 페이징 래퍼(전 페이지 공용) — Fomantic .ui.grid 의 음수마진(-1rem)이 상속돼, 부모 좌우패딩이
   없는 페이지(상품목록/상세 Q&A·후기/주문/마이페이지/FAQ 등)에서 페이징이 좌측으로 밀리던 문제.
   음수마진을 재설정해 목록 아래 중앙으로 떨어뜨린다(전 페이지 일관). */
.centered.grid.pagination { margin: 8px 0 0; justify-content: center; }
/* 컬럼 풀폭 + 텍스트중앙 → 인라인 메뉴박스 자체를 중앙에 */
.centered.grid.pagination > .column { width: 100%; text-align: center; }
/* ★ 페이지가 많아 메뉴가 줄바꿈되면 justify-content 없이는 항목이 좌측부터 쌓여 왼쪽정렬로 보임 → 중앙정렬 */
.centered.grid.pagination .ui.pagination.menu { flex-wrap: wrap; justify-content: center; box-shadow: none; }
.centered.grid.pagination .ui.pagination.menu .item { margin-bottom: 3px; }

.ui.pagination {margin:1rem 0;}
.ui.pagination.menu {
  margin: 0em;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* item 공통 규칙 통합(이전엔 padding 이 두 블록에 서로 다른 값으로 중복 선언되어 있었음 — 최종 적용값만 남김) */
.ui.pagination.menu .item {
  min-width: 2em;
  margin: 0 2px;
  padding: .76857143em 1.00285714em .75857143em;
  font-size: 1rem;
  color: #777;
  text-align: center;
  border: 1px solid #eee;
  background: #fff;
}

.ui.pagination.menu .item:last-child,
.ui.pagination.menu .item:first-child {
  border-radius: 0;
}

.ui.pagination.menu .item:last-child:before {
  display: none;
}

.ui.pagination.menu .item:before {
  width: 0;
  background: none;
}

.ui.pagination.menu .item:hover {
  color: #222;
  border-color: #ccc;
  background: #fff;
}

.ui.pagination.menu .icon.item i.icon {
  vertical-align: top;
  font-size: 0.6875rem;
}

/* Active */
.ui.pagination.menu .active.item {
  border: 1px solid #222;
  padding-top: .76857143em;
  background-color: #fff;
  color: #222;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* 모바일: 페이징 버튼이 넘치면 줄바꿈되도록 */
@media (max-width: 767px) {
	.ui.pagination.menu,
	.ui.tiny.pagination.menu {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 6px;
	}
}



.ui.dropdown .menu {
  margin: 0em;
  padding: 0em 0em;
  background: #FFFFFF;
  font-size: 1em;
  text-shadow: none;
  text-align: left;
  border-radius: 0 !important;
  border-color: rgba(34, 36, 38, 0.25);
}

/* Active */
.ui.selection.active.dropdown {
  border-color: #333;
}

.ui.selection.active.dropdown .menu {
  border-color: #333;
  border-radius:0 0 .28571429rem .28571429rem !important;
}

/* Focus */
.ui.selection.dropdown:hover,
.ui.selection.dropdown:focus {
  border-color: #333 !important;
}

.ui.selection.dropdown:focus .menu {
  border-color: #333 !important;
}

/* Visible */
.ui.selection.visible.dropdown>.text:not(.default) {
  font-weight: normal;
  color: rgba(0, 0, 0, 0.8);
}

/* Visible Hover */
.ui.selection.active.dropdown:hover {
  border-color: #333;
}

.ui.selection.active.dropdown:hover .menu {
  border-color: #333;
}


.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="file"],
.ui.form input[type="url"] {
  font-family: "Pretendard Variable", "Pretendard", -apple-system, sans-serif !important;
  margin: 0em;
  outline: none;
  -webkit-appearance: none;
  tap-highlight-color: rgba(255, 255, 255, 0);
  line-height: 1.21428571em;
  padding: 0.67857143em 1em;
  font-size: 1em;
  background: #FFFFFF;
  border: 1px solid #ccc;
  color: rgba(0, 0, 0, 0.87);
  -webkit-box-shadow: 0em 0em 0em 0em transparent inset;
  box-shadow: 0em 0em 0em 0em transparent inset;
  -webkit-transition: color 0.1s ease, border-color 0.1s ease;
  transition: color 0.1s ease, border-color 0.1s ease;
}


/*--------------------
        Focus
---------------------*/

.ui.form input:not([type]):focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="file"]:focus,
.ui.form input[type="url"]:focus {
  color: rgba(0, 0, 0, 0.95);
  border: 1px solid #333 !important;
  border-radius: 0.28571429rem;
  background: #FFFFFF;
  -webkit-box-shadow: 0px 0em 0em 0em rgba(0, 0, 0, 0.35) inset;
  box-shadow: 0px 0em 0em 0em rgba(0, 0, 0, 0.35) inset;
}

.ui.input.focus>input,
.ui.input>input:focus {
  border-color: #aaa;
  background: #FFFFFF;
  color: rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.ui.input.focus>input::-webkit-input-placeholder,
.ui.input>input:focus::-webkit-input-placeholder {
  color: rgba(115, 115, 115, 0.87);
}

.ui.input.focus>input::-moz-placeholder,
.ui.input>input:focus::-moz-placeholder {
  color: rgba(115, 115, 115, 0.87);
}

.ui.input.focus>input:-ms-input-placeholder,
.ui.input>input:focus:-ms-input-placeholder {
  color: rgba(115, 115, 115, 0.87);
}

.ui.action.input:not([class*="left action"])>input:focus {
  border-right-color: #333 !important;
}

.ui.form textarea {
  margin: 0em;
  -webkit-appearance: none;
  tap-highlight-color: rgba(255, 255, 255, 0);
  padding: 0.78571429em 1em;
  background: #FFFFFF;
  border: 1px solid #ddd;
  outline: none;
  color: rgba(0, 0, 0, 0.87);
  -webkit-box-shadow: 0em 0em 0em 0em transparent inset;
  box-shadow: 0em 0em 0em 0em transparent inset;
  -webkit-transition: color 0.1s ease, border-color 0.1s ease;
  transition: color 0.1s ease, border-color 0.1s ease;
  font-size: 1em;
  line-height: 1.2857;
  resize: vertical;
}

/* 텍스트영역 포커스 (이전엔 이 규칙이 두 번 중복 선언되어 있었음 — 하나로 통합, 최종 적용값 기준) */
.ui.form textarea:focus {
  color: rgba(0, 0, 0, 0.95);
  border-color: #333;
  border-radius: 0;
  background: #FFFFFF;
  -webkit-box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
  box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
  -webkit-appearance: none;
}

.ui.toggle.checkbox input:focus:checked~label::before,
.ui.toggle.checkbox input:checked~label::before {background-color:var(--point-color);}


/* 버튼 */
.ui.button,
.ui.basic.button,
.ui.basic.buttons .button {
  border-radius: 5px;
}
/* Fomantic 기본 회색/700 을 밝은톤+#ddd 보더+weight500 으로 오버라이드(PC 와 동일).
   basic 은 특이도 높아 미영향 → .ui.button 단독 블록으로 분리. */
.ui.button {
	background-color: #f9f9f9;
	color: #222;
	font-weight: 500;            /* semantic 기본 700 → 500 */
}
/* ★ border 는 '무변형(노멀)' 버튼에만 먹인다. 색상/basic/inverted 변형은 스스로 border 를 선언하지
   않으므로, .ui.button 에 border 를 걸면 #ddd 가 전 변형(secondary·컬러·basic 등)으로 새어나간다.
   변형 클래스를 :not() 으로 전부 제외해 노멀 버튼에만 적용(PC 와 동일). */
.ui.button:not(.basic):not(.inverted):not(.primary):not(.secondary):not(.positive):not(.negative):not(.info):not(.warning):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.teal):not(.blue):not(.violet):not(.purple):not(.pink):not(.brown):not(.grey):not(.black):not(.color),
.ui.button:not(.basic):not(.inverted):not(.primary):not(.secondary):not(.positive):not(.negative):not(.info):not(.warning):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.teal):not(.blue):not(.violet):not(.purple):not(.pink):not(.brown):not(.grey):not(.black):not(.color):focus {
	border: 1px solid #ddd;
}
/* ★ .ui.buttons 그룹 내부 버튼 — basic 등 변형이 '그룹(.ui.buttons)'에만 붙고 자식 .button 엔
   안 붙어, 위 :not(.basic) 스코프를 통과해 #ddd 4면 낱개보더가 새어나온다(예: 날짜 퀵버튼 .select-date-range).
   낱개 4면 보더는 제거하되, fomantic 이 basic 그룹의 '셀 구분선/우측 테두리'로 쓰는 border-right 는 되살린다.
   (위 :not() 체인 특이도가 높아 둘 다 !important) */
.ui.buttons .button { border: 0 !important; }
.ui.basic.buttons:not(.inverted) .button:not(.basic) { border-right: 1px solid rgba(34, 36, 38, 0.15) !important; }
/* focus — semantic 기본 .ui.button:focus(회색) 때문에 클릭 후 포커스 남아 회색으로 되돌던 문제.
   기본 톤 재확정. hover 블록보다 앞에 둬야 focus+hover 동시상태에서 hover(검정)가 이긴다.
   (border 는 위 :not() 스코프에서 처리) */
.ui.button:focus {
	background-color: #f9f9f9;
	color: #222;
}
.ui.button:hover,
.ui.button:active {                /* active=누름 피드백도 hover 와 동일 다크 반전 */
	border-color: transparent;   /* hover 시 테두리 제거(크기 흔들림 없음) */
	background-color: #222;
	color: #fff;
}

.ui.label {
  border-radius: 5px;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {color:var(--text-on-white-point); background-color:var(--point-hover-color) !important;}
.ui.primary.button,
.ui.primary.buttons .button {color:var(--text-on-white-point); background-color:var(--point-color) !important;}

.ui.basic.labels .primary.label, .ui.ui.ui.basic.primary.label {
    background: none #fff;
    border-color: var(--point-border-color);
    color:var(--point-text-color);
}



/* naver */
.ui.naver.button {
  background-color: #26c826;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}

.ui.naver.button:hover {
  background-color: #26c826;
  color: #FFFFFF;
  text-shadow: none;
}

.ui.naver.button:active {
  background-color: #2d4373;
  color: #FFFFFF;
  text-shadow: none;
}


/* kakao */
.ui.kakao.button {
  background-color: #fcce00;
  color: #1d1d1d;
  text-shadow: none;
  background-image: none;
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}

.ui.kakao.button:hover {
  background-color: #fcce00;
  color: #1d1d1d;
  text-shadow: none;
}

.ui.kakao.button:active {
  background-color: #fcce00;
  color: #1d1d1d;
  text-shadow: none;
}


.ui.basic.button,
.ui.basic.buttons .button {
  background: #fff !important;
}

/* Column Width */

.ui.table th.one-half.wide,
.ui.table td.one-half.wide {
  width: 10%;
}


/* .ui.table */
.ui.table {
  font-size: 0.9286rem;
}

/* custom */
.right.floated {
  float: right;
}

.left.floated {
  float: left;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mx-5 {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

.mx-10 {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.mx-20 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.mx-30 {
  margin-left: 30px !important;
  margin-right: 30px !important;
}

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

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

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

.py-5 {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.py-10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.py-20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.py-30 {
  padding-left: 30px !important;
  padding-right: 30px !important;
}


/* img.full-image */
img.full-image {
  display: block;
  position: relative;
  left: 50%;
  height: 100%;
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}


/* 로딩이미지 */
#loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
  text-align: center;
}

#loading img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -24px;
  width: 48px;
  height: 10px;
}

/* 로딩 일반 메세지 */
#loading-message {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
}

#loading-message .message {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -215px;
  width: 430px;
  height: 85px;
}

#loading-message .message .content {
  padding: 10px 0;
}

/* 로딩 결제 메세지 */
#loading-payment-message {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

#loading-payment-message .message {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -215px;
  width: 430px;
  height: 85px;
}

#loading-payment-message .message .content {
  padding: 10px 0;
}

/* html 로드후 보여져야 할 영역 */
.after-show {
  display: none;
}


/**************** 기본양식 ****************/

/* 기본 테이블 목록 */
.normal-list .board-top-sort {
  clear: both;
}

.normal-list .board-top-sort:after {
  content: '';
  display: block;
  clear: both;
}

.normal-list .ui.count {
  padding: 0;
}

.normal-list .total-count {
  display: inline-block;
  padding-bottom: 5px;
  font-size: 1rem;
}

.normal-list .total-count strong {
  color: #000;
}

.normal-list .ui.table {
  border: 0;
  border-bottom: 1px solid #d5dbe0;
  border-radius: 0;
}

.normal-list .ui.table thead th {
  border-left: 0;
  background: #fff !important;
  border-top: 2px solid #000;
  border-bottom: 1px solid #d5dbe0;
  color: #000;
  font-weight: 500;
  font-size: 1rem;
  border-radius: 0 !important;
}

.normal-list .ui.sortable.table>thead>tr>th {
  border-left: 0;
}

.normal-list .ui.table tbody td {
  font-size: 0.9286rem;
  color: #222;
  padding: 1.48571429em .78571429em;
  border-color: #eee;
}

.normal-list .ui.table tbody tr:hover {
  background: #fff !important;
}

.normal-list .ui.table tbody td.product-info img.thumb {
  width: 80px;
}

.normal-list .ui.table tbody td.product-info span.product-name {
  overflow: hidden;
  display: block;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word !important;
  max-height: calc(1em * 1.4 * 2);
  white-space: normal;
  margin: 0 0 0;
  padding: 0;
  font-size: 0.8571rem;
  line-height: 1.4;
  color: #666;
  font-weight: normal;
}

/* no-data */
.list-no-data {
  padding: 100px 0 !important;
  text-align: center;
  background: #fff;
}

.list-no-data p {
  color: #999;
}

.list-no-data p i {
  position: relative;
  display:block;
  width: 40px;
  height: 50px;
  margin:0 auto;
  line-height: 94px;
  font-size:3em;
  line-height:1;
  color: #ddd;
}

.list-no-data p i:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25px;
  height: 25px;
  border: 0px solid #eaeaea;
  border-radius: 30px;
}

.list-no-data p span {
  display: block;
  margin: 15px 0 0;
  text-align: center;
}


/* 기본 폼 등록/수정 */
.ui.form,
.ui.form .field .dropdown,
.ui.form .field .dropdown .menu>.item {
  font-size: 0.9286rem;
}

.normal-form .ui.form {
  background: #fff;
}

.normal-form .ui.form.segment {
  border-top: 1px solid #dedede;
  padding: 20px;
}

.normal-form .ui.form .field.border-none,
.normal-form .ui.form .fields.border-none {
  border-bottom: 0;
}

.normal-form .ui.form .field.padding-bottom-none,
.normal-form .ui.form .fields.padding-bottom-none {
  padding-bottom: 0 !important;
}

.normal-form .ui.form .field.margin-bottom-none,
.normal-form .ui.form .fields.margin-bottom-none {
  margin-bottom: 0 !important;
}

.normal-form .ui.form em.at {
  font-style: normal;
  display: inline-block;
  margin: 0;
  font-size: 1rem;
  vertical-align: middle;
}

.normal-form .ui.form p.desc {
  font-weight: normal !important;
  color: #777;
}

.normal-form .ui.form .field>label,
.normal-form .ui.form .inline.fields>label {
  display: inline-block;
  min-width: 130px;
  font-size: 0.9286rem;
  font-weight: bold;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.normal-form .ui.form .inline-radio {
  display: inline-block;
  margin-right: 5px;
  padding: 5px 0;
}

.normal-form .upload {
  margin: 0;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.normal-form .upload .file {
  border: 0px !important;
}

.normal-form .upload .content {
  margin-top: 10px !important;
}

.normal-form .upload .delete-file {
  margin-top: 10px;
}

.normal-form .fields.captcha {
  align-items: stretch !important;
}

.normal-form .ui.divider:not(.vertical):not(.horizontal) {
  margin: 1.3rem 0;
  border-top: 1px solid rgba(34, 36, 38, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}


/* Fomantic 토글(.ui.toggle.checkbox) — PC(base common.css)와 동일하게 작게 통일.
   기본(트랙 3.5×1.5rem)이 커서 트랙 1.9×1.1rem 로 축소, 텍스트 세로 중앙(top:50%) 정렬. */
.ui.toggle.checkbox {min-height:1.1rem;}
.ui.toggle.checkbox input {width:1.9rem; height:1.1rem;}
.ui.toggle.checkbox label {padding-left:2.5rem;}
.ui.toggle.checkbox label::before {width:1.9rem; height:1.1rem; top:50%; margin-top:-0.55rem;}
.ui.toggle.checkbox label::after {width:1.1rem; height:1.1rem; top:50%; margin-top:-0.55rem;}
.ui.toggle.checkbox input ~ label::after {left:-0.05rem;}
.ui.toggle.checkbox input:checked ~ label::after {left:0.85rem;}
.ui.right.aligned.toggle.checkbox label {padding-right:2.5rem;}


.ui.segment {box-shadow:none;}

/* semantic-ui elements font */
.ui.header,
.ui.button {
  font-family: "Pretendard Variable", "Pretendard", -apple-system, sans-serif !important;
}


/* semantic-ui Tabular custom */

.ui.tabular.menu.custom {
  border-radius: 0;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none;
  background: #fafafa;
  border-top: 2px solid #333;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}

.ui.tabular.fluid.menu {
  width: calc(100% + 2px) !important;
}

.ui.tabular.menu .item {
  background: transparent;
  border-bottom: none;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-top: 2px solid transparent;
  padding: 1.2em 1.2em;
  color: rgba(0, 0, 0, 0.87);
  font-size: 1rem;
}

.ui.tabular.menu .item:before {
  display: none;
}

/* Hover */

.ui.tabular.menu .item:hover {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.8);
}

/* Active */

.ui.tabular.menu .active.item {
  background: none #FFFFFF;
  color: rgba(0, 0, 0, 0.95);
  border-top-width: 0;
  border-color: #ddd;
  font-weight: bold;
  margin-bottom: -1px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0 !important;
}

/* Coupling with segment for attachment */

.ui.tabular.menu+.attached:not(.top).segment,
.ui.tabular.menu+.attached:not(.top).segment+.attached:not(.top).segment {
  border-top: none;
  margin-left: 0;
  margin-top: 0;
  margin-right: 0;
  width: 100%;
}

.top.attached.segment+.ui.bottom.tabular.menu {
  position: relative;
  width: calc(100% + 2px);
  left: -1px;
}


/* 더보기 글내용 */
.more-text {
  display: none;
}


/* 리믹스 아이콘 커스텀 사이즈 (24px과 32px 사이) */
.ri-xxl {
  font-size: 1.75em !important;
  /* 약 28px */
  vertical-align: middle;
  /* 높이 정렬 보정 */
}

.ri-color-black {
	color:#000;
}


/* swiper v11 button 초기화 */
.swiper-button-next,.swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset,50%);
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color,var(--swiper-theme-color))
}


/* ══════════════════════════════════════════════════════════════… */

.rich-content {
	box-sizing: border-box;
	line-height: 1.42;
	text-align: left;
	white-space: normal;        /* 루트는 normal — 태그 사이 템플릿 들여쓰기 공백이 상/하단 여백으로 새지 않게. 다중공백/줄맞춤 보존은 아래 블록 요소에서 */
	word-wrap: break-word;
	tab-size: 4;
	-moz-tab-size: 4;
	/* 본문 14px = 에디터 .ql-container 기준값. size 배율(small/large/huge)의 기준 */
	font-size: 14px;
	font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
}

/* 블록 여백/카운터 초기화 (snow .ql-editor 와 동일) */
.rich-content p,
.rich-content ol,
.rich-content ul,
.rich-content pre,
.rich-content blockquote,
.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6 {
	margin: 0;
	padding: 0;
	counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

/* 공백/줄바꿈(에디터 다중공백·수동 줄맞춤) 보존은 블록 요소에만 — 루트에 pre-wrap 주면 템플릿 인터태그 공백이 상단 여백으로 샌다 */
.rich-content p,
.rich-content h1, .rich-content h2, .rich-content h3,
.rich-content h4, .rich-content h5, .rich-content h6,
.rich-content li,
.rich-content blockquote { white-space: pre-wrap; }

/* 본문 줄간격 = 에디터(.ql-editor 1.42 '단위없는' 배수)와 동일.
   Fomantic p{line-height:1.4285em}(고정길이)가 이기면 큰 인라인(더크게 24px)이 줄상자를 못 키워 윗줄과 달라붙음 → 단위없는 1.42 로 못박음. */
.rich-content p, .rich-content li, .rich-content blockquote { line-height: 1.8; }

/* ── 헤딩 글자크기 = 에디터 initialize.css 와 동일(px 못박음) ── */
.rich-content h1 { font-size: 32px; }
.rich-content h2 { font-size: 27px; }
.rich-content h3 { font-size: 21px; }
.rich-content h4 { font-size: 17px; }
.rich-content h5 { font-size: 16px; }
.rich-content h6 { font-size: 14px; }
/* 헤딩 굵기·줄간격 = 에디터와 동일 고정. Fomantic(700)/브라우저 기본 h6(굵게)가 헤딩을 더 굵게 만드는 것 차단 */
.rich-content h1, .rich-content h2, .rich-content h3,
.rich-content h4, .rich-content h5, .rich-content h6 { font-weight: 500; line-height: 1.2; margin: 0.5em 0; }

/* ── 내용 글자크기(size 피커) = 에디터 initialize.css 와 동일 ── */
.rich-content .ql-size-small { font-size: 12px; }
.rich-content .ql-size-large { font-size: 18px; }
.rich-content .ql-size-huge  { font-size: 24px; }

/* ── 리스트(ordered/bullet) + 중첩 카운터 (snow 원본 그대로) ── */
.rich-content ol,
.rich-content ul {
	padding-left: 1.5em;
	list-style-type: none;   /* Fomantic/Bootstrap 기본 마커 제거 — 카운터/•로 대체 */
}
.rich-content ol > li,
.rich-content ul > li {
	list-style-type: none;
}
.rich-content ul > li::before {
	content: '\2022';
}
.rich-content li::before {
	display: inline-block;
	white-space: nowrap;
	width: 1.2em;
}
.rich-content li:not(.ql-direction-rtl)::before {
	margin-left: -1.5em;
	margin-right: 0.3em;
	text-align: right;
}
.rich-content ol li:not(.ql-direction-rtl),
.rich-content ul li:not(.ql-direction-rtl) {
	padding-left: 1.5em;
}
.rich-content ol li {
	counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
	counter-increment: list-0;
}
.rich-content ol li:before {
	content: counter(list-0, decimal) '. ';
}
.rich-content ol li.ql-indent-1 { counter-increment: list-1; }
.rich-content ol li.ql-indent-1:before { content: counter(list-1, lower-alpha) '. '; }
.rich-content ol li.ql-indent-1 { counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; }
.rich-content ol li.ql-indent-2 { counter-increment: list-2; }
.rich-content ol li.ql-indent-2:before { content: counter(list-2, lower-roman) '. '; }
.rich-content ol li.ql-indent-2 { counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; }
.rich-content ol li.ql-indent-3 { counter-increment: list-3; }
.rich-content ol li.ql-indent-3:before { content: counter(list-3, decimal) '. '; }
.rich-content ol li.ql-indent-3 { counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; }
.rich-content ol li.ql-indent-4 { counter-increment: list-4; }
.rich-content ol li.ql-indent-4:before { content: counter(list-4, lower-alpha) '. '; }
.rich-content ol li.ql-indent-4 { counter-reset: list-5 list-6 list-7 list-8 list-9; }
.rich-content ol li.ql-indent-5 { counter-increment: list-5; }
.rich-content ol li.ql-indent-5:before { content: counter(list-5, lower-roman) '. '; }
.rich-content ol li.ql-indent-5 { counter-reset: list-6 list-7 list-8 list-9; }
.rich-content ol li.ql-indent-6 { counter-increment: list-6; }
.rich-content ol li.ql-indent-6:before { content: counter(list-6, decimal) '. '; }
.rich-content ol li.ql-indent-6 { counter-reset: list-7 list-8 list-9; }
.rich-content ol li.ql-indent-7 { counter-increment: list-7; }
.rich-content ol li.ql-indent-7:before { content: counter(list-7, lower-alpha) '. '; }
.rich-content ol li.ql-indent-7 { counter-reset: list-8 list-9; }
.rich-content ol li.ql-indent-8 { counter-increment: list-8; }
.rich-content ol li.ql-indent-8:before { content: counter(list-8, lower-roman) '. '; }
.rich-content ol li.ql-indent-8 { counter-reset: list-9; }
.rich-content ol li.ql-indent-9 { counter-increment: list-9; }
.rich-content ol li.ql-indent-9:before { content: counter(list-9, decimal) '. '; }

/* 중첩 ol(ql-indent-N) 카운터(a/b/c·i/ii)를 작은 동그라미 블릿(•)으로 통일 — Quill은 li 안에 ol/ul 을 못 넣어
   인덴트로만 표현하는데, 순서 카운터가 그룹을 넘어 이어져 부정확(예: 1,a,b,2,c). 최상위(indent-0)는 1.2.3. 유지. */
.rich-content ol li.ql-indent-1:before,
.rich-content ol li.ql-indent-2:before,
.rich-content ol li.ql-indent-3:before,
.rich-content ol li.ql-indent-4:before,
.rich-content ol li.ql-indent-5:before,
.rich-content ol li.ql-indent-6:before,
.rich-content ol li.ql-indent-7:before,
.rich-content ol li.ql-indent-8:before,
.rich-content ol li.ql-indent-9:before { content: '\2022'; }

/* ── 들여쓰기(indent) 패딩 — Quill 기본 3em/레벨은 과해 1.5em/레벨로 축소(에디터 initialize.css와 동일) ── */
.rich-content .ql-indent-1:not(.ql-direction-rtl)    { padding-left: 1.5em; }
.rich-content li.ql-indent-1:not(.ql-direction-rtl)  { padding-left: 3em; }
.rich-content .ql-indent-2:not(.ql-direction-rtl)    { padding-left: 3em; }
.rich-content li.ql-indent-2:not(.ql-direction-rtl)  { padding-left: 4.5em; }
.rich-content .ql-indent-3:not(.ql-direction-rtl)    { padding-left: 4.5em; }
.rich-content li.ql-indent-3:not(.ql-direction-rtl)  { padding-left: 6em; }
.rich-content .ql-indent-4:not(.ql-direction-rtl)    { padding-left: 6em; }
.rich-content li.ql-indent-4:not(.ql-direction-rtl)  { padding-left: 7.5em; }
.rich-content .ql-indent-5:not(.ql-direction-rtl)    { padding-left: 7.5em; }
.rich-content li.ql-indent-5:not(.ql-direction-rtl)  { padding-left: 9em; }
.rich-content .ql-indent-6:not(.ql-direction-rtl)    { padding-left: 9em; }
.rich-content li.ql-indent-6:not(.ql-direction-rtl)  { padding-left: 10.5em; }
.rich-content .ql-indent-7:not(.ql-direction-rtl)    { padding-left: 10.5em; }
.rich-content li.ql-indent-7:not(.ql-direction-rtl)  { padding-left: 12em; }
.rich-content .ql-indent-8:not(.ql-direction-rtl)    { padding-left: 12em; }
.rich-content li.ql-indent-8:not(.ql-direction-rtl)  { padding-left: 13.5em; }
.rich-content .ql-indent-9:not(.ql-direction-rtl)    { padding-left: 13.5em; }
.rich-content li.ql-indent-9:not(.ql-direction-rtl)  { padding-left: 15em; }

/* ── 정렬 ── */
.rich-content .ql-align-center  { text-align: center; }
.rich-content .ql-align-justify { text-align: justify; }
.rich-content .ql-align-right   { text-align: right; }
.rich-content .ql-direction-rtl { direction: rtl; text-align: inherit; }

/* ── 글자색/배경색 (팔레트) ── */
.rich-content .ql-color-white  { color: #fff; }
.rich-content .ql-color-red    { color: #e60000; }
.rich-content .ql-color-orange { color: #f90; }
.rich-content .ql-color-yellow { color: #ff0; }
.rich-content .ql-color-green  { color: #008a00; }
.rich-content .ql-color-blue   { color: #06c; }
.rich-content .ql-color-purple { color: #93f; }
.rich-content .ql-bg-black  { background-color: #000; }
.rich-content .ql-bg-red    { background-color: #e60000; }
.rich-content .ql-bg-orange { background-color: #f90; }
.rich-content .ql-bg-yellow { background-color: #ff0; }
.rich-content .ql-bg-green  { background-color: #008a00; }
.rich-content .ql-bg-blue   { background-color: #06c; }
.rich-content .ql-bg-purple { background-color: #93f; }

/* ── 서체(font 피커) ── */
.rich-content .ql-font-serif     { font-family: Georgia, 'Times New Roman', serif; }
.rich-content .ql-font-monospace { font-family: Monaco, 'Courier New', monospace; }

/* ── 링크/인용/코드/이미지/비디오 ── */
.rich-content a { text-decoration: underline; color: #06c; }  /* 링크색 고정 — 전역 a{color:#666} 지배 차단(에디터와 동일) */
.rich-content blockquote {
	border-left: 4px solid #ccc;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-left: 16px;
}
.rich-content code,
.rich-content pre {
	background-color: #f0f0f0;
	border-radius: 3px;
}
.rich-content pre {
	white-space: pre-wrap;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px 10px;
	font-family: Consolas, Monaco, 'Courier New', monospace;
	font-size: 13px;   /* 에디터 코드블록과 동일 — 전역 pre 가 키우지 못하게 고정 */
}
.rich-content code {
	font-size: 85%;
	padding: 2px 4px;
}
.rich-content pre.ql-syntax {
	background-color: #23241f;
	color: #f8f8f2;
	overflow: visible;
}
.rich-content img { max-width: 100%; }
.rich-content video,
.rich-content iframe { max-width: 100%; height: auto; }
.rich-content .ql-video {
	display: block;
	max-width: 100%;
}
.rich-content .ql-video.ql-align-center { margin: 0 auto; }
.rich-content .ql-video.ql-align-right  { margin: 0 0 0 auto; }
/* 표(table) — 에디터(.ql-editor)와 1:1. table-better 는 셀 인라인 테두리를 안 넣으므로 렌더쪽 CSS 로 명시(셀 #d0d3d7 / 머리글 #f6f7f9, 에디터 initialize.css 와 동일 값). */
.rich-content table { max-width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0.5em 0; }  /* width 100% 강제 안 함 — 내용에 맞춰 자연 크기(빈/짧은 표가 100%로 늘어나 인라인 margin과 겹쳐 삐져나가던 문제 해결). 폭이 넘칠 때만 max-width로 컨테이너 안에 가둔다 */
.rich-content td, .rich-content th { border: 1px solid #d0d3d7; padding: 6px 9px; vertical-align: top; }
.rich-content th { background: #f6f7f9; font-weight: 600; text-align: center; }
/* ══════════════ /.rich-content ══════════════ */

/* ── Fomantic 툴팁(data-tooltip) 글자 축소 ── 기본 1rem(16px)은 과해 0.8125rem(13px)로.
   ★ 화살표(::before)와 말풍선(::after)을 '함께' 축소해야 한다. 말풍선만 줄이면 화살표(1rem 기준 위치)와
     말풍선 여백(.5em)이 어긋나 글자가 위로 밀려 보인다. 둘 다 같은 font-size 로 두면 툴팁 전체가
     균일 비율(패딩·라인하이트·여백·화살표 모두 em/rem)로 축소돼 정렬이 유지된다. */
[data-tooltip]::before,
[data-tooltip]::after { font-size: 0.8125rem; }