@charset "utf-8";

/* B4 — 상품 Q&A (검색 + 세로 아코디언 + 전체 모달)
   모달 공통 프레임과 섹션 헤더(`.item-qna__head`)는 itemDetailReview.css 와 셀렉터를 공유한다
   (중복 선언 회피). 2026-09-10 기획팀 QA 로 프로토타입 V2.2 의 라운드 카드 쉘이 적용됐다.
   정본 규격: .claude/skills/style/item-detail-page.md */

.item-qna__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--tp-text);
}

.item-qna__ask {
    padding: 12px 16px;
    border: 1px solid var(--tp-blue);
    border-radius: 8px;
    background: #fff;
    color: var(--tp-blue);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.item-qna__ask:hover { background: var(--tp-blue-tint); }

/* ===== 라운드 카드 쉘 (검색 + 아코디언) ===== */
.item-qna__shell {
    overflow: hidden;
    border: 1px solid var(--tp-line);
    border-radius: 12px;
    background: #fff;
}

.item-qna__tools {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--tp-line);
    background: #f7f9fc;
}

.item-qna__search {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    background: #fff;
}

.item-qna__search:focus-within { border-color: var(--tp-blue); }

.item-qna__search-icon {
    color: var(--tp-gray);
    font-size: 14px;
}

.item-qna__search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
}

.item-qna__no-result {
    padding: 32px 24px;
    color: var(--tp-gray);
    font-size: 13px;
    text-align: center;
}

/* 쉘 안에서는 항목이 카드가 아니라 행이다 — 모달 안 항목은 기존 카드 규격을 그대로 쓴다 */
.item-qna__shell .item-qna__item {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--tp-line);
    border-radius: 0;
}

.item-qna__shell .item-qna__item:last-child { border-bottom: 0; }

.item-qna__shell .item-qna__badge {
    background: var(--tp-blue-tint);
    color: var(--tp-blue);
}

.item-qna__item {
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--tp-line);
    border-radius: 12px;
    background: #fff;
}

.item-qna__q {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.item-qna__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tp-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.item-qna__qtext {
    flex: 1;
    color: var(--tp-text);
    font-size: 14px;
    font-weight: 600;
}

.item-qna__meta {
    display: block;
    margin-top: 8px;
    color: var(--tp-gray);
    font-size: 12px;
    font-weight: 400;
}

.item-qna__status {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #e8f7ee;
    color: #1e9e54;
    font-size: 11px;
    font-weight: 600;
}

.item-qna__status--wait {
    background: var(--tp-bg);
    color: var(--tp-gray);
}

.item-qna__toggle {
    color: var(--tp-gray);
    font-size: 12px;
    transition: transform .2s;
}

.item-qna__item--open .item-qna__toggle { transform: rotate(180deg); }

/* 펼침 영역 — 질문 본문 → 답변 스레드 → (관리자) 답변 작성 */
.item-qna__panel {
    display: none;
    padding: 16px 18px 18px 56px;
    border-top: 1px solid var(--tp-line);
    background: #f7f9fc;
}

.item-qna__item--open .item-qna__panel { display: block; }

.item-qna__body {
    color: #444;
    font-size: 13px;
    line-height: 1.75;
    word-break: break-word;
}

/* 답변 스레드 — Q 배지에 대응하는 A 배지. 좌측 세로선이 한 질문에 달린 답변들을 잇는다 */
.item-qna__answers {
    position: relative;
    margin-top: 14px;
    padding: 0;
    list-style: none;
}

.item-qna__answers::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 13px;
    width: 1px;
    background: var(--tp-line);
}

.item-qna__answer {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--tp-line);
}

.item-qna__answer:first-child {
    padding-top: 0;
    border-top: 0;
}

.item-qna__badge--a {
    position: relative;
    background: var(--tp-blue-tint);
    color: var(--tp-blue);
}

.item-qna__answer-main {
    flex: 1;
    min-width: 0;
}

.item-qna__answer-meta {
    margin-bottom: 8px;
    color: var(--tp-gray);
    font-size: 12px;
}

