/* ============================================================
   장바구니(cart.php) / 주문서(orderform.php) 아람찬 톤 오버레이.
   실제 결제/재고체크 JS, PG 연동, 우편번호 검색 등 기능 로직은
   전혀 안 건드리고, 기본 그누보드 쇼핑몰(youngcart) 스킨의
   색상/폰트/여백만 아람찬 톤에 맞게 덮어씀.
   ============================================================ */
/* default_shop.css 의 body{font-size:0.75em}(12px 수준)이 너무 작아서
   em 단위로 잡혀있는 자식 요소들이 전부 같이 작아짐 - 기준값을 키움. */
body {
   font-family: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
   background: #fff;
   font-size: 15px !important;
}

/* default_shop.css 의 h1~h6{font-family:'Malgun Gothic'} 이 더 구체적으로 먹혀서
   Pretendard 가 안 먹던 문제 - 명시적으로 다시 지정. */
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
}

/* .aramchan-sub-intro 자체에 고정헤더용 여백(padding-top:164px)이 이미 내장돼 있어서
   body 쪽엔 별도 padding-top 을 안 줌(주면 이중으로 떠버림). */

/* float 컨테인은 overflow:hidden 대신 flow-root로 - hidden을 쓰면 장바구니
   우측 sticky 사이드바가 못 붙고 그냥 스크롤되어 버림(스티키 깨짐 원인이었음). */
.page-wrap.shop-wrap {
   max-width: 1280px !important;
   margin: 0 auto !important;
   display: flow-root;
   min-height: 0 !important;
   padding-bottom: 40px !important;
}

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

/* 상단 헤더바 - 어두운 네이비 → 아람찬 화이트 톤 */
#hd {
   background: #fff !important;
   border-bottom: 1px solid #e5e3dc;
}

#hd_sch #sch_str,
#hd_sch #sch_submit {
   background: #f7f9fb !important;
   color: #1a1a1a !important;
   border: 1px solid #e5e3dc !important;
}

#tnb {
   border-bottom: 1px solid #e5e3dc !important;
}

.hd_login>li.login a {
   color: #1a1a1a !important;
   border-color: #d5d2c7 !important;
}

/* 카테고리/전체메뉴 바 - 파란 계열 → 아람찬 화이트+포인트 컬러 */
#gnb,
#gnb2,
.cate_all_wr,
#tnb2 {
   background: #fff !important;
   color: #1a1a1a !important;
}

#gnb a,
#gnb2 a {
   color: #1a1a1a !important;
}

/* 표/폼 공통 */
.tbl_head03,
.tbl_frm01 {
   border-color: #e5e3dc !important;
}

.tbl_head03 table th,
.tbl_frm01 table th {
   background: #f7f9fb !important;
   color: #1a1a1a !important;
   white-space: nowrap;
}

.tbl_head03 table td,
.tbl_frm01 table td {
   border-color: #f0efe9 !important;
}

/* 주문서 왼쪽 라벨열(이름/전화번호/주소/전하실말씀 등) - 기본 .tbl_frm01 th{width:90px} 고정폭에
   "전하실말씀"(5자)처럼 긴 라벨은 줄바꿈되어 두 줄로 밀림 - 폭을 살짝 늘려서 한 줄에 나오게 함 */
#sod_frm .tbl_frm01 th {
   width: 110px !important;
   white-space: nowrap;
}

.order-address-open {
   overflow: hidden;
}

.order-address-overlay {
   position: fixed;
   inset: 0;
   z-index: 9998;
   background: rgba(20, 25, 22, .45);
   opacity: 0;
   visibility: hidden;
   transition: opacity .25s ease, visibility .25s ease;
}

.order-address-overlay.open {
   opacity: 1;
   visibility: visible;
}

.order-address-panel {
   position: fixed;
   z-index: 9999;
   top: 0;
   right: 0;
   width: min(460px, 100%);
   height: 100%;
   padding: 32px;
   background: #fff;
   box-shadow: -12px 0 35px rgba(0, 0, 0, .12);
   transform: translateX(100%);
   visibility: hidden;
   transition: transform .3s ease, visibility .3s ease;
   overflow-y: auto;
}

.order-address-panel.open {
   transform: translateX(0);
   visibility: visible;
}

.order-address-panel-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 20px;
   border-bottom: 1px solid #1a1a1a;
}

.order-address-panel-head h3 {
   margin: 0;
   color: #1a1a1a;
   font-size: 24px;
}

.order-address-close {
   width: 40px;
   height: 40px;
   padding: 0;
   border: 0;
   background: transparent;
   color: #1a1a1a;
   font-size: 34px;
   line-height: 1;
   cursor: pointer;
}

.order-address-panel-list {
   display: flex;
   flex-direction: column;
   gap: 14px;
   padding-top: 20px;
}

.order-address-card {
   padding: 20px;
   border: 1px solid #e5e3dc;
   background: #fff;
}

.order-address-card-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 12px;
}

.order-address-card-title strong {
   font-size: 17px;
   color: #1a1a1a;
}

.order-address-card-title span {
   flex: none;
   padding: 4px 8px;
   background: #eef7f0;
   color: var(--brand-primary);
   font-size: 12px;
   font-weight: 700;
}

.order-address-card p {
   margin: 5px 0;
   color: #6d6d6d;
   font-size: 14px;
   line-height: 1.55;
}

.order-address-select {
   width: 100%;
   margin-top: 16px;
   padding: 12px 16px;
   border: 1px solid var(--brand-primary);
   background: var(--brand-primary);
   color: #fff;
   font: 700 14px 'Pretendard', sans-serif;
   cursor: pointer;
}

.order-address-select:hover {
   background: var(--brand-primary-dark);
}

.order-address-empty {
   padding: 50px 0;
   text-align: center;
   color: #9a9a9a;
}

@media(max-width:600px) {
   .order-address-panel {
      width: calc(100% - 30px);
      padding: 24px 20px;
   }

   .order-address-panel-head h3 {
      font-size: 21px;
   }

   .order-address-card {
      padding: 17px;
   }
}

/* 주문상세내역(orderinquiryview.php) 상품 테이블 - 컬럼이 8개라 좁은 화면에서 억지로
   눌려 글자가 세로로 쪼개짐 - 컬럼폭은 그대로 두고 가로스크롤로 처리 */
@media(max-width:760px) {
   #sod_fin_list .tbl_wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }

   #sod_fin_list .tbl_wrap table {
      min-width: 640px;
   }
}

/* 버튼 - 카테고리 탭(.aramchan-sub-categories a)과 완전히 동일한 톤(footer.css 의
   .aramchan-btn-primary/-secondary 참고). btn_submit(주문하기/장바구니담기 등 확정
   행동)은 진한 버튼, btn01/btn_cart_del(취소/쇼핑계속하기/선택삭제 등 보조 행동)은
   연한 버튼으로 명확히 구분함 - 예전엔 둘 다 검정이라 구분이 안 됐음. */
.btn01,
.btn_cart_del button {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   padding: 12px 22px !important;
   border: 1px solid #d5d2c7 !important;
   border-radius: 0 !important;
   font-size: 17px !important;
   background: #fff !important;
   color: #6d6d6d !important;
}

.btn01:hover,
.btn_cart_del button:hover {
   background: #f7f9fb !important;
   color: #1a1a1a !important;
}

/* 위시리스트 "주문하기"(btn02)도 확정 행동이라 btn_submit과 동일하게 진한 버튼 */
.btn_submit,
#sod_frm_pay .btn_submit,
.btn02 {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   padding: 12px 22px !important;
   border: 1px solid var(--brand-primary) !important;
   border-radius: 0 !important;
   font-size: 17px !important;
   background: var(--brand-primary) !important;
   color: #fff !important;
}

.btn_submit:hover,
#sod_frm_pay .btn_submit:hover,
.btn02:hover {
   background: var(--brand-primary-dark) !important;
}

/* 위시리스트 목록 - 기본 youngcart 스킨(float 카드 + fontawesome 아이콘, 폰트어썸 미로딩으로
   빈 회색 박스만 보이던 문제)을 상품그리드와 같은 톤의 카드로 완전히 새로 짬 */
#sod_ws .list_02 ul {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 32px 24px;
   padding: 0;
   margin: 0;
}

#sod_ws .list_02 li {
   list-style: none;
   float: none !important;
   width: auto !important;
   margin: 0 !important;
   border: 1px solid #e5e3dc;
   padding: 0;
   position: relative;
   background: #fff;
}

#sod_ws .list_02 li.empty_table {
   grid-column: 1/-1;
   border: none;
   text-align: center;
   padding: 80px 0;
   color: #9a9a9a;
}

/* get_it_image() 가 img 태그에 width/height 인라인 속성(+간혹 인라인 style)을 직접 박아서 나오는데,
   인라인 style은 외부 css보다 우선순위가 높아 width:100% 를 줘도 안 먹고 작게 찌그러져 보였음 -
   !important로 강제로 눌러서 카드 폭에 꽉 차게 함 */
/* default_shop.css 의 .sod_ws_img{width:90px}(원래 좁은 팝업창용 작은 썸네일)가 내가 만든
   grid 카드보다 우선순위 안 밀리고 살아있어서 안쪽 a/img 를 100%로 줘봐야 90px 안에서만
   꽉 찬 거였음(카드는 넓은데 사진만 작게 보이던 원인) - 컨테이너 폭 자체를 강제로 풀어줌 */
#sod_ws .sod_ws_img {
   width: 100% !important;
   margin: 0;
   aspect-ratio: 1/1;
   overflow: hidden;
   background: #f1eee7;
}

#sod_ws .sod_ws_img a {
   display: block !important;
   width: 100% !important;
   height: 100% !important;
}

#sod_ws .sod_ws_img img {
   width: 100% !important;
   height: 100% !important;
   max-width: none !important;
   object-fit: cover !important;
   display: block !important;
}

