@charset "utf-8";

/* 상세페이지 리뉴얼 — 섹션 공통 primitive (제목 · step 배지 · 섹션 구분)
   레거시 페이지에 블록만 삽입하는 단계(A)와 전면 CBase 단계(B) 양쪽에서 함께 로드된다.
   .item-detail 루트 자체의 여백은 여기 넣지 않는다 — 레거시 본문 배치에 영향을 주지 않기 위함(서체만 예외 — 아래).
   정본 규격: .claude/skills/style/item-detail-page.md */

/* 본문 서체 = 기획 샘플 스택(--tp-font · common.css). Windows 100% 배율에서 Pretendard 서브셋(힌팅 없음)은
   12~14px 글자의 가로획이 픽셀 사이에 걸려 흐려지고 ㄹ 같은 글자가 뭉친다 — 맑은 고딕은 힌팅으로 획이 픽셀에 맞는다.
   상세 콘텐츠 루트(.item-detail = div.tourpik)에 걸어 레거시 섹션까지 한 서체로 맞추고, 헤더·푸터는 사이트 기본 서체를 유지한다.
   body 로 옮겨지는 호텔 다이얼로그는 루트 밖이라 따로 건다(예약폼은 itemBookForm.css). */
.item-detail,
.item-hotel-dialog {
    font-family: var(--tp-font);
}

/* 폼 컨트롤은 부모 폰트를 상속하지 않고 브라우저 기본 폰트(Windows Chrome = Arial)로 그려진다 —
   굵기 800 은 Arial Black, 한글은 시스템 대체 폰트로 갈라져 한 버튼 안에서 서체가 섞인다.
   레거시 본문을 건드리지 않도록 .item-detail 루트가 아니라 블록 루트 단위로 건다. */
.item-head button,
.item-date button,
.item-date input,
.item-flight button,
.item-room button,
.item-room input,
.item-room select,
.item-option button,
.item-map button,
.item-book-panel button,
.item-book-bar button,
.item-book-sheet__handle button,
.item-review button,
.item-qna button,
.item-qna input,
.item-qna textarea,
.item-hotel-dialog button {
    font-family: inherit;
}

/* 최상위 섹션 규격 — 상하 26px + 1px 구분선.
   각 섹션이 자기 상단 여백과 하단 구분선을 소유하며 형제 간 마진은 더하지 않는다. */
.item-detail__block {
    padding: 26px 0;
    border-bottom: 1px solid var(--tp-line);
}

.item-detail__block-title {
    display: flex;
    align-items: center;
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    color: var(--tp-text);
}

.item-detail__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--tp-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

/* 프로토타입은 .block 패딩을 반응형에서 줄이지 않는다 — 제목 폰트만 축소 */
@media (max-width: 780px) {
    .item-detail__block-title {font-size: 18px; margin-bottom: 12px;}
}