/* Board content uses the existing lobby feature panel, colors and button treatment. */
#lobbyFeatureBody .board-root {
  box-sizing: border-box;
  width: min(100%, 620px);
  margin: 0 auto;
  color: #f3e6c2;
  font-size: 13px;
  line-height: 1.5;
}
#lobbyFeatureBody .board-root * { box-sizing: border-box; }
#lobbyFeatureBody .board-root button,
#lobbyFeatureBody .board-root input,
#lobbyFeatureBody .board-root select,
#lobbyFeatureBody .board-root textarea { font: inherit; }
#lobbyFeatureBody .board-root button { cursor: pointer; }
#lobbyFeatureBody .board-root button:disabled { cursor: default; opacity: .55; }
#lobbyFeatureBody .board-root button:focus-visible,
#lobbyFeatureBody .board-root input:focus-visible,
#lobbyFeatureBody .board-root select:focus-visible,
#lobbyFeatureBody .board-root textarea:focus-visible { outline: 2px solid #ffd76a; outline-offset: 2px; }
.board-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; }
.board-tabs button {
  min-width: 0; min-height: 44px; padding: 7px 1px; border: 1px solid rgba(181,154,94,.4);
  border-radius: 8px; background: #241b0d; color: #b8a87f;
  font-size: 11px !important; font-weight: 800 !important; white-space: nowrap;
}
.board-tabs button.is-active { border-color: #f0c95c; background: rgba(245,187,69,.14); color: #ffd76a; }
.board-store-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; color: #d8c69a; font-weight: 800; }
.board-store-filter select { flex: 1; max-width: 75%; }
.board-root select,
.board-form input,
.board-form textarea,
.board-comment-form textarea {
  min-width: 0; width: 100%; padding: 9px 10px; border: 1px solid rgba(181,154,94,.45);
  border-radius: 10px; background: #1c150a; color: #f3e6c2; color-scheme: dark;
}
.board-root select,
.board-form input { min-height: 44px; }
#lobbyFeatureBody .board-root input,
#lobbyFeatureBody .board-root select,
#lobbyFeatureBody .board-root textarea { font-size: 16px; }
.board-root select { height: 44px; }
.board-root textarea { resize: vertical; line-height: 1.6; }
.board-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 2px 9px; color: #d8c69a; font-size: 12px; font-weight: 800; }
.board-small-primary,
.board-primary { border: 1px solid #e5a61f; border-radius: 9px; background: linear-gradient(180deg,#ffd45a,#e5a61f); color: #241703; font-weight: 900 !important; }
.board-small-primary { min-height: 44px; padding: 5px 12px; font-size: 12px !important; }
.board-primary { width: 100%; min-height: 44px; padding: 9px 12px; font-size: 13px !important; }
.board-secondary { display: block; width: 100%; min-height: 44px; margin-top: 9px; padding: 8px 10px; border: 1px solid rgba(181,154,94,.4); border-radius: 9px; background: #241b0d; color: #d8c69a; font-size: 12px !important; font-weight: 800 !important; }
.board-list { overflow: hidden; border: 1px solid rgba(181,154,94,.32); border-radius: 12px; background: linear-gradient(180deg,rgba(48,37,19,.76),rgba(28,21,10,.9)); }
.board-row { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; padding: 12px 11px; border: 0; border-top: 1px solid rgba(181,154,94,.18); background: transparent; color: inherit; text-align: left; }
.board-row:first-child { border-top: 0; }
.board-row:active { background: rgba(245,187,69,.09); }
.board-row-text { display: flex; flex: 1 1 auto; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
/* 첫 첨부 사진이 행 오른쪽 썸네일로 붙는다. 본문 영역은 min-width:0 으로 줄어든다. */
.board-row-thumb { flex: 0 0 auto; width: 54px; height: 54px; border: 1px solid rgba(181,154,94,.3); border-radius: 8px; background: #1c150a; object-fit: cover; }
.board-row-counts { display: inline-flex; gap: 7px; white-space: nowrap; }
.board-row-photos { color: #d8c69a; }
.board-row-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 17px; }
.board-row time,
.board-detail-meta time,
.board-comment-meta time { color: #8f8264; font-size: 10px; white-space: nowrap; }
.board-row strong { color: #f3e6c2; font-size: 13px; font-weight: 900; overflow-wrap: anywhere; }
.board-row-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; justify-content: space-between; color: #a89a78; font-size: 11px; }
.board-author { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.board-author .operator-verified-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-author .operator-verified-badge { margin-left: 0; }
.board-store-tag { display: inline-flex; max-width: 70%; padding: 2px 6px; border: 1px solid rgba(240,201,92,.3); border-radius: 5px; background: rgba(245,187,69,.1); color: #d8c69a; font-size: 10px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-empty { padding: 25px 12px; color: #b8a87f; text-align: center; font-size: 12px; }
.board-empty strong { display: block; color: #f3e6c2; font-size: 13px; }
.board-empty p { margin: 4px 0 0; }
.board-message { margin: 0 0 10px; padding: 10px 11px; border: 1px solid #98634a; border-radius: 9px; background: #352017; color: #ffd0b8; font-size: 12px; overflow-wrap: anywhere; }
.board-back { min-height: 44px; margin-bottom: 10px; padding: 4px 3px; border: 0; background: none; color: #f5c96b; font-size: 12px !important; font-weight: 800 !important; }
.board-detail { padding: 14px 12px; border: 1px solid rgba(181,154,94,.32); border-radius: 12px; background: linear-gradient(180deg,rgba(48,37,19,.76),rgba(28,21,10,.9)); }
.board-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #a89a78; font-size: 11px; }
.board-detail-meta time { margin-left: auto; }
.board-detail h3 { margin: 13px 0 8px; color: #ffe680; font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
/* 본문+사진을 한 덩어리로 두고 최소 높이는 덩어리에 건다 — 본문에만 걸면 한 줄짜리 글의 사진이 60px 아래로 떨어졌다. */
.board-post-content { min-height: 90px; }
.board-post-body { margin: 0; color: #f3e6c2; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.board-owner-actions { display: flex; gap: 7px; justify-content: flex-end; margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(181,154,94,.18); }
.board-owner-actions .board-secondary { width: auto; min-width: 55px; min-height: 44px; margin: 0; padding: 4px 9px; }
.board-comments { margin-top: 19px; }
.board-comments h4 { margin: 0 2px 8px; color: #d8c69a; font-size: 12px; }
.board-comments h4 span { color: #ffd76a; }
.board-comment { padding: 12px 2px; border-top: 1px solid rgba(181,154,94,.18); }
.board-comment-meta { display: flex; align-items: center; gap: 8px; }
.board-comment-meta strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f3e6c2; font-size: 11px; }
.board-comment-meta time { flex: 0 0 auto; margin-left: 0; }
.board-comment-meta .board-text-button { flex: 0 0 auto; }
.board-comment p { margin: 6px 0 0; color: #d8c69a; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.board-comment-empty { padding: 10px; border-top: 1px solid rgba(181,154,94,.18); }
.board-text-button { min-width: 44px; min-height: 44px; padding: 2px 0; border: 0; background: transparent; color: #a89a78; font-size: 10px !important; }
.board-comment-form,
.board-form { display: grid; gap: 12px; }
.board-form-fields { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.board-comment-form { margin-top: 15px; padding-top: 12px; border-top: 1px solid rgba(181,154,94,.18); }
.board-comment-form label,
.board-form label { display: grid; gap: 7px; color: #d8c69a; font-size: 12px; font-weight: 800; }
.board-comment-form textarea { min-height: 70px; }
.board-form h3 { margin: 0 0 2px; color: #ffe680; font-size: 16px; }
.board-form textarea { min-height: 180px; }
.board-form-hint { margin: 0; color: #8f8264; font-size: 11px; }
/* 상세 본문 아래 첨부 사진. 세로로 쌓고 원본 비율 유지, 탭하면 새 탭에서 원본.
   작은 사진(캡처·스티커)은 원본 크기로 가운데, 큰 사진만 카드 폭에 맞춘다 — 카드 폭으로
   늘리면 흐릿해진다. width/height 속성은 자리 예약용(aspect-ratio)으로 둔다. */
.board-post-images { display: grid; gap: 8px; margin-top: 14px; }
.board-post-image { display: block; overflow: hidden; border: 1px solid rgba(181,154,94,.3); border-radius: 10px; background: #1c150a; }
.board-post-image img { display: block; width: auto; max-width: 100%; height: auto; max-height: 70vh; margin: 0 auto; object-fit: contain; }
/* 글쓰기 사진 첨부: 3칸 격자, 채워진 칸은 썸네일+삭제, 빈 칸 하나는 추가 버튼. */
.board-image-field { display: grid; gap: 7px; color: #d8c69a; font-size: 12px; font-weight: 800; }
.board-image-label small { margin-left: 4px; color: #8f8264; font-size: 11px; font-weight: 600; }
.board-image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.board-image-chip { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(181,154,94,.4); border-radius: 10px; background: #1c150a; }
.board-image-chip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.board-image-remove { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.68); color: #fff; font-size: 14px !important; font-weight: 800 !important; line-height: 44px; text-align: center; }
.board-form .board-image-add { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px dashed rgba(181,154,94,.55); border-radius: 10px; background: rgba(245,187,69,.06); color: #d8c69a; font-size: 12px; font-weight: 800; cursor: pointer; }
.board-form .board-image-add:focus-within { outline: 2px solid #ffd76a; outline-offset: 2px; }
.board-form .board-image-add input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* Tips share the existing board, with readable prose and explicit provenance. */
.board-tip-intro { margin: 0 0 12px; color: #c7b78f; line-height: 1.65; }
.board-tip-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.board-tip-badges > span { padding: 2px 7px; border: 1px solid rgba(240,201,92,.32); border-radius: 20px; color: #f0d795; font-size: 11px; font-weight: 700; }
.board-tip-preview { color: #c7b78f; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.board-tip-detail { font-size: 16px; line-height: 1.8; }
.board-tip-detail h3 { font-size: 21px; line-height: 1.5; }
.board-tip-detail .board-author { max-width: 100%; overflow-wrap: anywhere; }
.board-tip-detail .board-author .operator-verified-name { white-space: normal; overflow: visible; text-overflow: clip; }
.board-tip-detail h4 { margin: 0 0 8px; color: #ffe680; font-size: 16px; line-height: 1.55; }
.board-tip-summary { margin: 18px 0; padding: 14px; border: 1px solid rgba(240,201,92,.4); border-radius: 10px; background: rgba(245,187,69,.07); }
.board-tip-summary p,
.board-tip-body p,
.board-tip-source p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.board-tip-body > p,
.board-tip-section { margin: 0 0 20px; }
.board-tip-section.is-example { padding: 14px; border-left: 3px solid #e5b84d; border-radius: 0 8px 8px 0; background: rgba(245,187,69,.06); }
.board-tip-source { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(181,154,94,.32); color: #c7b78f; font-size: 14px; }
.board-tip-source p + p { margin-top: 6px; }
.board-tip-source a { display: inline-block; min-height: 44px; padding: 7px 0; color: #f5d581; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.board-tip-permission summary { display: flex; align-items: center; min-height: 44px; margin-top: 8px; color: #f5d581; cursor: pointer; }
.board-tip-permission p { padding: 8px 0; }
.board-tip-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.board-tip-source-fields { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 12px 10px; border: 1px solid rgba(181,154,94,.4); border-radius: 10px; }
.board-tip-source-fields legend { max-width: 100%; color: #d8c69a; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.board-tip-optional-source { min-width: 0; }
.board-tip-optional-source > summary { min-height: 44px; padding: 11px 2px; color: #f5d581; cursor: pointer; line-height: 22px; }
.board-tip-optional-source[open] > summary { margin-bottom: 8px; }
.board-tip-form textarea[name="tip_summary"] { min-height: 100px; }
.board-tip-form textarea[name="tip_permission_note"] { min-height: 110px; }
.board-tip-form .board-tip-confirm { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 7px; min-height: 44px; font-weight: 400; line-height: 1.7; }
.board-tip-confirm input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; margin: 11px; accent-color: #f0c95c; }
@media (min-width: 390px) { .board-tabs button { font-size: 12px !important; } }

/* A quiet paper surface belongs only to tips; the surrounding cocoa lobby stays unchanged. */
.board-root.is-tips {
  --tip-paper: #f8f1df;
  --tip-ink: #30291f;
  --tip-muted: #665944;
  --tip-gold-paper: #f3e0a6;
  --tip-teal-paper: #e4efea;
  --tip-teal-ink: #24574b;
}
.board-root.is-tips .board-list { background: var(--tip-paper); border-color: #aa8a4e; }
.board-root.is-tips .board-row { color: var(--tip-ink); border-top-color: #d9cbb0; padding: 16px 12px; }
.board-root.is-tips .board-row:active { background: #f0e5ce; }
#lobbyFeatureBody .board-root.is-tips .board-row:focus { outline: 2px solid #185d50; outline-offset: -3px; }
#lobbyFeatureBody .board-root.is-tips .board-tip-source a:focus-visible { outline: 2px solid #185d50; outline-offset: 2px; }
.board-root.is-tips .board-row strong { color: var(--tip-ink); font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif; font-size: 16px; font-weight: 750; line-height: 1.55; }
.board-root.is-tips .board-row time,
.board-root.is-tips .board-row-meta,
.board-root.is-tips .board-tip-preview { color: var(--tip-muted); }
.board-root.is-tips .board-tip-badges > span { border-color: #cdb576; background: #fff4cd; color: #665020; }
.board-root.is-tips .board-tip-detail { padding: 20px 16px; border-color: #aa8a4e; background: var(--tip-paper); color: var(--tip-ink); font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif; font-weight: 450; }
.board-root.is-tips .board-tip-detail .board-detail-meta,
.board-root.is-tips .board-tip-detail .board-detail-meta time { color: var(--tip-muted); font-size: 12px; }
.board-root.is-tips .board-tip-detail h3 { margin-top: 18px; color: var(--tip-ink); font-family: inherit; font-size: 23px; font-weight: 800; }
.board-root.is-tips .board-tip-detail h4 { color: #4e3b17; font-family: inherit; font-weight: 750; }
.board-root.is-tips .board-tip-summary { padding: 15px; background: var(--tip-gold-paper); border-color: #c7a955; color: #45351b; }
.board-root.is-tips .board-tip-body { line-height: 1.85; }
.board-root.is-tips .board-tip-section p + p { margin-top: 14px; }
.board-root.is-tips .board-tip-section.is-example { padding: 15px; border-left-color: #ad8134; background: #f0e5cd; color: #45351b; }
.board-root.is-tips .board-tip-section.is-commentary { padding: 15px; border-left: 3px solid #4f8473; border-radius: 0 8px 8px 0; background: var(--tip-teal-paper); color: var(--tip-teal-ink); }
.board-root.is-tips .board-tip-section.is-commentary h4 { color: var(--tip-teal-ink); }
.board-root.is-tips .board-tip-source { border-top-color: #cdbf9f; color: var(--tip-muted); line-height: 1.8; }
.board-root.is-tips .board-tip-source a { color: #185d50; }
.board-root.is-tips .board-tip-source .board-tip-author-link { display: inline-block; min-height: 44px; padding: 7px 0; }
.board-root.is-tips .board-tip-license { margin-top: 12px; }
.board-root.is-tips .board-tip-adaptation { margin-top: 16px; }
.board-root.is-tips .board-tip-adaptation > summary { min-height: 44px; padding: 11px 0; color: #185d50; font-weight: 750; cursor: pointer; }
.board-root.is-tips .board-tip-adaptation > summary:focus-visible { outline: 2px solid #185d50; outline-offset: 2px; }
.board-root.is-tips .board-tip-adaptation[open] > p { padding-top: 4px; }
.board-root.is-tips .board-tip-adaptation h4 { font-size: 14px; }
.board-root.is-tips .board-tip-section.is-advanced { padding: 0 12px; border: 1px solid #cdbf9f; border-radius: 8px; color: var(--tip-ink); }
.board-root.is-tips .board-tip-section.is-advanced > summary { min-height: 44px; padding: 11px 0; color: #185d50; cursor: pointer; font-weight: 750; }
.board-root.is-tips .board-tip-section.is-advanced > summary:focus-visible { outline: 2px solid #185d50; outline-offset: 2px; }
.board-root.is-tips .board-tip-section.is-advanced[open] > div { padding: 0 0 14px; }
.board-root.is-tips .board-tip-permission summary { color: #185d50; }
.board-root.is-tips .board-owner-actions { border-top-color: #cdbf9f; }
.board-learning-path { margin: 0 0 20px; overflow: hidden; border: 1px solid #aa8a4e; border-radius: 12px; background: var(--tip-paper); color: var(--tip-ink); font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif; }
.board-learning-path > h3 { margin: 0; padding: 18px 14px 0; color: var(--tip-ink); font-family: inherit; font-size: 18px; font-weight: 800; line-height: 1.55; }
.board-learning-path > p { margin: 6px 0 0; padding: 0 14px 16px; color: var(--tip-muted); font-size: 14px; line-height: 1.7; }
.board-learning-path ol { margin: 0; padding: 0; list-style: none; }
.board-learning-group > h4 { margin: 0; padding: 12px 14px; border-top: 1px solid #c9b68d; background: #efe3c6; color: var(--tip-ink); font-size: 15px; font-weight: 800; line-height: 1.65; }
.board-learning-path li { border-top: 1px solid #d9cbb0; }
.board-learning-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 12px; align-items: start; gap: 10px; width: 100%; min-height: 44px; padding: 15px 12px; border: 0; background: transparent; color: var(--tip-ink); text-align: left; }
.board-learning-number { display: flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; margin-top: 1px; border: 1px solid #a2bdb2; border-radius: 50%; background: var(--tip-teal-paper); color: var(--tip-teal-ink); font-size: 14px; font-weight: 800; }
.board-learning-text { display: grid; min-width: 0; gap: 5px; }
.board-learning-text strong { color: var(--tip-ink); font-size: 16px; font-weight: 750; line-height: 1.6; overflow-wrap: anywhere; }
.board-learning-text > span { color: var(--tip-muted); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.board-learning-arrow { align-self: center; color: #665020; font-size: 23px; line-height: 1.4; }
.board-learning-row:active { background: #f0e5ce; }
#lobbyFeatureBody .board-learning-row:focus { outline: 2px solid #185d50; outline-offset: -3px; }
.board-more-tips-heading { margin: 0 2px 10px; color: #e5d6b1; font-size: 14px; line-height: 1.6; }
.board-root.is-tips .board-learning-position { margin: 10px 0 16px; color: var(--tip-teal-ink); font-size: 13px; font-weight: 750; line-height: 1.6; }
.board-learning-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; }
.board-learning-link { display: grid; align-content: start; min-width: 0; min-height: 44px; gap: 6px; padding: 12px 10px; border: 1px solid #a2bdb2; border-radius: 9px; background: var(--tip-teal-paper); color: var(--tip-teal-ink); text-align: left; }
.board-learning-link > span { font-size: 12px; font-weight: 750; line-height: 1.6; }
.board-learning-link strong { color: var(--tip-ink); font-size: 14px; font-weight: 750; line-height: 1.65; overflow-wrap: anywhere; }
#lobbyFeatureBody .board-learning-link:focus-visible { outline: 2px solid #185d50; outline-offset: 2px; }
.board-tip-source-fields a { display: inline-block; min-height: 44px; padding: 7px 0; color: #f5d581; }
@media (max-width: 359px) {
  .board-root.is-tips .board-tip-detail { padding: 18px 12px; }
  .board-root.is-tips .board-tip-detail h3 { font-size: 21px; }
}