@charset "utf-8";

/* 시안 없는 화면 보강 (doc 16 P4b) — 공지 · FAQ · 1:1 문의 · 배너 상세 · 약관 · 홈 팝업.
   시안 클래스(sub-title, ov-*, od-*, order-*, pd-*, pop, my-notice 등)를 우선 조합하고, 표현이 안 되는 부분만 여기 최소로 둔다.
   시안 CSS 원본은 수정하지 않는다. 이 파일은 위 화면 + 홈(히어로 보강)에서만 <Css list={[…, "app"]} /> 로 로드. */

/* ==========================================================================
   공통 폭 · 본문
   ========================================================================== */
.board { max-width: 960px; margin-left: auto; margin-right: auto; }
.board-tit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 24px; line-height: 34px; font-weight: 700; overflow-wrap: anywhere; }
.board-meta { margin-top: 12px; }
.board-cont { padding: 40px 0; border-bottom: 1px solid var(--c-base8); font-size: 16px; line-height: 28px; color: var(--c-base2); white-space: pre-wrap; overflow-wrap: anywhere; }
.board-cont--min { min-height: 240px; }
.board-cont--line { margin-top: 40px; border-top: 1px solid var(--c-black); }
.board-img { width: 100%; height: auto; margin-top: 40px; border-radius: 8px; }
.board-files { margin-top: 20px; }
.board-files .pd-file { padding: 9px 12px 9px 16px; }
.board-files a.pd-file:hover .form-line__btn { background: var(--c-base9); }
.board-files .form-line__btn { flex-shrink: 0; }

/* 공지 목록: ov-table 열 (번호 | 제목 | 대상 | 등록일) — 모바일 카드형은 시안 규칙 그대로 */
@media (min-width: 768px) {
  .board .ov-table__head, .board .ov-row { grid-template-columns: 96px minmax(0, 1fr) 110px 120px; }
}
.board .ov-row__order .badge { align-self: center; }
@media (max-width: 767px) { .board .ov-row__order .badge { align-self: flex-start; } }
.board-date { font-size: 14px; line-height: 20px; color: var(--c-base4); }

/* ==========================================================================
   페이징 (doc 10 형식: « ‹ 1 2 3 › », 현재 = 채움) — 시안 톤(primary)
   ========================================================================== */
.pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 40px; }
.pager a, .pager span { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 4px; font-size: 14px; line-height: 20px; color: var(--c-base2); }
.pager a { transition: background-color .2s; }
.pager a:hover { background: var(--c-base9); }
.pager [aria-current="page"] { background: var(--c-primary); color: var(--c-white); font-weight: 500; }
.pager [aria-disabled="true"] { color: var(--c-base7); }

/* ==========================================================================
   아코디언 (FAQ · 1:1 문의)
   ========================================================================== */
.acc__item { border-bottom: 1px solid var(--c-base8); }
.acc__btn { display: flex; align-items: center; gap: 16px; width: 100%; padding: 24px 8px; text-align: left; font-size: 16px; line-height: 24px; transition: background-color .2s; }
.acc__btn:hover { background: #faf8f6; }
.acc__btn::after { content: ''; flex-shrink: 0; width: 20px; height: 20px; background: url('../images/common/ic_drop_down.svg') no-repeat center / 100%; transition: transform .2s; }
.acc__btn[aria-expanded="true"]::after { transform: rotate(180deg); }
.acc__q { flex-shrink: 0; width: 24px; font-family: var(--ff-serif); font-size: 22px; line-height: 24px; color: var(--c-primary); }
.acc__tit { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 500; overflow-wrap: anywhere; }
.acc__type { flex-shrink: 0; width: 80px; font-size: 14px; line-height: 20px; color: var(--c-base4); }
.acc__date { flex-shrink: 0; font-size: 14px; line-height: 20px; color: var(--c-base4); }
.acc__panel { display: flex; flex-direction: column; gap: 20px; padding: 28px 32px; background: var(--c-base9); font-size: 15px; line-height: 24px; color: var(--c-base2); }
.acc__panel[hidden] { display: none; }
.acc__panel p { white-space: pre-wrap; overflow-wrap: anywhere; }
.acc__panel .board-files { margin-top: 0; }
.acc__panel .pd-file { background: var(--c-white); }
.acc__panel .my-notice { background: var(--c-white); }
.acc__panel .my-notice p { margin-top: 12px; }
.acc__panel .my-notice .od-dl__muted { white-space: normal; }

@media (max-width: 767px) {
  .board-tit { font-size: 20px; line-height: 28px; }
  .board-cont { padding: 28px 0; font-size: 15px; line-height: 26px; }
  .board-cont--line, .board-img { margin-top: 28px; }
  .acc__item { position: relative; }
  .acc__btn { flex-wrap: wrap; gap: 8px 12px; padding: 20px 32px 20px 4px; font-size: 15px; line-height: 22px; }
  .acc__btn::after { position: absolute; top: 22px; right: 4px; }
  .acc__type { width: auto; }
  .acc__tit { flex-basis: 100%; order: 1; }
  .acc__q + .acc__tit { flex-basis: auto; order: 0; }
  .acc__panel { padding: 20px; font-size: 14px; line-height: 22px; }
  .pager a, .pager span { min-width: 32px; height: 32px; }
}

/* ==========================================================================
   1:1 문의 작성 — 여러 줄 입력 (order-input 톤)
   ========================================================================== */
.order-input--area { height: auto; padding: 12px 14px; }
.order-input--area textarea { flex: 1; width: 100%; min-height: 220px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 22px; color: var(--c-black); resize: vertical; outline: 0; }
.order-input--area textarea::placeholder { color: var(--c-base8); }
.order-field .pd-input__count { align-self: flex-end; }
.ov__head.list-head { margin-top: 0; padding-bottom: 12px; }
.list-head .order-btn { display: flex; align-items: center; height: 40px; }

/* ==========================================================================
   홈 팝업 (detail.css .pop 재사용, 폭만 지정)
   ========================================================================== */
.pop.pop--banner { width: min(480px, calc(100% - 32px)); }
.pop--banner .pop__body { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; }
.pop--banner .pop__body > a { display: block; }
.pop--banner .pop__body img { width: 100%; height: auto; border-radius: 8px; }
.pop--banner .pop__body p { font-size: 15px; line-height: 24px; color: var(--c-base2); white-space: pre-line; }
.pop--banner .pop-cart__btns { margin-top: 24px; }

/* ==========================================================================
   홈 히어로(section.visual) — 첫 화면 한 블록(고객 요청 2026-10-15)
   시안 720px 고정 → 뷰포트 높이(720~1080px). 문구는 늘어난 높이의 중앙 쪽으로, 피규어는 하단 고정.
   1023px 이하는 시안(height:auto) 그대로.
   ========================================================================== */
@media (min-width: 1024px) {
  .visual { --visual-h: clamp(720px, 100svh, 1080px); height: var(--visual-h); }
  .visual__bg { height: 100%; }
  .visual__inner { padding-top: calc(201px + (var(--visual-h) - 720px) / 2); }
  .visual__figures { top: auto; bottom: 0; }
}

/* ==========================================================================
   주문서 배송 메모 select — 시안 .is-empty(안내 문구 회색)가 펼친 목록 option 까지 상속돼 선택지가 전부 흐리게 보임
   → 선택지는 본문색, 안내 option 만 회색. (2026-10-15)
   ========================================================================== */
.order-input--select select option { color: var(--c-black); }
.order-input--select select option[value=""] { color: var(--c-base8); }