.item-qna__answer-meta b {
    margin-right: 8px;
    color: var(--tp-text);
    font-weight: 700;
}

.item-qna__answer-text {
    color: #444;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
}

.item-qna__act--del:hover {
    border-color: var(--tp-sun);
    background: #fff;
    color: var(--tp-sun);
}

/* 답변 작성 — 관리자에게만 렌더된다 */
.item-qna__reply {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--tp-line);
}

.item-qna__reply-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

.item-qna__reply-alias {
    color: var(--tp-gray);
    font-size: 12px;
    cursor: pointer;
}

.item-qna__reply-alias input {
    margin-right: 4px;
    vertical-align: middle;
}

/* '다른 이름으로 작성' 을 켜야 나타난다 — JS 가 toggle 로 display 를 직접 조작한다 */
.item-qna__reply-writer {
    display: none;
    min-width: 120px;
    padding: 6px 10px;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    font-size: 13px;
}

.item-qna__reply-text {
    display: block;
    width: 100%;
    min-height: 84px;
    padding: 12px;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    background: #fff;
    color: var(--tp-text);
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
}

.item-qna__reply-text:focus {
    border-color: var(--tp-blue);
    outline: 0;
    box-shadow: 0 0 0 3px var(--tp-blue-tint);
}

.item-qna__reply-submit {
    display: block; 
    margin-left: auto;
    margin-top: 8px;
    padding: 12px 24px;
    border: 0;
    border-radius: 8px;
    background: var(--tp-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}

.item-qna__reply-submit:hover { background: var(--tp-blue-dark); }
.item-qna__reply-submit:disabled { background: var(--tp-disabled); cursor: default; }

@media (max-width: 780px) {
    .item-qna__panel { padding-left: 16px;}
    .item-qna__reply-head { flex-wrap: wrap;}
    .item-qna__title { font-size: 18px;}
    /* 터치 타겟 44px 확보 (`mobile-common.md`) */
    .item-qna__search { padding: 12px;}
    .item-qna__ask { padding: 12px 16px;}
}

@media (max-width: 540px) {
    /* 제목 + 문의하기가 한 줄에 다 들어가지 않는다 — 버튼을 아래로 내린다 */
    .item-qna__head { flex-wrap: wrap; }
    .item-qna__ask { width: 100%; text-align: center; }
}

/* ===== 문의 작성 폼(`shop/qna_form.php`) 모바일 보정 — E-55 =====
   그 폼의 스타일은 `css/style.css:4511~` 에 있는데 `m_/include/header_basic.php` 는
   `css/style.css` 를 로드하지 않는다(reset·font·common·`m_/style.css` 만).
   그래서 모바일에서는 그 보정이 통째로 빠지고, `css/common.css:172` 의
   `#item_mid_bottom_content_qna_form{background:#39a0e2}` 가 그대로 남아 폼 전체가 파랗게 깔린다.
   PC 는 `css/style.css` 가 살아 있으므로 표준 브레이크포인트 안에서만 보정한다. */
@media (max-width: 780px) {
    #qna_edit_bx { padding: 0 0 8px; }

    /* 파란 배경의 출처는 `css/common.css:172` 의
       `#item_mid_bottom_content_qna_form{background:#39a0e2}` 다 — 그 파일은 모바일도 로드한다.
       PC 는 `css/style.css:4511` 의 `#qna_edit_bx > form`(1,0,1)이 덮지만 모바일에는 그게 없다.
       같은 특이도(1,0,1)로 되돌린다. */
    #qna_edit_bx > form {
        background: none;
        padding: 0;
    }

    /* ⚠ `:has()` 는 구형 WebView 에서 미지원이고 그 경우 규칙 전체가 무효가 된다 —
       텍스트만 있는 안내 블록을 따로 집지 않고, 공통 리셋에 안내 타이포를 함께 둔다.
       `.tit` 이 있는 블록은 아래 라벨·입력 규칙이 다시 덮으므로 영향이 없다. */
    #qna_edit_bx > form > .top,
    #qna_edit_bx > form > .bot {
        margin-bottom: 14px;
        padding: 0;
        background: none;
        color: var(--tp-gray);
        font-size: 12.5px;
        line-height: 1.6;
    }

    /* 라벨 — 파란 띠를 걷고 폼 라벨로 되돌린다 */
    #qna_edit_bx > form .tit,
    #qna_edit_bx > form .tit > h3 {
        margin: 0 0 6px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--tp-text);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.4;
    }

    #qna_edit_bx > form label { display: block; }

    #qna_edit_bx > form input[type="text"],
    #qna_edit_bx > form textarea {
        box-sizing: border-box;
        width: 100%;
        padding: 11px 13px;
        border: 1px solid #ccd2db;
        border-radius: 10px;
        background: #fff;
        color: var(--tp-text);
        font-family: inherit;
        font-size: 14px;
    }

    #qna_edit_bx > form textarea {
        min-height: 160px;
        resize: vertical;
    }

    /* 저장·닫기 — 좌우로 갈라져 붙어 있던 것을 같은 크기 2열로 */
    #qna_edit_bx > form > .btns.flex_row {
        display: flex;
        gap: 8px;
        margin-top: 4px;
    }

    #qna_edit_bx > form > .btns.flex_row > .left,
    #qna_edit_bx > form > .btns.flex_row > .right { flex: 1 1 0; }

    #qna_edit_bx > form > .btns.flex_row input[type="submit"],
    #qna_edit_bx > form > .btns.flex_row input[type="button"] {
        box-sizing: border-box;
        width: 100%;
        /* 앱 터치 타겟 최소 44px */
        min-height: 44px;
        border: 1px solid var(--tp-line);
        border-radius: 8px;
        background: #fff;
        color: var(--tp-text);
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
    }

    #qna_edit_bx > form > .btns.flex_row input[type="submit"] {
        border-color: var(--tp-blue);
        background: var(--tp-blue);
        color: #fff;
    }
}

