@charset "utf-8";

/*───────────────────────────────────────────────────────────

	 게시판형 : 기본/갤러리/이벤트/QA

───────────────────────────────────────────────────────────*/
/*** 기본 | skin/default ***/
@import url("skin/default/list.css");
@import url("skin/default/view.css");
@import url("skin/default/write.css");

/*** 갤러리 | skin/gallery ***/
@import url("skin/gallery/list.css");
@import url("skin/gallery/view.css");
@import url("skin/gallery/write.css");

/*** 이벤트 | skin/event ***/
@import url("skin/event/list.css");
@import url("skin/event/view.css");
@import url("skin/event/write.css");

/*** qa | skin/qa ***/
@import url("skin/qa/list.css");
@import url("skin/qa/view.css");
@import url("skin/qa/write.css");

/*───────────────────────────────────────────────────────────

	공통

───────────────────────────────────────────────────────────*/
/* write 파일 추가 */
#boardAttach {position:relative; margin-bottom:5px; font-size:0;}
#boardAttach li.item {overflow:hidden; display:inline-block; width:84px; height:84px; margin:0 7px 7px 0;}
#boardAttach li.item button.file_face { width:84px; height:84px; border:none; background:url('../../images/common/file_face.png') center; background-size:100% 100%;  }
#boardAttach li.item button.file_face::after {content:"사진등록";  }
#boardAttach li.item button.file_face.preview {border:none; background-size:100% auto; }
#boardAttach li.item input.file_hidden {margin-bottom:-20px; opacity:0;}

