/* ===== 샘플북 상세 ===== */

/* 제품 구성 — 라벨은 좌측, 이미지는 우측. 배너·점착용품 상세와 같은 구조다.
   .goods_order_img / .goods_info_img 는 add_option.css 것을 그대로 쓰고 여기서는 배치만 잡는다.
   (키링의 .composition_section 규칙은 담기/빼기가 있는 쪽 전용이라 여기서 쓰지 않는다) */
.package_section{
    margin-bottom:24px;
}
.package_section > label,
.quantity_section > label{
    flex:0 0 90px;
    font-size:14px;
    font-weight:400;
    color:#525252;
    text-align:left;
    white-space:nowrap;
}

/* nth-child 여백 대신 gap 을 쓴다 — 마지막 항목에 오른쪽 여백이 붙으면 폭 계산이 어긋난다 */
.package_section .d-flex{
    flex-wrap:wrap;
    gap:11px;
}
.package_section .goods_info_img{
    margin-right:0;
}
/* add_option.css 는 이미지 폭을 106px 로 고정한다 — 항목 폭에 맞춰 따라오게 한다.
   inline 이미지의 baseline 여백 때문에 아래에 빈 줄이 생기므로 block 으로 바꾼다 */
.package_section .goods_info_img img{
    display:block;
    width:100%;
}

/* 수량 — 회색 바(.order_menu)와 그 안의 요소는 add_option.css 를 그대로 쓴다.

   이미지 박스(margin 7 + 59 + 5.5 = 71.5)가 빠진 만큼 뒤의 요소가 전부 왼쪽으로 당겨져
   453px 바의 오른쪽이 비어 보인다. 그 폭을 상품명이 대신 먹어서 -/+ 와 금액을 제자리에 둔다.
   32 + 200 = 232 로, 다른 상품에서 -/+ 가 시작되는 위치(71.5 + 160)와 거의 같다 */
.order_lines .goods_title{
    width:200px;
    padding-left:32px;
}
.order_lines .count_number>button{
    cursor:pointer;
}