/* =========================================================
   skin2.css
   ========================================================= */

/* ---------------------------
    obituary 공통부분
---------------------------- */
/* 공통: flex + 세로 가운데 */
.flex-c,
.flex-between {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* 중앙 정렬 */
.flex-c {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* 양끝 정렬 */
.flex-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.card {font-size:1rem !important;}
.font-Soonbatang {font-family: 'Soonbatang', serif; font-weight:500;}

/* ---------------------------
    // obituary 공통부분
---------------------------- */
/* 카카오지도 인포레이어 */
.iw-title{
  font-family:'Soonbatang' !important;
  font-weight:500;
  width:150px;
  text-align:center;
  padding:6px 0;
}
/* 주차,교통 모달 */
.pre-full{
  white-space: pre-wrap;
  max-height: none;
  overflow: visible;      /* 스크롤 없음 */
}

/* ---------------------------
    obituary_type2.html(모바일부고장 스킨2)
---------------------------- */

/* ------ 상단 고인정보 ------*/

/* 영장사진, 고인명 등을 묶고있는 section */
.bugo-img-wrap {
  background-image: url('../img/obiuary_img01.webp');
  background-size: 100%;
  text-align: center;
  background-color: var(--bs-primary);
  color: white;
}

/* 訃告 색 변경 */
.bugo-img-wrap>span {
  color: rgba(255, 255, 255, 0.8);
}

/* 영정사진 */
.bugo-img-wrap .mobile_visible_photo {
  position: relative;
}

/* 영정사진이 있을경우 안쪽 그림자 효과 */
.bugo-img-wrap .mobile_visible_photo.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* ------ // 상단 고인정보 ------*/
/* 상주 리스트 손녀, 부군, 입관, 발인 등 색 변경 */
.sangju_wrap .desc ul li>strong {
  color: var(--bs-primary);
}

.bg-shape {
  position: relative;
  background-color: var(--bs-primary);
  background-image: url('../img/obiuary_img01.webp');
  background-size: 100%;
}

.bg-shape:after {
  background-image: var(--falcon-bg-shape-bg-ltd);
}

/* ----- // 모달창 헤더 꾸미기 -----*/

/* ------ 부고공유 버튼 ------*/
/* 부고공유 > 공유 방법 > 버튼 기본 */
.btn_share_modal_sns {
  --bs-btn-hover-border-color: rgb(233, 233, 233);
  flex-direction: column;
  flex: 1;
  padding: 10px;
  gap: 5px;
  border: 2px solid rgb(233, 233, 233);
}

/* 부고공유 > 공유 방법 > 버튼 눌렀을때 */
.btn_share_modal_sns.active {
  border-color: var(--bs-primary);
}

/* 부고공유 > 공유 방법 > 버튼 > 로고 div */
.ic_basic {
  width: 32px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

/* 부고공유 > 공유 방법 > 버튼 > 로고 > 이미지 */
.ic_basic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-backdrop.backdrop-dark {background-color: #000 !important;opacity: 1 !important; transition: 0 !important;}

.info-row { flex-wrap: wrap; }
#info-p-check1 { flex: 0 0 auto; margin-right: .5rem; }
.info-label {flex: 1 1 auto;min-width: 0;white-space: normal;line-height: 1.45;word-break: keep-all;}
.info-row .btn { flex: 0 0 auto; margin-left: .5rem; font-size: clamp(13px, 1.1vi, 15px); }
#map, #map * { touch-action: pan-y !important; }


/* ------ // 부고공유 버튼 ------*/
/* ---------------------------
    // obituary_type2.html(모바일부고장 스킨2)
---------------------------- */


/* ---------------------------
    obituary_step1.html(모바일부고장 > 근조화환)
---------------------------- */

/* ------ 부트스트랩 nav-tab 커스텀 ------ */
/* 상단 카테고리 메뉴 */
/* 스크롤 안보이게 */
.nav-tabs.category-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: var(--bs-primary);
  padding: 10px;
  -webkit-overflow-scrolling: touch;
  /* iOS에서 부드럽게 */
  scrollbar-width: none;
}

/* 탭은 크기 고정 유지 */
.nav-tabs.category-nav .nav-item {
  flex: 0 0 auto;
}

.nav-tabs.category-nav .nav-link {
  margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
  border: none;
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: white;
  text-decoration: none;
  background: none;
  border: 0;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.nav-tabs.category-nav .nav-link.active,
.nav-tabs.category-nav .nav-item.show .nav-link {
  position: relative;
  color: white;
  background-color: transparent;
  border: none;
  font-weight: bold;
  border-bottom: 3px solid white;
}

/* ------ 부트스트랩 nav-tab 커스텀 ------ */

/* ------ 부트스트랩 card 커스텀 ------ */
/* 상품 카드 */
.card.custom-card {
  height: 100%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.card.custom-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 상품 이미지를 감싸는 div */
.card.custom-card .card-body .goods-thumb {
  aspect-ratio: 1 / 1.1;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

/* 상품 이미지 */
.card.custom-card .card-body .goods-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.card.custom-card .card-body .goods-desc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
}

/* ------ // 부트스트랩 card 커스텀 ------ */
/* ---------------------------
    // obituary_step1.html(모바일부고장 > 근조화환)
---------------------------- */


/* ---------------------------
    // obituary_step2.html(근조화환 > 상품설명)
---------------------------- */
/* ------ 부트스트랩 nav-tab 커스텀 ------ */

.nav-link.custom-nav-link.active {
  background-color: transparent;
  font-weight: 600;
  border-bottom: 3px solid white;
}

/* ------ 부트스트랩 nav-tab 커스텀 ------ */
/* ---------------------------
    // obituary_step2.html(근조화환 > 상품설명)
---------------------------- */


/* ---------------------------
    // obituary_step3.html(근조화환 > 주문하기)
---------------------------- */

/* choice를 다른 input과 동일하게 */
.choice-custom .choices {
  padding: 0.85rem 2.25rem 0.85rem .75rem !important;
  margin-bottom: 0;
}

/* ----- 결제방법 버튼 색 변경 -----*/
.order-pay-method-btn.btn-check:checked + .btn {
  background-color: var(--bs-primary);
  color: #fff;   
}
/* ----- // 결제방법 버튼 색 변경 -----*/

/* ---------------------------
    // obituary_step3.html(근조화환 > 주문하기)
---------------------------- */

#agreeModal1 .modal-footer .btn.btn-success,
#agreeModal2 .modal-footer .btn.btn-success{
  background-color:#8e5434 !important;
  border-color:#8e5434 !important;
  color:#fff !important;
}
#agreeModal1 .modal-footer .btn.btn-success:hover,
#agreeModal1 .modal-footer .btn.btn-success:focus,
#agreeModal2 .modal-footer .btn.btn-success:hover,
#agreeModal2 .modal-footer .btn.btn-success:focus{
  background-color:#7f492cff !important;
  border-color:#7f492cff !important;
}


/* ---------------------------
    sangju_msg.html(모바일부고장 > 답례글설정)
---------------------------- */
/* 조문답례 > 선택한 스타일 active 효과 */
.reply_m_swiper .swiper-slide >span.active{
  color: var(--bs-primary);
  font-weight: bold;
}

    
/* 답례글 미리보기 > 공통 */
.corner, .edge {
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

/* 답례글 미리보기 > 코너 */
.corner {
  width: 30px;
  height: 30px;
  background-size: 100% 100%;
}
.corner.tl { top: 2px; left: 0; background-image: url(); }
.corner.tr { top: 2px; right: 0; background-image: url(); }
.corner.bl { bottom: 0; left: 0; background-image: url(); }
.corner.br { bottom: 0; right: 0; background-image: url(); }

/* 답례글 미리보기 > 엣지 */
.edge.top {
  top: -10px; left: 55px; width: 310px; height: 110px;
  background: url() repeat-x;
}
.edge.bottom {
  bottom: 15.5px; left: 55px; width: 310px; height: 26px;
  background: url() repeat-x;
}
.edge.left {
  top: 70px; bottom: 40px; left: -6px; width: 17px;
  background: url() repeat-y;
}
.edge.right {
  top: 14px; bottom: 40px; right: 11px; width: 17px;
  background: url() repeat-y;
}
/* ---------------------------
    // sangju_msg.html(모바일부고장 > 답례글설정)
---------------------------- */


/* ---------------------------
    // orderlist(주문내역)
---------------------------- */
/* 접힘 상태 */
.accordion-button::after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
/* 펼침 상태 */
.accordion-button:not(.collapsed)::after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}


#orderlist_list, #orderlist_good, #orderlist_sum{
  min-height: 100vh;
}
#orderlist_list .card-header,
#orderlist_good .card-header,
#orderlist_sum .card-header{
  background-color: #fff;
}
#orderlist_list .nav-pills.listmenu,
#orderlist_good .nav-pills.listmenu,
#orderlist_sum .nav-pills.listmenu{
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #8e5434;
    --bs-nav-link-padding-y:.5rem !important;
}