/* ===== 문의 작성 시트 (모바일) — bk_on 의 `addClass` 경로 =====
   `mobileView:'y'` 는 `height:100%` 를 인라인으로 박고 `overflow` 를 주지 않아 긴 폼의
   위아래가 잘린다. `addClass`(`paw.php:405`)는 인라인 스타일을 비우므로 스크롤·세이프존·
   sticky 헤더를 여기서 온전히 제어할 수 있다.
   ⚠ bk_on 이 마지막에 `.show()` 로 `display:block` 을 인라인으로 넣는다 — 컨테이너를
     flex 로 만들면 그 인라인에 밀리므로 블록 레이아웃으로 짠다.
   이 클래스는 모바일에서만 부여되므로 미디어쿼리로 다시 가두지 않는다. */
.item-qna-sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    /* 하단 세이프존 — 전체 화면 시트라 홈 인디케이터를 피해야 한다 (Bottom2 → Bottom1 순서 고정) */
    padding-bottom: calc(var(--safeAreaBottom2, 0px) + 24px);
    padding-bottom: calc(var(--safeAreaBottom1, 0px) + 24px);
}

.item-qna-sheet__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--tp-line);
    background: #fff;
    /* 상단 세이프존 — 시트가 뷰포트 최상단에 붙는다 (Top2 → Top1 순서 고정) */
    padding-top: calc(var(--safeAreaTop2, 0px) + 14px);
    padding-top: calc(var(--safeAreaTop1, 0px) + 14px);
    padding-right: 16px;
    padding-bottom: 14px;
    padding-left: 16px;
}

.item-qna-sheet__title {
    margin: 0;
    color: var(--tp-text);
    font-size: 16px;
    font-weight: 800;
}

.item-qna-sheet__close {
    flex: 0 0 auto;
    /* 앱 터치 타겟 최소 44px */
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tp-text);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

/* 좌우 여백은 헤더와 본문이 각각 갖는다 — 컨테이너에 주면 sticky 헤더가 그만큼 좁아진다 */
.item-qna-sheet > #qna_edit_bx { padding: 0 16px; }

