@charset "utf-8";
/* ==========================================================================
   상품 상세 — PC(1024px~) 전용
   goods/goods_view.php · 시안 2026-08-24 / 토큰: gd_tokens.css
   모바일 화면은 건드리지 않는다 — 모든 규칙을 미디어쿼리 안에만 둔다.
   ========================================================================== */

@media (min-width: 1024px) {

    /* --------------------------------------------------------------------
       상단 2단 — 좌측 이미지 / 우측 상품정보·구매
       .goods_view 아래에 이미지(.cont_detail) · 정보(.detail_info) · 구매(.detail_buy)가
       나란히 있어 격자로 나눈다.
       -------------------------------------------------------------------- */
    /* 2단 — 좌측 이미지(633px) / 우측 상품정보·구매(남는 폭 전부).
       탭 아래 상세 영역은 780px 로 따로 묶는다(아래 max-width). */
    .goods_view {max-width:calc(var(--layout-max, 1280px) + var(--layout-margin, 20px) * 2); margin:0 auto; padding:var(--space-4, 16px) var(--layout-margin, 20px) var(--space-16, 64px); letter-spacing:var(--letter-spacing-base, -0.006em);
        display:grid; grid-template-columns:633px minmax(0, 1fr); gap:0 var(--space-10, 40px); align-items:start;}
    .goods_view * {box-sizing:border-box;}

	.pdt_dt .top_tit {top: 120px}

	.pdt_dt .top_tit .tit {font-size: 64px;}
	.pdt_dt .top_tit .sub_tit {font-size: 24px;}
	.pdt_dt .top .txt {bottom: 24px; right: 16px; font-size: 16px;}

	.pdt_dt .feat .weight {padding: 16px 0 24px;}
	.pdt_dt .feat .weight .icon {width: 75px; margin: 0 auto 12px;}
	.pdt_dt .feat .weight .txt {font-size: 20px;}

	.pdt_dt .feat .strg {padding: 16px 0 24px;}
	.pdt_dt .feat .strg .icon {width: 75px; margin: 0 auto 12px;}
	.pdt_dt .feat .strg .txt {font-size: 20px;}

	.pdt_dt .key .label {font-size: 20px;}
	.pdt_dt .key .tit {font-size : 32px;}
	.pdt_dt .key .key_cont {margin-bottom: 8px;}
	.pdt_dt .key .key_cont .txt {font-size: 20px; padding:0 0 4px 12px;}
	.pdt_dt .key .key_cont .icon {min-width: 24px;}
	.pdt_dt .key .key_cont .icon img {width: 24px; height: 24px;}

	.pdt_dt .dt .tit {font-size: 32px;}
	.pdt_dt .dt .cont {font-size: 20px;}

	.pdt_dt .info .label{font-size: 20px;}
	.pdt_dt .info .tit {font-size: 32px;}

	.pdt_dt .mono .label{font-size: 20px;}
	.pdt_dt .mono .tit {font-size: 32px;}
	.pdt_dt .mono .cont {font-size: 20px;}

	.pdt_dt .recipe .label {font-size: 20px;}
	.pdt_dt .recipe .tit {font-size: 32px;}
	.pdt_dt .recipe .ingr_tit {font-size: 20px; line-heignt: 1.5;}
	.pdt_dt .recipe .ingr_tit .txt {font-size: 20px; line-heignt: 1.5;}
	.pdt_dt .recipe .howto {font-size: 20px;}

    /* 상단만 2단(이미지 / 정보·구매)이고 탭 아래는 전체 폭.
       이미지가 1~2행에 걸쳐야 구매박스가 상품정보 바로 아래에서 시작한다.
       (이미지를 한 행에만 두면 행 높이가 이미지 높이가 되어 구매박스가 그 아래로 밀린다) */
    .goods_view > * {grid-column:1 / -1;}

    /* gd_layout 의 #wrap.pcReady .pc_breadcrumb 이 ID를 포함해 더 강하다 → 같은 강도로 왼쪽 정렬 */
    #wrap.pcReady .goods_view .pc_breadcrumb {grid-column:1 / -1; grid-row:1; justify-content:flex-start; margin:0 0 var(--space-4, 16px);}
    /* 값이 비어 남은 항목이 구분기호만 남기는 것을 막는다(스크립트가 지우기 전 깜빡임 포함) */
    #wrap.pcReady .goods_view .pc_breadcrumb li:empty {display:none;}
    .goods_view .cont_detail {grid-column:1; grid-row:2;}
    /* 우측 전체(상품정보 + 구매영역 + 표)를 한 칸에 담는다.
       goods_view.html 이 구매영역과 표를 .detail_info 안으로 옮겨 순서를 만든다.
       나눠서 여러 행에 두면, 좌측 이미지가 그 행들에 걸치면서 이미지 높이가
       행마다 나눠 배분돼 우측 내용 사이에 빈 공간이 생긴다(격자의 정상 동작). */
    .goods_view .detail_info {grid-column:2; grid-row:2; padding:0 0 0 40px;}

    /* 평소에는 흐름 안에 그대로 둔다.
       "구매 버튼이 화면에서 사라지면" 띄우는 방식이라 CSS sticky 를 쓰지 않는다
       — sticky 는 붙는 시점을 고를 수 없다. goods_view.html 이 position:fixed 로 바꾼다.
       배경을 흰색으로 둬야 떠 있는 동안 아래 내용이 비치지 않는다.
       모바일은 .detail_buy 를 화면 하단에 fixed !important 로 붙이므로 같은 강도로 풀어야 한다. */
    .goods_view .detail_buy {position:static !important; left:auto !important; right:auto !important; bottom:auto !important; top:auto !important;
        width:auto !important; z-index:auto; box-shadow:none; overflow:visible;
        background:var(--color-common-100, #fff);}
    /* 떠 있는 상태 — top·right·height 는 화면 크기에 따라 달라져 스크립트가 넣는다.
       위 규칙이 right/top 을 !important 로 풀어 두므로 스크립트도 !important 로 넣는다.
       배경은 여기서 다시 준다 — 아래 '구매 버튼' 블록의 background:none 이 뒤에 오기 때문. */
    .goods_view .detail_buy.is_stuck {position:fixed !important; width:420px !important; z-index:100;
        padding:60px 40px; border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:24px; background:var(--color-common-100, #fff) !important;}
    /* TOP 버튼은 떠 있는 패널(z-index:100)과 자리가 겹친다 → 위로 올려 가리지 않게 한다.
       (자리를 옮기면 화면 한가운데 뜬 것처럼 보여 어색하다) */
    #wrap.pcReady .fixed_btn_top {z-index:10000001;}   /* 떠 있는 구매패널(100)·채널톡(#ch-plugin 100000) 위로 */

    /* 자리 칸 — 구매영역이 '떠 있을 때만' 그 자리를 대신 지킨다.
       평소에도 높이를 갖고 있으면 구매영역과 겹쳐 자리를 두 번 먹는다.
       (구매영역 바로 뒤에 붙여 두므로 인접 선택자로 붙었는지 알 수 있다) */
    .goods_view .js_buy_placeholder {height:0; pointer-events:none;}
    .goods_view .detail_buy.is_stuck + .js_buy_placeholder {height:var(--gd-buy-h, 0px);}

    /* 옵션 영역 최소 높이 200px(gd_common.css:359)은 모바일 시트용이라 PC에서는 빈 공간만 남는다 */
    .goods_view .detail_buy .option_scroll {min-height:0;}

    /* 탭과 상세정보는 1~2단을 함께 쓴다 — 3단이 떠 있는 구매영역 자리다.
       탭 칸은 상세정보 끝까지 늘린다. sticky 는 자기 grid 칸 안에서만 움직이므로
       칸이 탭 높이뿐이면 붙어 다닐 자리가 없다.
       칸이 상세정보를 덮게 되니 클릭은 통과시키고(pointer-events) 탭 줄만 되살린다. */
    /* grid-template-rows 를 안 쓰므로 행은 전부 암시적이다 —
       끝을 -1 로 잡으면 1번 줄로 해석돼 탭이 맨 위로 올라간다. 끝 줄은 숫자로 적을 것 */
    .goods_view > .detail_btm_tab_menu_box {grid-column:1 / 3; grid-row:3 / 6; align-self:stretch; z-index:90; pointer-events:none;}
    /* 탭 줄이 차지하던 자리 — 칸을 늘리면서 row 3 이 접히므로 상세정보를 그만큼 내린다.
       탭 박스의 위 여백(48px)까지 더해야 한다. 탭 높이만 빼면 그 여백만큼 본문 위가 가려진다.
       min-width:0 이 없으면 안쪽 넓은 요소(문의하기 버튼 등)가 칸을 밀어 3단까지 삐져나간다 */
    .goods_view > .detail_info_box.js_goods_info {grid-column:1 / 3; grid-row:4; min-width:0; margin-top:calc(var(--space-12, 48px) + var(--gd-tabs-h, 55px));}
    /* 상품후기·상품문의는 .detail_info_box 가 아니라 뒤따르는 또 하나의 .js_goods_info 안에 있다
       (goods_view.html 의 '<div class="js_goods_info">'). 배치를 안 잡아 주면 자동 배치로
       엉뚱한 칸에 들어가 문의하기 버튼이 구매영역 위까지 늘어난다. */
    .goods_view > .js_goods_info:not(.detail_info_box) {grid-column:1 / 3; grid-row:5; min-width:0;}
    /* 탭·상세 영역은 떠 있는 퀵메뉴(420px)와 그 사이 간격(60px)을 뺀 나머지를 다 쓴다.
       상세페이지 이미지(780px)는 그 안에서 가운데 정렬한다(시안 코멘트 2026-09-02) */
    .goods_view > .detail_btm_tab_menu_box,
    .goods_view > .detail_info_box.js_goods_info,
    .goods_view > .js_goods_info:not(.detail_info_box) {width:100%; max-width:calc(100% - 480px); justify-self:start;}
    /* 탭 줄만 넓게 쓰고, 그 아래 내용(상세정보·상품필수정보·후기·문의)은
       예전처럼 780px 로 묶어 탭 영역 안에서 가운데 정렬한다.
       — 글 자체를 가운데로 몰지 않도록 text-align 은 건드리지 않는다 */
    .goods_view > .detail_info_box.js_goods_info > *,
    .goods_view > .js_goods_info:not(.detail_info_box) > * {max-width:780px; margin-left:auto; margin-right:auto;}

    /* --------------------------------------------------------------------
       좌측 이미지
       -------------------------------------------------------------------- */
    .goods_view .cont_detail {position:relative;}
    .goods_view .cont_detail .goods_view_image_slider {border-radius:var(--radius-2, 8px); overflow:hidden; background:var(--color-neutral-90, #F7F7F7);}
    .goods_view .cont_detail .goods_view_image_slider img {width:100%; height:auto; vertical-align:top;}

    /* 썸네일 (시안) — 슬라이더 아래 가로 나열. 이미지가 많으면 좌우로 넘긴다.
       한 줄에 늘어놓기만 하면 6장부터 이미지 영역 밖으로 삐져나간다.
       배치는 slick 이 잡으므로 flex 를 주지 않는다(.pc_only 의 display:block 을 그대로 쓴다) */
    .goods_view .goods_view_thumbs {position:relative; margin-top:var(--space-3, 12px);}
    /* 칸 사이 12px — slick 은 gap 을 못 쓰므로 li 좌우 여백으로 만들고 줄을 그만큼 넓힌다.
       slick 은 자식을 감싸지 않고 원래 li 에 .slick-slide 를 붙이므로,
       여백은 li 에 / 테두리·비율은 안쪽 .thumb_box 에 나눠 줘야 한다
       (한 요소에 같이 주면 여백이 테두리 안으로 들어가 이미지만 밀린다) */
    /* 시안 2026-09-01: 썸네일 106px · 사이 간격 11px.
       칸 폭을 slick 계산(균등 분할)에 맡기면 간격이 화면 폭에 따라 달라지므로
       117px(106 + 11)로 못 박는다 — slick 이 인라인으로 넣는 폭을 덮어야 한다. */
    .goods_view .goods_view_thumbs .slick-list {margin:0;}
    .goods_view .goods_view_thumbs li {width:117px !important; padding:0 11px 0 0; cursor:pointer;}
    /* 시안 2026-09-01: 썸네일 106 x 106 고정 (칸 폭과 무관하게 크기를 지킨다) */
    .goods_view .goods_view_thumbs .thumb_box {position:relative; display:block; width:106px; height:106px; padding-top:0; border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:var(--radius-2, 8px); overflow:hidden; transition:border-color .15s;}
    .goods_view .goods_view_thumbs li:hover .thumb_box {border-color:var(--color-neutral-70, #DFDFDF);}
    .goods_view .goods_view_thumbs li.on .thumb_box {border-color:var(--color-green-40, #00B373);}
    /* 칸을 꽉 채운다 — 비율이 다른 이미지는 잘라서 채운다 */
    .goods_view .goods_view_thumbs .thumb_box img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; vertical-align:top;}

    /* 좌우 버튼 — 끝에 닿거나 넘길 게 없으면 slick 이 slick-disabled 를 붙인다 → 그때는 감춘다 */
    .goods_view .goods_view_thumbs .slick-arrow {position:absolute; top:50%; z-index:2; width:32px; height:32px; margin-top:-16px; border-radius:50%; background:rgba(255, 255, 255, .92); box-shadow:0 2px 6px rgba(0, 0, 0, .14); font-size:0; cursor:pointer; transition:background .2s;}
    .goods_view .goods_view_thumbs .slick-arrow:hover {background:var(--color-common-100, #fff);}
    .goods_view .goods_view_thumbs .slick-arrow.slick-disabled {display:none;}
    .goods_view .goods_view_thumbs .slick-prev {left:-6px;}
    .goods_view .goods_view_thumbs .slick-next {right:-6px;}
    .goods_view .goods_view_thumbs .slick-arrow::after {content:''; position:absolute; left:50%; top:50%; width:7px; height:7px; border-top:2px solid var(--color-neutral-10, #333); border-right:2px solid var(--color-neutral-10, #333);}
    .goods_view .goods_view_thumbs .slick-prev::after {margin:-4px 0 0 -3px; transform:rotate(-135deg);}
    .goods_view .goods_view_thumbs .slick-next::after {margin:-4px 0 0 -5px; transform:rotate(45deg);}

    /* --------------------------------------------------------------------
       우측 상품 정보
       -------------------------------------------------------------------- */
    /* 좌우 여백을 상위 한 곳에서 준다.
       자식마다 padding:… 20px 을 갖고 있으면 구분선(border-bottom)이 그 padding 바깥까지
       그려져, 선마다 길이가 제각각이 된다. 여백을 위로 올리면 선이 모두 같은 폭이 된다. */
    .goods_view .detail_info .detail_info_top,
    .goods_view .detail_info .member_price {padding-left:0; padding-right:0;}
    /* 표는 form 밖으로 나와 스스로 격자에 서므로 여기서 좌우 여백을 받는다 */
    .goods_view .detail_info .detail_sub_info {padding:var(--space-3, 12px) 0 0;}
    /* 브레드크럼 바로 아래라 위 여백(모바일 24px)이 필요 없다 — 이미지 상단과 높이를 맞춘다 */
    .goods_view .detail_info .detail_info_top {padding-top:0;}
    /* 상품명 — PC 전용 크기가 없어 기본값(작게)으로 나온다. 시안 사양 그대로 */
    .goods_view .detail_info .detail_info_top h3 {margin-top:var(--space-2, 8px); font-size:28px; line-height:100%; font-weight:500; letter-spacing:-0.006em; color:var(--color-neutral-5, #222);}

    /* 상품 설명 — 시안 사양. 위아래 간격은 다른 줄과 같은 12px 로 맞춘다 */
    .goods_view .detail_info .detail_info_top .prd_desc {margin-top:var(--space-3, 12px); font-size:16px; line-height:22px; font-weight:400; letter-spacing:-0.006em;}

    /* 상품명 아래 금액 — 시안 사양. 원가(del·.won1)는 12px 로 따로 지정돼 있어 그대로 작게 남는다 */
    .goods_view .detail_info .detail_info_top .price_box {font-size:28px; line-height:38px;}
    .goods_view .detail_info .detail_info_top .price_box .per,
    .goods_view .detail_info .detail_info_top .price_box .price,
    .goods_view .detail_info .detail_info_top .price_box .won {font-size:28px; line-height:38px; font-weight:700; letter-spacing:-0.006em;}
    /* 할인 전 금액 — 시안 사양.
       금액(del)과 '원'(.won1)이 따로 있고 .priceLine 이 gap:4px 이라,
       .won1 의 margin-left:-4px 로 그 간격을 지워 붙여 놓은 구조다. 그 값은 건드리지 않는다. */
    .goods_view .detail_info .detail_info_top .price_box del,
    .goods_view .detail_info .detail_info_top .price_box .won1 {font-size:16px; line-height:22px; font-weight:400; letter-spacing:-0.006em; color:#CCCCCC; text-decoration:line-through;}
    /* 판매가와의 간격만 6px */
    .goods_view .detail_info .detail_info_top .price_box del {margin-left:6px;}

    /* 최대혜택가 — 구분선 삭제 + 위아래 여백 최소화.
       원산지는 goods_view.html 이 최대혜택가 아래로 옮긴다(금액 → 최대혜택가 → 원산지). */
    .goods_view .detail_info .member_price {padding-top:var(--space-1, 4px); padding-bottom:0; border-bottom:0;}
    .goods_view .detail_info .origin_info {margin-top:var(--space-3, 12px);}
    .goods_view .detail_info .detail_info_top {padding-bottom:0;}

    /* 최대혜택가 — PC는 테두리 박스가 아니라 한 줄 텍스트(시안).
       펼침 기능은 그대로 두고 모양만 바꾼다(클릭하면 정가·판매가가 열린다). */
    .goods_view .detail_info .member_price button.btn_benefit {display:inline-flex; align-items:center; width:auto; height:auto; padding:0; gap:4px; border:0; background:none; font-size:16px; line-height:22px; font-weight:600; letter-spacing:-0.006em; color:var(--color-green-20, #007F52); cursor:pointer;}
    /* 시안 지급 아이콘(∨) — 누르면 아래 혜택 내역이 열린다(goods_view.html 의 .btn_benefit 토글) */
    .goods_view .detail_info .member_price button.btn_benefit::after {display:block; content:''; flex:none; width:16px; height:16px; margin-left:0; background:url(../../images/renew/icon/arrow-down-benefit.svg) no-repeat 50% 50% / 16px auto; transition:transform .2s;}
    .goods_view .detail_info .member_price button.btn_benefit.show::after {transform:rotate(180deg);}
    .goods_view .detail_info .member_price button.btn_benefit strong {font-size:16px; line-height:22px; font-weight:600; color:var(--color-green-20, #007F52);}
    /* 모바일은 버튼이 테두리 상자라 이 박스가 그 아래에 이어붙는다(border-top:0 + 아래만 radius).
       PC 는 버튼이 테두리 없는 텍스트라 그대로 두면 위가 뚫린 상자가 된다 → 사방 테두리로 되돌린다. */
    .goods_view .detail_info .member_price .benefit_cont {border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:var(--radius-2, 8px);}
    .goods_view .detail_info .member_price button.btn_benefit.show + .benefit_cont {margin-top:var(--space-2, 8px); padding:var(--space-4, 16px);}
    /* 버튼과 붙어 있을 때 필요하던 윗줄 구분선·여백도 뗀다 */
    .goods_view .detail_info .member_price .benefit_cont ul {padding:0; border-top:0;}
    .goods_view .detail_info .member_price .benefit_cont ul li + li {margin-top:var(--space-2, 8px);}
    .goods_view .detail_info .member_price .benefit_cont ul li span {font-size:14px; line-height:20px; color:var(--color-neutral-40, #888);}
    .goods_view .detail_info .member_price .benefit_cont ul li em {font-size:14px; line-height:20px; font-style:normal; color:var(--color-neutral-5, #222);}
    .goods_view .detail_info .brand {margin-bottom:var(--space-2, 8px); font-size:14px; line-height:20px; color:var(--color-neutral-40, #888);}
    /* 시안 2026-09-01: 상품명과 한 덩어리로 묶어 간격 8px, 카피 색상 #888
       ※ .detail_info_top 을 낀 규칙이 따로 있어 같은 무게로 맞춰야 간격이 먹는다 */
    .goods_view .detail_info .prd_desc,
    .goods_view .detail_info .detail_info_top .prd_desc {margin-top:var(--space-2, 8px); font-size:14px; line-height:20px; color:var(--color-neutral-40, #888);}

    /* 가격 */
    /* 구분선 기준 위아래 16px (시안 2026-09-01) */
    .goods_view .detail_info .price_box,
    .goods_view .detail_info .detail_info_top .price_box {margin-top:var(--space-4, 16px); padding-top:var(--space-4, 16px); border-top:1px solid var(--color-neutral-80, #EBEBEB);}
    .goods_view .detail_info .price_box .per {font-size:26px; line-height:34px; font-weight:700; color:var(--color-green-30, #00A369);}
    .goods_view .detail_info .price_box .price {font-size:26px; line-height:34px; font-weight:700; color:var(--color-neutral-5, #222);}
    /* 정가 대비 할인율(.percent, _goodsDcRate2)은 판매가 앞 할인율(.per, _goodsDcRate)과 중복이라
       '둘 다 있을 때만' 감춘다. 할인 설정이 없는 상품은 .per 가 아예 안 그려지므로
       무조건 숨기면 PC 에서 할인율이 하나도 안 보인다(모바일만 나오던 이슈, 2026-09-07). */
    .goods_view .detail_info .price_box:has(.per) .percent {display:none;}
    /* 마크업상 정가(del) 뒤에 있어 그대로 두면 맨 오른쪽에 붙는다 — .per 와 같은 자리(판매가 앞)로 옮긴다 */
    .goods_view .detail_info .price_box .percent {order:-1; font-size:26px; line-height:34px; font-weight:700; color:var(--color-green-30, #00A369) !important;}

    /* --------------------------------------------------------------------
       우측 구매 영역
       -------------------------------------------------------------------- */
    /* gd_layout 의 #wrap .detail_buy { max-width:500px; width:500px; margin-left:-250px }
       (모바일 500px 기둥)이 ID를 포함해 더 강하다 → 같은 강도로 풀어야 열 폭을 다 쓴다 */
    #wrap.pcReady .goods_view .detail_buy {max-width:none; width:auto; margin-left:0; left:auto; right:auto;}
    .goods_view .detail_buy {margin-top:0; padding:0; border:0; background:none;}
    /* 모바일에서 화면 하단에 고정하던 구매 버튼을 PC에서는 흐름 안에 둔다 */
    .goods_view .detail_buy .ly_buy_dn,
    .goods_view .detail_buy .detail_buy_top_btn {position:static !important; left:auto !important; right:auto !important; bottom:auto !important; width:auto !important; max-width:none !important; padding:0 !important; background:none !important; box-shadow:none !important;}
    /* 모바일은 좌우 10px 패딩으로 버튼을 안쪽에 두는데, PC에서는 열 폭을 다 쓰게 한다 */
    .goods_view .detail_buy .detail_prd_btn {padding:0;}
    .goods_view .detail_buy .detail_prd_btn ul {display:flex; width:100%; gap:var(--space-2, 8px);}
    .goods_view .detail_buy .detail_prd_btn ul li {flex:1;}
    .goods_view .detail_buy .detail_prd_btn ul li a,
    .goods_view .detail_buy .detail_prd_btn ul li button {display:flex; align-items:center; justify-content:center; width:100%; height:56px; border-radius:var(--radius-1, 4px); font-size:18px; font-weight:700;}

    /* --------------------------------------------------------------------
       옵션·수량 (layer_option) — 버튼 없이 처음부터 펴 둔다
       goods_view.html 의 gd_pc_buy_box_sync() 가 PC에서만 보이게 한다.
       모바일 하단 시트용 장식(제목 "옵션선택", 닫기 X, 하단 여백)은 PC에서 걷어낸다.
       -------------------------------------------------------------------- */
    /* 좌우 여백은 여기 한 곳에서만 준다.
       상품정보·최대혜택가·표가 각자 padding:… 20px 이라 같은 값으로 맞춘다.
       안쪽 조각(옵션 영역·버튼)이 제각각 여백을 갖고 있어 왼쪽 라인이 어긋났다. */
    .goods_view .detail_buy .st_buy_content {position:static; width:auto; max-width:none; margin:0 0 var(--space-4, 16px); padding:0; background:none; box-shadow:none;}
    .goods_view .detail_buy .layer_option .js_option_scroll {padding-left:0; padding-right:0;}
    /* 옵션 위 구분선은 가상요소이고 스스로 20px 씩 들여쓴다(gd_common.css:239).
       여백을 위로 올렸으니 그 들여쓰기를 빼야 다른 선과 길이가 같아진다. */
    .goods_view .detail_buy .layer_option .select_box_view::before {width:100%; margin:0;}
    /* 옵션 상품은 위쪽 상품 줄을 감추므로 이 선이 박스 맨 위에 홀로 남는다 → 없앤다.
       (원래 상품 줄과 옵션 선택을 나누려던 선이다) */
    .goods_view .detail_buy.has_option .layer_option .select_box_view::before {display:none;}

    /* 옵션 목록 — 고를 수 있는 줄만 배경으로 짚어 준다 */
    .goods_view .detail_buy .layer_option .optbx .optlst li:not(.disabled):not(.disabled2):hover {background:var(--color-neutral-90, #F7F7F7); cursor:pointer;}
    .goods_view .detail_buy .st_buy_content .ly_head,
    .goods_view .detail_buy .st_buy_content .close_btn {display:none;}
    /* .layer_option 은 .ly_ct 이기도 해서 gd_common.css 의 overflow-y:scroll 이 걸린다.
       모바일 시트에서 안쪽만 스크롤하려는 규칙이라 PC에서는 스크롤바가 그냥 남는다. */
    .goods_view .detail_buy .layer_option,
    .goods_view .detail_buy .option_scroll {position:static; height:auto; max-height:none; padding:0; background:none; overflow:visible;}

    /* 선택된 상품 줄 — 시안의 회색 카드. 시안에는 상품 이미지가 없다.
       옵션 없는 상품은 .view_order_goods, 옵션을 고르면 .add_goods_box 가 붙는다 */
    .goods_view .detail_buy .itemhead {display:none;}
    /* 옵션이 있는 상품은 .view_order_goods 가 상품명·가격만 반복하고 수량 조절도 없다
       → 감추고, 옵션을 고르면 나오는 .add_goods_box 만 쓴다.
       has_option 은 goods_view.html 이 goodsView.optionFl 을 보고 붙인다
       (옵션 UI 마크업이 optionDisplayFl 값에 따라 s/d 두 갈래라 클래스로 못 잡는다).
       안에 있는 hidden 값은 감춰도 그대로 전송된다. */
    .goods_view .detail_buy.has_option .view_order_goods {display:none;}
    .goods_view .detail_buy .view_order_goods,
    .goods_view .detail_buy .add_goods_box {margin:0 0 var(--space-6, 24px); padding:var(--space-4, 16px); border:0; border-radius:var(--radius-2, 8px); background:var(--color-neutral-90, #F7F7F7);}
    /* 옵션 선택 박스(또는 위 상품정보)와 붙지 않게. 옵션을 여러 개 고르면 카드 사이 간격도 된다 */
    .goods_view .detail_buy .view_order_goods,
    .goods_view .detail_buy .add_goods_box {margin-top:var(--space-6, 24px);}
    .goods_view .detail_buy .add_goods_list li {padding:0; border:0; background:none;}
    /* 옵션 카드와 옵션 없는 상품 줄의 제목–가격 간격을 같은 값(4px)으로 맞춘다.
       옵션 카드는 .title 4px + .add_goods_content 의 margin-top 8px 이 겹쳐 12px 이었다. */
    .goods_view .detail_buy .add_goods_list .title {display:block; margin-bottom:var(--space-2, 8px); font-size:14px; line-height:20px; color:var(--color-neutral-5, #222);}
    .goods_view .detail_buy .add_goods_list li .add_goods_content {margin-top:0;}
    /* 삭제(X) — 24px 이라 아래 수량 버튼과 붙어 보인다. 같은 아이콘을 작게 쓴다 */
    .goods_view .detail_buy .cart_optdel_btn {top:0; width:16px; height:16px; background-size:16px;}
    .goods_view .detail_buy .add_goods_list li .add_goods_content .goods_price {font-size:16px; line-height:22px; font-weight:700; color:var(--color-neutral-5, #222);}
    /* 수량 입력칸 — 숫자 가운데 정렬.
       gd_common 의 text-align:center 는 .view_order_goods 안쪽에만 걸려 있어
       옵션을 고른 카드(.add_goods_box)에는 적용되지 않는다.
       그리고 input[type=number] 의 기본 스피너(⌃⌄)가 오른쪽 자리를 차지해
       가운데로 맞춰도 숫자가 왼쪽으로 밀린다 → 스피너를 없앤다.
       (− / + 버튼이 따로 있어 스피너는 쓰이지 않는다) */
    .goods_view .detail_buy .count input[type="number"] {text-align:center; -moz-appearance:textfield; appearance:textfield;}
    .goods_view .detail_buy .count input[type="number"]::-webkit-outer-spin-button,
    .goods_view .detail_buy .count input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}

    /* 상품명 위 / 가격·수량 아래 한 줄 (모바일은 썸네일 옆 table-cell 배치라 풀어 준다).
       썸네일을 감췄으니 그 옆자리용 여백(.optionKey_ 8px, dl 4px)도 같이 걷어낸다
       — 안 그러면 옵션 카드보다 박스가 눈에 띄게 커진다. */
    .goods_view .detail_buy .view_order_goods [class^="optionKey_"] {display:block; gap:0; padding:0;}
    .goods_view .detail_buy .view_order_goods dl {display:block; width:auto; padding:0;}
    /* dt 는 두 줄 자리를 미리 잡아 height:40px 로 고정돼 있다(gd_common.css:284)
       → 한 줄짜리 이름에서도 20px 이 빈 채로 남는다. 자동 높이로 되돌린다. */
    .goods_view .detail_buy .view_order_goods dl dt {display:block; width:auto; height:auto; margin-bottom:var(--space-1, 4px); font-size:16px; line-height:22px; font-weight:400; color:var(--color-neutral-40, #888);}
    .goods_view .detail_buy .view_order_goods dl dd {display:block; width:auto; margin-top:2px;}
    .goods_view .detail_buy .view_order_goods dl dd .price_info {display:flex; align-items:center; gap:var(--space-3, 12px);}
    .goods_view .detail_buy .view_order_goods dl dd .price_info .right {flex:0 0 auto; font-size:16px; line-height:22px; font-weight:700; color:var(--color-neutral-5, #222);}
    /* .count 가 display:table-cell; width:50% 이라 그대로 두면 수량이 가운데쯤 선다.
       margin-left:auto 로 오른쪽 끝에 붙인다. */
    .goods_view .detail_buy .view_order_goods dl dd .price_info .count {display:flex; align-items:center; width:auto; margin-left:auto; padding:0;}

    /* 합계 — 시안은 오른쪽 정렬에 초록 금액 */
    .goods_view .detail_buy .add_goods_total {margin:0 0 var(--space-6, 24px); padding:0; border:0; background:none;}
    .goods_view .detail_buy .add_goods_total ul li {display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2, 8px); padding:0;}
    .goods_view .detail_buy .add_goods_total ul li + li {margin-top:var(--space-1, 4px);}
    .goods_view .detail_buy .add_goods_total ul li span {font-size:16px; line-height:22px; font-weight:600; letter-spacing:-0.006em; color:var(--color-neutral-5, #222);}
    .goods_view .detail_buy .add_goods_total ul li.price strong,
    .goods_view .detail_buy .add_goods_total ul li.total strong {font-size:28px; line-height:38px; font-weight:700; letter-spacing:-0.006em; color:var(--color-green-40, #00B373);}

    /* --------------------------------------------------------------------
       붙어 있을 때(is_stuck) — 화면 높이만큼 세운 패널 (시안)
       상품명 → 회색박스 → (남는 공간) → 총금액 → 위시+구매버튼
       높이는 goods_view.html 이 화면 높이에서 헤더를 뺀 값으로 넣는다.
       -------------------------------------------------------------------- */
    /* 붙기 전에는 위쪽 상품명이 보이므로 숨긴다 */
    /* 표시 여부는 goods_view.html 이 인라인으로 다룬다 — 모바일에도 이 파일이 안 걸려 CSS 로는 못 감춘다 */
    /* 아래 여백은 옵션 선택 박스가 자기 위 여백(gd_common.css:238, 25px)을 갖고 있어 주지 않는다 */
    .goods_view .detail_buy.is_stuck .pc_buy_name {margin:0; padding:0; font-size:20px; line-height:28px; font-weight:600; letter-spacing:-0.006em; color:var(--color-neutral-5, #222);}
    /* 구매불가·회원전용도 살 수 있는 상품과 같이 안내 버튼을 패널 바닥에 붙인다(시안 코멘트).
       .detail_buy 의 직계 자식은 .js_goods_view_buy_btn 이 아니라 그것을 감싼 .detail_buy_top_btn 이다
       — flex item 이 아닌 요소에 margin-top:auto 를 주면 아무 일도 일어나지 않는다. */
    .goods_view .detail_buy.no_order.is_stuck .detail_buy_top_btn {margin-top:auto;}

    /* 바닥에 붙이기 위해 세로 흐름을 flex 로 이어 준다 */
    .goods_view .detail_buy.is_stuck {display:flex; flex-direction:column;}
    .goods_view .detail_buy.is_stuck .st_buy_content {flex:1; min-height:0; display:flex; flex-direction:column; margin-bottom:0;}
    .goods_view .detail_buy.is_stuck .layer_option {flex:1; min-height:0; display:flex; flex-direction:column;}
    .goods_view .detail_buy.is_stuck .layer_option > form {flex:1; min-height:0; display:flex; flex-direction:column;}
    /* 선택한 옵션 카드만 스크롤한다 — 옵션선택 박스와 총합계·버튼은 제자리에 고정.
       (goods_view.html 이 그 둘을 스크롤 영역 밖으로 빼 둔다) */
    /* overscroll-behavior 는 주지 않는다 — 목록 끝에 닿으면 페이지 스크롤로 이어져야 한다.
       contain 을 걸면 패널 위에 마우스가 있는 동안 페이지가 아예 안 움직여 답답하다. */
    .goods_view .detail_buy.is_stuck .layer_option .js_option_scroll {flex:1; min-height:0; overflow-y:auto;}
    /* 카드가 적을 때는 총금액이 아래에 붙도록 남는 공간을 밀어낸다 */
    .goods_view .detail_buy.is_stuck .add_goods_total {margin:auto 0 var(--space-4, 16px);}

    /* 총금액과 구매 버튼 사이는 붙인다 */
    .goods_view .detail_buy.is_stuck .st_buy_content {margin-bottom:0;}
    .goods_view .detail_buy.is_stuck .add_goods_total {padding-top:var(--space-3, 12px);}

    /* 패널에서는 배송 안내를 빼고 구매에만 집중한다(시안) */
    .goods_view .detail_buy.is_stuck .item_delivery_schedule {display:none;}

    /* 위시 버튼 — 붙으면 구매 버튼 줄 맨 앞으로 옮겨 온다(goods_view.html).
       .prd_util 안에서 받던 아이콘·크기 규칙이 함께 따라오지 않으므로 여기서 다시 준다. */
    .goods_view .detail_buy .js_cart_btn li.d_wish {flex:0 0 56px;}
    .goods_view .detail_buy .js_cart_btn li.d_wish button.btn_add_wish {width:100%; height:56px; border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:var(--radius-1, 4px); background:url(../../images/icon/heart.png) no-repeat center / 24px; font-size:0; text-indent:0; overflow:hidden;}
    .goods_view .detail_buy .js_cart_btn li.d_wish button.btn_add_wish.on {background-image:url(../../images/icon/heart_on.png);}

    /* --------------------------------------------------------------------
       탭 — 전체 폭, 상단 고정
       -------------------------------------------------------------------- */
    /* 배경(goods.css:540 의 모바일 규칙)을 반드시 지울 것 — 이 박스가 상세정보를 덮는 크기라
       흰 배경이 남아 있으면 본문이 통째로 가려진다. 흰 배경은 안쪽 탭 줄만 갖는다. */
    .goods_view .detail_btm_tab_menu_box {margin-top:var(--space-12, 48px); border-top:0; border-bottom:0; background:none;}
    /* 스크롤하면 헤더(스크롤 중 fixed) 바로 아래에 붙는다 — 높이는 스크립트가 실측해 넣는다 */
    .goods_view .detail_btm_tab_menu {position:sticky; top:var(--gd-hdr-h, 0px); pointer-events:auto; background:var(--color-common-100, #fff); border-bottom:0;}
    /* 탭 아래 구분선은 화면 가로 전체로 뻗는다(시안 코멘트 2026-09-02).
       탭 줄 자체는 상세 영역 폭이라 border 로는 780~960px 에서 끊긴다 →
       가로 100vw 짜리 줄을 따로 깐다. (가로 스크롤은 gd_layout.css 의 html overflow-x:hidden 이 막는다) */
    /* left:50% + 100vw 로는 탭 줄이 화면 가운데가 아니라서 오른쪽이 모자란다
       (줄이 '요소' 기준으로 가운데 정렬되기 때문). 양쪽으로 넉넉히 뻗고
       넘치는 만큼은 gd_layout.css 의 html{overflow-x:hidden} 이 잘라 낸다 */
    .goods_view .detail_btm_tab_menu::after {content:''; position:absolute; left:-200vw; right:-200vw; bottom:0; height:1px; background:var(--color-neutral-80, #EBEBEB);}
    /* 위 줄과 겹치는 선택 탭의 초록 밑줄이 가려지지 않게 위로 올린다 */
    .goods_view .detail_btm_tab_menu ul li.selected {position:relative; z-index:1;}
    .goods_view .detail_btm_tab_menu ul {border-bottom-color:transparent;}
    .goods_view .detail_sub_lst {display:flex;}
    .goods_view .detail_sub_lst > li {flex:1; text-align:center;}
    /* goods.css:544 의 '.detail_btm_tab_menu ul li a' 가 더 구체적이라(클래스4+요소3)
       .detail_sub_lst 로만 쓰면 글자 크기가 밀린다 → 같은 셀렉터로도 지정한다 */
    .goods_view .detail_sub_lst > li > a,
    .goods_view .detail_sub_lst > li > button,
    .goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li a {display:block; width:100%; height:auto; padding:var(--space-4, 16px) 0; border:0; background:none; font-size:16px; line-height:24px; font-weight:400; letter-spacing:-0.006em; color:var(--color-neutral-10, #333); cursor:pointer;}
    /* 개수 표기 '(5)' */
    .goods_view .detail_sub_lst > li > a .itemnum,
    .goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li a span {font-size:14px; line-height:20px; font-weight:400; letter-spacing:-0.006em; color:var(--color-neutral-60, #CCC);}
    /* 선택된 탭 — 밑줄은 유지하고 글자는 시안 색상으로 */
    .goods_view .detail_sub_lst > li.selected > a,
    .goods_view .detail_sub_lst > li.selected > button,
    .goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li.selected a {font-size:16px; line-height:22px; font-weight:600; letter-spacing:-0.006em; color:var(--color-neutral-5, #222); box-shadow:none;}

    /* --------------------------------------------------------------------
       상세정보 본문
       관리자 콘텐츠가 모바일 폭 기준이라 늘리지 않고 가운데 정렬한다.
       -------------------------------------------------------------------- */
    .goods_view .view_box0 {padding:var(--space-8, 32px) 0 0;}
    /* 상세페이지 이미지를 최대 780px 로 제작하므로 그보다 넓히면 확대되어 흐려진다
       — 콘텐츠 폭을 780px 로 묶고 가운데 정렬한다(시안 2026-09-01) */
    .goods_view .view_box0.js_goods_description {max-width:780px; margin:0 auto;}
    .goods_view .view_box0 img {max-width:100%; height:auto;}
    .goods_view .view_box0 iframe,
    .goods_view .view_box0 video {max-width:100%;}


    /* 레시피 블록(.pdt_dt .recipe) — 관리자 상세페이지 안의 조리법 영역.
       이 요소에 display:inline-flex + flex-direction:column + align-items:flex-start + gap 을
       주는 규칙이 스킨 밖(외부 호스팅 CSS)에서 들어온다. 스킨 CSS 로는 확인되지 않는다.
       모바일(375px)에서는 칸이 좁아 자식이 꽉 차 보이지만, PC 780px 에서는
       align-items:flex-start 때문에 자식(.ingr / .howto)이 제 내용 폭(약 485px)으로 줄고
       gap 만큼 사이가 벌어진다 → 평범한 블록 흐름으로 되돌린다.
       (.howto 의 border-top:0 (goods.css:826) 은 위 박스와 맞붙는 것을 전제한 값이다) */
    .goods_view .view_box0 .pdt_dt .recipe {display:block;}
    /* 체크포인트 불릿(칸 접힘) 대응은 모바일과 공통이라 goods.css:819 로 옮겼다 */
    /* 다만 블록 사이 간격(원래 flex gap 30px)까지 없어지면 이미지·제목이 박스에 맞붙는다
       → 흐름은 블록으로 두고 간격만 되살린다. 서로 붙어야 하는 건 조리 박스끼리뿐이다. */
    .goods_view .view_box0 .pdt_dt .recipe > * + * {margin-top:30px;}
    .goods_view .view_box0 .pdt_dt .recipe > .ingr + .howto,
    .goods_view .view_box0 .pdt_dt .recipe > .howto + .howto {margin-top:0;}
    /* 관리자가 등록한 상세페이지 표에는 아무 규칙도 두지 않는다.
       상품필수정보는 <table> 이 아니라 <dl> 이라(goods_view.html) 여기 걸릴 표는 관리자 콘텐츠뿐이다.

       특히 table {width:100%} 는 절대 넣지 말 것 —
       goods.css:567 의 '.view_box0 img {width:100%}' 때문에 칸 안 이미지의 최소 내용 폭이 0 으로
       잡히고, 표를 늘리면 글자 칸이 남는 폭을 다 가져가 아이콘 칸이 0 으로 찌그러진다
       (체크포인트 불릿이 0×0 으로 사라진다 — 2026-09-04 두 번 겪음).
       조리법 표 폭은 goods.css:828 의 '.steps {width:100%}' 가 이미 잡아 준다.

       th/td 의 글자 크기·padding·구분선도 마찬가지 —
       검수의 '16→14px', '줄마다 회색 선'이 그 규칙 탓이었다. */

    /* --------------------------------------------------------------------
       관련 상품
       -------------------------------------------------------------------- */
    .goods_view .goods_view_relation {margin-top:var(--space-12, 48px);}
}

/* ==========================================================================
   상품상세에서 열리는 나머지 레이어 PC
   - #popupCoupon          쿠폰 받기        (goods/layer_coupon_down.html)
   - #popupDetailInfo      조건부배송 / 지역별 추가배송 / 상품 고시정보 (goods/goods_info.html)
   - #popupDeliverySchedule 당일발송 안내
   셋 다 .layerWrap 구조가 아니라 gd_layout.css 의 PC 모달 규칙이 걸리지 않는다
   (걸리는 것: #popupOption 은 gd_layout, #popupBoard 계열은 css/board/board.css).
   스크롤은 카드가 맡고 머리말·버튼은 sticky 로 고정한다.
   @entwiz 2026-08-27
   ========================================================================== */
@media (min-width: 1024px) {
    #wrap.pcReady #popupCoupon > .ly_wrap,
    #wrap.pcReady #popupDetailInfo > .ly_wrap,
    #wrap.pcReady #popupDeliverySchedule > .ly_wrap {position:fixed !important; left:50% !important; top:50% !important; right:auto !important; bottom:auto !important; transform:translate(-50%, -50%) !important; display:block !important; width:520px !important; max-width:calc(100% - 40px) !important; height:auto !important; max-height:calc(100vh - 80px) !important; margin:0 !important; padding:0 !important; border-radius:var(--radius-3, 12px); background:var(--color-common-100, #fff) !important; box-shadow:var(--shadow-strong, 0 2px 12px rgba(0, 0, 0, .15)); overflow-y:auto; overscroll-behavior:contain;}

    #wrap.pcReady #popupCoupon > .ly_wrap::-webkit-scrollbar,
    #wrap.pcReady #popupDetailInfo > .ly_wrap::-webkit-scrollbar,
    #wrap.pcReady #popupDeliverySchedule > .ly_wrap::-webkit-scrollbar {width:10px;}
    #wrap.pcReady #popupCoupon > .ly_wrap::-webkit-scrollbar-track,
    #wrap.pcReady #popupDetailInfo > .ly_wrap::-webkit-scrollbar-track,
    #wrap.pcReady #popupDeliverySchedule > .ly_wrap::-webkit-scrollbar-track {background:transparent;}
    #wrap.pcReady #popupCoupon > .ly_wrap::-webkit-scrollbar-thumb,
    #wrap.pcReady #popupDetailInfo > .ly_wrap::-webkit-scrollbar-thumb,
    #wrap.pcReady #popupDeliverySchedule > .ly_wrap::-webkit-scrollbar-thumb {border:3px solid transparent; border-radius:5px; background:var(--color-neutral-70, #DFDFDF); background-clip:padding-box;}

    /* 모바일용 전체화면 래퍼(.st-container: height 100% + 위아래 큰 패딩)를 푼다 */
    #wrap.pcReady #popupCoupon .st-container,
    #wrap.pcReady #popupDetailInfo .st-container,
    #wrap.pcReady #popupDeliverySchedule .st-container {height:auto; padding:0; overflow:visible;}

    /* 본문은 카드 흐름 그대로 — 안쪽에 스크롤을 또 만들지 않는다 */
    #wrap.pcReady #popupCoupon .ly_ct,
    #wrap.pcReady #popupDetailInfo .ly_ct,
    #wrap.pcReady #popupDeliverySchedule .ly_ct,
    #wrap.pcReady #popupCoupon .ly_content,
    #wrap.pcReady #popupDetailInfo .ly_content,
    #wrap.pcReady #popupDeliverySchedule .ly_content {height:auto; max-height:none; padding:var(--space-5, 20px) var(--space-6, 24px); overflow:visible;}

    /* 제목 줄 */
    #wrap.pcReady #popupCoupon .ly_head,
    #wrap.pcReady #popupDetailInfo .ly_head,
    #wrap.pcReady #popupDeliverySchedule .ly_head {position:sticky; top:0; left:auto; z-index:3; width:auto; height:60px; padding:0 56px; border-bottom:1px solid var(--color-neutral-80, #EBEBEB); background:var(--color-common-100, #fff); line-height:60px;}

    /* 닫기(X)는 마크업상 본문 뒤라 스크롤에 밀린다 — 담은 래퍼를 flex 로 세워 첫 자리로 올린다 */
    #wrap.pcReady #popupCoupon .st-container,
    #wrap.pcReady #popupDetailInfo .st-container,
    #wrap.pcReady #popupDeliverySchedule .st-container,
    #wrap.pcReady #popupCoupon :has(> .close_btn),
    #wrap.pcReady #popupDetailInfo :has(> .close_btn),
    #wrap.pcReady #popupDeliverySchedule :has(> .close_btn) {display:flex; flex-direction:column;}
    #wrap.pcReady #popupCoupon .close_btn,
    #wrap.pcReady #popupDetailInfo .close_btn,
    #wrap.pcReady #popupDeliverySchedule .close_btn {order:-1; position:sticky; top:0; left:auto; right:auto; z-index:5; align-self:flex-end; width:auto; height:0;}
    #wrap.pcReady #popupCoupon .close_btn .lys_close_btn,
    #wrap.pcReady #popupDetailInfo .close_btn .lys_close_btn,
    #wrap.pcReady #popupDeliverySchedule .close_btn .lys_close_btn {position:relative; top:18px; right:20px; cursor:pointer;}

    /* 하단 [닫기] 버튼 줄(goods_info.html 의 .btn_box)은 카드 바닥에 */
    #wrap.pcReady #popupCoupon .btn_box,
    #wrap.pcReady #popupDetailInfo .btn_box,
    #wrap.pcReady #popupDeliverySchedule .btn_box {position:sticky; left:auto; bottom:0; z-index:3; width:auto; max-width:none; transform:none; padding:var(--space-4, 16px) var(--space-6, 24px); border-top:1px solid var(--color-neutral-80, #EBEBEB); background:var(--color-common-100, #fff);}
    #wrap.pcReady #popupCoupon .btn_box button,
    #wrap.pcReady #popupDetailInfo .btn_box button,
    #wrap.pcReady #popupDeliverySchedule .btn_box button {height:48px; cursor:pointer;}
}

/* 네이버페이 버튼(비로그인) — PC 구매영역 아래에 붙는다 */
@media (min-width: 1024px) {
    #wrap.pcReady .goods_view .detail_buy .js_goods_add_pay {margin-top:var(--space-3, 12px);}
    #wrap.pcReady .goods_view .detail_buy .js_goods_add_pay .snsbtn {display:flex; justify-content:center;}
}

/* --------------------------------------------------------------------------
   회원전용 / 구매불가 상품 — 안내 버튼과 말풍선
   PC 는 구매영역이 펼쳐져 있지만, 살 수 없는 상품은 옵션 박스 대신
   이 안내를 그대로 둔다(goods_view.html 의 gd_pc_buy_box_sync).
   말풍선은 모바일에서 화면 우하단 고정이라 PC 에서는 안내 버튼 아래로 옮겨 붙인다.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    #wrap.pcReady .goods_view .detail_buy .member_only_box {position:relative; gap:var(--space-2, 8px); padding:0;}
    /* 위 '.detail_prd_btn ul li button' 규칙(width:100%)이 [?] 버튼에도 걸려
       안내 버튼과 자리를 반씩 나눠 갖는다 — 텍스트가 세로로 눌린다. 여기서 되돌린다. */
    #wrap.pcReady .goods_view .detail_buy .member_only_box .btn_member_only {display:flex; align-items:center; justify-content:center; flex:1; width:auto; height:56px; cursor:default;}
    /* 모바일에서 글자를 위로 올리려고 준 margin-bottom:10px(goods.css) 때문에 세로가 어긋난다 */
    #wrap.pcReady .goods_view .detail_buy .member_only_box .btn_member_only span {display:inline-flex; align-items:center; margin-bottom:0;}
    #wrap.pcReady .goods_view .detail_buy .member_only_box .btn_help {flex:none; width:40px; height:40px; border-radius:0; cursor:pointer;}
    #wrap.pcReady .goods_view .detail_buy .detail_prd_no_btn {display:flex; align-items:center; justify-content:center; height:56px; border-radius:var(--radius-1, 4px); background:var(--color-neutral-80, #EBEBEB); color:var(--color-neutral-50, #AAA); font-size:16px; font-weight:600;}

    /* 버튼 아래로 내려 붙인다 — 화살표도 위를 향하도록 뒤집는다.
       goods.css 끝의 '@media (min-width:900px) { left:50% !important; margin-left:-243px }' 는
       모바일 500px 기둥 한가운데에 띄우려는 규칙이라 PC 에서는 말풍선을 왼쪽으로 밀어낸다
       — !important 로 걸려 있어 같은 강도로 되돌린다. */
    #wrap.pcReady .member_only_tooltip {position:absolute; left:auto !important; right:0; top:calc(100% + 10px); bottom:auto; width:300px; margin-left:0 !important;}
    #wrap.pcReady .member_only_tooltip .arrow {right:16px; top:-6px; bottom:auto; border-top:0; border-bottom:6px solid var(--color-common-100, #fff);}
    #wrap.pcReady .member_only_tooltip .arrow::before {top:-3px; border-top:0; border-bottom:8px solid rgba(0, 0, 0, .15);}

    /* 패널에 붙은 상태에서는 안내 버튼이 바닥에 있어, 말풍선을 아래로 열면 화면 밖으로 나간다
       → 버튼 위로 뒤집는다(화살표도 다시 아래를 향하게). */
    #wrap.pcReady .goods_view .detail_buy.is_stuck .member_only_tooltip {top:auto; bottom:calc(100% + 10px);}
    #wrap.pcReady .goods_view .detail_buy.is_stuck .member_only_tooltip .arrow {top:auto; bottom:-6px; border-bottom:0; border-top:6px solid var(--color-common-100, #fff);}
    #wrap.pcReady .goods_view .detail_buy.is_stuck .member_only_tooltip .arrow::before {top:auto; bottom:-3px; border-bottom:0; border-top:8px solid rgba(0, 0, 0, .15);}

    /* 말풍선이 .member_only_box(=구매버튼 li) 안으로 들어가 있어서
       위쪽 '.detail_prd_btn ul li a / button {width:100%; height:56px; font-size:16px}' 이
       말풍선 안의 닫기·로그인·회원가입까지 구매버튼처럼 키워 버린다 — 여기서 되돌린다. */
    #wrap.pcReady .goods_view .detail_buy .member_only_tooltip a,
    #wrap.pcReady .goods_view .detail_buy .member_only_tooltip button {display:inline-block; width:auto; height:auto; border-radius:0; font-size:inherit; font-weight:inherit;}
    #wrap.pcReady .goods_view .detail_buy .member_only_tooltip .btn_close {position:absolute; right:16px; top:16px; width:24px; height:24px; cursor:pointer;}
    #wrap.pcReady .goods_view .detail_buy .member_only_tooltip .btn_login {display:flex; align-items:center; justify-content:center; width:100%; height:40px; margin:8px 0; border-radius:var(--radius-1, 4px); font-size:16px; font-weight:600; cursor:pointer;}
    #wrap.pcReady .goods_view .detail_buy .member_only_tooltip .join {font-size:12px; line-height:22px;}
    #wrap.pcReady .goods_view .detail_buy .member_only_tooltip .join a {font-size:13px; font-weight:600; cursor:pointer;}
}

/* ==========================================================================
   상품필수 정보 (.openblock) — PC
   모바일은 위쪽 8px 회색 띠로 구분하는데, PC 는 띠를 빼고 여백(48px)으로 띄운다.
   시안 2026-09-01: 제목 20px / 항목명 148px / 셀 위 패딩 20px
   ========================================================================== */
@media (min-width: 1024px) {
    #wrap.pcReady .goods_view .openblock {margin-top:48px; padding-top:0; border-top:0;}

    #wrap.pcReady .goods_view .openblock .openblock_header {height:auto; padding:0 0 20px !important; font-size:20px !important;}
    #wrap.pcReady .goods_view .openblock .openblock_header h3 {font-size:20px; line-height:28px; font-weight:700; color:var(--color-neutral-5, #222);}
    #wrap.pcReady .goods_view .openblock .openblock_content {padding:0;}
    /* 열기/닫기 아이콘 28px (시안) */
    #wrap.pcReady .goods_view .openblock .openblock_header button span {width:28px; height:28px; background-size:28px auto;}
    /* 헤더 패딩을 바꿨으므로 토글 버튼 위치도 맞춘다 */
    #wrap.pcReady .goods_view .openblock .openblock_header .toggle_btn {top:0; right:0;}

    /* 항목명 148px 고정 · 셀 위 패딩 20px (모바일의 구분선 + 12px 여백을 대체) */
    #wrap.pcReady .goods_view .openblock_content dl.flexBox {gap:var(--space-3, 12px);}
    /* 모든 행에 위쪽 구분선과 같은 여백을 준다 — 첫 행(제품명)도 예외 없이 */
    #wrap.pcReady .goods_view .openblock_content dl {padding:20px 0; border-top:1px solid var(--color-neutral-90, #F7F7F7);}
    #wrap.pcReady .goods_view .openblock_content dl + dl {margin-top:0;}
    #wrap.pcReady .goods_view .openblock_content dl dt {flex:none; width:148px; min-width:148px; font-size:14px; line-height:20px; font-weight:500; color:var(--color-neutral-10, #333);}
    #wrap.pcReady .goods_view .openblock_content dl dd {font-size:14px; line-height:20px; color:var(--color-neutral-40, #888);}
}

/* 관련 상품 — 모바일의 8px 회색 띠 대신 48px 여백으로 띄운다 (시안 2026-09-01) */
@media (min-width: 1024px) {
    #wrap.pcReady .goods_view .related_goods.scrollType {margin-top:48px; padding:0; border-top:0;}
    #wrap.pcReady .goods_view .related_goods h3 {padding:0 0 12px 0 !important; font-size:20px !important; line-height:28px; font-weight:700; color:var(--color-neutral-5, #222);}
}

/* ==========================================================================
   관련 상품 — 상품 목록과 같은 카드 + 슬라이드 (시안 2026-09-01)
   담기 버튼을 카드 하단 전체폭으로 내리고, 가로 스크롤 대신 slick 으로 넘긴다.
   (슬라이드 초기화는 goods_view.html 의 gd_pc_relation_slider)
   ========================================================================== */
@media (min-width: 1024px) {
    /* 가로 스크롤 해제 — 배치는 slick 이 잡는다 */
    #wrap.pcReady .goods_view .related_goods.scrollType ul.list {display:block; gap:0; padding-bottom:0; overflow:visible;}
    /* slick 이 만든 트랙은 flex 가 아니라 자체 배치를 쓴다 — 부모의 flex 잔재를 지운다 */
    #wrap.pcReady .goods_view .related_goods .slick-track {display:flex; align-items:stretch;}
    #wrap.pcReady .goods_view .related_goods .slick-list {overflow:hidden;}
    /* 한 화면에 3.2 개 — slick 은 소수 slidesToShow 를 못 받으므로
       3칸으로 두고 목록 오른쪽에 여백을 남겨 다음 카드가 걸쳐 보이게 한다.
       (variableWidth 로 폭을 직접 주면 화살표 이동량 계산이 어긋나 한 번에 안 넘어간다) */
    #wrap.pcReady .goods_view .related_goods .slick-list {margin:0 -10px; padding-right:60px;}
    #wrap.pcReady .goods_view .related_goods ul.list > li,
    #wrap.pcReady .goods_view .related_goods .slick-slide {min-width:0 !important; margin:0 !important; padding:0 10px;}

    /* 카드 — 담기 버튼 자리를 아래에 만든다 */
    #wrap.pcReady .goods_view .related_goods .goods_prd_item2 {position:relative; padding-bottom:52px;}
    #wrap.pcReady .goods_view .related_goods .goods_prd_item2 .prd_utils {position:static;}
    /* 썸네일 정사각 */
    #wrap.pcReady .goods_view .related_goods .goods_prd_img .img_box {position:relative; padding-top:100%; border-radius:var(--radius-2, 8px); overflow:hidden; background:var(--color-neutral-90, #F7F7F7);}
    #wrap.pcReady .goods_view .related_goods .goods_prd_img .img_box .img {position:absolute; left:0; top:0; width:100%; height:100%;}
    #wrap.pcReady .goods_view .related_goods .goods_prd_img .img_box .img img {width:100%; height:100%; object-fit:cover;}

    /* 담기 버튼 — 목록과 같은 흰 배경 + 초록 테두리 */
    /* li 자체가 카드(.goods_prd_item2)이고 좌우 10px 패딩을 갖는다 —
       absolute 는 패딩을 무시하므로 left/right 를 그만큼 들여야 카드 안에 들어온다 */
    #wrap.pcReady .goods_view .related_goods .goods_prd_btn {position:absolute; left:10px; right:10px; bottom:0; height:auto !important; opacity:1;}
    #wrap.pcReady .goods_view .related_goods .goods_prd_btn button.addCart,
    #wrap.pcReady .goods_view .related_goods .goods_prd_btn button.btn_prd_cart {display:flex !important; align-items:center; justify-content:center; width:100% !important; min-width:0 !important; height:40px !important; border:1px solid var(--color-green-40, #00B373); border-radius:var(--radius-1, 4px); background:var(--color-common-100, #fff) !important; font-size:0; transition:background-color .18s; cursor:pointer;}
    #wrap.pcReady .goods_view .related_goods .goods_prd_btn button.addCart::after,
    #wrap.pcReady .goods_view .related_goods .goods_prd_btn button.btn_prd_cart::after {content:'장바구니'; font-size:16px; line-height:24px; font-weight:600; letter-spacing:-0.006em; color:var(--color-green-40, #00B373);}
    #wrap.pcReady .goods_view .related_goods .goods_prd_btn button.addCart:hover,
    #wrap.pcReady .goods_view .related_goods .goods_prd_btn button.btn_prd_cart:hover {background:var(--color-green-90, #E6F7F1) !important;}
    #wrap.pcReady .goods_view .related_goods .goods_prd_btn button.speedOrder,
    #wrap.pcReady .goods_view .related_goods .goods_prd_btn button.btn_prd_speed {display:none !important;}

    /* 좌우 화살표 — 썸네일 위 가운데 */
    #wrap.pcReady .goods_view .related_goods {position:relative;}
    #wrap.pcReady .goods_view .related_goods .slick-arrow {position:absolute; top:50%; z-index:2; width:40px; height:40px; margin-top:-40px; border:0; border-radius:50%; background:rgba(255, 255, 255, .92); box-shadow:0 2px 8px rgba(0, 0, 0, .16); font-size:0; opacity:.5; cursor:pointer; transition:background .2s, opacity .2s;}
    #wrap.pcReady .goods_view .related_goods .slick-arrow:hover {background:var(--color-common-100, #fff); opacity:1;}
    #wrap.pcReady .goods_view .related_goods .slick-arrow.slick-disabled {display:none !important;}
    #wrap.pcReady .goods_view .related_goods .slick-prev {left:-12px;}
    #wrap.pcReady .goods_view .related_goods .slick-next {right:-12px;}
    #wrap.pcReady .goods_view .related_goods .slick-arrow::after {content:''; position:absolute; left:50%; top:50%; width:9px; height:9px; border-top:2px solid var(--color-neutral-10, #333); border-right:2px solid var(--color-neutral-10, #333);}
    #wrap.pcReady .goods_view .related_goods .slick-prev::after {margin:-5px 0 0 -3px; transform:rotate(-135deg);}
    #wrap.pcReady .goods_view .related_goods .slick-next::after {margin:-5px 0 0 -6px; transform:rotate(45deg);}
}

/* 관련 상품 — 상품명은 한 줄, 넘치면 말줄임 (시안 2026-09-01) */
@media (min-width: 1024px) {
    #wrap.pcReady .goods_view .related_goods .prd_name {display:block; min-height:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; line-height:20px;}
}

/* ==========================================================================
   상품문의 목록 — PC (시안 2026-09-02)
   머리줄에 제목 + 우측 [문의하기] 텍스트 링크, 목록은 전체 폭,
   한 줄에 상태뱃지·이름·날짜·(우측)신고하기 / 아랫줄에 제목.
   ========================================================================== */
@media (min-width: 1024px) {
    /* 머리줄 — 버튼 상자를 우측 텍스트 링크로 */
    #wrap.pcReady .goods_view .detail_board_box .item_list_head {display:flex; align-items:center; justify-content:space-between; height:40px; margin-top:48px; padding:0; border-bottom:0;}
    /* 제목은 마크업에 없어 여기서 넣는다 — 후기·문의가 같은 .item_list_head 를 쓰므로
       goods_view.html 에서 js_head_review / js_head_qa 로 구분해 뒀다 (2026-09-04) */
    #wrap.pcReady .goods_view .detail_board_box .item_list_head::before {font-size:20px; line-height:26px; font-weight:600; letter-spacing:-0.006em; color:var(--color-neutral-5, #222);}
    #wrap.pcReady .goods_view .detail_board_box .item_list_head.js_head_review::before {content:'상품후기';}
    #wrap.pcReady .goods_view .detail_board_box .item_list_head.js_head_qa::before {content:'상품문의';}
    /* 후기·문의가 없을 때 안내문만 남아 아래가 허전하다 — 위아래 여백을 준다 */
    #wrap.pcReady .goods_view .detail_board_box .no_list {margin-top:16px; padding:56px 0; border-top:1px solid var(--color-neutral-90, #F7F7F7); text-align:center; font-size:14px; line-height:20px; color:var(--color-neutral-40, #888);}
    #wrap.pcReady .goods_view .detail_board_box .item_list_head .item_list_write_box {padding:0;}
    #wrap.pcReady .goods_view .detail_board_box .detail_write_btn {display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:96px; height:40px; padding:0; border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:var(--radius-1, 4px); background:var(--color-common-100, #fff); font-size:16px; line-height:24px; font-weight:600; letter-spacing:-0.006em; color:var(--color-green-40, #00B373);}
    #wrap.pcReady .goods_view .detail_board_box .detail_write_btn::before {display:none;}   /* + 아이콘 미노출 */
    #wrap.pcReady .goods_view .detail_board_box .detail_write_btn:hover {text-decoration:underline;}
    /* 목록 — 전체 폭, 행 사이 연한 구분선 */
    /* 목록 위에 연회색 테두리, 아래 선은 더보기 버튼 위에 둔다 (시안) */
    #wrap.pcReady .goods_view .goods_board_qa_list {margin-top:var(--space-4, 16px); border-top:1px solid var(--color-neutral-90, #F7F7F7);}
    #wrap.pcReady .goods_view .goods_board_qa_list li {padding:16px 0;}
    #wrap.pcReady .goods_view .goods_board_qa_list li + li {border-top:1px solid var(--color-neutral-90, #F7F7F7);}
    #wrap.pcReady .goods_view .goods_board_qa_list li .item_list_summary {display:block; width:100%;}
    #wrap.pcReady .goods_view .goods_board_qa_list li .item_list_summary .board_left {display:block; width:100%;}
    /* 윗줄: 뱃지 · 이름 · 날짜 (신고하기는 오른쪽 끝) */
    #wrap.pcReady .goods_view .goods_board_qa_list .author_box {gap:var(--space-2, 8px);}
    #wrap.pcReady .goods_view .goods_board_qa_list .author_box .ico_ans1,
    #wrap.pcReady .goods_view .goods_board_qa_list .author_box .ico_ans2,
    #wrap.pcReady .goods_view .goods_board_qa_list .author_box .ico_ans3 {align-items:center; justify-content:center; height:22px; padding:0 8px; border-radius:999px; font-size:12px; line-height:16px; font-weight:500; letter-spacing:-0.006em; text-align:center; color:var(--color-common-100, #fff);}   /* 시안: 알약형 */
    #wrap.pcReady .goods_view .goods_board_qa_list .author_box span.name {font-size:14px; line-height:22px; font-weight:400; letter-spacing:-0.006em; color:var(--color-neutral-10, #333);}
    #wrap.pcReady .goods_view .goods_board_qa_list .author_box span.date {font-size:12px; line-height:16px; font-weight:400; letter-spacing:-0.006em; color:var(--color-neutral-60, #CCC);}
    #wrap.pcReady .goods_view .goods_board_qa_list .author_box button.btn_report {font-size:12px; line-height:16px; color:var(--color-neutral-60, #CCC); cursor:pointer;}
    /* 아랫줄: 제목 */
    #wrap.pcReady .goods_view .goods_board_qa_list .title {padding:6px 0 0;}
    #wrap.pcReady .goods_view .goods_board_qa_list .title a {font-size:16px; line-height:24px; font-weight:400; letter-spacing:-0.006em; color:var(--color-neutral-10, #333);}
    /* 모바일에서 우측 칸(15%)에 있던 화살표 자리는 PC 에서 쓰지 않는다 */
    #wrap.pcReady .goods_view .goods_board_qa_list .item_list_summary .board_right {display:none;}

    /* 더보기 — 가운데 고정폭 */
    #wrap.pcReady .goods_view .goods_board_qa_list .btn_box {display:flex; justify-content:center; margin-top:0; padding:24px 0 0; border-top:1px solid var(--color-neutral-90, #F7F7F7);}
    #wrap.pcReady .goods_view .goods_board_qa_list .btn_box a,
    #wrap.pcReady .goods_view .goods_board_qa_list .btn_box button {display:inline-flex; align-items:center; justify-content:center; min-width:246px; max-width:246px; width:100%; height:38px; margin:0 auto; padding:0 var(--space-6, 24px); border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:var(--radius-1, 4px); background:var(--color-common-100, #fff); font-size:16px; line-height:22px; font-weight:500; letter-spacing:-0.006em; color:var(--color-neutral-5, #222); cursor:pointer;}

    /* ----------------------------------------------------------------------
       상품후기 목록 — 상품문의와 같은 타이포·간격으로 맞춘다 (시안 2026-09-04)
       마크업은 board/_plus_review_list_01.html (.item_list_summary_new 구조)
       ---------------------------------------------------------------------- */
    /* 모바일은 위쪽을 8px 회색 띠로 끊는데 PC 에서는 1px 선으로 (요청: border 가 너무 두껍다) */
    #wrap.pcReady .goods_view .plus_review_container .plus_review_list,
    #wrap.pcReady .goods_view .goods_board_review_list {margin-top:var(--space-4, 16px); border-top:1px solid var(--color-neutral-90, #F7F7F7);}
    #wrap.pcReady .goods_view .goods_board_review_list li {padding:var(--space-4, 16px) 0;}
    #wrap.pcReady .goods_view .goods_board_review_list li + li {border-top:1px solid var(--color-neutral-90, #F7F7F7);}
    /* 윗줄: 별점 · 이름 · 날짜 — 상품문의의 뱃지/이름/날짜와 같은 값 */
    #wrap.pcReady .goods_view .goods_board_review_list .author_box {gap:var(--space-2, 8px);}
    #wrap.pcReady .goods_view .goods_board_review_list .author_box .name {font-size:14px; line-height:22px; font-weight:400; letter-spacing:-0.006em; color:var(--color-neutral-10, #333);}
    #wrap.pcReady .goods_view .goods_board_review_list .author_box .date {font-size:12px; line-height:16px; font-weight:400; letter-spacing:-0.006em; color:var(--color-neutral-60, #CCC);}
    /* 제목줄(있을 때만) — 시안의 회색 한 줄 */
    #wrap.pcReady .goods_view .goods_board_review_list .title {padding:var(--space-1, 4px) 0 0; font-size:14px; line-height:20px; color:var(--color-neutral-40, #888);}
    /* 본문 — 상품문의 제목과 같은 16/24 */
    #wrap.pcReady .goods_view .goods_board_review_list .subject {margin-top:var(--space-1, 4px); font-size:16px; line-height:24px; letter-spacing:-0.006em; color:var(--color-neutral-10, #333);}
    #wrap.pcReady .goods_view .goods_board_review_list .subject a {font-size:16px; line-height:24px; letter-spacing:-0.006em; color:var(--color-neutral-10, #333);}
    /* 첨부 썸네일은 우측에 고정 크기로 — 본문이 밀리지 않게 */
    #wrap.pcReady .goods_view .goods_board_review_list .re_content {gap:var(--space-4, 16px); align-items:flex-start;}
    #wrap.pcReady .goods_view .goods_board_review_list .re_content .titleBox {flex:1; min-width:0;}
    #wrap.pcReady .goods_view .goods_board_review_list .re_content .imgs {flex:none;}
    #wrap.pcReady .goods_view .goods_board_review_list .re_content .imgs img {width:64px; height:64px; border-radius:var(--radius-2, 8px); object-fit:cover;}
    /* 더보기 — 상품문의와 동일(가운데 246px, 위쪽 구분선) */
    #wrap.pcReady .goods_view .goods_board_review_list .btn_box {display:flex; justify-content:center; margin-top:0; padding:var(--space-6, 24px) 0 0; border-top:1px solid var(--color-neutral-90, #F7F7F7);}
    #wrap.pcReady .goods_view .goods_board_review_list .btn_box button,
    #wrap.pcReady .goods_view .goods_board_review_list .btn_box a {display:inline-flex; align-items:center; justify-content:center; min-width:246px; max-width:246px; width:100%; height:38px; margin:0 auto; padding:0 var(--space-6, 24px); border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:var(--radius-1, 4px); background:var(--color-common-100, #fff); font-size:16px; line-height:22px; font-weight:500; letter-spacing:-0.006em; color:var(--color-neutral-5, #222); cursor:pointer;}
}