/* ============================================================================
 * endedit 커뮤니티(공지사항·게시판·상품후기) — 탈React 정적 프로토타입 CSS
 * 원본 파일을 그대로 합친 것 (내용 변경 없음, 순서만 토큰→셸→화면):
 *   src/styles/tokens.css, src/board/shell.css, src/board/board.css,
 *   src/board/lists.css, src/board/ui.css, src/board/postView.css, src/board/write.css
 * + 맨 아래에 이 프로토타입 전용 헤더/푸터 placeholder + 스켈레톤 스타일만 추가
 *   (원본 skeleton.css는 이번 조사 범위에서 못 읽어 대략적인 자리지킴만 넣음 — 실배포 전 원본 대조 필요).
 * ========================================================================= */

/* ── tokens.css ── */
:root {
  --wds-primary: #ff5c28;
  --wds-primary-strong: #f04d1a;
  --wds-primary-heavy: #d63f10;
  --wds-primary-tint: #fff4f0;

  --wds-text: rgb(23, 23, 23);
  --wds-text-neutral: rgba(46, 47, 51, 0.88);
  --wds-text-alt: rgba(55, 56, 60, 0.61);
  --wds-text-assistive: rgba(55, 56, 60, 0.28);
  --wds-inactive: rgba(55, 56, 60, 0.61);

  --wds-fill: rgba(112, 115, 124, 0.05);
  --wds-fill-strong: rgba(112, 115, 124, 0.16);
  --wds-fill-alt: rgba(112, 115, 124, 0.05);
  --wds-line: rgba(112, 115, 124, 0.16);
  --wds-line-alt: rgba(112, 115, 124, 0.08);
  --wds-line-neutral: rgba(112, 115, 124, 0.16);

  --wds-surface: #fff;
  --wds-surface-alt: rgb(247, 247, 248);
  --wds-surface-inverse: rgb(23, 23, 25);

  --wds-cautionary: rgb(255, 146, 0);
  --wds-destructive: rgb(255, 66, 66);

  --wds-elev-inset-line: inset 0 0 0 1px rgba(112, 115, 124, 0.08);
  --wds-elev-popover: 0 0 60px rgba(23, 23, 23, 0.1);

  --wds-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font-core: 'Pretendard JP', 'Pretendard Variable', Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, 'Malgun Gothic', sans-serif;

  --layout-header-max: 1440px;
  --layout-body-max: 1200px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--wds-surface); font-family: var(--font-core); color: var(--wds-text); }
button { font-family: var(--font-core); cursor: pointer; }
a { color: inherit; }
.link-btn { border: 0; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-core); }
.chip-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.chip-scroll::-webkit-scrollbar { display: none; }

/* ── shell.css ── */
.bd-shell {
  width: 100%;
  min-width: 320px;
  background: var(--wds-surface);
  font-family: var(--font-core);
  color: var(--wds-text);
  display: flex;
  flex-direction: column;
  position: relative;
}
.bd-hdr-hold { height: 132px; }
.bd-err { padding: 80px 32px; }
.bd-err-p { margin: 0; font-size: 15px; color: var(--wds-destructive); }
@media (max-width: 768px) {
  .bd-hdr-hold { height: 56px; }
  .bd-err { padding: 48px 16px; }
}

/* ── board.css ── */
.review-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ee-clamp1, .ee-clamp2, .ee-clamp3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.ee-clamp1 { -webkit-line-clamp: 1; }
.ee-clamp2 { -webkit-line-clamp: 2; }
.ee-clamp3 { -webkit-line-clamp: 3; }

a.board-row { color: inherit; transition: background-color 140ms var(--wds-ease); text-decoration: none; display: block; }
a.board-row:hover { background: var(--wds-fill-alt); }

.ee-board-content img { max-width: 100%; height: auto; }
.ee-board-content table { max-width: 100%; }
.ee-board-content { word-break: break-word; }
.ee-board-content a { color: var(--wds-text); }