/* 상단 상품 카드 — JS 가 인라인 스타일을 걷어낸 뒤 이 규칙이 적용된다(itemDetailQna.js `initAsk`).
   회색 블록을 걷고 얇은 구분선 + 썸네일/텍스트 2열로 정리한다. */
.item-qna-sheet__prod {
    margin-bottom: 18px;
    padding: 14px;
    border-radius: 12px;
    /* 회색 블록(`#f7f7f7`)을 걷고 브랜드 톤의 연한 청색 면으로 — 신규 색을 만들지 않고
       기존 토큰(`common.css:8` `--tp-blue-tint`)을 쓴다. */
    background: var(--tp-blue-tint);
}

/* 썸네일 + 상품명 행 */
.item-qna-sheet__prod > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.item-qna-sheet__prod > div > img,
.item-qna-sheet__prod > div > .noimage_ul_thumb {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    object-fit: cover;
}

.item-qna-sheet__prod > div > .noimage_ul_thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    /* 청색 면 위에서는 연회색이 묻히므로 흰 면으로 띄운다 */
    background: #fff;
    color: var(--tp-gray);
    font-size: 11px;
    line-height: 1.2;
    list-style: none;
    text-align: center;
}

.item-qna-sheet__prod > div > .noimage_ul_thumb > li { list-style: none; }

.item-qna-sheet__prod > div > div {
    flex: 1;
    min-width: 0;
}

/* 상품명은 블록으로 만들어 카테고리와 줄을 가른다 — 마크업의 <br> 은 중복이라 숨긴다 */
.item-qna-sheet__prod > div > div > b {
    display: block;
    color: var(--tp-text);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
}

.item-qna-sheet__prod > div > div > br { display: none; }

.item-qna-sheet__prod > div > div > span {
    display: block;
    margin-top: 3px;
    color: var(--tp-gray);
    font-size: 12.5px;
}

/* 작성자명 영역 — 한 줄에 몰아넣으면 좁은 폭에서 흩어지므로 **항목마다 한 줄**로 쌓는다.
   `작성자명 고동진` 은 같은 label 안이라 그 줄에 함께 남는다. */
.item-qna-sheet__prod > p {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 0;
    color: var(--tp-text);
    font-size: 13px;
}

/* ⚠ 위 `#qna_edit_bx > form label{display:block}`(특이도 1,0,1)이 클래스 선택자(0,1,3)를
   이겨 `inline-flex` 가 먹지 않았다 — 그래서 체크박스가 baseline 에 놓여 글자가 아래로
   치우쳐 보였다. id 를 얹어(1,1,3) 되돌린다. */
#qna_edit_bx .item-qna-sheet__prod > p > label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 13px;
    /* 체크박스(18px)와 글자 라인박스 높이를 맞춰 광학적으로도 어긋나지 않게 한다 */
    line-height: 18px;
}

#qna_edit_bx .item-qna-sheet__prod > p > label > b {
    display: inline;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

#qna_edit_bx .item-qna-sheet__prod > p input[type="checkbox"] {
    box-sizing: border-box;
    /* 앱 웹뷰에서 체크박스가 늘어나 글자와 어긋나는 것을 막는다 */
    flex: 0 0 auto;
    align-self: center;
    width: 18px;
    height: 18px;
    margin: 0;
}

/* `#qna_edit_bx > form input[type="text"]`(1,1,2)가 폼 전체 입력을 100% 폭으로 만든다 —
   작성자명은 라벨과 한 줄에 놓여야 하므로 id 를 하나 더 얹어(2,1,0) 되돌린다. */
#qna_edit_bx .item-qna-sheet__prod #item_mid_bottom_content_writer2 {
    /* 청색 면 위에 놓이므로 흰 배경으로 띄운다 */
    box-sizing: border-box;
    width: auto;
    min-width: 120px;
    padding: 7px 10px;
    border: 1px solid #ccd2db;
    border-radius: 8px;
    background: #fff;
    color: var(--tp-text);
    font-family: inherit;
    font-size: 13px;
}