@media(max-width:900px) {
   #sod_ws .list_02 ul {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

#sod_ws .wish_info {
   height: auto !important;
   position: static !important;
   padding: 14px 16px 16px !important;
   border-bottom: none !important;
   margin-top: 0 !important;
}

#sod_ws .wish_chk {
   position: static !important;
   width: auto !important;
   line-height: normal !important;
   text-align: left !important;
   color: inherit !important;
   margin-bottom: 10px;
}

#sod_ws .info_link {
   display: block;
   margin: 0 0 4px !important;
   color: #1a1a1a !important;
   font-weight: 600;
   font-size: 15px !important;
}

#sod_ws .info_date {
   color: #9a9a9a;
   font-size: 12.5px !important;
}

#sod_ws .wish_del {
   position: absolute !important;
   top: 10px !important;
   right: 10px !important;
   width: 32px !important;
   height: 32px !important;
   line-height: normal !important;
   display: flex !important;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, .9) !important;
   color: #1a1a1a !important;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
   transition: background .2s ease, color .2s ease;
}

#sod_ws .wish_del:hover {
   background: #1a1a1a !important;
   color: #fff !important;
}

#sod_ws .wish_del svg {
   width: 15px;
   height: 15px;
}

#sod_ws_act {
   display: flex;
   gap: 10px;
   justify-content: center;
   margin-top: 32px;
}

/* 장바구니 표 - 기본 .td_numbig{width:100px} 고정폭인데 여기서 폰트를 키워놔서
   "20,000"같은 금액이 줄바꿈되어 두 줄로 밀림 - PC에서 안 밀리게 폭을 늘려줌 */
#sod_bsk_list .td_numbig {
   width: auto !important;
   min-width: 112px;
   white-space: nowrap;
}

#sod_bsk_list .total_prc {
   white-space: nowrap;
}

/* 장바구니(.od_prd_list) 소계 글씨가 원래 1.4em(디자인 의도)인데 우리 폰트 기본크기 자체가
   커서 주문서 작성 표(같은 상품목록인데 .od_prd_list 안 씀)보다 훨씬 커 보임 - 크기 통일 */
.od_prd_list .total_prc {
   font-size: 15px !important;
   font-weight: 700 !important;
}

/* 합계/총계 강조색 */
#sod_bsk_tot strong,
.sod_bsk_cnt strong,
#sod_bsk_tot .sod_bsk_cnt strong {
   color: #92795f !important;
}

#sod_bsk_tot,
#sod_bsk_act {
   background: #f7f9fb !important;
   border-color: #e5e3dc !important;
}

/* 장바구니/주문서 상품 목록 표(.od_prd_list) - 기본 행 높이가 너무 넉넉하고(padding 25px) 테두리도
   연한 회색이라 밋밋했음(요청 "테이블 디자인 맘에 안들어") - 한 단계 더 컴팩트하게, 테두리는
   진한 검정 1px로 전체(헤더/각 행 상단선) 통일 */
.od_prd_list thead th {
   padding: 14px 0 !important;
   border-top: 1px solid #1a1a1a !important;
   border-bottom: 1px solid #1a1a1a !important;
}

.od_prd_list td {
   padding: 16px 15px !important;
   border-top: 1px solid #1a1a1a !important;
}

.od_prd_list .td_prd {
   padding-top: 16px !important;
   padding-bottom: 16px !important;
   padding-left: 100px !important;
   min-height: 80px !important;
}

.od_prd_list .td_prd .sod_img {
   top: 16px !important;
   left: 0 !important;
}

.od_prd_list .td_prd .sod_name {
   min-height: auto !important;
}

/* 상품명 링크 */
.prd_name,
.prd_name b {
   color: #1a1a1a !important;
}

/* 결제수단 선택 라디오 영역 */
#sod_frm_paysel label {
   color: #1a1a1a !important;
}

#sod_frm_pay {
   border-color: #e5e3dc !important;
}

/* ============================================================
   마이페이지(mypage.php) - 왼쪽 사이드바(프로필/포인트/쿠폰/쪽지/내정보)
   + 오른쪽 탭(주문내역/위시리스트). 탭 버튼은 기존 카테고리 탭과 같은
   .aramchan-sub-categories 클래스를 그대로 재사용(subpage-hero.css 에서
   a 뿐 아니라 button 도 같이 타도록 확장해둠) - 새 탭 스타일 안 만듦.
   ============================================================ */
.aramchan-mypage {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: 40px;
   align-items: start;
}

.aramchan-mypage-side {
   border: 1px solid #e5e3dc;
   padding: 28px 24px;
}

.aramchan-mypage-profile {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   margin-bottom: 20px;
   text-align: center;
}

.aramchan-mypage-profile img {
   border-radius: 50%;
}

.aramchan-mypage-profile strong {
   font-size: 17px;
   color: #1a1a1a;
}

.aramchan-mypage-actbtns {
   display: flex;
   gap: 8px;
   margin-bottom: 50px;
}

.aramchan-mypage-actbtns .aramchan-btn {
   flex: 1;
   text-align: center;
   padding: 9px 0 !important;
   font-size: 13.5px !important;
}

.aramchan-mypage-label {
   margin: 0 0 10px;
   color: #1a1a1a;
   font-size: 16px;
   font-weight: 700;
}

/* 섹션 구분선(여백-선-여백) - border-top은 이 사이드바에서(버튼 기반 목록 뒤) 렌더링이
   씹히는 경우가 있었어서 height+background 방식으로 확실하게. 첫 섹션 위에는 안 그림. */
.aramchan-mypage-label:not(:first-of-type) {
   margin-top: 28px;
   padding-top: 25px;
   position: relative;
}

.aramchan-mypage-label:not(:first-of-type)::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: #e5e3dc;
}

.aramchan-mypage-stats {
   list-style: none;
   margin: 0 0 20px;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.aramchan-mypage-stats a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #6d6d6d !important;
   font-size: 14px;
   text-decoration: none;
}

.aramchan-mypage-stats a:hover {
   color: #1a1a1a !important;
}

.aramchan-mypage-stats strong {
   color: #92795f !important;
   font-weight: 700;
}

/* 나의 활동(배송지 관리/스크랩) - 오른쪽 숫자뱃지가 없는 순수 링크라 화살표만 살짝 붙여줌 */
.aramchan-mypage-links a::after {
   content: '›';
   color: #c8c5bc;
   font-size: 15px;
}

/* 메뉴(주문내역/위시리스트) - 오른쪽 탭 내용을 왼쪽 사이드바에서 전환하는 버튼.
   나머지 사이드바 링크(li>a)와 같은 목록이지만 버튼이라 별도 리셋 필요, 선택된 항목은
   진하게 강조(기존 카테고리탭의 active와 같은 톤) */
.aramchan-mypage-nav button {
   width: 100%;
   text-align: left;
   background: none;
   border: none;
   padding: 0;
   font-family: inherit;
   cursor: pointer;
   color: #6d6d6d;
   font-size: 14px;
}

.aramchan-mypage-nav button:hover {
   color: #1a1a1a;
}

.aramchan-mypage-nav button.active {
   color: #1a1a1a;
   font-weight: 700;
}

.aramchan-mypage-nav button.active::before {
   content: '';
   display: inline-block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #92795f;
   margin-right: 8px;
}

.aramchan-mypage-info {
   margin: 0 0 20px;
}

.aramchan-mypage-info dt {
   color: #9a9a9a;
   font-size: 14px;
   margin-top: 12px;
}

.aramchan-mypage-info dt:first-child {
   margin-top: 0;
}

.aramchan-mypage-info dd {
   margin: 2px 0 0;
   color: #1a1a1a;
   font-size: 14px;
}

.aramchan-mypage-bottom {
   display: flex;
   justify-content: space-between;
   padding-top: 14px;
   border-top: 1px solid #e5e3dc;
}

.aramchan-mypage-bottom a {
   font-size: 12.5px;
   color: #9a9a9a !important;
   text-decoration: none;
}

.aramchan-mypage-bottom a:hover {
   color: #1a1a1a !important;
}

.aramchan-mypage-tabs {
   justify-content: flex-start !important;
   margin-bottom: 28px;
}

.aramchan-my-panel {
   display: none;
}

.aramchan-my-panel.active {
   display: block;
}


/* 대시보드 상단 혜택 요약 카드 2개 */
.aramchan-mypage-summary {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-bottom: 40px;
}

.aramchan-mypage-summary-card {
   border: 1px solid #e5e3dc;
   padding: 22px 24px;
}

.aramchan-mypage-summary-tit {
   display: block;
   color: #9a9a9a;
   font-size: 14px;
   font-weight: 700;
   margin-bottom: 10px;
}

.aramchan-mypage-summary-num {
   color: #1a1a1a;
   font-size: 28px;
   font-weight: 800;
}

.aramchan-mypage-summary-num em {
   font-style: normal;
   font-size: 15px;
   font-weight: 600;
   margin-left: 2px;
}

.aramchan-mypage-summary-sub {
   margin: 10px 0 0;
   font-size: 12.5px;
   color: #9a9a9a;
}

.aramchan-mypage-summary-sub b {
   color: #92795f;
   font-weight: 700;
}

/* 대시보드 섹션 공통(주문내역/위시리스트/상품문의/상품후기) */
.aramchan-mypage-block {
   margin-bottom: 44px;
}

.aramchan-mypage-block-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
   padding-bottom: 12px;
   border-bottom: 1px solid #1a1a1a;
}

.aramchan-mypage-block-head h3 {
   margin: 0;
   font-size: 17px;
   font-weight: 700;
   color: #1a1a1a;
}

.aramchan-mypage-block-head a {
   font-size: 14px;
   color: #9a9a9a;
   text-decoration: none;
   display: flex;
   align-items: center;
   gap: 2px;
}