@media (max-width: 768px) {
  a.head-action { height: 32px !important; min-height: 32px !important; }
}

/* ── lists.css ── */
.bd-tool { display: flex; align-items: center; gap: 8px; padding-top: 20px; flex-wrap: wrap; }
.bd-tool-search { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.bd-rows { margin-top: 20px; border-top: 1px solid var(--wds-text); }

.bd-nrow {
  display: flex; flex-direction: row; align-items: center; gap: 16px; width: 100%;
  min-height: 60px; padding: 16px 4px; box-sizing: border-box;
  box-shadow: inset 0 -1px 0 var(--wds-line-alt); text-decoration: none;
}
.bd-nrow-no { flex: none; width: 48px; text-align: center; font-size: 14px; letter-spacing: 0.0194em; font-weight: 500; color: var(--wds-text-assistive); }
.bd-nrow-no.is-pin { font-weight: 700; color: var(--wds-primary); }
.bd-nrow-subj { flex: 1; min-width: 0; font-size: 16px; letter-spacing: 0.0096em; font-weight: 500; color: var(--wds-text); }
.bd-nrow-subj.is-pin { font-weight: 700; }
.bd-nrow-date { flex: none; width: 92px; text-align: right; font-size: 14px; letter-spacing: 0.0194em; color: var(--wds-text-alt); }
.bd-nrow-tags { display: flex; align-items: center; gap: 6px; }
.bd-nrow-pin { font-size: 13px; font-weight: 700; letter-spacing: 0.0252em; color: var(--wds-primary); }
.bd-nrow-subj-mo { font-size: 16px; line-height: 24px; letter-spacing: 0.0096em; font-weight: 500; color: var(--wds-text); }
.bd-nrow-subj-mo.is-pin { font-weight: 700; }
.bd-nrow-date-mo { font-size: 13px; letter-spacing: 0.0252em; color: var(--wds-text-assistive); }

.bd-prow {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%;
  padding: 16px 4px; box-sizing: border-box; box-shadow: inset 0 -1px 0 var(--wds-line-alt); text-decoration: none;
}
.bd-prow-tags { display: flex; align-items: center; gap: 6px; }
.bd-prow-photo { display: inline-flex; align-items: center; gap: 2px; color: var(--wds-text-assistive); font-size: 12px; letter-spacing: 0.0311em; }
.bd-prow-subj { font-size: 17px; line-height: 24px; letter-spacing: 0.0096em; color: var(--wds-text); }
.bd-prow-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; letter-spacing: 0.0252em; color: var(--wds-text-assistive); }

.bd-rv-total { flex: none; font-size: 14px; letter-spacing: 0.0194em; color: var(--wds-text-alt); }
.bd-rv-total b { color: var(--wds-text); }
.bd-rv-sel { flex: none; width: 160px; margin-left: auto; }
.bd-rv-search { flex: 0 0 320px; order: 0; display: flex; height: 44px; }
.bd-rv-empty { margin-top: 24px; border-top: 1px solid var(--wds-text); }
.bd-rv-grid { display: grid; gap: 32px 20px; padding-top: 24px; }
.bd-rv-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.bd-rv-img { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 2px; overflow: hidden; background: var(--wds-fill); }
.bd-rv-img-i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 260ms var(--wds-ease); }
.bd-rv-card:hover .bd-rv-img-i { transform: scale(1.03); }
.bd-rv-body { display: flex; flex-direction: column; gap: 6px; }
.bd-rv-line { display: flex; align-items: center; gap: 4px; min-height: 18px; }
.bd-rv-cat { flex: 1; min-width: 0; font-size: 12px; line-height: 18px; letter-spacing: 0.0311em; font-weight: 700; color: var(--wds-text-alt); }
.bd-rv-date { flex: none; font-size: 12px; line-height: 18px; letter-spacing: 0.0311em; color: var(--wds-text-assistive); }
/* 3줄 자리를 «비어도» 잡는다 — 안 그러면 같은 줄 카드끼리 상품명 열이 어긋난다 */
.bd-rv-text { font-size: 14px; line-height: 21px; min-height: 63px; letter-spacing: 0.0194em; color: var(--wds-text-neutral); }
.bd-rv-goods { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; box-shadow: inset 0 1px 0 var(--wds-line-alt); margin-top: 2px; }
.bd-rv-goods > :first-child { padding-top: 8px; }
.bd-rv-brand { font-size: 12px; line-height: 18px; letter-spacing: 0.0311em; font-weight: 700; color: var(--wds-text-alt); }
.bd-rv-name { font-size: 13px; line-height: 18px; letter-spacing: 0.0252em; color: var(--wds-text-neutral); }
.bd-rv-who { font-size: 12px; line-height: 18px; letter-spacing: 0.0311em; color: var(--wds-text-assistive); }