/*비밀번호 팝업 레이어 공통*/
.cite_layer {position:fixed; top:50%; left:50%; width:307px; margin:-96px 0 0 ; transform: translateX(-50%); z-index:4000; max-width: 500px;  }
.cite_layer .wrap {position:relative; background:#ffffff; border:1px solid #555555;}
.cite_layer .wrap h4 {height:40px; padding:13px 0 0 17px; background:#f4f4f4; color:#222222; }
.cite_layer .wrap div {color:#666666; text-align:center; }
.cite_layer .wrap div p {padding:25px 0 14px 14px; }
.cite_layer .wrap div input {display:block; width:216px; height:31px; margin:0 auto 12px auto; line-height:31px; text-indent:10px; border:1px solid #ccc; }
.cite_layer .wrap div .btn_box {width:100%; margin:0 auto; }
.cite_layer .wrap .close {display:block; position:absolute; top:11px; right:12px; width:18px; height:18px; text-indent:-9999px; background:url('../../img/icon/icon_x3.png') no-repeat left top; background-size:100%; border:none;}

/* 게시물 신고 */
.text_length{text-align:right; padding:4px 16px 0; color:#888; font-size:12px; }
.write_qa .write_wrap dl dd .inp_chk input{width:20px; height:20px;}
.terms_txt{color:#777; font-size:13px; margin-top:10px;}
.js_btn_report{
    display: inline-block;
    padding: 2px 10px;
    color: #333333;
    font-size: 11px;
    border: 1px solid #c7c7c7;
    background: #ffffff;
    border-radius: 2px;
}

/* 게시물신고 및 회원신고 탭영역 */
.tab_area {border-bottom:1px solid #f7f7f7;}
.popup_tab:after {content:''; display:block; clear:both;}
.popup_tab > li {display:block; float:left; width:50%; box-sizing:border-box;}
.popup_tab > li > a {font-size:16px; height:56px; color:#333; line-height:54px;   display:block; width:100%; padding:2px 0; text-align:center;}
.popup_tab > li > a.on {border-bottom:2px solid #00B373; background:#fff; font-weight:bold; color:#222;  }


.store_infomation .sel_box     { display:flex; padding:14px 20px; align-items: center; }
.store_infomation .sel_box .total       { font-weight: 600; }
.store_infomation .sel_box .inp_sel     { margin-left:auto }

.store_infomation ul.store_list         {}
.store_infomation ul.store_list li      {padding:12px 20px;}
.store_infomation ul.store_list li + li    { border-top:1px solid #f7f7f7 }
.store_infomation ul.store_list li .board_store  {display:flex; align-items: center; gap: 12px }
.store_infomation ul.store_list li .board_store .info  {flex:1;}
.store_infomation ul.store_list li .board_store .info .tit  {display:block; font-size: 16px; font-weight: 600; color:#333 }
.store_infomation ul.store_list li .board_store .info .address{ display:block; margin-top:6px; color:#888  }
.store_infomation ul.store_list li .board_store .info .tel  {display:block; margin-top:2px;  }
.store_infomation a.callStore    { margin-left:auto; min-width: 44px; width:44px; height:44px; border:1px solid #DFDFDF; border-radius: 50%; background:url(../../images/icon/cs.png) no-repeat 50% 50%/24px;  }


.store_infomation .view_store    { padding:24px 20px;  }
.store_infomation .view_store .titBox    { display: flex; align-items: center;  }
.store_infomation .view_store .titBox h3        { font-size: 24px; }
.store_infomation .view_store .map    { position: relative; margin:24px -20px 0; width:calc(100% + 40px); height:300px; border-top:1px solid #EBEBEB; border-bottom:1px solid #EBEBEB; background:#f7f7f7;  }
.store_infomation .view_store .map span.pos    { position: absolute; width:60px; text-align: center; font-size:12px;line-height:16px; color:#222; transform: translateX(-50%) translateY(-50%); padding-top:32px; background:url(../../images/icon/map_pos.png) no-repeat 50% 0/24px;    }

.store_infomation .view_store .info {margin:17px 0; }
.store_infomation .view_store .info table   { width:100%; border-top:1px solid #f7f7f7 }
.store_infomation .view_store .info table th   { border-bottom:1px solid #f7f7f7; width:105px; text-align: left; color:#888; vertical-align: middle; }
.store_infomation .view_store .info table td   { border-bottom:1px solid #f7f7f7; padding:14px 0; padding-left:10px;   }
/*.store_infomation .view_store .editorContents   {  margin:0 -20px; width:calc(100% + 40px)  }*/
.store_infomation .view_store .editorContents   {  width:100%;  }
.store_infomation .view_store .editorContents *    {  max-width:100%;  }


/* 2025.03.24 @graysoar 추가 S */
/* 게시물 상세 - 공유하기 레이어 팝업 */
.view_default  .ly_share {position:fixed; top:0px; left:0; width:100%; height:100%; padding:0 0 0px 0; z-index:1000;}
.view_default  .ly_share .ly_share_bg {width:100%; height:100%; background:rgba(0,0,0,0.8);}
.view_default  .ly_share .ly_share_content {position:absolute; top:50%; left:50%; margin:0 0 0 -145px;}
.view_default  .ly_share .ly_share_content .ly_share_box {position:relative; width:290px; background:#ffffff;}
.view_default  .ly_share .ly_share_content .ly_share_box h3 {padding:10px 0 10px 0; background:#f2f3f3;text-align:center;}
.view_default  .ly_share .ly_share_content .ly_share_box ul {width:240px; margin:0 auto; padding:20px 25px 0 25px; font-size:0; text-align:left;}
.view_default  .ly_share .ly_share_content .ly_share_box ul li {display:inline-block; width:33.3%; padding:0 0 20px 0; vertical-align:top; text-align:center;}
.view_default  .ly_share .ly_share_content .ly_share_box ul li a {font-size:11px; color:#888888;}
.view_default  .ly_share .ly_share_content .ly_share_box ul li a img {width:47px;}
.view_default  .ly_share .ly_share_content .ly_share_box .copy {width:100%; display:table; padding-bottom:20px; text-align:center;}
.view_default  .ly_share .ly_share_content .ly_share_box .copy div.input {padding:0 10px 0 10px;}
.view_default  .ly_share .ly_share_content .ly_share_box .copy div.input input {width:210px; height:31px; padding:0 10px 0 10px; font-size:14px; font-weight:bold; background:#fafafa; border:1px solid #dadada; box-sizing:border-box;}
.view_default  .ly_share .ly_share_content .ly_share_box .copy div.btn {padding:5px 40px 0 40px;}
.view_default  .ly_share .ly_share_content .ly_share_box .btn_box {position:absolute; top:0; right:0;}

/* 공유하기 & 찜 버튼 */
.view_default {}
.view_default .share_btn_box {border-bottom:1px solid #ccc; padding:0 0 24px;}
.view_default .share_btn_box ul {padding:0 16px; box-sizing:border-box;}
.view_default .share_btn_box ul li {display:inline-block; width:48%; margin:0 5px 0 0; box-sizing:border-box; border:1px solid #ccc; border-radius:4px;}
.view_default .share_btn_box ul li:last-child {margin:0;}
.view_default .share_btn_box ul li button {display:block; margin:0 auto; padding:10px 0; font-size:18px; text-align:center; background:none; border:0;}
.view_default .share_btn_box ul li.d_share button {padding-left:28px; background:url('../../img/icon/icon_share.png') no-repeat 0 center; background-size:24px;}
.view_default .share_btn_box ul li.d_share button.on {background:url('../../img/icon/icon_share_on.png') no-repeat left center; background-size:19px;}
.view_default .share_btn_box ul li.d_share {background:url('../../img/icon/icon_line1.gif') no-repeat right center; background-size:1px 20px;}
.view_default .share_btn_box ul li.d_wish button {padding-left:28px; background:url('../../img/icon/icon_heart.png') no-repeat 0 center; background-size:24px;}
.view_default .share_btn_box ul li.d_wish.on button {background-image:url('../../img/icon/icon_heart_on.png');}
/* 2025.03.24 @graysoar 추가 E */



/* 장바구니 옵션 창 */
#popupOption.show {
    height: auto;
    top: auto;
    z-index: 30001;
    overflow: visible;
}

#popupOption.show::before {
    position: fixed;
    content: "";
    z-index: 1;
    width: 100%;
    height: 100vh;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.25)
}

#popupOption.show .layer_option {
    position: relative;
    z-index: 2;
    background-color: #fff;
    padding-bottom: 105px;
}

/* ==========================================================================
   게시판 레이어 PC (글쓰기 / 글보기)
   상품상세의 [문의하기]·[후기작성] 등이 #popupBoard(.ly_pop) 안에 ajax 로 실린다.
   구조: .ly_pop > .ly_wrap > .write_default(.ly_head + .ly_ct + .close_btn)
                            + .floating_btn(취소/저장)  ← 카드 밖 형제
   저장 버튼이 .write_default 의 형제라 래퍼(.ly_wrap)를 카드로 만들어야 버튼까지 들어온다.
   스크롤은 카드 자신이 맡고 머리말·버튼은 sticky 로 고정한다
   (안쪽 .ly_ct 를 스크롤 컨테이너로 만들면 중첩 flex 안에서 휠이 먹지 않는다).
   @entwiz 2026-08-27
   ========================================================================== */
@media (min-width: 1024px) {
    #wrap.pcReady #popupBoard > .ly_wrap,
    #wrap.pcReady #popupBoardWrite > .ly_wrap,
    #wrap.pcReady #popupBoardView > .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:600px !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;}

    /* 스크롤바: 기본 트랙이 카드 모서리를 덮어 radius 가 각져 보인다 */
    #wrap.pcReady #popupBoard > .ly_wrap::-webkit-scrollbar,
    #wrap.pcReady #popupBoardWrite > .ly_wrap::-webkit-scrollbar,
    #wrap.pcReady #popupBoardView > .ly_wrap::-webkit-scrollbar {width:10px;}
    #wrap.pcReady #popupBoard > .ly_wrap::-webkit-scrollbar-track,
    #wrap.pcReady #popupBoardWrite > .ly_wrap::-webkit-scrollbar-track,
    #wrap.pcReady #popupBoardView > .ly_wrap::-webkit-scrollbar-track {background:transparent;}
    #wrap.pcReady #popupBoard > .ly_wrap::-webkit-scrollbar-thumb,
    #wrap.pcReady #popupBoardWrite > .ly_wrap::-webkit-scrollbar-thumb,
    #wrap.pcReady #popupBoardView > .ly_wrap::-webkit-scrollbar-thumb {border:3px solid transparent; border-radius:5px; background:var(--color-neutral-70, #DFDFDF); background-clip:padding-box;}

    /* 본문 래퍼는 흐름 그대로 — 안쪽에 스크롤을 만들지 않는다 */
    #wrap.pcReady #popupBoard .ly_ct,
    #wrap.pcReady #popupBoardWrite .ly_ct,
    #wrap.pcReady #popupBoardView .ly_ct,
    #wrap.pcReady #popupBoard .ly_cont,
    #wrap.pcReady #popupBoardView .ly_cont {height:auto; max-height:none; padding:var(--space-5, 20px) var(--space-6, 24px); overflow:visible;}

    /* 제목 줄 — 카드 위에 고정 */
    #wrap.pcReady #popupBoard .ly_head,
    #wrap.pcReady #popupBoardWrite .ly_head,
    #wrap.pcReady #popupBoardView .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;}

    /* 실제 구조는 .ly_wrap > .st-container > (.write_default + .floating_btn) 이다.
       .st-container 는 모바일용으로 height:100% + padding 56/100px 을 갖는다(gd_layout.css:315)
       — 그대로 두면 카드 위아래에 큰 빈 띠가 생기고 자체 스크롤까지 겹친다. */
    #wrap.pcReady #popupBoard .st-container,
    #wrap.pcReady #popupBoardWrite .st-container,
    #wrap.pcReady #popupBoardView .st-container {height:auto; padding:0; overflow:visible;}

    /* 닫기(X)는 마크업상 본문 뒤에 있어 그냥 두면 스크롤과 함께 밀려난다.
       닫기를 담은 래퍼를 flex 로 세워 order 로 첫 자리에 올리고 높이 0 · sticky 로 제목 줄에 겹친다.
       ※ 래퍼 클래스는 게시판 스킨마다 다르다(.write_default / .write_qa / …) — 구조로 고른다 */
    #wrap.pcReady #popupBoard .st-container,
    #wrap.pcReady #popupBoardWrite .st-container,
    #wrap.pcReady #popupBoardView .st-container,
    #wrap.pcReady #popupBoard .st-container :has(> .close_btn),
    #wrap.pcReady #popupBoardWrite .st-container :has(> .close_btn),
    #wrap.pcReady #popupBoardView .st-container :has(> .close_btn) {display:flex; flex-direction:column;}
    #wrap.pcReady #popupBoard .close_btn,
    #wrap.pcReady #popupBoardWrite .close_btn,
    #wrap.pcReady #popupBoardView .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 #popupBoard .lys_close_btn,
    #wrap.pcReady #popupBoardWrite .lys_close_btn,
    #wrap.pcReady #popupBoardView .lys_close_btn {position:relative; top:18px; right:20px; cursor:pointer;}

    /* 플러스리뷰 상세(board/plus_review_view_01.html)는 예외 —
       닫기(X)가 본문 뒤가 아니라 .ly_head 안에 이미 들어 있다.
       위의 'height:0 + order:-1 로 제목 줄에 겹치기' 처리가 여기서는 X 를 헤더 밖으로 밀어낸다.
       헤더 안에서 오른쪽에 얹는 평범한 배치로 되돌린다. (2026-09-07) */
    /* 모바일은 헤더가 position:fixed 라 본문을 그 높이만큼 밀어 둔다(gd_plus_review.css:240 padding-top:56px). PC 는 헤더가 흐름 안에 있어 그 여백이 빈칸으로 남는다 → 해제. */
    #wrap.pcReady #popupBoardView .plus_review_view {padding-top:0;}
    #wrap.pcReady #popupBoardView .plus_review_view .ly_head {position:sticky; top:0; width:auto; display:flex; align-items:center; justify-content:center; height:60px; padding:0 56px; line-height:1.4;}
    #wrap.pcReady #popupBoardView .plus_review_view .ly_head h2 {margin:0; font-size:18px; font-weight:600; color:var(--color-neutral-5, #222);}
    #wrap.pcReady #popupBoardView .plus_review_view .ly_head .close_btn {order:0; position:absolute; top:0; right:var(--space-4, 16px); left:auto; z-index:5; display:flex; align-items:center; align-self:auto; width:auto; height:60px;}
    #wrap.pcReady #popupBoardView .plus_review_view .ly_head .lys_close_btn {position:static; top:auto; right:auto;}

    /* 취소/저장: 화면 하단 고정(gd_layout.css:309) 해제 → 카드 바닥에 고정 */
    #wrap.pcReady #popupBoard .floating_btn,
    #wrap.pcReady #popupBoardWrite .floating_btn,
    #wrap.pcReady #popupBoardView .floating_btn {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);}
    #wrap.pcReady #popupBoard .floating_btn button,
    #wrap.pcReady #popupBoardWrite .floating_btn button,
    #wrap.pcReady #popupBoardView .floating_btn button {height:48px; cursor:pointer;}
}