.aramchan-mypage-block-head a:hover {
   color: #1a1a1a;
}

.aramchan-mypage-empty {
   padding: 40px 0;
   text-align: center;
   color: #9a9a9a;
   font-size: 14px;
   border: 1px solid #f0efe9;
}

.aramchan-manage-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 18px;
}

.aramchan-manage-card {
   padding: 24px;
   border: 1px solid #e5e3dc;
   background: #fff;
}

.aramchan-manage-card-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding-bottom: 15px;
   border-bottom: 1px solid #f0efe9;
}

.aramchan-manage-card-head strong {
   color: #1a1a1a;
   font-size: 17px;
}

.aramchan-manage-card-head span {
   padding: 4px 8px;
   background: #eef7f0;
   color: var(--brand-primary);
   font-size: 12px;
   font-weight: 700;
}

.aramchan-manage-card dl {
   display: grid;
   grid-template-columns: 62px 1fr;
   gap: 8px 14px;
   margin: 18px 0;
   font-size: 14px;
   line-height: 1.55;
}

.aramchan-manage-card dt {
   color: #9a9a9a;
}

.aramchan-manage-card dd {
   margin: 0;
   color: #1a1a1a;
}

.aramchan-manage-actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
}

.aramchan-manage-actions a {
   padding: 8px 12px;
   border: 1px solid #d5d2c7;
   color: #6d6d6d;
   font-size: 13px;
   text-decoration: none;
}

.aramchan-manage-actions a:first-child {
   border-color: var(--brand-primary);
   color: var(--brand-primary);
}

.aramchan-manage-count {
   color: #9a9a9a;
   font-size: 14px;
}

.aramchan-scrap-list {
   /* border-top: 1px solid #1a1a1a; */
}

.aramchan-scrap-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 20px 4px;
   border-bottom: 1px solid #f0efe9;
}

.aramchan-scrap-item>div {
   display: grid;
   grid-template-columns: 110px minmax(0, 1fr) 92px;
   align-items: center;
   gap: 18px;
   min-width: 0;
   flex: 1;
}

.aramchan-scrap-item span,
.aramchan-scrap-item time {
   color: #9a9a9a;
   font-size: 13px;
}

.aramchan-scrap-item a {
   color: #1a1a1a;
   text-decoration: none;
}

.aramchan-scrap-item>div>a {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 15px;
}

.aramchan-scrap-delete {
   flex: none;
   padding: 7px 11px;
   border: 1px solid #d5d2c7;
   color: #6d6d6d !important;
   font-size: 12px;
}

.aramchan-manage-paging {
   margin-top: 28px;
}

.aramchan-personalpay-list {
   display: flex;
   flex-direction: column;
   /* border-top: 1px solid #1a1a1a; */
}

.aramchan-personalpay-card {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto auto;
   align-items: center;
   gap: 24px;
   padding: 22px 4px;
   border-bottom: 1px solid #f0efe9;
   color: #1a1a1a;
   text-decoration: none;
}

.aramchan-personalpay-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 15px;
   font-weight: 600;
}

.aramchan-personalpay-card strong {
   font-size: 18px;
}

.aramchan-personalpay-action {
   padding: 9px 14px;
   background: var(--brand-primary);
   color: #fff;
   font-size: 13px;
   font-weight: 700;
}

/* 무통장입금 제출했지만 아직 입금확인 전(pp_tno 없음) - 결제하기와 헷갈리지 않게 회색 배지로 구분 */
.aramchan-personalpay-action.pending {
   background: #f0efe9;
   color: #6d6d6d;
}

@media(max-width:900px) {
   .aramchan-manage-list {
      grid-template-columns: 1fr;
   }

   .aramchan-manage-card {
      padding: 20px;
   }

   .aramchan-scrap-item {
      align-items: flex-start;
   }

   .aramchan-scrap-item>div {
      grid-template-columns: 1fr;
      gap: 5px;
   }

   .aramchan-personalpay-card {
      grid-template-columns: 1fr auto;
      gap: 8px 14px;
      padding: 18px 0;
   }

   .aramchan-personalpay-card strong {
      grid-column: 1;
      font-size: 17px;
   }

   .aramchan-personalpay-action {
      grid-column: 2;
      grid-row: 1/3;
   }
}

/* 주문내역 카드 목록 */
.aramchan-mypage-order-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
}

.aramchan-mypage-order-list li {
   border-bottom: 1px solid #f0efe9;
}

.aramchan-mypage-order-list li:last-child {
   border-bottom: none;
}

.aramchan-mypage-order-item {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 16px 4px;
   text-decoration: none;
   color: inherit;
}

.aramchan-mypage-order-thumb {
   flex: 0 0 auto;
   width: 64px;
   height: 64px;
   background: #f1eee7;
   overflow: hidden;
}

