/* ============================================================================
 * 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-write-hold { padding-top: 16px; }
.bd-write-hold.is-lg { padding-top: 20px; }

.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-sorts { flex: none; display: flex; gap: 6px; margin-left: auto; }
.bd-rv-sort { flex: none; height: 36px; padding: 0 12px; 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-rv-sort.is-on { background: var(--wds-text); color: #fff; }
.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; }
.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; }
.bd-rv-body { display: flex; flex-direction: column; gap: 6px; }
.bd-rv-line { display: flex; align-items: center; gap: 4px; }
.bd-rv-writer { flex: 1; min-width: 0; font-size: 12px; letter-spacing: 0.0311em; color: var(--wds-text-assistive); }
.bd-rv-date { flex: none; font-size: 12px; letter-spacing: 0.0311em; color: var(--wds-text-assistive); }
.bd-rv-text { font-size: 14px; line-height: 21px; 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-brand { font-size: 12px; line-height: 18px; letter-spacing: 0.0311em; font-weight: 700; color: var(--wds-text-alt); padding-top: 8px; }
.bd-rv-name { font-size: 13px; line-height: 18px; letter-spacing: 0.0252em; color: var(--wds-text-neutral); }

@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-sort { height: 40px; }
  .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: 12px; box-shadow: inset 0 -1px 0 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-full { display: grid; place-items: center; width: 100%; height: 44px; border-radius: 4px; background: var(--wds-primary); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.0096em; text-decoration: none; }
.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; }
.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: 28px; }
.bd-pg-arrow { width: 40px; height: 40px; border-radius: 4px; border: 0; background: transparent; color: var(--wds-text-alt); display: grid; place-items: center; }
.bd-pg-arrow[disabled] { cursor: default; color: var(--wds-text-assistive); }
.bd-pg-num { 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); }
.bd-pg-num.is-on { font-weight: 700; background: var(--wds-text); color: #fff; }
.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; }
  .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: 20px; }
  .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%; } }

/* ── 프로토타입 전용 헤더/푸터 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); }