#orderlist_list .accordion-button {
    background-color: #8e5434;
}

#orderlist_sum .table {
  --bs-table-border-color: #000000;
  --bs-table-striped-bg: rgba(var(--bs-secondary-rgb), 0.1);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
}

/* #orderlist_good, #orderlist_list 안의 해당 테이블만 적용 */
:is(#orderlist_good, #orderlist_list) table.table.table-layout-fixed{
  width: 100%;
  border-collapse: collapse;
  background: #fff;              /* 테이블 바탕색 */
  border: 1px solid #e5e7eb;     /* 바깥 테두리 */
}

/* 공통 셀 */
:is(#orderlist_good, #orderlist_list) table.table.table-layout-fixed th,
:is(#orderlist_good, #orderlist_list) table.table.table-layout-fixed td{
  border: 1px solid #363636;     /* 그리드 라인 색 */
  color: #111827;                /* 글자색 */
  padding: 10px 12px;
  vertical-align: middle;
}

/* 헤더/푸터(사용한 table-secondary 색상 커스텀) */
:is(#orderlist_good, #orderlist_list) table.table.table-layout-fixed thead td,
:is(#orderlist_good, #orderlist_list) table.table.table-layout-fixed tfoot td,
:is(#orderlist_good, #orderlist_list) table.table.table-layout-fixed .table-secondary{
  background: #dbbfa7 !important; /* 회색 배경 */
  color: #374151 !important;      /* 헤더 글자색 */
}

/* tbody 행 배경(줄무늬) */
:is(#orderlist_good, #orderlist_list) table.table.table-layout-fixed tbody tr:nth-child(4n+1),
:is(#orderlist_good, #orderlist_list) table.table.table-layout-fixed tbody tr:nth-child(4n+2){
  background: #ffffff;
}
:is(#orderlist_good, #orderlist_list) table.table.table-layout-fixed tbody tr:nth-child(4n+3),
:is(#orderlist_good, #orderlist_list) table.table.table-layout-fixed tbody tr:nth-child(4n+4){
  background: #f9fafb;
}

/* 품명 강조(옵션) */
:is(#orderlist_good, #orderlist_list) table.table.table-layout-fixed .item-name{
  color: #111827;
  font-weight: 600;
}

/* 합계 강조(옵션) */
:is(#orderlist_good, #orderlist_list) table.table.table-layout-fixed tfoot td{
  font-weight: 700;
}
:is(#orderlist_good, #orderlist_list) table.table.table-layout-fixed tfoot td:last-child{
  color: #111827;
}
/* =========================================================
   send
========================================================= */

.btn_basic.primary {
    background: #8e5434 !important;
    color: #fff;
    border-color: #8e5434 !important;
}

.btn_basic.secondary {
    background: #888;
    color: #fff;
    border-color: #888;
}