.aramchan-mypage-order-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.aramchan-mypage-order-info {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.aramchan-mypage-order-no {
   font-size: 14px;
   color: #9a9a9a;
}

.aramchan-mypage-order-name {
   font-size: 14.5px;
   color: #1a1a1a;
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.aramchan-mypage-order-date {
   font-size: 12.5px;
   color: #9a9a9a;
}

.aramchan-mypage-order-badge {
   flex: 0 0 auto;
}

/* 위시리스트 카드 그리드(4열) */
.aramchan-mypage-wish-grid {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 20px;
}

.aramchan-mypage-wish-grid a {
   display: block;
   text-decoration: none;
   color: inherit;
}

.aramchan-mypage-wish-img {
   display: block;
   aspect-ratio: 1/1;
   overflow: hidden;
   background: #f1eee7;
   margin-bottom: 10px;
}

.aramchan-mypage-wish-img img {
   width: 100% !important;
   height: 100% !important;
   max-width: none !important;
   object-fit: cover !important;
   display: block !important;
}

.aramchan-mypage-wish-name {
   display: block;
   font-size: 14px;
   color: #1a1a1a;
   margin-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.aramchan-mypage-wish-price {
   display: block;
   font-size: 14.5px;
   font-weight: 700;
   color: #1a1a1a;
}

@media(max-width:900px) {
   .aramchan-mypage-wish-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

/* 상품문의/상품후기 목록(공통) */
.aramchan-mypage-text-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.aramchan-mypage-text-list li {
   border-bottom: 1px solid #f0efe9;
}

.aramchan-mypage-text-list li:last-child {
   border-bottom: none;
}

.aramchan-mypage-text-list a {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 13px 4px;
   text-decoration: none;
   color: inherit;
}

.aramchan-mypage-text-subj {
   flex: 1;
   min-width: 0;
   font-size: 14px;
   color: #1a1a1a;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.aramchan-mypage-text-date {
   flex: 0 0 auto;
   font-size: 12.5px;
   color: #9a9a9a;
}

.aramchan-mypage-text-badge {
   flex: 0 0 auto;
   font-size: 11.5px;
   font-weight: 700;
   padding: 3px 9px;
   border: 1px solid #d5d2c7;
   color: #6d6d6d;
}

.aramchan-mypage-text-badge.done {
   border-color: #3b6fa0;
   color: #3b6fa0;
}

.aramchan-mypage-text-score {
   flex: 0 0 auto;
   font-size: 14px;
   font-weight: 700;
   color: #92795f;
}

/* default_shop.css 의 .smb_my_more{position:absolute;top:0;right:0} 는 원래 h2 옆에
   나란히 배치하려고 만든 규칙 - 탭 구조로 바꾸면서 h2 를 없앴더니 테이블 헤더 위에
   그대로 얹혀버려서 static 으로 되돌리고 아래쪽 중앙 정렬로 새로 배치함 */
.aramchan-mypage #smb_my_od,
.aramchan-mypage .smb_my_more {
   position: static !important;
}

.aramchan-mypage .smb_my_more {
   text-align: center;
   margin-top: 20px;
}

.aramchan-mypage .smb_my_more a {
   display: inline-block !important;
   background: none !important;
   height: auto !important;
   padding-left: 0 !important;
   color: #6d6d6d !important;
   font-size: 13.5px;
   text-decoration: underline;
}

/* 최근 위시리스트(마이페이지 탭 내부) - wishlist.php 카드와 톤 통일 */
.aramchan-mypage .list_02 ul {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px 20px;
   padding: 0;
   margin: 0;
}

.aramchan-mypage .list_02 li {
   list-style: none;
   float: none !important;
   width: auto !important;
   margin: 0 !important;
}

.aramchan-mypage .list_02 li.empty_li {
   grid-column: 1/-1;
   text-align: center;
   padding: 60px 0;
   color: #9a9a9a;
   list-style: none;
}

/* default_shop.css 의 #smb_my_wish .smb_my_img{float:left} 가 살아있으면 폭이 내용만큼만
   줄어들어서 사진이 작게 나옴 - wishlist.php 때와 같은 원인이라 여기도 강제로 풀어줌 */
.aramchan-mypage .smb_my_img {
   width: 100% !important;
   float: none !important;
   margin-right: 0 !important;
   aspect-ratio: 1/1;
   overflow: hidden;
   background: #f1eee7;
   margin-bottom: 8px;
}

.aramchan-mypage .smb_my_img img {
   width: 100% !important;
   height: 100% !important;
   max-width: none !important;
   object-fit: cover !important;
   display: block !important;
}

@media(max-width:900px) {
   .aramchan-mypage {
      gap: 0;
   }

   .aramchan-mypage-side {
      display: none;
   }

   .aramchan-mypage .list_02 ul {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

.aramchan-mypage .smb_my_tit a {
   color: #1a1a1a !important;
   font-size: 13.5px;
   font-weight: 600;
   text-decoration: none;
}

.aramchan-mypage .smb_my_date {
   color: #9a9a9a;
   font-size: 14px;
   margin-top: 4px;
}

@media(max-width:740px) {
   .aramchan-mypage {
      grid-template-columns: minmax(0, 1fr);
      width: 100%;
      min-width: 0;
   }

   .aramchan-mypage-main {
      width: 100%;
      min-width: 0;
   }

   .aramchan-ord-stepper {
      display: none;
   }
}

/* 푸터 - 어두운 톤 → 화이트 */
#ft,
.ft_wr {
   background: #f7f9fb !important;
   color: #6d6d6d !important;
   border-top: 1px solid #e5e3dc !important;
}

#ft a {
   color: #6d6d6d !important;
}

/* ============================================================
   마이페이지 - 주문내역 전체(카드형) / 주문상세내역
   design/order_list_mockup.html, design/order_detail_mockup.html 확정본을 그대로 이식.
   ============================================================ */

/* ----- 주문내역 카드 (마이페이지2 안의 리스트) ----- */
.aramchan-ord-card {
   border: 1px solid #e5e3dc;
   margin-bottom: 20px;
}

.aramchan-ord-card-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
   background: #f5f5f5;
   border-bottom: 1px solid #e5e3dc;
   flex-wrap: wrap;
   gap: 10px;
}

.aramchan-ord-when {
   font-size: 13.5px;
   color: #6d6d6d;
}

.aramchan-ord-when b {
   color: #1a1a1a;
   font-weight: 700;
   margin-right: 10px;
}

.aramchan-ord-when a {
   color: #1a1a1a;
   text-decoration: underline;
   text-underline-offset: 2px;
}

.aramchan-ord-stepper {
   display: flex;
   align-items: flex-start;
   padding: 26px 32px 22px;
}

.aramchan-ord-step {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   width: 110px;
   flex: none;
}

.aramchan-ord-step .dot {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   background: #d5d2c7;
}

.aramchan-ord-step.done .dot {
   background: #92795f;
}

.aramchan-ord-step.current .dot {
   background: #92795f;
   box-shadow: 0 0 0 4px #92795f26;
}

.aramchan-ord-step .lbl {
   font-size: 14px;
   color: #9a9a9a;
}

.aramchan-ord-step.done .lbl,
.aramchan-ord-step.current .lbl {
   color: #1a1a1a;
   font-weight: 700;
}

.aramchan-ord-step-line {
   flex: 1;
   height: 1px;
   background: #d5d2c7;
   margin-top: 5px;
}

.aramchan-ord-step-line.done {
   background: #92795f;
}

.aramchan-ord-cancel-banner {
   margin: 20px 32px;
   padding: 14px 18px;
   background: #fbe9e9;
   color: #c23b3b;
   font-size: 13.5px;
   font-weight: 700;
   text-align: center;
}

.aramchan-ord-items {
   padding: 4px 20px 20px;
}

.aramchan-ord-item {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 14px 0;
   border-top: 1px solid #f0efe9;
}

.aramchan-ord-item:first-child {
   border-top: none;
}

.aramchan-ord-item-thumb {
   width: 64px;
   height: 64px;
   flex: none;
   background: #f1eee7;
   overflow: hidden;
}

.aramchan-ord-item-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.aramchan-ord-item-info {
   flex: 1;
   min-width: 0;
}

.aramchan-ord-item-name {
   font-size: 14.5px;
   font-weight: 600;
   color: #1a1a1a;
}

.aramchan-ord-item-qty {
   font-size: 12.5px;
   color: #9a9a9a;
   margin-top: 3px;
}

.aramchan-ord-item-price {
   font-size: 14.5px;
   font-weight: 700;
   flex: none;
}

.aramchan-ord-card-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
   border-top: 1px solid #e5e3dc;
   flex-wrap: wrap;
   gap: 12px;
}

.aramchan-ord-total {
   font-size: 13.5px;
   color: #6d6d6d;
}

.aramchan-ord-total b {
   color: #1a1a1a;
   font-size: 16px;
   margin-left: 6px;
}

.aramchan-ord-btn {
   padding: 9px 18px;
   border: 1px solid #d5d2c7;
   font-size: 14px;
   color: #6d6d6d;
   background: #fff;
   text-decoration: none;
   display: inline-block;
}

.aramchan-ord-btn:hover {
   border-color: #1a1a1a;
   color: #1a1a1a;
}

.aramchan-ord-btn.primary {
   background: var(--brand-primary);
   border-color: var(--brand-primary);
   color: #fff;
}

.aramchan-ord-btn.primary:hover {
   background: var(--brand-primary-dark);
}

/* ----- 주문상세내역 (마이페이지2 안, order_detail) ----- */
.aramchan-od-no-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 22px;
   border: 1px solid #e5e3dc;
   background: #f5f5f5;
   margin-bottom: 24px;
   flex-wrap: wrap;
   gap: 10px;
}

.aramchan-od-no-bar .no {
   font-size: 15px;
}

.aramchan-od-no-bar .no b {
   margin-left: 6px;
   color: #92795f;
}

.aramchan-od-legend-btn {
   padding: 8px 14px;
   font-size: 12.5px;
   border: 1px solid #d5d2c7;
   background: #fff;
   color: #6d6d6d;
}

.aramchan-od-legend-btn:hover {
   border-color: #1a1a1a;
   color: #1a1a1a;
}

.aramchan-od-legend {
   display: none;
   margin: -10px 0 24px;
   padding: 16px 20px;
   border: 1px solid #e5e3dc;
   background: #fbfaf7;
   font-size: 14px;
   color: #6d6d6d;
}

.aramchan-od-legend dl {
   margin: 0;
   display: grid;
   grid-template-columns: 60px 1fr;
   row-gap: 6px;
}

.aramchan-od-legend dt {
   font-weight: 700;
   color: #1a1a1a;
}

.aramchan-od-legend dd {
   margin: 0;
}

.aramchan-od-cancel-banner {
   padding: 14px 18px;
   background: #fbe9e9;
   color: #c23b3b;
   font-size: 13.5px;
   font-weight: 700;
   text-align: center;
   margin-bottom: 24px;
}

.aramchan-od-items {
   border: 1px solid #e5e3dc;
   margin-bottom: 32px;
}

/* 상품 목록 - 썸네일+상품명+수량/가격/포인트/배송비/상태를 헤더와 같은 컬럼 폭으로 한 줄에 정렬
   (예전엔 상품명 줄과 옵션 데이터 줄이 분리돼서 세로로 늘어지고 헤더랑 안 맞아 보였음 - 요청으로 수정) */
.aramchan-od-item-head {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 12px 20px;
   background: #f5f5f5;
   font-size: 12.5px;
   color: #9a9a9a;
   border-bottom: 1px solid #e5e3dc;
}

.aramchan-od-item-head .thumb-sp {
   width: 56px;
   flex: none;
}

.aramchan-od-item-head .sp {
   flex: 1;
}

.aramchan-od-item-head .w-qty {
   flex: none;
   width: 60px;
   text-align: center;
}

.aramchan-od-item-head .w-price {
   flex: none;
   width: 90px;
   text-align: right;
}

.aramchan-od-item-head .w-pt {
   flex: none;
   width: 70px;
   text-align: right;
}

.aramchan-od-item-head .w-sd {
   flex: none;
   width: 50px;
   text-align: center;
}

.aramchan-od-item-head .w-badge {
   flex: none;
   width: 60px;
   text-align: right;
}

.aramchan-od-item-group {
   border-top: 1px solid #f0efe9;
}

.aramchan-od-item-group:first-child {
   border-top: none;
}

.aramchan-od-row-item {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 14px 20px;
}

.aramchan-od-row-item+.aramchan-od-row-item {
   padding-top: 10px;
}

.aramchan-od-row-item .thumb-col {
   width: 56px;
   height: 56px;
   flex: none;
   background: #f1eee7;
   overflow: hidden;
}

.aramchan-od-row-item .thumb-col img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.aramchan-od-row-item .name-col {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
}

.aramchan-od-row-item .name-col .nm {
   font-size: 14.5px;
   font-weight: 600;
   color: #1a1a1a;
   text-decoration: none;
}

.aramchan-od-row-item .name-col .opt {
   font-size: 14px;
   color: #6d6d6d;
   margin-top: 2px;
}

.aramchan-od-row-item .w-qty {
   flex: none;
   width: 60px;
   text-align: center;
   font-size: 14px;
}

.aramchan-od-row-item .w-price {
   flex: none;
   width: 90px;
   text-align: right;
   font-size: 14px;
   font-weight: 600;
}

.aramchan-od-row-item .w-pt {
   flex: none;
   width: 70px;
   text-align: right;
   font-size: 14px;
   color: #9a9a9a;
}

.aramchan-od-row-item .w-sd {
   flex: none;
   width: 50px;
   text-align: center;
   font-size: 14px;
   color: #9a9a9a;
}

.aramchan-od-row-item .w-badge {
   flex: none;
   width: 60px;
   text-align: right;
}

/* 마이페이지2 주문상세(mypage.php?view=order_detail) - 고정폭 컬럼(썸네일+수량+판매가+포인트+
   배송비+상태) 합이 모바일 폭보다 커서 상품명 칸이 0으로 눌려 세로로 쪼개지던 문제 -
   orderinquiryview.php와 동일하게 가로스크롤로 처리 */
@media(max-width:640px) {
   .aramchan-od-items {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }

   .aramchan-od-item-head,
   .aramchan-od-row-item {
      min-width: 560px;
   }
}

.aramchan-od-badge {
   display: inline-block;
   padding: 3px 9px;
   font-size: 14px;
   border-radius: 2px;
}

.aramchan-od-badge.st-주문 {
   background: #edfbde;
   color: #8cc152;
}

.aramchan-od-badge.st-입금 {
   background: #84c93a;
   color: #fff;
}

.aramchan-od-badge.st-준비 {
   background: #e2f6f2;
   color: #16b494;
}

.aramchan-od-badge.st-배송 {
   background: #e2eaf6;
   color: #3a8afd;
}

.aramchan-od-badge.st-완료 {
   background: #3a8afd;
   color: #fff;
}

.aramchan-od-badge.st-취소 {
   background: #fbe9e9;
   color: #c23b3b;
}

.aramchan-od-grid {
   display: grid;
   grid-template-columns: 1fr 320px;
   gap: 24px;
   align-items: start;
}

.aramchan-od-box {
   border: 1px solid #e5e3dc;
   margin-bottom: 20px;
}

.aramchan-od-box h3 {
   margin: 0;
   padding: 14px 20px;
   font-size: 14.5px;
   font-weight: 700;
   border-bottom: 1px solid #e5e3dc;
   background: #f5f5f5;
}

.aramchan-od-box dl {
   margin: 0;
   padding: 16px 20px;
   display: grid;
   grid-template-columns: 88px 1fr;
   row-gap: 12px;
   column-gap: 12px;
}

.aramchan-od-box dt {
   font-size: 14px;
   color: #9a9a9a;
}

.aramchan-od-box dd {
   margin: 0;
   font-size: 13.5px;
   color: #1a1a1a;
}

.aramchan-od-box dd a {
   color: #3a6fb5;
}

.aramchan-od-box .empty-note {
   padding: 24px 20px;
   text-align: center;
   color: #9a9a9a;
   font-size: 14px;
}

.aramchan-od-summary {
   border: 1px solid #e5e3dc;
   padding: 20px;
}

.aramchan-od-summary .row {
   display: flex;
   justify-content: space-between;
   font-size: 13.5px;
   color: #6d6d6d;
   padding: 7px 0;
}

.aramchan-od-summary .row b {
   color: #1a1a1a;
   font-weight: 600;
}

.aramchan-od-summary hr {
   border: none;
   border-top: 1px solid #e5e3dc;
   margin: 8px 0;
}

.aramchan-od-summary .sub {
   padding: 9px 12px;
   background: #f5f5f5;
   font-size: 12.5px;
   color: #6d6d6d;
   display: flex;
   justify-content: space-between;
   margin-top: 6px;
}

.aramchan-od-summary .total {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #f1eee7;
   padding: 12px 14px;
   margin-top: 10px;
   font-size: 14px;
   font-weight: 700;
}

.aramchan-od-summary .total b {
   font-size: 19px;
   color: #92795f;
}

.aramchan-od-cancel-box {
   border: 1px solid #e5e3dc;
   padding: 20px;
   margin-top: 20px;
}

.aramchan-od-cancel-box h4 {
   margin: 0 0 12px;
   font-size: 14px;
}

.aramchan-od-cancel-box .done-note {
   color: #9a9a9a;
   font-size: 14px;
   margin: 0;
}

.aramchan-od-cancel-btn {
   display: block;
   width: 100%;
   text-align: center;
   padding: 12px 0;
   border: 1px solid #d5d2c7;
   background: #fff;
   color: #6d6d6d;
   font-size: 14px;
   cursor: pointer;
   font-family: inherit;
}

.aramchan-od-cancel-btn:hover {
   border-color: #c23b3b;
   color: #c23b3b;
}

/* 취소사유는 버튼 눌러서 펼치는 게 아니라 처음부터 입력창이 보이고, 그 아래 취소 확정 버튼이
   오는 구조로 변경(요청: "버튼 위에 사유를 입력하게") */
.aramchan-od-cancel-form {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.aramchan-od-cancel-form label {
   font-size: 12.5px;
   color: #9a9a9a;
}

.aramchan-od-cancel-form input[type=text] {
   padding: 10px 12px;
   border: 1px solid #d5d2c7;
   font-size: 13.5px;
   font-family: inherit;
}

.aramchan-od-cancel-form button[type=submit] {
   width: 100%;
   text-align: center;
   padding: 12px 0;
   border: 1px solid var(--brand-primary);
   background: var(--brand-primary);
   color: #fff;
   font-size: 14px;
   cursor: pointer;
   font-family: inherit;
}

.aramchan-od-cancel-form button[type=submit]:hover {
   background: var(--brand-primary-dark);
}

@media(max-width:860px) {
   .aramchan-od-grid {
      grid-template-columns: 1fr;
   }
}

/* ============================================================
   마이페이지 - 포인트 / 쿠폰 / 쪽지함
   design/mypage_point_mockup.html, mypage_coupon_mockup.html, mypage_memo_mockup.html 확정본.
   ============================================================ */

/* ----- 포인트 ----- */
.aramchan-pt-total {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 22px 24px;
   border: 1px solid #e5e3dc;
   background: #f1eee7;
   margin-bottom: 28px;
}

.aramchan-pt-total span {
   font-size: 14.5px;
   color: #6d6d6d;
}

.aramchan-pt-total strong {
   font-size: 26px;
   color: #92795f;
}

.aramchan-pt-total strong em {
   font-style: normal;
   font-size: 15px;
   margin-left: 2px;
}

.aramchan-pt-list {
   border: 1px solid #e5e3dc;
}

.aramchan-pt-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 22px;
   border-top: 1px solid #f0efe9;
   gap: 16px;
}

.aramchan-pt-item:first-child {
   border-top: none;
}

.aramchan-pt-item .tit {
   font-size: 14.5px;
   font-weight: 600;
   color: #1a1a1a;
}

.aramchan-pt-item .date {
   font-size: 12.5px;
   color: #9a9a9a;
   margin-top: 4px;
}

.aramchan-pt-item .date.expired {
   color: #c23b3b;
}

.aramchan-pt-item .num {
   flex: none;
   font-size: 16px;
   font-weight: 700;
}

.aramchan-pt-item .num.plus {
   color: #2f6b3f;
}

.aramchan-pt-item .num.minus {
   color: #c23b3b;
}

.aramchan-pt-sub {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 22px;
   background: #f5f5f5;
   border-top: 1px solid #e5e3dc;
   font-size: 14px;
   font-weight: 700;
}

.aramchan-pt-sub .nums {
   display: flex;
   gap: 16px;
}

.aramchan-pt-sub .plus {
   color: #2f6b3f;
}

.aramchan-pt-sub .minus {
   color: #c23b3b;
}

/* ----- 쿠폰 ----- */
.aramchan-cp-grid {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.aramchan-cp-card {
   display: flex;
   align-items: center;
   border: 1px solid #e5e3dc;
   position: relative;
   overflow: hidden;
}

.aramchan-cp-card::before {
   content: '';
   position: absolute;
   left: 132px;
   top: 0;
   bottom: 0;
   width: 1px;
   border-left: 1px dashed #d5d2c7;
}

.aramchan-cp-card .price {
   flex: 0 0 132px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px 8px;
   background: #f1eee7;
   font-size: 22px;
   font-weight: 800;
   color: #92795f;
   text-align: center;
}

.aramchan-cp-card .body {
   flex: 1;
   padding: 18px 22px;
   min-width: 0;
}

.aramchan-cp-card .tit {
   font-size: 15px;
   font-weight: 700;
   color: #1a1a1a;
}

.aramchan-cp-card .target {
   font-size: 14px;
   color: #6d6d6d;
   margin-top: 6px;
}

.aramchan-cp-card .date {
   font-size: 12.5px;
   color: #9a9a9a;
   margin-top: 4px;
}

/* ----- 쪽지함 ----- */
.aramchan-mm-tabs {
   display: flex;
   gap: 8px;
   margin-bottom: 20px;
}

.aramchan-mm-tabs a {
   padding: 10px 20px;
   border: 1px solid #d5d2c7;
   font-size: 14px;
   color: #6d6d6d;
}

.aramchan-mm-tabs a.active {
   background: var(--brand-primary);
   border-color: var(--brand-primary);
   color: #fff;
   font-weight: 700;
}

.aramchan-mm-tabs a:last-child {
   margin-left: auto;
}

.aramchan-mm-list {
   border: 1px solid #e5e3dc;
}

.aramchan-mm-item {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 16px 20px;
   border-top: 1px solid #f0efe9;
}

.aramchan-mm-item:first-child {
   border-top: none;
}

.aramchan-mm-item.unread {
   background: #fbfaf7;
}

.aramchan-mm-item .avatar {
   position: relative;
   flex: none;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   overflow: hidden;
   background: #f1eee7;
}

.aramchan-mm-item .avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
}

.aramchan-mm-item .avatar .dot {
   position: absolute;
   top: -2px;
   right: -2px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #c23b3b;
   border: 2px solid #fff;
}

.aramchan-mm-item .body {
   flex: 1;
   min-width: 0;
}

.aramchan-mm-item .name {
   font-size: 14px;
   font-weight: 700;
   color: #1a1a1a;
}

.aramchan-mm-item .name .date {
   font-size: 14px;
   color: #9a9a9a;
   font-weight: 400;
   margin-left: 8px;
}

.aramchan-mm-item .preview {
   display: block;
   font-size: 13.5px;
   color: #6d6d6d;
   margin-top: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   text-decoration: none;
}

.aramchan-mm-item .del {
   flex: none;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #9a9a9a;
   border: 1px solid #e5e3dc;
   text-decoration: none;
}

.aramchan-mm-item .del:hover {
   color: #c23b3b;
   border-color: #c23b3b;
}

.aramchan-mm-notice {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 20px;
   padding: 13px 18px;
   background: #fbe9e9;
   color: #c23b3b;
   font-size: 14px;
}

/* ----- 쪽지 보내기 폼 ----- */
.aramchan-mm-form {
   border: 1px solid #e5e3dc;
   padding: 24px;
}

.aramchan-mm-form .fld {
   margin-bottom: 20px;
}

.aramchan-mm-form .fld:last-of-type {
   margin-bottom: 0;
}

.aramchan-mm-form label {
   display: block;
   font-size: 14px;
   font-weight: 700;
   color: #1a1a1a;
   margin-bottom: 8px;
}

.aramchan-mm-form input[type=text],
.aramchan-mm-form input[type=password],
.aramchan-mm-form textarea {
   width: 100%;
   padding: 11px 14px;
   border: 1px solid #d5d2c7;
   font-size: 14px;
   font-family: inherit;
   color: #1a1a1a;
}

.aramchan-mm-form input[readonly] {
   background: #f0efe9;
   color: #9a9a9a;
   cursor: not-allowed;
}

.aramchan-mm-form textarea {
   resize: vertical;
   line-height: 1.6;
}

.aramchan-mm-form .hint {
   margin: 8px 0 0;
   font-size: 12.5px;
   color: #9a9a9a;
   line-height: 1.6;
}

.aramchan-mm-form-btns {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
   margin-top: 24px;
   padding-top: 20px;
   border-top: 1px solid #e5e3dc;
}

/* .aramchan-btn 기본값(footer.css)이 font-size:17px/padding:12px 22px로 사이트 전역 큰 버튼
   기준이라, 마이페이지2 안(13~14px 컨벤션)에선 사이드바 actbtns와 동일하게 축소해서 씀 */
.aramchan-mm-form-btns .aramchan-btn {
   font-size: 14px !important;
   padding: 10px 20px !important;
}

/* ----- 장바구니(cart.php) - 표 대신 카드 리스트 + 우측 고정 요약 사이드바 -----
   디자인 시안(design/cart_page_mockup.html) 반영. 원본 name/id는 그대로 두고 마크업만 재구성. */
.aramchan-cart-wrap {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 24px 100px;
}

.aramchan-cart-layout {
   display: grid;
   grid-template-columns: 1fr 380px;
   gap: 48px;
   align-items: start;
}

.aramchan-cart-side {
   position: sticky;
   top: 24px;
}

@media(max-width:900px) {
   .aramchan-cart-layout {
      grid-template-columns: 1fr;
   }

   .aramchan-cart-side {
      position: static;
   }
}

.aramchan-cart-selectbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 16px;
   border-bottom: 1px solid #1a1a1a;
   margin-bottom: 8px;
}

.aramchan-cart-selectbar label {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14.5px;
   font-weight: 700;
   cursor: pointer;
}

.aramchan-cart-selectbar input[type=checkbox] {
   position: static;
   width: 18px;
   height: 18px;
   opacity: 1;
   z-index: auto;
   overflow: visible;
   accent-color: var(--brand-bright, #3fa860);
}

.aramchan-cart-selectbar-actions {
   display: flex;
   gap: 8px;
}

.aramchan-cart-selectbar-actions button {
   padding: 8px 16px;
   font-size: 14px;
   border: 1px solid #d5d2c7;
   background: #fff;
   color: #6d6d6d;
   transition: border-color .2s ease, color .2s ease;
}

.aramchan-cart-selectbar-actions button:hover {
   border-color: #1a1a1a;
   color: #1a1a1a;
}

.aramchan-cart-row {
   display: flex;
   align-items: center;
   gap: 18px;
   padding: 22px 0;
   border-bottom: 1px solid #f0efe9;
}

.aramchan-cart-row .chk input {
   position: static;
   width: 18px;
   height: 18px;
   opacity: 1;
   z-index: auto;
   overflow: visible;
   accent-color: var(--brand-bright, #3fa860);
}

#sod_bsk_list #mod_option_frm h2 {
   padding-right: 56px;
}

#sod_bsk_list #mod_option_close {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 9px;
   right: 12px;
   z-index: 20;
   width: 32px;
   height: 32px;
   padding: 0;
   border: 0;
   background: #fff;
   color: #1a1a1a;
   font-size: 0;
   line-height: 1;
   overflow: visible;
}

/* 폰트어썸 아이콘(<i class="fa fa-times">)은 이 페이지에 font-awesome CSS 자체가 안
   실려있어서(cart.php에 링크 없음) 안 보이는 게 정상 - 대신 이 가상요소로 "×"를 직접 그림.
   예전엔 색이 연한 회색(#777)이라 카드 배경색이랑 거의 구분이 안 돼서 안 보이는 것처럼
   보였음 - 사이트 기본 잉크색으로 진하게 바꿈. */
#sod_bsk_list #mod_option_close::before {
   content: "\00d7";
   display: block;
   font-size: 28px;
   font-weight: 400;
   line-height: 1;
}