@media (max-width: 768px) {
  .bd-tool { gap: 10px; padding-top: 4px; }
  .bd-tool-search { margin-left: 0; flex: 1 1 100%; }
  .bd-rows { margin-top: 16px; }
  .bd-nrow { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 18px 0; }
  .bd-prow { padding: 18px 0; }
  .bd-prow-subj { font-size: 16px; }
  .bd-rv-sel { width: 140px; }
  .bd-rv-search { flex: 1 1 100%; order: 3; height: 40px; }
  .bd-rv-empty { margin-top: 16px; }
  .bd-rv-grid { gap: 20px 12px; padding-top: 16px; }
}

/* ── ui.css ── */
.bd-page { max-width: 1440px; margin: 0 auto; width: 100%; box-sizing: border-box; padding: 40px 20px 64px; min-height: 640px; }
.bd-head { display: flex; align-items: center; gap: 8px; height: 32px; box-sizing: content-box; padding-bottom: 11px; border-bottom: 1px solid var(--wds-text); }
.bd-head-back { flex: none; width: 32px; height: 32px; margin-left: -6px; display: grid; place-items: center; color: var(--wds-text); }
.bd-head-t { flex: 1; margin: 0; font-size: 19px; line-height: 28px; letter-spacing: -0.002em; font-weight: 700; }
.bd-cat { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 4px; background: var(--wds-fill); font-size: 13px; font-weight: 700; letter-spacing: 0.0252em; color: var(--wds-text-neutral); }
.bd-write { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: 0.0194em; background: var(--wds-primary); color: #fff; white-space: nowrap; text-decoration: none; }
/* 도구줄(검색칸 옆) 자리는 모바일에서만 쓴다 — PC 는 머리줄 오른쪽 하나로 충분하다. */
.bd-write-tool { display: none; }
.bd-pill { flex: 0 0 auto; min-width: 0; display: grid; place-items: center; height: 48px; padding: 0 20px; border-radius: 4px; font-size: 16px; font-weight: 700; letter-spacing: 0.0096em; white-space: nowrap; text-decoration: none; background: var(--wds-fill); color: var(--wds-text-neutral); }
.bd-pill.is-grow { flex: 1 1 0; }
.bd-pill.is-strong { background: var(--wds-primary); color: #fff; }
.bd-chips { display: flex; gap: 6px; overflow-x: auto; flex: 0 0 auto; -webkit-overflow-scrolling: touch; }
.bd-chip { flex: none; height: 36px; padding: 0 14px; border-radius: 1000px; border: 0; font-family: var(--font-core); font-size: 14px; font-weight: 600; letter-spacing: 0.0194em; background: var(--wds-fill); color: var(--wds-text-neutral); }
.bd-chip.is-on { background: var(--wds-text); color: #fff; }
.bd-search { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; width: var(--bd-search-w, 240px); height: 36px; padding: 0 12px; border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line); box-sizing: border-box; }
.bd-search.is-tall { height: 44px; }
.bd-search-ico { flex: none; color: var(--wds-text-alt); display: grid; }
.bd-search-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--font-core); font-size: 15px; letter-spacing: 0.0145em; color: var(--wds-text); }
.bd-search-clear { flex: none; width: 20px; height: 20px; border: 0; background: transparent; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--wds-text-alt); }
.bd-pg { display: flex; justify-content: center; gap: 4px; padding-top: 32px; }
.bd-pg-arrow { flex: none; width: 40px; height: 40px; border-radius: 4px; border: 0; background: transparent; color: var(--wds-text-alt); display: grid; place-items: center; cursor: pointer; transition: background-color 140ms var(--wds-ease); }
.bd-pg-arrow:hover:not([disabled]) { background: var(--wds-fill); }
.bd-pg-arrow[disabled] { cursor: default; opacity: 0.35; }
.bd-pg-num { flex: none; width: 40px; height: 40px; border-radius: 4px; border: 0; font-family: var(--font-core); font-size: 15px; font-weight: 500; background: transparent; color: var(--wds-text-neutral); cursor: pointer; transition: background-color 140ms var(--wds-ease); }
.bd-pg-num:hover { background: var(--wds-fill); }
.bd-pg-num.is-on { font-weight: 700; background: var(--wds-text); color: #fff; }
.bd-pg-num.is-on:hover { background: var(--wds-text); }
.bd-empty { display: grid; place-items: center; gap: 8px; padding: 48px 0; color: var(--wds-text-alt); }
.bd-empty-t { font-size: 15px; letter-spacing: 0.0145em; }

@media (max-width: 768px) {
  .bd-page { padding: 20px 16px 40px; min-height: 520px; }
  .bd-head-t { font-size: 17px; line-height: 26px; }
  /* 제목·뒤로가기는 헤더(뒤로가기+게시판 제목)가 갖는다 — 본문 머리는 줄째로 없앤다.
     글쓰기는 아래 도구줄로 옮겨 «검색칸과 같은 줄» 에 선다(높이도 검색칸에 맞춘 40px).
     ⚠ .ee-bdhd 가 붙은 셸에서만이다 — rroys 처럼 «자기 헤더» 를 쓰는 몰은 그 헤더가
       제목을 안 주므로, 여기서 빼면 화면에 제목이 하나도 없어진다. */
  .ee-bdhd .bd-head { display: none; }
  .ee-bdhd .bd-tool-search { gap: 8px; }
  .ee-bdhd .bd-write-tool { display: inline-flex; flex: none; height: 40px; }
  .bd-pill { height: 44px; }
  .bd-chips { flex: 1 1 100%; }
  .bd-chip { height: 40px; }
  .bd-search, .bd-search.is-tall { height: 40px; width: auto; }
  .bd-pg { padding-top: 24px; }
  .bd-pg button.bd-pg-num { font-size: 15px; }
}

/* ── postView.css ── */
.bd-share, .bd-like { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 16px; border-radius: 1000px; border: 0; font-family: var(--font-core); font-size: 14px; font-weight: 600; letter-spacing: 0.0194em; background: var(--wds-fill); color: var(--wds-text-neutral); }
.bd-like.is-on { background: var(--wds-text); color: #fff; }
.bd-like.is-busy { cursor: progress; }
.bd-like-msg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: 0.0252em; color: var(--wds-text-alt); }
.bd-like-login { color: var(--wds-text-neutral); font-weight: 700; }
.bd-cm { border-top: 1px solid var(--wds-text); }
.bd-cm-head { padding: 16px 0 12px; font-size: 17px; font-weight: 700; letter-spacing: 0.0057em; }
.bd-cm-n { color: var(--wds-primary); }
.bd-cm-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.bd-cm-top { display: flex; align-items: center; gap: 6px; }
.bd-cm-writer { font-size: 14px; font-weight: 700; letter-spacing: 0.0194em; }
.bd-cm-date { margin-left: auto; font-size: 13px; letter-spacing: 0.0252em; color: var(--wds-text-assistive); }
.bd-cm-ask { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.0252em; color: var(--wds-text-alt); }
.bd-cm-del, .bd-cm-cancel, .bd-cm-delbtn { border: 0; background: transparent; padding: 0; min-height: 0; font-size: 13px; }
.bd-cm-del { font-weight: 700; color: var(--wds-destructive); }
.bd-cm-cancel { color: var(--wds-text-alt); }
.bd-cm-delbtn { letter-spacing: 0.0252em; color: var(--wds-text-assistive); }
.bd-cm-body { margin: 0; font-size: 15px; line-height: 24px; letter-spacing: 0.0145em; color: var(--wds-text-neutral); white-space: pre-line; }
.bd-cm-none { padding: 20px 0 4px; font-size: 14px; letter-spacing: 0.0194em; color: var(--wds-text-assistive); }
.bd-cm-form { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.bd-cm-ta { width: 100%; box-sizing: border-box; min-height: 96px; padding: 14px; border: 0; outline: none; border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line); resize: vertical; font-family: var(--font-core); font-size: 15px; line-height: 24px; letter-spacing: 0.0145em; color: var(--wds-text); }
.bd-cm-bar { display: flex; align-items: center; gap: 8px; }
.bd-cm-count { font-size: 13px; letter-spacing: 0.0252em; color: var(--wds-text-alt); }
.bd-cm-submit { margin-left: auto; height: 44px; padding: 0 24px; border-radius: 4px; border: 0; font-family: var(--font-core); font-size: 15px; font-weight: 700; letter-spacing: 0.0145em; background: var(--wds-primary); color: #fff; }
.bd-cm-submit.is-off { cursor: not-allowed; background: var(--wds-fill); color: var(--wds-text-assistive); }
.bd-cm-note { display: flex; align-items: center; gap: 8px; padding-top: 16px; font-size: 14px; letter-spacing: 0.0194em; color: var(--wds-text-alt); }
.bd-cm-note-a { font-weight: 700; color: var(--wds-text-neutral); }
.bd-cm-err { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--wds-destructive); }
.bd-nf { padding: 48px 0; text-align: center; color: var(--wds-text-alt); }
.bd-nf-actions { display: flex; justify-content: center; padding-top: 28px; }
.bd-title { padding-top: 24px; display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; box-shadow: inset 0 -1px 0 var(--wds-line-neutral); }
.bd-title-tags { display: flex; align-items: center; gap: 8px; }
.bd-title-pin { font-size: 13px; font-weight: 700; letter-spacing: 0.0252em; color: var(--wds-primary); }
.bd-title-views { margin-left: auto; font-size: 13px; letter-spacing: 0.0252em; color: var(--wds-text-assistive); }
.bd-title-h { margin: 0; font-size: 24px; line-height: 32px; letter-spacing: -0.0194em; font-weight: 700; }
.bd-title-meta1 { font-size: 14px; letter-spacing: 0.0194em; color: var(--wds-text-alt); }
.bd-title-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; letter-spacing: 0.0194em; color: var(--wds-text-alt); }
.bd-title-writer { font-weight: 700; color: var(--wds-text-neutral); }
.bd-content { padding: 28px 0; font-size: 16px; line-height: 28px; letter-spacing: 0.0096em; color: var(--wds-text-neutral); }
.bd-imgs { display: flex; flex-direction: column; gap: 8px; padding-bottom: 28px; }
.bd-img { position: relative; display: block; width: 100%; max-width: 520px; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--wds-fill); }
.bd-img-i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.bd-box { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 4px; background: var(--wds-surface-alt); }
.bd-box.is-goods { margin-bottom: 28px; }
.bd-box-t { font-size: 14px; font-weight: 700; letter-spacing: 0.0194em; }
.bd-goods { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.bd-goods-img { position: relative; flex: none; width: 56px; height: 56px; border-radius: 2px; overflow: hidden; background: var(--wds-fill); }
.bd-goods-img-i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-goods-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bd-goods-brand { font-size: 12px; font-weight: 700; letter-spacing: 0.0311em; color: var(--wds-text-alt); }
.bd-goods-name { font-size: 15px; letter-spacing: 0.0145em; color: var(--wds-text-neutral); }
.bd-goods-chev { flex: none; color: var(--wds-text-assistive); display: grid; }
.bd-file { display: flex; align-items: center; gap: 6px; font-size: 15px; letter-spacing: 0.0145em; color: var(--wds-text-neutral); text-decoration: none; }
.bd-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 28px; }
.bd-nav { margin-top: 32px; border-top: 1px solid var(--wds-line-neutral); }
.bd-nav-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 0; box-sizing: border-box; box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.bd-nav-label { flex: none; width: 56px; font-size: 14px; letter-spacing: 0.0194em; color: var(--wds-text-alt); }
.bd-nav-link { flex: 1; min-width: 0; font-size: 15px; letter-spacing: 0.0145em; color: var(--wds-text-neutral); text-decoration: none; }
.bd-nav-none { flex: 1; min-width: 0; font-size: 15px; letter-spacing: 0.0145em; color: var(--wds-text-assistive); }
.bd-bottom { display: flex; gap: 8px; justify-content: center; padding-top: 28px; }
.bd-bottom-write { flex: 1 1 0; }

