@charset "UTF-8"; /* rcbank 모바일 상품페이지 새 디자인 (2026-10-05) — html.rp2 일 때만. rp2 는 _header.htm head 에서 상품페이지에만 붙고, rcb_mview2.js 가 못 돌면 지운다(옛 화면으로 돌아감). 원본 시안 C:/claude/tools/design_impact/mph_mock2.js */ html.rp2 #header > #old-header-top, html.rp2 #header > #rcbmh, html.rp2 #rcb-float-cate, html.rp2 section#goodsview2 .left_list_btn {display:none !important;} html.rp2 #header {position:sticky; top:0; z-index:50; background:#fff;} html.rp2 .rp2-h {font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; background:#fff;} html.rp2 .rp2-row {display:flex; align-items:center; padding:4px 4px 4px 2px;} html.rp2 .rp2-row > a, html.rp2 .rp2-row > button {display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0; border:0; background:none; text-decoration:none; cursor:pointer;} html.rp2 .rp2-row .rp2-logo {flex:1; justify-content:flex-start; padding-left:2px;} html.rp2 .rp2-row .rp2-logo img {height:32px !important; width:auto !important; max-width:none !important; display:block;} html.rp2 .rp2-path {display:flex; align-items:center; gap:6px; overflow-x:auto; white-space:nowrap; padding:9px 14px; background:#46629e; scrollbar-width:none;} html.rp2 .rp2-path::-webkit-scrollbar {display:none;} html.rp2 .rp2-path a {color:#dbe4f5; font-size:13px; text-decoration:none; letter-spacing:-.2px;} html.rp2 .rp2-path a:last-child {color:#fff; font-weight:bold;} html.rp2 .rp2-path i {color:#a9badb; font-style:normal; font-size:12px;} html.rp2 .rp2-band {display:flex; align-items:stretch; background:#46629e;} html.rp2 .rp2-h {position:relative;} html.rp2 .rp2-tabs {position:absolute; left:0; right:0; top:100%; display:flex; background:#46629e; box-shadow:0 4px 10px rgba(29,43,79,.12); visibility:hidden; opacity:0; transform:translateY(-6px); transition:opacity .18s, transform .18s, visibility 0s .18s;} html.rp2 .rp2-h.rp2-tabs-on .rp2-tabs {visibility:visible; opacity:1; transform:none; transition:opacity .18s, transform .18s;} @media (prefers-reduced-motion: reduce) {html.rp2 .rp2-tabs, html.rp2 .rp2-h.rp2-tabs-on .rp2-tabs{transition:none;}} html.rp2 .rp2-tabs button {flex:1; margin:0; padding:11px 4px 9px 4px; border:0; border-bottom:3px solid transparent; background:none; color:#dbe4f5; font:bold 14px -apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; letter-spacing:-.3px; cursor:pointer;} html.rp2 .rp2-tabs button em {font-style:normal; font-weight:normal; color:#b9c8e6; margin-left:3px;} html.rp2 .rp2-tabs button.on {color:#fff; border-bottom-color:#ffd43b;} html.rp2 .rp2-crumb {display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; margin:8px 0 0 0; padding-top:16px; border-top:1px solid #eef1f6; font-size:12px; line-height:1.5;} html.rp2 .rp2-crumb .rp2-crumb-hd {margin-right:4px; padding:1px 7px; border-radius:4px; background:#eef2f9; color:#46629e; font-weight:bold; font-size:11px;} html.rp2 .rp2-crumb a {color:#6b7486; text-decoration:none;} html.rp2 .rp2-crumb a:last-of-type {color:#46629e; font-weight:bold;} html.rp2 .rp2-crumb i {color:#b5bdcc; font-style:normal;} html.rp2 .rp2-crumb .rp2-more-btn {margin-left:4px; padding:1px 8px; border:1px solid #cfd8ea; border-radius:10px; background:#f5f7fb; color:#46629e; font:bold 11px -apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;} html.rp2 .rp2-crumb-more {display:none; margin:0; padding:2px 10px; border:1px solid #e3e7ef; border-radius:6px; background:#f8f9fc;} html.rp2 .rp2-mopen > .rp2-crumb-more {display:block;} html.rp2 .rp2-mb {position:relative; overflow:hidden; display:flex; align-items:center; gap:10px; margin-top:4px; padding:10px 10px 10px 14px; border:1px solid #cfe3f7; border-radius:8px; background:#f4f9ff; color:#1a4d80; font-size:13px; line-height:1.45; text-decoration:none;} html.rp2 .rp2-mb-t {flex:1; min-width:0;} html.rp2 .rp2-mb-t .rp2-mb-l1, html.rp2 .rp2-mb-t small {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} html.rp2 .rp2-mb-t b {color:#e8423f; font-size:16px;} html.rp2 .rp2-mb-t small {margin-top:2px; color:#4a6a92; font-size:12px;} html.rp2 .rp2-mb-r {flex:0 0 auto; display:flex; flex-direction:column; align-items:stretch; gap:5px; text-align:center;} html.rp2 .rp2-mb-tag {padding:2px 8px; border-radius:4px; background:#e3ecf9; color:#46629e; font-weight:bold; font-size:11px; white-space:nowrap;} html.rp2 .rp2-mb-go {padding:6px 9px; border-radius:6px; background:#46629e; color:#fff; font-weight:bold; font-size:12px; white-space:nowrap;} html.rp2 .rp2-mb::after {content:""; position:absolute; top:0; bottom:0; left:-60%; width:50%; background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)); transform:skewX(-18deg); pointer-events:none;} html.rp2 .rp2-mb.rp2-shine::after {animation:rp2Shine 1.1s ease-out .25s 2;} @keyframes rp2Shine {to {left:130%;}} html.rp2 .rp2-strike {position:relative; transition:color .4s;} html.rp2 .rp2-strike::after {content:""; position:absolute; left:0; top:52%; height:2px; width:0; background:#e8423f; transition:width .45s ease-out;} html.rp2 section#goodsview2 .price-area .goods_price.rp2-strike.on {color:#9aa3b5 !important;} html.rp2 .rp2-strike.on::after {width:100%;} html.rp2 .rp2-mprice {display:inline-block; margin-left:8px; color:#e8423f; font-size:22px; font-weight:bold; letter-spacing:-.5px; opacity:0; transform:translateY(6px); transition:opacity .35s .35s, transform .35s .35s;} html.rp2 .rp2-mprice.on {opacity:1; transform:none;} html.rp2 .rp2-mprice em {font-style:normal; font-size:12px; margin-left:4px; padding:1px 5px; border-radius:3px; background:#e8423f; color:#fff; vertical-align:3px;} @media (prefers-reduced-motion: reduce) {html.rp2 .rp2-mb.rp2-shine::after{animation:none;}html.rp2 .rp2-strike::after, html.rp2 .rp2-mprice{transition:none;}} html.rp2 .rp2-crumb-more .rp2-more-hd {padding:6px 0 2px 0;} html.rp2 .rp2-crumb-more .rp2-more-ln {padding:6px 0;} html.rp2 .rp2-band .rp2-path {flex:1; min-width:0;} html.rp2 .rp2-more-btn {flex:0 0 auto; display:flex; align-items:center; gap:4px; margin:0; padding:0 12px; border:0; border-left:1px solid rgba(255,255,255,.22); background:#3a5288; color:#fff; font:bold 12px -apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; cursor:pointer;} html.rp2 .rp2-more-btn b {transition:transform .15s; display:inline-block;} html.rp2 .rp2-h.rp2-mopen .rp2-more-btn b {transform:rotate(180deg);} html.rp2 .rp2-more {display:none; background:#fff; border-bottom:1px solid #e3e7ef; box-shadow:0 6px 14px rgba(29,43,79,.08);} html.rp2 .rp2-h.rp2-mopen .rp2-more {display:block;} html.rp2 .rp2-more-hd {padding:10px 14px 4px 14px; color:#8a93a6; font-size:12px;} html.rp2 .rp2-more-ln {display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; padding:9px 14px; border-top:1px solid #f0f2f6; font-size:13px; line-height:1.5;} html.rp2 .rp2-more-ln a {color:#46586f; text-decoration:none;} html.rp2 .rp2-more-ln a:last-child {color:#1d2b4f; font-weight:bold;} html.rp2 .rp2-more-ln i {color:#b5bdcc; font-style:normal; font-size:12px;} html.rp2 .rp2-sch {display:none; padding:2px 12px 10px 12px;} html.rp2 .rp2-h.rp2-sopen .rp2-sch {display:block;} html.rp2 .rp2-sch form {margin:0;} html.rp2 .rp2-sch #search-box {display:flex !important; box-sizing:border-box; width:100% !important; margin:0 !important; padding:0 !important; border:2px solid #46629e !important; border-radius:6px !important; overflow:hidden; background:#fff !important; box-shadow:none !important;} html.rp2 .rp2-sch #search-box input[type=text], html.rp2 .rp2-sch #search-box input[type=search] {flex:1; min-width:0; margin:0 !important; padding:9px 12px !important; border:0 !important; background:transparent !important; font:16px -apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif !important; color:#1d2b4f; outline:none;} html.rp2 .rp2-sch #search-box-btn {display:none !important;} html.rp2 .rp2-sch .rp2-go {display:flex; align-items:center; justify-content:center; padding:0 14px; border:0; background:#46629e; color:#fff; cursor:pointer;} html.rp2 section#goodsview2 .top_title {padding:16px 16px 6px 16px !important; background:#fff !important; border:0 !important; font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;} html.rp2 section#goodsview2 .top_title h1.goods_nm {font-size:18px !important; line-height:1.45 !important; font-weight:bold; color:#1d2b4f !important; letter-spacing:-.4px;} html.rp2 section#goodsview2 .top_title > div:not(.rp2-sub):not(.rp2-chips):not(.rp2-crumb):not(.rp2-crumb-more) {display:none !important;} html.rp2 .rp2-sub {margin-top:6px; color:#5d6577; font-size:13px; line-height:1.5;} html.rp2 section#goodsview2 .top_title h1.goods_nm {display:inline !important; margin-right:6px !important;} html.rp2 .rp2-codes {display:inline;} html.rp2 .rp2-codes span {display:inline-block; margin:2px 4px 0 0; padding:1px 6px; border:1px solid #e3e7ef; border-radius:4px; background:#f5f7fb; color:#6b7486; font-size:11px; line-height:1.5; vertical-align:3px; white-space:nowrap;} html.rp2 .rp2-codes span b {color:#46586f; font-weight:bold;} html.rp2 .rp2-sub {margin-top:8px;} html.rp2 .rp2-chips {display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;} html.rp2 .rp2-chips span {padding:3px 8px; border:1px solid #e3e7ef; border-radius:4px; background:#f5f7fb; color:#46586f; font-size:12px; line-height:1.5;} html.rp2 .rp2-chips span b {color:#1d2b4f;} html.rp2 section#goodsview2 .price-area {display:flex; flex-direction:column; gap:6px; padding:6px 16px 6px 16px !important; margin-bottom:0 !important; border:0 !important; background:#fff !important; font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;} html.rp2 section#goodsview2 .price-area > div {float:none !important; padding:0 !important;} html.rp2 section#goodsview2 .price-area > .rp2-crumb {padding-top:16px !important;} html.rp2 section#goodsview2 .price-area > .rp2-crumb-more {padding:2px 10px !important;} html.rp2 section#goodsview2 .price-area .price-text span[style*="float"] {display:none !important;} html.rp2 section#goodsview2 .price-area .goods_price {font-size:26px !important; font-weight:bold !important; color:#1d2b4f !important; letter-spacing:-.5px; font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif !important;} html.rp2 section#goodsview2 .price-area .goods_dc {display:none !important;} html.rp2 section#goodsview2 .buy-info-area {border:0 !important; margin:0 !important; padding:0 16px 10px 16px !important;} html.rp2 section#goodsview2 .btn-area, html.rp2 .rcb-buybar, html.rp2 .rcb-buybar.rcb-mbar-on, html.rp2 section#goodsview2 .rcb-npay, html.rp2 section#goodsview2 .npay_storebtn_bx {display:none !important;} html.rp2 .rp2-fb {position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:6px; padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px; background:#fff; border-top:1px solid #e3e7ef; font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;} html.rp2 .rp2-fb button {display:flex; align-items:center; justify-content:center; gap:5px; margin:0; padding:14px 4px; border-radius:6px; font-size:16px; white-space:nowrap; min-width:0; line-height:1.2; font-weight:bold; letter-spacing:-.3px; cursor:pointer; font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;} html.rp2 .rp2-fb .rp2-talk {flex:0 0 auto; padding:10px 9px; border:2px solid #e3e7ef; background:#fff;} html.rp2 .rp2-fb .rp2-cart {flex:1; border:2px solid #46629e; background:#fff; color:#46629e;} html.rp2 .rp2-fb .rp2-buy {flex:1; border:2px solid #46629e; background:#46629e; color:#fff;} html.rp2 .rp2-fb .rp2-np {flex:1.25; border:2px solid #03c75a; background:#03c75a; color:#fff;} html.rp2 .rp2-fb .rp2-np i, html.rp2 #rcb-sheet-foot .rcb-sheet-npay i {display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:4px; background:#fff; color:#03c75a; font:900 13px Arial, sans-serif; font-style:normal;} @media (max-width:340px) {html.rp2 .rp2-fb{gap:5px; padding-left:8px; padding-right:8px;}html.rp2 .rp2-fb button{font-size:15px;}} html.rp2 #wrap {padding-bottom:calc(var(--rp2-fbh, 80px) + 12px) !important;} html.rp2 #rcb-totop {bottom:calc(var(--rp2-fbh, 80px) + 14px) !important;} html.rp2 #rcb-sheet-foot .rcb-sheet-btn {border-radius:6px !important; font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif !important; font-weight:bold !important;} html.rp2 #rcb-sheet-foot .rcb-sheet-buy {background:#46629e !important; border:2px solid #46629e !important; color:#fff !important;} html.rp2 #rcb-sheet-foot .rcb-sheet-cart {background:#fff !important; border:2px solid #46629e !important; color:#46629e !important;} html.rp2 #rcb-sheet-foot .rcb-sheet-npay {background:#03c75a !important; border:2px solid #03c75a !important; color:#fff !important;} /* 회원(등급 할인) 가격 */ html.rp2 section#goodsview2 .price-area .goods_price.rp2-memwrap {font-size:inherit !important; color:inherit !important;} html.rp2 .rp2-mem {display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px;} html.rp2 .rp2-mem #rcb-price-orig {flex-basis:100%; color:#9aa3b5; font-size:15px; font-weight:normal; text-decoration:line-through;} html.rp2 section#goodsview2 .price-area .rp2-mem .goods_price {color:#e8423f !important;} html.rp2 .rp2-mem-pct {padding:1px 6px; border-radius:3px; background:#e8423f; color:#fff; font-style:normal; font-weight:bold; font-size:13px;} html.rp2 .rp2-mem-note {flex-basis:100%; color:#46629e; font-size:12px;} /* 품절 막대 */ html.rp2 .rp2-fb .rp2-sold {flex:1; border:2px solid #e3e7ef; background:#f2f4f8; color:#8a93a6; cursor:default;} html.rp2 .rp2-fb .rp2-noti {flex:1; border:2px solid #46629e; background:#46629e; color:#fff;} html.rp2 .rp2-sch #search-box {height:auto !important; align-items:stretch !important;} html.rp2 .rp2-sch #search-box input[type=text], html.rp2 .rp2-sch #search-box input[type=search] {box-sizing:border-box !important; height:auto !important; line-height:1.4 !important; align-self:center;} html.rp2 .rp2-sch .rp2-go {align-self:stretch;} html.rp2 .rp2-row > a.rp2-cartl {position:relative;} html.rp2 .rp2-bd {position:absolute; top:5px; right:3px; box-sizing:border-box; min-width:17px; padding:1px 4px; border-radius:9px; background:#e8132b; color:#fff; font:bold 10.5px/1.4 Arial,sans-serif; font-style:normal; text-align:center;} html.rp2 .rp2-row .rp2-pcbtn {flex-direction:column; gap:0; padding:0 4px;} html.rp2 .rp2-pcbtn span {font-size:10px; line-height:1.1; color:#46586f; letter-spacing:-.3px; white-space:nowrap;} html.rp2 .rp2-pcbtn svg {width:20px; height:20px;} /* 옵션 창 수량칸 : 16px 미만이면 아이폰이 누를 때 화면을 확대한다 (10-05) */ html.rp2 section#goodsview2 input[name=order_cnt], html.rp2 #rcb-sheet-body input[name=order_cnt] {font-size:16px !important;} /* 2026-10-06 사장님 : 상품설명 위 제자리 탭 줄(rcb_mview2.js 가 머리줄 탭을 복제). 머리줄 탭과 같은 모양, 머리줄 밑에 닿으면 머리줄 탭이 바로(효과 없이) 이어받는다 */ html.rp2 .rp2-tabs.rp2-tabs-inline {position:static; visibility:visible; opacity:1; transform:none; box-shadow:none; transition:none; margin:0 0 16px 0;} /* 10-06 사장님 : 구분선 대신 탭 줄. 위아래 간격은 상품 분류 위 구분선과 같게(선 위 20px · 선 아래 16px 실측) - 위 20px 은 주문 폼 자체 아래 여백이 이미 채운다 */ html.rp2 .rp2-h.rp2-tabs-inl .rp2-tabs {transition:none;} /* 2026-10-06 사장님 "주문수량이랑 선택옵션을 빼자, 구매버튼 누르면 나오니까 중복" : 본문 자리(구매 칸 바로 안)에 있을 때만 감춘다. 구매 버튼이 여는 아래 창(view2.htm rcbSheetShow)이 이 두 덩어리를 #rcb-sheet-body 로 옮겨 쓰므로 창 안에서는 그대로 보인다. 창이 안 옮기는 다른 옵션(opt[])은 건드리지 않는다. */ html.rp2 section#goodsview2 .buy-info-area > #rcb-optzone, html.rp2 section#goodsview2 .buy-info-area > .buy-info-item:has(input[name=order_cnt]) {display:none;} /* 2026-10-06 사장님 : 출고 안내 카드와 상품설명 탭 사이 구분선. 상품 분류 위 선(.rp2-crumb)과 같은 색·좌우 16px 안쪽, 선 아래 16px. 선 위 20px 은 카드 아래 여백(22px)에서 2px 당겨 맞춘다 */ html.rp2 .rp2-sep {margin:-2px 16px 16px 16px; border-top:1px solid #eef1f6;} /* 2026-10-06 사장님 : 구매 창 버튼 자리 바꿈 - 장바구니 왼쪽, 바로구매 오른쪽 (버튼이 하나뿐이면 그대로) */ html.rp2 #rcb-sheet-foot .rcb-sheet-buy:not(.rcb-sheet-one) {float:right; margin-right:0;} html.rp2 #rcb-sheet-foot .rcb-sheet-cart:not(.rcb-sheet-one) {float:left;} /* 2026-10-06 사장님 "구매 창 글자 정렬 맞춰" : 창 안에서만 줄을 이름 칸 / 입력 칸으로 나눈다. 입력 칸은 모두 줄 폭의 58% - 옵션 선택칸과 수량 칸의 시작선·끝선이 같아진다(전에는 선택칸 130px 고정, 수량 칸 123px 라 7px 어긋남). 수량 칸은 원래 float:right 로 + - 숫자 순서라 row-reverse 로 같은 모양을 내고 숫자 칸이 남는 폭을 채운다. */ html.rp2 #rcb-sheet-body .buy-info-item {display:flex; align-items:center; gap:10px; height:auto; min-height:26px; line-height:1.4;} html.rp2 #rcb-sheet-body .buy-info-item .buy-info-title {float:none; flex:1 1 auto; min-width:0; max-width:none;} html.rp2 #rcb-sheet-body .buy-info-item .buy-info-contents {float:none; flex:0 0 58%; max-width:58%; display:flex; align-items:center; gap:4px;} html.rp2 #rcb-sheet-body .buy-info-item .buy-info-contents select, html.rp2 #rcb-sheet-body .buy-info-item .buy-info-contents input.inputable-addoption {flex:1 1 auto; min-width:0; width:auto !important; max-width:none;} html.rp2 #rcb-sheet-body .buy-info-item .buy-info-contents .rcb-optinfo {flex:none; margin-left:0;} html.rp2 #rcb-sheet-body .buy-info-item .buy-info-contents:has(input[name=order_cnt]) {flex-direction:row-reverse; gap:5px;} html.rp2 #rcb-sheet-body .buy-info-item .buy-info-contents:has(input[name=order_cnt]) > * {float:none; margin-left:0; flex:none;} /* 10-06 사장님 "주문수량 입력칸이 너무 길어졌어" : 숫자 칸은 글자 3.2자 폭만(두 번째 지시로 4.5 → 3.2), +/- 와 함께 오른쪽 끝에 붙인다 */ html.rp2 #rcb-sheet-body .buy-info-item .buy-info-contents input[name=order_cnt] {flex:none; width:3.2em; box-sizing:border-box; height:26px; text-align:center;} html.rp2 #rcb-sheet-total-label {font-size:12px; color:#353535;} /* 2026-10-06 구매 창 금액 내역(rcb_mview2.js #rp2-sbd) - 총 금액 줄 바로 위 */ html.rp2 #rp2-sbd {padding:8px 12px 4px 12px; border-top:1px solid #eeeeee; font-size:12px; color:#555555;} html.rp2 #rp2-sbd .rp2-sbd-r {display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:2px 0; line-height:1.45;} html.rp2 #rp2-sbd .rp2-sbd-r span {min-width:0; overflow-wrap:anywhere;} html.rp2 #rp2-sbd .rp2-sbd-r b {flex:none; font-weight:normal; color:#333333; font-variant-numeric:tabular-nums; white-space:nowrap;} html.rp2 #rp2-sbd .rp2-sbd-r.is-dc span, html.rp2 #rp2-sbd .rp2-sbd-r.is-dc b {color:#e8380d;} /* 2026-10-06 구매 창 비회원 가입 유도 띠(#rp2-sbd 와 같은 함수가 그림) - 총 금액 줄 아래, 버튼 위. 아래 10px = 구분선 아래 버튼까지 간격과 같게 */ html.rp2 .rp2-sjoin {display:flex; align-items:center; gap:10px; margin:4px 10px 10px 10px; padding:8px 10px 8px 12px; border:1px solid #cfe3f7; border-radius:8px; background:#f4f9ff; color:#1a4d80; font-size:13px; line-height:1.4; text-decoration:none;} html.rp2 .rp2-sjoin-t {flex:1; min-width:0;} html.rp2 .rp2-sjoin-t > span, html.rp2 .rp2-sjoin-t small {display:block;} html.rp2 .rp2-sjoin-t b {color:#e8423f; font-size:15px;} html.rp2 .rp2-sjoin-t small {margin-top:1px; color:#4a6a92; font-size:11px;} html.rp2 .rp2-sjoin-go {flex:none; padding:6px 9px; border-radius:6px; background:#46629e; color:#fff; font-weight:bold; font-size:12px; white-space:nowrap;} /* 2026-10-06 사장님 "상자 안 장바구니·바로구매·네이버페이 글자 상하 정렬" : view2.htm 이 line-height:44px 를 줘서 2px 테두리 안에서 글자가 1.6~2px 아래로 처졌다. 줄높이 대신 flex 가운데 정렬(N 아이콘도 같은 줄 가운데). */ html.rp2 #rcb-sheet-foot .rcb-sheet-btn {display:flex; align-items:center; justify-content:center; gap:6px; line-height:1.2;} /* 네이버페이 버튼은 rcbNpaySync 가 style.display='block' 을 직접 넣는다 → 숨김(none)이 아닐 때만 flex 로 이긴다 */ html.rp2 #rcb-sheet-foot .rcb-sheet-npay:not([style*="none"]) {display:flex !important;} /* 2026-10-06 사장님 "폭 좁아지니까 주문수량이랑 밑에 구분선 간격이 좁아지더라" (1) view2.htm 의 @media (max-width:370px) 가 .buy-info-contents 에 max-width:100% !important 를 줘서 이름 칸이 0px 이 되고 글자가 한 자씩 세로로 쌓였다(줄 높이 150~200px) → 창 안에서는 58% 를 지킨다. (2) 옵션·수량 칸(#rcb-sheet-body)이 max-height:44vh 라 390x844 에서도 8px 넘쳐 주문수량 줄이 구분선에 붙었다 → 창 전체를 화면 높이의 90% 까지 쓰고(세로 flex), 넘칠 때만 옵션 칸 안에서 스크롤. rcbSheetShow 가 style.display='block' 을 넣으므로 숨김(none)이 아닐 때만 flex 로 이긴다. */ html.rp2 #rcb-sheet-body .buy-info-item .buy-info-contents {max-width:58% !important;} html.rp2 #rcb-sheet-body .buy-info-item .buy-info-title {max-width:none !important;} html.rp2 #rcb-sheet:not([style*="none"]) {display:flex !important; flex-direction:column; max-height:90vh; max-height:90dvh;} html.rp2 #rcb-sheet > * {flex:none;} html.rp2 #rcb-sheet > #rcb-sheet-body {flex:0 1 auto; min-height:0; max-height:none;} /* 2026-10-06 사장님 "아직도 설명 내용 윗부분이 잘린다"(7630) : 모바일 설명 칸(.gd-longdesc)은 넘침을 잘라 내고(overflow-y:hidden, view.php 인라인) 줄높이가 글자 크기와 같아서(12px/12px) 첫 줄 글자 모양이 2~3px(아이폰 글꼴은 더) 위로 삐져나와 잘렸다. PC 는 줄높이 기본값이라 0px. 안쪽 여유 8px + 같은 만큼 바깥 여백 빼기 → 화면 위치는 그대로(7상품 첫 글자·다음 칸 위치 변화 0), 잘리는 경계만 위아래 8px 넓어짐. */ html.rp2 section#goodsview2 .gd-longdesc {padding-top:8px; margin-top:-8px; padding-bottom:8px; margin-bottom:-8px;} /* 2026-10-06 사장님 "상품 설명 글꼴만 원래 설정 무시하고 맑은고딕으로 (PC·모바일 둘 다), 색상·크기는 그대로. 여러 도매처에서 긁어와 뒤죽박죽" 글꼴 이름은 사이트 규칙대로 띄어쓰기 없는 "맑은고딕"(기억 rcbank-font-malgun-gothic-spelling) - 에디터가 쓰는 이름이라 직접 쓴 설명과 같은 모양. 이름은 CSS 유니코드 이스케이프로 적는다(파일 글자셋과 무관하게 같은 이름). 인라인 style· 를 이기려고 !important. 아이콘 글꼴(Font Awesome 등 class 에 fa/icon/glyph)은 빼고, 코드·고정폭 글(pre/code 등)은 고정폭 유지. 실측(모바일 19상품) : 글꼴 2~4종 → 1종, 높이 -52~+35px, 가로 넘침·겹침 증가 0. PC 쪽은 shop/lib/css/rcb_longdesc_fit_pc.css. */ html.rp2 section#goodsview2 .gd-longdesc, html.rp2 section#goodsview2 .gd-longdesc *:not([class*="fa"]):not([class*="icon"]):not([class*="glyph"]) {font-family:"\B9D1\C740\ACE0\B515", sans-serif !important;} html.rp2 section#goodsview2 .gd-longdesc pre, html.rp2 section#goodsview2 .gd-longdesc code, html.rp2 section#goodsview2 .gd-longdesc kbd, html.rp2 section#goodsview2 .gd-longdesc samp, html.rp2 section#goodsview2 .gd-longdesc tt, html.rp2 section#goodsview2 .gd-longdesc pre *, html.rp2 section#goodsview2 .gd-longdesc code * {font-family:monospace !important;} /* 2026-10-06 사장님 "모바일 아래 관련상품에 상품명이 너무 길면 잘리게" : #relativegoods .goods-nm 이 글자 14px·줄높이 14px 로 최대 6줄까지 빽빽하게 내려왔다. 두 줄까지만 보이고 넘치면 … , 줄간격 1.35배. 한 줄짜리도 두 줄 높이를 차지해 가격 줄이 상품끼리 맞는다. view2.htm 안