#sod_bsk_list #mod_option_close:hover {
   background: #f5f5f5;
   color: #1a1a1a;
}

/* 선택된 옵션 각 줄의 삭제(×) 버튼 - 위 닫기버튼과 같은 이유(font-awesome 미로딩)로
   안 보이던 것. 위치(position:absolute;right:0;top:0)는 default_shop.css 값 그대로 두고
   내용/색만 이 가상요소로 채운다. */
#sod_bsk_list #mod_option_frm .sit_opt_del {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   font-size: 0;
   background: #fff;
   color: #1a1a1a;
}

#sod_bsk_list #mod_option_frm .sit_opt_del::before {
   content: "\00d7";
   display: block;
   font-size: 20px;
   line-height: 1;
}

#sod_bsk_list #mod_option_frm .sit_opt_del:hover {
   color: #c0392b;
}

#sod_bsk_list #mod_option_frm .sit_qty_minus,
#sod_bsk_list #mod_option_frm .sit_qty_plus {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0;
}

#sod_bsk_list #mod_option_frm .qty_symbol {
   display: block;
   font-size: 16px;
   line-height: 1;
}

.aramchan-cart-row .thumb {
   flex: none;
   width: 84px;
   height: 84px;
   background: #f5f5f5;
   overflow: hidden;
}