@media (max-width: 768px) {
  .bd-cm-head { padding: 14px 0 10px; font-size: 16px; }
  .bd-cm-ta { min-height: 88px; }
  .bd-cm-submit { height: 40px; }
  .bd-cm-top button.bd-cm-del, .bd-cm-top button.bd-cm-cancel, .bd-cm-top button.bd-cm-delbtn { font-size: 13px; }
  .bd-cm-bar button.bd-cm-submit { font-size: 15px; }
  .bd-nf-actions { justify-content: stretch; padding-top: 20px; }
  .bd-title { padding-top: 4px; padding-bottom: 16px; }
  .bd-title-h { font-size: 19px; line-height: 28px; }
  .bd-content { padding: 20px 0; }
  .bd-imgs { padding-bottom: 20px; }
  .bd-box { padding: 14px; }
  .bd-box.is-goods { margin-bottom: 20px; }
  .bd-acts { padding-bottom: 20px; }
  .bd-nav { margin-top: 24px; }
  .bd-bottom { justify-content: stretch; padding-top: 20px; }
}

/* ── write.css ── */
.bd-fld { display: flex; flex-direction: row; gap: 16px; padding: 16px 0; box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.bd-fld-l { flex: 0 0 120px; padding-top: 12px; font-size: 15px; line-height: 22px; letter-spacing: 0.0145em; font-weight: 600; color: var(--wds-text-neutral); }
.bd-fld-req { color: var(--wds-primary); }
.bd-fld-b { flex: 1; min-width: 0; max-width: 500px; display: flex; flex-direction: column; gap: 6px; }
.bd-fld-hint { font-size: 13px; line-height: 18px; letter-spacing: 0.0252em; color: var(--wds-text-alt); }
.bd-pick { position: relative; }
.bd-pick-btn { width: 100%; height: 44px; padding: 0 12px 0 14px; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line); font-family: var(--font-core); font-size: 16px; letter-spacing: 0.0096em; color: var(--wds-text-assistive); }
.bd-pick-btn.has-val { color: var(--wds-text); }
.bd-pick-val { flex: 1; text-align: left; }
.bd-pick-pop { position: absolute; left: 0; right: 0; top: 48px; z-index: 30; background: var(--wds-surface); border-radius: 8px; box-shadow: var(--wds-elev-popover); padding: 6px; }
.bd-pick-opt { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font-family: var(--font-core); font-size: 16px; text-align: left; color: var(--wds-text-neutral); font-weight: 500; }
.bd-pick-opt.is-on { background: var(--wds-fill); font-weight: 700; }
.bd-pick-opt-t { flex: 1; }
.bd-btn { flex: 0 0 auto; min-width: 0; height: 48px; padding: 0 20px; border-radius: 4px; border: 0; font-family: var(--font-core); font-size: 16px; font-weight: 700; letter-spacing: 0.0096em; white-space: nowrap; background: var(--wds-fill); color: var(--wds-text-neutral); }
.bd-btn.is-grow { flex: 1 1 0; }
.bd-btn.is-strong { background: var(--wds-primary); color: #fff; }
.bd-btn[disabled] { cursor: not-allowed; background: var(--wds-fill); color: var(--wds-text-assistive); }
.bd-w-note { display: grid; place-items: center; gap: 12px; padding: 64px 0; }
.bd-w-note-t { font-size: 16px; letter-spacing: 0.0096em; color: var(--wds-text-neutral); }
.bd-w-note-a { display: flex; gap: 8px; }
.bd-w-body { margin-top: 20px; }
.bd-w-input { width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border: 0; outline: none; border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line); font-family: var(--font-core); font-size: 16px; letter-spacing: 0.0096em; color: var(--wds-text); }
.bd-w-ta { width: 100%; box-sizing: border-box; min-height: 260px; padding: 14px; border: 0; outline: none; border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line); resize: vertical; font-family: var(--font-core); font-size: 16px; line-height: 26px; letter-spacing: 0.0096em; color: var(--wds-text); }
.bd-w-imgs { display: flex; gap: 8px; flex-wrap: wrap; }
.bd-w-img { position: relative; display: block; width: 96px; height: 96px; border-radius: 4px; overflow: hidden; background: var(--wds-fill); box-shadow: var(--wds-elev-inset-line); }
.bd-w-img-i { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-w-img-x { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; min-height: 0; border-radius: 1000px; border: 0; background: rgba(23, 23, 25, 0.62); color: #fff; display: grid; place-items: center; padding: 0; }
.bd-w-add { width: 96px; height: 96px; min-height: 0; border-radius: 4px; border: 0; background: var(--wds-fill); display: grid; place-items: center; gap: 2px; color: var(--wds-text-alt); font-family: var(--font-core); padding: 0; }
.bd-w-add.is-busy { cursor: progress; }
.bd-w-add-t { font-size: 12px; letter-spacing: 0.0311em; }
.bd-w-file { display: none; }
.bd-w-err { font-size: 13px; line-height: 18px; color: var(--wds-destructive); }
.bd-w-secret { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; border: 0; background: transparent; padding: 0; font-family: var(--font-core); text-align: left; }
.bd-w-check { flex: none; width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line); color: #fff; }
.bd-w-check.is-on { background: var(--wds-text); box-shadow: none; }
.bd-w-secret-t { flex: 1; font-size: 15px; line-height: 22px; letter-spacing: 0.0145em; color: var(--wds-text-neutral); }
.bd-w-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 28px; }
.bd-w-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.bd-w-dim { position: absolute; inset: 0; background: rgba(23, 23, 25, 0.52); }
.bd-w-dlg { position: relative; box-sizing: border-box; width: 100%; max-width: 420px; background: var(--wds-surface); border-radius: 12px; box-shadow: var(--wds-elev-popover); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.bd-w-dlg-t { font-size: 19px; line-height: 28px; letter-spacing: -0.002em; font-weight: 700; }
.bd-w-dlg-s { font-size: 15px; line-height: 24px; letter-spacing: 0.0145em; color: var(--wds-text-alt); }
.bd-w-dlg-a { display: flex; gap: 8px; padding-top: 12px; }

@media (max-width: 768px) {
  .bd-fld { flex-direction: column; gap: 6px; padding: 14px 0; }
  .bd-fld-l { flex: none; padding-top: 0; }
  .bd-pick-btn { height: 40px; }
  .bd-pick-pop { top: 44px; }
  .bd-pick-opt { height: 40px; }
  .bd-btn { height: 44px; }
  .bd-pick button.bd-pick-btn, .bd-pick-pop button.bd-pick-opt { font-size: 16px; }
  .bd-w-actions button.bd-btn, .bd-w-dlg-a button.bd-btn { font-size: 16px; }
  .bd-w-body { margin-top: 12px; }
  .bd-w-ta { min-height: 200px; }
  .bd-w-img, .bd-w-add { width: 76px; height: 76px; }
  .bd-w-actions { justify-content: stretch; padding-top: 20px; }
  .bd-w-modal { padding: 20px 16px; }
  .bd-w-dlg { padding: 20px; }
}

/* ── 스켈레톤(대략치 — 원본 skeleton.css 미대조) ── */
.bd-ct-skel { min-height: 320px; background: linear-gradient(90deg, var(--wds-fill) 25%, var(--wds-fill-strong) 37%, var(--wds-fill) 63%); background-size: 400% 100%; animation: bd-skel 1.4s ease infinite; border-radius: 4px; margin-top: 20px; }
@keyframes bd-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── 첫 페인트 자리지킴 ──────────────────────────────────────────────────
   공지사항·상품후기·게시판 세 화면이 이 셸·이 CSS 한 벌을 쓴다 —
   여기 640/520 이 곧 세 화면 공통값이고, .bd-page 의 min-height 와 같은 값이다. */
#bd-root { min-height: 640px; }
/* 자식 margin 을 쓰지 않는다 — 높이를 고정한 부모 밖으로 새어나가 자리가 실제보다 커진다. */
.bd-skel-head { display: flex; align-items: center; height: 32px; box-sizing: content-box; padding-bottom: 11px; border-bottom: 1px solid var(--wds-text); }
.bd-skel-tool { display: flex; align-items: center; gap: 8px; padding-top: 20px; flex-wrap: wrap; }
.bd-skel-rows { margin-top: 20px; border-top: 1px solid var(--wds-text); }
.bd-skel-row { display: flex; align-items: center; height: 60px; box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.bd-skel-bar { display: block; border-radius: 4px; background: linear-gradient(90deg, var(--wds-fill) 25%, var(--wds-fill-strong) 37%, var(--wds-fill) 63%); background-size: 400% 100%; animation: bd-skel 1.4s ease infinite; }
.bd-skel-row .bd-skel-bar { height: 21px; width: 45%; }
.bd-skel-row:nth-child(2n) .bd-skel-bar { width: 62%; }
.bd-skel-t { width: 132px; height: 22px; }
.bd-skel-a { width: 84px; height: 36px; }
.bd-skel-s { flex: 1; max-width: 260px; height: 36px; margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .bd-skel-bar { animation: none; }
}

@media (max-width: 768px) {
  #bd-root { min-height: 520px; }
  /* 첫 페인트에 없는 줄(제목)의 자리를 잡으면 실제 렌더에서 사라지며 화면이 튄다.
     실제 모양대로 «검색칸 + 글쓰기(65px)» 한 줄만 잡는다. */
  .ee-bdhd .bd-skel-head { display: none; }
  .ee-bdhd .bd-skel-s { flex: 1 1 auto; }
  .ee-bdhd .bd-skel-a { order: 2; width: 65px; height: 40px; }
  .bd-skel-tool { padding-top: 4px; }
  .bd-skel-tool .bd-skel-bar { height: 40px; }
  .bd-skel-s { flex: 1 1 100%; max-width: none; margin-left: 0; }
  .bd-skel-rows { margin-top: 16px; }
  .bd-skel-row { height: 76px; }
  .bd-skel-row:nth-child(n+5) { display: none; }
}

/* ── 프로토타입 전용 헤더/푸터 placeholder (공용 셸은 별도 작업) ── */
.bd-proto-hdr { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--wds-line); font-weight: 800; letter-spacing: -0.01em; }
.bd-proto-hdr .note { font-weight: 400; font-size: 12px; color: var(--wds-text-assistive); }
.bd-proto-ftr { padding: 24px 20px; text-align: center; font-size: 12px; color: var(--wds-text-assistive); border-top: 1px solid var(--wds-line); }