/* ===== 키링 홈 ===== */

/* 할인 전 원가 — .goods_itmes_price>span(17px/400) 보다 우선하도록 클래스 2개로 지정 */
.goods_itmes_price .price_origin{
    font-size:13px;
    font-weight:300;
    color:#A0A0A0;
    text-decoration:line-through;
    margin-right:6px;
}

/* NEW 뱃지 — 색/보더/라운드는 add_option.css 의 .goods_items_title>span 을 그대로 쓰고 간격만 보정 */
.goods_items_title .badge_new{
    display:inline-block;
    margin-left:6px;
    vertical-align:middle;
    line-height:1.6;
    white-space:nowrap;
}

/* 할인 적용가 */
.goods_itmes_price .price_sale{
    color:#FF5B59;
    font-weight:500;
}


/* ===== 키링 헤더 소목록 ===== */

/* 소목록에 상품명이 그대로 들어가서 add_option.css 의 고정폭(156px)으로는 줄바꿈된다.
   메뉴 폭은 최소 156px 을 지키되 상품명 길이에 맞춰 늘어나게 한다 */
.sub_menu_top.keyring .hidden-menu{
    width:auto;
    min-width:156px;
    white-space:nowrap;
}
.sub_menu_top.keyring .hidden-menu>li{
    padding-left:12px;
    padding-right:12px;
}


/* ===== 키링 상세 ===== */

/* 제품 구성 — 배너·점착용품 상세의 '제품 구성'과 동일한 구조.
   라벨은 좌측, 이미지는 우측. .goods_order_img / .goods_info_img / .goods_comment 는 add_option.css 것을 그대로 쓴다. */
.composition_section{
    margin-bottom:24px;
}
.composition_section > label{
    flex:0 0 90px;
    font-size:14px;
    font-weight:400;
    color:#525252;
    text-align:left;
    white-space:nowrap;
}

/* 단품 4종이 한 줄에 들어가도록 배너(111px)보다 작게 잡는다.
   nth-child 여백 대신 gap 을 쓰는 이유는 마지막 항목에 오른쪽 여백이 붙으면 폭 계산이 어긋나서다.
   82*4 + 8*3(gap 은 항목 사이에만) = 352 로 356px 안에 들어간다. 5개 이상이면 그때부터 줄바꿈된다. */
.composition_section .d-flex{
    flex-wrap:wrap;
    gap:8px;
}
.composition_section .goods_info_img{
    width:82px;
    margin-right:0;
}
/* add_option.css 는 이미지 폭을 106px 로 고정한다 — 줄어든 항목 폭에 맞춰 따라오게 한다.
   inline 이미지의 baseline 여백 때문에 아래에 빈 줄이 생기므로 block 으로 바꾼다 */
.composition_section .goods_info_img img{
    display:block;
    width:100%;
}

/* 상품명은 회색 띠로 항상 깔지 않고 호버했을 때만 이미지 위에 겹쳐 보여준다.
   (add_option.css 의 .goods_comment 는 height:20px + 회색 배경이라 여기서 전부 덮어쓴다) */
.composition_section .goods_info_img{
    position:relative;
}
.composition_section .goods_comment{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:auto;
    padding:3px 4px;
    background:rgba(0,0,0,0.65);
    color:#fff;
    font-size:10px;
    line-height:1.4;
    /* 82px 폭에서 상품명이 한 줄에 안 들어간다 — 말줄임 대신 두 줄로 접어 전체 이름을 보여준다 */
    white-space:normal;
    word-break:keep-all;
    opacity:0;
    transition:opacity 0.15s;
    pointer-events:none;
}
.composition_section .goods_info_img:hover .goods_comment{
    opacity:1;
}

/* 메인 이미지 — .main_img_section 은 630x630 에 border:1px 이라 box-sizing 기준 내부는 628x628 이다.
   키링 상세 이미지는 630x630 이라 그대로 두면 사방 1px 씩 넘쳐 회색 테두리를 덮어버린다.
   (배너 등 다른 상품 이미지는 628x628 이라 이 문제가 없다)
   add_option.css 의 .add_main_section img{max-height:630px} 과 같은 특정도라 나중에 로드되는 이 파일이 이긴다 */
.main_img_section > img{
    max-width:100%;
    max-height:100%;
}

/* 상세 썸네일 — 클릭하면 메인 이미지가 바뀐다. 선택된 항목에 .action */
.detail_thumb{
    width:110px;
    height:110px;
    object-fit:contain;
    border:1px solid #E5E5E5;
    cursor:pointer;
}
.detail_thumb:hover{
    border-color:#B0B0B0;
}
.detail_thumb.action{
    border-color:#1279bd;
}

/* 주문 행 — 담긴 상품 목록. 담기지 않은 행은 .d-none 으로 숨는다 */

/* add_option.css 는 .order_menu 의 1·2번째에만 여백을 지정해서 3번째부터 기본값 1.8rem 이 적용된다.
   행 개수가 가변이라 nth-child 로 맞출 수 없으므로, 여백을 컨테이너와 행에 나눠 일정하게 준다.
   (#goods 선택자로 .order_menu:nth-child(n) 보다 우선순위를 높인다) */
#goods{
    margin-top:1.4rem;
}
#goods .order_line{
    margin-top:0.5rem;
}

.order_line{
    display:flex;
    align-items:center;
    /* 오른쪽 여백은 삭제(×) 버튼이 행 끝에 붙지 않도록 둔다 */
    padding:8px 12px 8px 0;
    border-bottom:1px solid #F0F0F0;
}
.order_line .goods_title{
    flex:1 1 auto;
    margin:0 12px;
    font-size:14px;
    color:#525252;
}
.order_line .goods_price{
    width:90px;
    margin:0 0 0 12px;
    text-align:right;
    font-size:14px;
}
.line-remove{
    width:24px;
    height:24px;
    margin-left:16px;
    border:0;
    background:none;
    color:#B0B0B0;
    font-size:18px;
    line-height:1;
    cursor:pointer;
}
.line-remove:hover{
    color:#FF5B59;
}

/* 총 결제금액 — 수량 구간 할인이 걸리면 할인 전 금액을 취소선으로 함께 보여준다.

   할인 전 금액을 총액 왼쪽에 두면 공급가·부가세와 한 줄에 몰려서 금액 자릿수가 늘어날 때 줄이 밀린다.
   총액 위에 오른쪽 정렬로 쌓아 가로 폭을 더 쓰지 않게 한다. */
.amount_payment .final_price{
    margin-left:1rem;
    text-align:right;
}

/* 홈 목록의 .goods_itmes_price .price_origin 과 같은 표기지만 선택자가 달라 여기서 다시 지정한다 */
.amount_payment .price_origin{
    display:block;
    margin-bottom:2px;
    font-size:13px;
    font-weight:300;
    line-height:1.2;
    color:#A0A0A0;
    text-decoration:line-through;
    white-space:nowrap;
}

/* 제품 구성은 클릭으로 담기/빼기가 되는 항목이라 커서/호버 상태를 준다.
   담긴 항목은 .action — 테두리만 굵어지도록 box-sizing 기준 폭(111px)은 그대로 둔다 */
.composition_item{
    cursor:pointer;
}
.composition_item:hover{
    border-color:#1279bd;
}
.composition_item.action{
    border:2px solid #1279bd;
}