.aramchan-cart-row .thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.aramchan-cart-row .info {
   flex: 1;
   min-width: 0;
}

.aramchan-cart-row .info .name {
   font-size: 15.5px;
   font-weight: 700;
   margin-bottom: 6px;
}

.aramchan-cart-row .info .name a {
   color: inherit;
}

.aramchan-cart-row .info .unit {
   font-size: 12.5px;
   color: #9a9a9a;
   margin: 0 0 8px;
}

.aramchan-cart-row .info .sod_opt {
   font-size: 12.5px;
   color: #9a9a9a;
   margin-bottom: 8px;
}

.aramchan-cart-row .aramchan-cart-optbtn {
   display: inline-block;
   font-size: 12.5px;
   color: #6d6d6d;
   background: #fff;
   padding: 7px 13px;
   border: 1px solid #d5d2c7;
   transition: border-color .2s ease, color .2s ease;
}

.aramchan-cart-row .aramchan-cart-optbtn:hover {
   border-color: #1a1a1a;
   color: #1a1a1a;
}

.aramchan-cart-row .meta {
   flex: none;
   display: flex;
   align-items: center;
   gap: 28px;
}

.aramchan-cart-row .qty-box {
   text-align: center;
   min-width: 60px;
}

.aramchan-cart-row .qty-box .lbl {
   font-size: 11.5px;
   color: #9a9a9a;
   margin-bottom: 4px;
}

.aramchan-cart-row .qty-box .val {
   font-size: 14px;
   font-weight: 700;
}

.aramchan-cart-row .price-box {
   text-align: right;
   min-width: 110px;
}

.aramchan-cart-row .price-box .val {
   font-size: 17px;
   font-weight: 800;
   color: #1a1a1a;
}

.aramchan-cart-row .price-box .ship {
   font-size: 11.5px;
   color: #9a9a9a;
   margin-top: 3px;
}

.aramchan-cart-row .price-box .ship.free {
   color: var(--brand-primary);
   font-weight: 700;
}

.aramchan-cart-empty {
   padding: 100px 0;
   text-align: center;
   color: #9a9a9a;
   font-size: 15px;
}

.aramchan-cart-summary {
   padding: 28px;
   background: #f9f8f6;
}

.aramchan-cart-summary h2 {
   margin: 0 0 18px;
   font-size: 16px;
   font-weight: 800;
}

.aramchan-cart-summary .row {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   font-size: 14.5px;
   color: #6d6d6d;
   padding: 6px 0;
}

.aramchan-cart-summary .row.total {
   border-top: 1px solid #d5d2c7;
   margin-top: 10px;
   padding-top: 16px;
   font-size: 15px;
   font-weight: 700;
   color: #1a1a1a;
}

.aramchan-cart-summary .row.total strong {
   display: block;
   font-size: 26px;
   color: var(--brand-primary);
   margin-top: 6px;
   text-align: right;
}

.aramchan-cart-actions {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-top: 20px;
}

.aramchan-cart-actions a,
.aramchan-cart-actions button {
   min-height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15.5px;
   font-weight: 700;
   border: 1px solid #1a1a1a;
   cursor: pointer;
   font-family: inherit;
   transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.aramchan-cart-actions .continue {
   background: #fff;
   color: #1a1a1a;
   border-color: #d5d2c7;
}

.aramchan-cart-actions .continue:hover {
   border-color: #1a1a1a;
}

.aramchan-cart-actions .order {
   background: var(--brand-primary);
   border-color: var(--brand-primary);
   color: #fff;
}

.aramchan-cart-actions .order:hover {
   background: var(--brand-primary-dark);
   border-color: var(--brand-primary-dark);
}

@media(max-width:700px) {
   .aramchan-cart-row {
      flex-wrap: wrap;
   }

   .aramchan-cart-row .meta {
      width: 100%;
      justify-content: space-between;
      padding-left: 102px;
   }
}

.aramchan-inquiry-list {
   /* border-top: 1px solid #222 */
}

.aramchan-inquiry-item {
   display: grid;
   grid-template-columns: 90px minmax(0, 1fr) 100px 80px;
   align-items: center;
   gap: 18px;
   padding: 22px 12px;
   border-bottom: 1px solid #e7e3db;
   color: #222
}

.aramchan-inquiry-item strong {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap
}

.aramchan-inquiry-category,
.aramchan-inquiry-item time {
   color: #8a847a;
   font-size: 14px
}

.aramchan-inquiry-status {
   font-size: 13px;
   text-align: center;
   color: #8a847a
}

.aramchan-inquiry-status.answered {
   color: var(--aramchan-green, #2f995b);
   font-weight: 700
}

.aramchan-inquiry-view {
   /* border-top: 1px solid #222 */
}

.aramchan-inquiry-view>header {
   padding: 24px 8px;
   border-bottom: 1px solid #e7e3db
}

.aramchan-inquiry-view h4 {
   margin: 8px 0;
   font-size: 22px
}

.aramchan-inquiry-view header span,
.aramchan-inquiry-view time {
   color: #8a847a;
   font-size: 14px
}

.aramchan-inquiry-content {
   min-height: 180px;
   padding: 36px 8px;
   line-height: 1.8
}

.aramchan-inquiry-attachments {
   margin: 0 8px 28px;
   padding: 18px 20px;
   border: 1px solid #e7e3db;
   background: #faf9f6
}

.aramchan-inquiry-attachments>strong {
   display: block;
   margin-bottom: 12px;
   font-size: 14px
}

.aramchan-inquiry-attachments ul {
   display: grid;
   gap: 10px;
   margin: 0;
   padding: 0;
   list-style: none
}

.aramchan-inquiry-attachments a {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   color: #333;
   text-decoration: underline;
   text-underline-offset: 3px
}

.aramchan-inquiry-attachments a:hover {
   color: var(--aramchan-green, #2f995b)
}

.aramchan-inquiry-attachments img {
   width: 88px;
   height: 68px;
   object-fit: cover;
   border: 1px solid #e1ddd4
}

.aramchan-inquiry-answer {
   padding: 28px;
   background: #f5f7f3;
   line-height: 1.8
}

.aramchan-inquiry-answer strong {
   display: block;
   margin-bottom: 12px;
   color: var(--aramchan-green, #2f995b)
}

@media(max-width:900px) {
   .aramchan-inquiry-item {
      grid-template-columns: 1fr auto;
      gap: 7px 12px;
      padding: 18px 0
   }

   .aramchan-inquiry-category {
      grid-column: 1
   }

   .aramchan-inquiry-item strong {
      grid-column: 1;
      grid-row: 2
   }

   .aramchan-inquiry-item time {
      grid-column: 1;
      grid-row: 3
   }

   .aramchan-inquiry-status {
      grid-column: 2;
      grid-row: 1/4
   }

   .aramchan-inquiry-view h4 {
      font-size: 18px
   }

   .aramchan-inquiry-content {
      min-height: 140px;
      padding: 26px 0
   }

   .aramchan-inquiry-attachments {
      margin: 0 0 22px;
      padding: 15px
   }

   .aramchan-inquiry-answer {
      padding: 22px 18px
   }
}

.aramchan-faq-categories {
   display: flex;
   gap: 8px;
   overflow-x: auto;
   margin-bottom: 28px;
   padding-bottom: 4px
}

.aramchan-faq-categories a {
   flex: none;
   padding: 10px 18px;
   border: 1px solid #ddd8cf;
   color: #666
}

.aramchan-faq-categories a.active {
   border-color: var(--aramchan-green, #2f995b);
   background: var(--aramchan-green, #2f995b);
   color: #fff
}

.aramchan-faq-list {
   border-top: 1px solid #222
}

.aramchan-faq-item {
   border-bottom: 1px solid #e7e3db
}

.aramchan-faq-item summary {
   display: flex;
   align-items: center;
   gap: 18px;
   padding: 22px 10px;
   cursor: pointer;
   list-style: none
}

.aramchan-faq-item summary::-webkit-details-marker {
   display: none
}

.aramchan-faq-item summary span,
.aramchan-faq-item>div>span {
   color: var(--aramchan-green, #2f995b);
   font-weight: 800
}

.aramchan-faq-item summary strong {
   font-size: 16px
}

.aramchan-faq-item>div {
   display: flex;
   gap: 18px;
   padding: 24px 10px;
   background: #f5f7f3;
   line-height: 1.8
}

.aramchan-faq-item>div>div {
   min-width: 0
}

@media(max-width:900px) {
   .aramchan-faq-categories {
      margin-bottom: 20px
   }

   .aramchan-faq-categories a {
      padding: 8px 14px;
      font-size: 13px
   }

   .aramchan-faq-item summary {
      gap: 12px;
      padding: 18px 4px
   }

   .aramchan-faq-item summary strong {
      font-size: 15px
   }

   .aramchan-faq-item>div {
      gap: 12px;
      padding: 20px 14px
   }
}

@media(min-width:901px) {

   .aramchan-mypage-text-subj,
   .aramchan-mypage-text-score {
      font-size: 16px
   }

   .aramchan-mypage-text-subj small {
      font-size: 14px
   }
}

@media(min-width:901px) {

   .aramchan-mypage-text-list .aramchan-mypage-text-subj,
   .aramchan-mypage-text-list .aramchan-mypage-text-subj small,
   .aramchan-mypage-text-list .aramchan-mypage-text-date {
      font-size: 16px !important
   }
}

.aramchan-inquiry-form {
   display: grid;
   gap: 24px;
   padding: 30px;
   border: 1px solid #e5e3dc;
   background: #fff
}

.aramchan-inquiry-form label {
   display: block
}

.aramchan-inquiry-form label>span {
   display: block;
   margin-bottom: 9px;
   color: #333;
   font-size: 15px;
   font-weight: 700
}

.aramchan-inquiry-form label>span b {
   color: #2f9859
}

.aramchan-inquiry-form input[type=text],
.aramchan-inquiry-form input[type=email],
.aramchan-inquiry-form input[type=tel],
.aramchan-inquiry-form select,
.aramchan-inquiry-form textarea {
   width: 100%;
   border: 1px solid #d8d5cc;
   background: #fff;
   color: #222;
   font: inherit
}

.aramchan-inquiry-form input[type=text],
.aramchan-inquiry-form input[type=email],
.aramchan-inquiry-form input[type=tel],
.aramchan-inquiry-form select {
   height: 50px;
   padding: 0 15px
}

.aramchan-inquiry-form textarea {
   min-height: 260px;
   padding: 16px;
   line-height: 1.7;
   resize: vertical
}

.aramchan-inquiry-fields {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
}

.aramchan-inquiry-receive {
   display: flex;
   gap: 24px;
   flex-wrap: wrap
}

.aramchan-inquiry-receive label {
   display: flex;
   align-items: center;
   gap: 8px
}

.aramchan-inquiry-receive label>span {
   margin: 0;
   font-weight: 500
}

.aramchan-inquiry-files {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px 16px;
   padding: 20px;
   background: #f7f7f4
}

.aramchan-inquiry-files input {
   width: 100%
}

.aramchan-inquiry-files p {
   grid-column: 1/-1;
   margin: 0;
   color: #888;
   font-size: 13px
}

.aramchan-inquiry-actions {
   display: flex;
   justify-content: flex-end;
   gap: 10px
}

.aramchan-inquiry-actions a,
.aramchan-inquiry-actions button {
   display: inline-flex;
   min-width: 120px;
   height: 48px;
   align-items: center;
   justify-content: center;
   border: 1px solid #d8d5cc;
   background: #fff;
   color: #333;
   font-weight: 700
}

.aramchan-inquiry-actions button {
   border-color: #2f9859;
   background: #2f9859;
   color: #fff
}

@media(max-width:760px) {
   .aramchan-inquiry-form {
      gap: 20px;
      padding: 22px 0;
      border: 0;
      border-top: 1px solid #e5e3dc
   }

   .aramchan-inquiry-fields,
   .aramchan-inquiry-files {
      grid-template-columns: 1fr
   }

   .aramchan-inquiry-form textarea {
      min-height: 220px
   }

   .aramchan-inquiry-actions {
      display: grid;
      grid-template-columns: 1fr 1fr
   }

   .aramchan-inquiry-actions a,
   .aramchan-inquiry-actions button {
      width: 100%;
      min-width: 0
   }
}

.aramchan-personalpay-form #forderform {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 360px;
   gap: 30px;
   align-items: start
}

.aramchan-personalpay-form .sod_left,
.aramchan-personalpay-form .sod_right {
   overflow: hidden;
   float: none;
   width: auto;
   height: auto !important;
   min-height: 0 !important;
   margin: 0;
   border: 1px solid #e5e3dc;
   border-radius: 10px;
   background: #fff;
   box-shadow: 0 10px 30px rgba(25, 45, 34, .045)
}

.aramchan-personalpay-form h2 {
   margin: 0;
   padding: 22px 24px;
   border-bottom: 1px solid #e5e3dc;
   background: #fff;
   font-size: 19px
}

.aramchan-personalpay-form .tbl_frm01,
.aramchan-personalpay-form .odf_tbl {
   padding: 12px 10px 20px
}

.aramchan-personalpay-form table {
   width: 100%;
   border-collapse: collapse
}

.aramchan-personalpay-form th,
.aramchan-personalpay-form td {
   padding: 0 20px 16px;
   border: 0;
   background: #fff !important;
   text-align: left
}

.aramchan-personalpay-form th {
   padding-top: 16px;
   padding-bottom: 6px;
   color: #777168;
   font-size: 13px;
   font-weight: 600
}

.aramchan-personalpay-form td {
   color: #1a1a1a;
   font-size: 15px;
   line-height: 1.65
}

.aramchan-personalpay-form .frm_input {
   width: 100%;
   height: 48px;
   padding: 0 14px;
   border: 1px solid #d8d5cc;
   border-radius: 5px;
   background: #fff;
   font: 500 15px 'Pretendard', sans-serif
}

.aramchan-personalpay-form .frm_input:focus,
.aramchan-personalpay-form #pp_deposit_name:focus {
   border-color: var(--brand-primary, #2f9859);
   outline: 3px solid rgba(47, 152, 89, .1)
}

.aramchan-personalpay-form #personal_pay {
   padding-bottom: 20px
}

.aramchan-personalpay-form #sod_frm_paysel {
   margin: 0;
   padding: 20px;
   border: 0
}

.aramchan-personalpay-form #sod_frm_paysel legend {
   position: static;
   width: auto;
   height: auto;
   margin: 0 0 12px;
   clip: auto;
   overflow: visible;
   color: #777168;
   font-size: 13px;
   font-weight: 600
}

.aramchan-personalpay-form .pay_way {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px
}

.aramchan-personalpay-form .pay_way label {
   display: flex;
   min-height: 46px;
   padding: 0 12px;
   align-items: center;
   border: 1px solid #e5e3dc;
   border-radius: 5px;
   background: #fff;
   cursor: pointer
}

.aramchan-personalpay-form .pay_way input:checked + label {
   border-color: var(--brand-primary, #2f9859);
   background: #f3f7f2;
   color: var(--brand-primary, #2f9859);
   font-weight: 700
}

.aramchan-personalpay-form #pp_settle_bank_info {
   margin-top: 16px;
   padding: 16px;
   border-radius: 6px;
   background: #f7f7f4;
   line-height: 1.6
}

.aramchan-personalpay-form #sod_frm_paysel:has(#pp_settle_bank:checked) #pp_settle_bank_info {
   display: block !important
}

.aramchan-personalpay-form #pp_deposit_name {
   width: 100%;
   height: 44px;
   margin-top: 8px;
   padding: 0 12px;
   border: 1px solid #d8d5cc;
   border-radius: 5px
}

.aramchan-personalpay-form .sod_right .btn_submit {
   width: calc(100% - 40px);
   height: 50px;
   margin: 0 20px;
   border: 0;
   background: #2f9859;
   color: #fff;
   border-radius: 5px;
   font-weight: 700
}

.aramchan-personalpay-form .btn_cancel {
   display: flex;
   width: calc(100% - 40px);
   height: 46px;
   margin: 8px 20px 0;
   align-items: center;
   justify-content: center;
   border: 1px solid #d8d5cc;
   border-radius: 5px;
   background: #fff
}

@media(max-width:900px) {
   .aramchan-personalpay-form #forderform {
      grid-template-columns: 1fr;
      gap: 10px
   }

   .aramchan-personalpay-form .sod_left,
   .aramchan-personalpay-form .sod_right {
      border-radius: 8px
   }

   .aramchan-personalpay-form th,
   .aramchan-personalpay-form td {
      display: block;
      width: 100%;
      padding-right: 18px;
      padding-left: 18px
   }

   .aramchan-personalpay-form h2 {
      padding: 18px;
      font-size: 18px
   }

   .aramchan-personalpay-form .tbl_frm01,
   .aramchan-personalpay-form .odf_tbl {
      padding: 8px 0 14px
   }

   .aramchan-personalpay-form th {
      padding-top: 13px;
      padding-bottom: 5px
   }

   .aramchan-personalpay-form td {
      padding-bottom: 13px
   }

   .aramchan-personalpay-form tr {
      display: block;
      padding: 0
   }

   .aramchan-personalpay-form #m_pv_sod_frm {
      padding: 0;
      border: 0 !important
   }

   .aramchan-personalpay-form #m_sod_frm_orderer {
      margin: 0;
      border: 0 !important
   }

   .aramchan-personalpay-form .odf_tbl th,
   .aramchan-personalpay-form .odf_tbl td {
      display: block
   }

   .aramchan-personalpay-form #sod_frm_paysel {
      margin: 0;
      padding: 14px 18px
   }

   .aramchan-personalpay-form .pay_way {
      grid-template-columns: 1fr
   }

   .aramchan-personalpay-form .pay_way label {
      min-height: 40px;
      padding: 0;
      border: 0;
      background: transparent
   }

   .aramchan-personalpay-form #pp_settle_bank_info {
      margin-top: 8px;
      padding: 14px
   }

   .aramchan-personalpay-form #display_pay_button {
      margin: 0 !important;
      padding: 0 18px 18px !important;
      border: 0 !important;
      background: transparent !important
   }

   .aramchan-personalpay-form #display_pay_button .btn_submit,
   .aramchan-personalpay-form #display_pay_button .btn_cancel {
      display: flex;
      width: 100% !important;
      height: 48px;
      margin: 0 !important;
      padding: 0 !important;
      align-items: center;
      justify-content: center;
      line-height: 46px;
      font-size: 15px;
      font-weight: 700
   }

   .aramchan-personalpay-form #display_pay_button .btn_cancel {
      margin-top: 8px !important;
      border: 1px solid #d8d5cc !important;
      background: #fff !important;
      color: #333 !important
   }
}

.aramchan-ord-mobile-status {
   display: none;
}

@media(max-width:740px) {
   .aramchan-ord-stepper,
   .aramchan-ord-cancel-banner {
      display: none;
   }

   .aramchan-ord-mobile-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 14px 18px 4px;
      padding: 11px 14px;
      border-radius: 6px;
      background: #f3f7f2;
      color: #6d6d6d;
      font-size: 13px;
      line-height: 1;
   }

   .aramchan-ord-mobile-status strong {
      color: var(--brand-primary, #2f9859);
      font-size: 14px;
      font-weight: 700;
   }

   .aramchan-ord-mobile-status.status_06 {
      background: #fbe9e9;
   }

   .aramchan-ord-mobile-status.status_06 strong {
      color: #c23b3b;
   }
}

.aramchan-personalpay-result {
   max-width: 1040px !important;
}

.aramchan-personalpay-result #sod_fin {
   width: 100%;
   margin: 0;
}

.aramchan-personalpay-result #sod_fin_no {
   margin: 0 0 18px;
   padding: 18px 22px;
   border: 1px solid #dfe9df;
   border-radius: 8px;
   background: #f3f7f2;
   color: #6d6d6d;
   font-size: 14px;
}

.aramchan-personalpay-result #sod_fin_no strong {
   margin-left: 8px;
   color: var(--brand-primary, #2f9859);
}

.aramchan-personalpay-result #sod_fin_view,
.aramchan-personalpay-result #sod_fin_pay,
.aramchan-personalpay-result #sod_fin_tot {
   float: none;
   width: 100%;
   margin: 0;
}

.aramchan-personalpay-result #sod_fin_view > h2 {
   display: none;
}

.aramchan-personalpay-result #sod_fin_tot > h2 {
   position: static;
   width: auto;
   height: auto;
   margin: 0;
   clip: auto;
   overflow: visible;
}

.aramchan-personalpay-result #sod_fin_pay {
   overflow: hidden;
   border: 1px solid #e5e3dc;
   border-radius: 8px;
   background: #fff;
}

.aramchan-personalpay-result #sod_fin_pay > h3 {
   margin: 0;
   padding: 20px 24px;
   border-bottom: 1px solid #e5e3dc;
   font-size: 18px;
}

.aramchan-personalpay-result #sod_fin_pay table {
   width: 100%;
   border: 0;
   border-collapse: collapse;
}

.aramchan-personalpay-result #sod_fin_pay th,
.aramchan-personalpay-result #sod_fin_pay td {
   padding: 17px 22px;
   border: 0;
   border-bottom: 1px solid #f0efe9;
   background: #fff;
   font-size: 14px;
   text-align: left;
}

.aramchan-personalpay-result #sod_fin_pay th {
   width: 150px;
   color: #6d6d6d;
   font-weight: 600;
}

.aramchan-personalpay-result #sod_fin_tot {
   margin-top: 22px;
   padding: 24px;
   border-radius: 8px;
   background: #f7f7f4;
}

.aramchan-personalpay-result #sod_fin_tot > h2 {
   margin-bottom: 18px;
   font-size: 18px;
}

.aramchan-personalpay-result #sod_fin_tot ul {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1px;
   margin: 0;
   padding: 0;
   overflow: hidden;
   border-radius: 6px;
   background: #e5e3dc;
}

.aramchan-personalpay-result #sod_fin_tot li {
   display: flex;
   min-height: 82px;
   padding: 17px 18px;
   flex-direction: column;
   justify-content: center;
   gap: 8px;
   background: #fff;
   color: #6d6d6d;
   font-size: 13px;
}

.aramchan-personalpay-result #sod_fin_tot li strong {
   color: #1a1a1a;
   font-size: 21px;
}

.aramchan-personalpay-result #sod_fin_tot li:last-child strong {
   color: var(--brand-primary, #2f9859);
}

@media(max-width:740px) {
   .aramchan-personalpay-result #sod_fin_no {
      padding: 15px 16px;
   }

   .aramchan-personalpay-result #sod_fin_pay > h3 {
      padding: 18px;
   }

   .aramchan-personalpay-result #sod_fin_pay th,
   .aramchan-personalpay-result #sod_fin_pay td {
      display: block;
      width: 100%;
      padding: 0 18px;
   }

   .aramchan-personalpay-result #sod_fin_pay th {
      padding-top: 15px;
      padding-bottom: 5px;
      border-bottom: 0;
      font-size: 12px;
   }

   .aramchan-personalpay-result #sod_fin_pay td {
      padding-bottom: 15px;
   }

   .aramchan-personalpay-result #sod_fin_tot {
      padding: 18px;
   }

   .aramchan-personalpay-result #sod_fin_tot ul {
      grid-template-columns: 1fr;
   }

   .aramchan-personalpay-result #sod_fin_tot li {
      min-height: 0;
      padding: 14px 16px;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
   }

   .aramchan-personalpay-result #sod_fin_tot li strong {
      font-size: 18px;
   }
}