:root {
  /* 웹 화면용 팔레트: 제품의 공식 색상을 뜻하지 않습니다. */
  /* 카드의 흰색과 기존 크림색 사이로 본문을 밝힙니다. */
  --color-bg: #F6EFE2;
  --color-surface: #FFFDF8;
  --color-surface-muted: #ECE5D9;
  --color-brand: #3D2D26;
  --color-text: #302923;
  --color-text-muted: #635749;
  --color-border: #D8CAB2;
  --color-gold: #AA8650;
  --color-gold-text: #6F5228;
  --color-quill-fill: #DCBE7B;
  --color-search-highlight: #EAD8AE;
  --color-success: #365C43;
  --color-success-bg: #E7EEE4;
  --color-error: #963D30;
  --color-error-bg: #F7E9E4;
  --color-backdrop: color-mix(in srgb, var(--color-brand) 42%, transparent);
  --shadow-floating: 0 16px 48px color-mix(in srgb, var(--color-brand) 14%, transparent);
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --serif: Georgia, 'Times New Roman', 'Batang', serif;
  --sans: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --card-min-width: 320px;
  --touch-target: 44px;
  --brand-bar: 91px;
  --header-height: var(--brand-bar);
  --bar-transition: .25s ease;
}
.search-highlight { background: var(--color-search-highlight); color: var(--color-brand); border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
@media (min-width: 901px) {
  :root {
    /* 사이드바와 메인 배경을 이어 사진 중심의 화면으로 정돈합니다. */
    --color-sidebar: var(--color-bg);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button {
  cursor: pointer;
  border: 0;
  background: none;
  border-radius: var(--radius-control);
  transition: background-color .15s, color .15s, border-color .15s;
}
a { color: var(--color-brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-gold-text);
  outline-offset: 4px;
}
button:hover:not(:disabled), .icon-button:hover:not(:disabled) {
  color: var(--color-brand);
  background: var(--color-surface-muted);
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled, input:disabled, textarea:disabled, select:disabled {
  cursor: not-allowed;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}
input, textarea, select {
  font-size: 16px;
  line-height: 1.5;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: 10px 12px;
  min-width: 0;
  max-width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
[aria-invalid='true'] { border-color: var(--color-error); }
.skip-link {
  position: fixed;
  left: 20px;
  top: -100px;
  padding: 12px;
  background: var(--color-brand);
  color: var(--color-surface);
  border-radius: var(--radius-control);
  z-index: 20;
}
.skip-link:focus { top: 10px; }
.sidebar {
  --sidebar-pad: 30px;
  width: 236px;
  position: fixed;
  inset: 0 auto 0 0;
  background: var(--color-sidebar, var(--color-surface));
  padding: 0 30px 45px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
/* 상단 브라운 띠: 헤더와 이어지는 리버스 로고 영역 */
.wordmark {
  display: flex;
  align-items: center;
  flex: 0 0 var(--brand-bar);
  margin-inline: calc(var(--sidebar-pad) * -1);
  padding-inline: calc(var(--sidebar-pad) - 8px);
  background: var(--color-brand);
}
/* 로고와 상단 바에 걸쳐 끊기지 않는 하나의 그림자 */
body::after { content: ''; position: fixed; inset: var(--header-height) 0 auto; z-index: 16; height: 10px; pointer-events: none; opacity: 0; background: linear-gradient(color-mix(in srgb, var(--color-brand) 12%, transparent), transparent); transition: opacity var(--bar-transition); }
.is-scrolled body::after { opacity: 1; }
.small-mark { display: block; height: auto; }
/* 상단에는 스크롤 위치와 관계없이 크림색 로고를 표시합니다. */
.logo-swap { position: relative; display: block; }
.logo-swap img { display: block; height: auto; }
.logo-solid { position: absolute; inset: 0; opacity: 0; }
.wordmark:hover, .mobile-brand:hover { text-decoration: none; }
.desktop-nav { margin-top: 32px; display: grid; gap: 8px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 13px 14px;
  text-align: left;
  color: var(--color-text-muted);
  font-size: 14px;
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item.active { color: var(--color-brand); background: var(--color-surface-muted); font-weight: 600; }
/* 사이드 메뉴는 박스 대신 가벼운 행으로, 현재 위치만 은은하게 강조합니다. */
.desktop-nav .nav-item { min-height: 48px; padding: 12px 14px; gap: 12px; color: var(--color-text-muted); background: transparent; border: 0; font-size: 15px; font-weight: 500; }
.desktop-nav .nav-item svg { stroke-width: 1.6; }
.desktop-nav .nav-item:hover:not(:disabled) { color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 4%, var(--color-bg)); }
.desktop-nav .nav-item.active, .desktop-nav .nav-item.active:hover:not(:disabled) { color: var(--color-brand); background: var(--color-surface-muted); font-weight: 600; }
.desktop-nav .nav-item.active svg { stroke-width: 1.9; }
.sidebar-bottom { margin-top: auto; padding-top: 40px; }
.edition { font-size: 10px; letter-spacing: .7px; color: var(--color-gold-text); }
.sidebar-bottom p { font-size: 15px; line-height: 1.9; margin: 18px 0 28px; }
.demo-label { font-size: 11px; color: var(--color-text-muted); letter-spacing: .3px; }
.page { margin-left: 236px; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  height: var(--brand-bar);
  padding: 0 5.2%;
  background: var(--color-brand);
  color: var(--color-surface);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.category-label { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.category-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); }
.category-en { font-size: 11px; letter-spacing: 1px; color: #D8CAB2; margin-left: 8px; }
.category-picker { position: relative; min-width: 0; }
.category-trigger { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--color-surface) 55%, transparent); color: var(--color-surface); white-space: nowrap; font-size: 13px; }
.category-trigger .category-en { margin: 0; font-size: 10px; letter-spacing: .7px; }
.category-trigger:hover:not(:disabled) { background: color-mix(in srgb, var(--color-surface) 10%, var(--color-brand)); color: var(--color-surface); border-color: var(--color-surface); }
.category-chevron { width: 16px; height: 16px; flex: 0 0 16px; transition: transform .15s; }
.category-trigger[aria-expanded='true'] .category-chevron { transform: rotate(180deg); }
.category-menu { position: absolute; top: calc(100% + 10px); left: 0; width: 250px; padding: 12px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-floating); z-index: 30; }
.category-menu[hidden] { display: none; }
.category-menu-label { display: block; font-size: 12px; color: var(--color-text-muted); margin: 2px 8px 8px; }
.category-menu [role='option'] { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 10px 12px; background: transparent; color: var(--color-brand); font-weight: 600; text-align: left; gap: 12px; }
.category-menu [role='option'][aria-selected='true'], .category-menu [role='option']:hover { background: var(--color-surface-muted); }
.category-option-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.category-option-en { font-size: 11px; font-weight: 400; letter-spacing: .5px; color: var(--color-text-muted); }
.category-check { flex: 0 0 auto; visibility: hidden; }
[aria-selected='true'] > .category-check { visibility: visible; }
.category-menu p { margin: 12px 8px 4px; font-size: 13px; color: var(--color-text-muted); line-height: 1.6; }
.header-search { display: flex; align-items: center; position: absolute; left: calc(50vw - 236px); transform: translateX(-50%); width: clamp(220px, 24vw, 420px); min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); }
.header-search:focus-within { outline: 2px solid var(--color-surface); outline-offset: 3px; }
.header-search input { flex: 1; min-width: 0; width: 100%; padding: 10px 12px; border: 0; background: transparent; font-size: 16px; outline: none; }
.header-search input:focus-visible { outline: none; }
.header-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-submit, .search-clear { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-height: 44px; padding: 8px; color: var(--color-brand); }
.search-submit svg { width: 20px; height: 20px; }
.search-clear { font-size: 23px; color: var(--color-text-muted); }
.search-clear[hidden] { display: none; }
.topbar .category-menu button:focus-visible, .topbar .header-search button:focus-visible { outline-color: var(--color-gold-text); outline-offset: -4px; }
@media (max-width: 1300px) { .category-trigger .category-en { display: none; } }
@media (min-width: 901px) and (max-width: 1200px) { .header-search { left: calc(50vw - 200px); } }
@media (max-width: 900px) {
  :root { --header-height: calc(var(--brand-bar) + 58px); }
  .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: var(--brand-bar) 46px; column-gap: 10px; row-gap: 0; height: var(--header-height); padding-bottom: 12px; }
  .category-picker { justify-self: start; position: static; }
  .category-trigger { padding-inline: 9px; gap: 6px; }
  .category-menu { top: calc(100% + 8px); left: 20px; right: 20px; width: auto; max-width: none; }
  .header-search { grid-column: 1 / -1; grid-row: 2; position: static; transform: none; width: 100%; height: 46px; }
}
.topbar a:focus-visible, .topbar button:focus-visible, .wordmark:focus-visible { outline-color: var(--color-surface); outline-offset: 2px; }
.text-button {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  background: var(--color-surface);
  color: var(--color-brand);
  border: 1px solid var(--color-surface);
}
.text-button > span:first-child { font-size: 20px; font-weight: 300; }
.mobile-brand { display: none; }
main { max-width: 1280px; min-width: 0; margin: auto; padding: 44px 40px 35px; outline: none; }
.feed-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 1.3px; color: var(--color-gold-text); margin: 0 0 10px; }
h1 { font-weight: 600; font-size: 22px; line-height: 1.4; margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.heading-dot { color: var(--color-gold); padding-left: 2px; }
.subtitle { font-size: 14px; color: var(--color-text-muted); margin: 9px 0 0; }
.heading-note { color: var(--color-text-muted); font-size: 12px; line-height: 1.7; text-align: right; }
.filter-section { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); padding-bottom: 22px; border-bottom: 1px solid var(--color-border); }
.filter-list { display: flex; gap: var(--s1); flex-wrap: wrap; min-width: 0; }
.filter-chip {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 7px 17px;
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: 12px;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
  line-height: 1.8;
}
.filter-chip:not(.selected) { background: var(--color-surface); }
.profile-section .interest-chip { background: var(--color-surface); }
.filter-chip.selected { background: var(--color-brand); color: var(--color-surface); border-color: var(--color-brand); font-weight: 600; }
.filter-chip:hover:not(.selected):not(:disabled) { background: var(--color-surface); border-color: var(--color-brand); }
.manage-button { font-size: 13px; color: var(--color-brand); white-space: nowrap; padding: 10px 4px; }
.manage-button span { margin-left: 4px; }
.manage-button:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 4px; }
.feed-meta { display: flex; justify-content: space-between; gap: var(--s2); margin: 22px 0 17px; font-size: 13px; color: var(--color-text-muted); }
.feed-meta > span:last-child { display: flex; align-items: center; gap: 6px; }
.sort-dot { width: 4px; height: 4px; background: var(--color-gold); border-radius: 50%; }
/* 가운데 1열 피드. 게시물 수와 관계없이 카드 넓이가 같습니다. */
.feed-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
#feed-page, #profile-page { max-width: 560px; margin-inline: auto; }
.post-card {
  position: relative;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
/* 제목 버튼이 카드 전체를 덮어 어디를 눌러도 상세가 열립니다. 태그는 그 위에 둡니다. */
.post-open { display: block; width: 100%; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; overflow-wrap: anywhere; }
.post-open::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); }
.post-open:hover:not(:disabled) { color: inherit; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.post-open:active:not(:disabled) { transform: none; }
.post-open:focus-visible { outline: none; }
.post-open:focus-visible::after { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.post-card:has(.post-open:hover) { border-color: var(--color-gold); }
.post-card .post-tag, .post-card .product-tag { position: relative; z-index: 1; }
.post-actions { display: flex; align-items: center; justify-content: space-between; margin: -8px -8px 6px; }
.post-actions-start, .post-actions-end { display: flex; align-items: center; gap: 2px; }
.comment-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.comment-count:empty { display: none; }
.post-action { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-width: 36px; min-height: 36px; padding: 6px 8px; justify-content: center; font-size: 14px; color: var(--color-brand); border-radius: var(--radius-control); }
.post-action svg { width: 21px; height: 21px; flex-shrink: 0; }
.quill-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.quill-count:empty { display: none; }
.quill-button svg { width: 23px; height: 23px; }
/* 눌린 퀼: 같은 커피색 외곽선에 금색 채움 */
.quill-button[aria-pressed="true"] svg { fill: var(--color-quill-fill); }
/* 넓은 화면은 본문 오른쪽에 관심 태그를 둡니다. */
.content-main { min-width: 0; }
.interest-aside { display: none; }
.interest-aside-title { margin: 0 0 var(--s2); font-size: 15px; font-weight: 600; outline: none; }
/* 배경 카드 없이 페이지 위에 놓이므로 태그만 밝게 띄웁니다. */
.interest-aside .interest-chip { background: var(--color-surface); }
.interest-aside .panel-description { margin: 0; font-size: 14px; line-height: 1.7; }
.profile-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) 18px; padding-bottom: var(--s3); border-bottom: 1px solid var(--color-border); }
.avatar.profile-avatar { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; font-size: 28px; font-weight: 600; }
.profile-identity { flex: 1 1 200px; min-width: 0; }
.profile-identity .eyebrow { margin: 0 0 4px; }
.profile-identity h1 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.profile-stats { display: flex; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.profile-stats li { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.profile-stats strong { font-size: 20px; font-weight: 600; color: var(--color-brand); }
.profile-stats span { font-size: 13px; color: var(--color-text-muted); }
.profile-section { margin-top: var(--s4); }
.profile-section > h2 { margin: 0 0 var(--s2); font-size: 16px; font-weight: 600; outline: none; }
.profile-note { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.profile-prompt-title { margin: 8px 0; font-size: 20px; font-weight: 600; }
.post-detail .post-actions { margin: 8px -8px 8px; }
.post-detail .post-detail-photo { margin: 12px 0 0; }
.post-detail { margin-top: 22px; }
.post-detail-photo { display: block; width: 100%; height: auto; border-radius: var(--radius-control); margin-bottom: var(--s2); }
.post-detail-text { font-size: 16px; line-height: 1.8; margin: var(--s2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comments { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--color-border); }
.comments-title { margin: 0 0 var(--s2); font-size: 15px; font-weight: 600; }
.comments-title span { color: var(--color-gold-text); margin-left: 2px; }
.comment-list { list-style: none; margin: 0 0 var(--s2); padding: 0; display: grid; gap: var(--s2); }
.comment-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.comment-head .author { padding-top: 0; }
.comment-head time { font-size: 13px; color: var(--color-text-muted); }
.comment-body { margin: 4px 0 0; font-size: 15px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-delete { margin-left: auto; padding: 2px 6px; font-size: 13px; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.comment-note { margin: 0 0 var(--s2); font-size: 14px; color: var(--color-text-muted); }
.comment-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#comment-input { display: block; width: 100%; resize: vertical; font-size: 16px; line-height: 1.6; }
.comment-form-actions { display: flex; justify-content: flex-end; margin-top: var(--s1); }
.comment-login { width: 100%; min-height: var(--touch-target); }
.panel-back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch-target); margin-top: 8px; padding: 0 8px 0 0; font-size: 14px; color: var(--color-brand); }
.panel-back + .post-detail { margin-top: 8px; }
.photo-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--color-surface-muted);
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
}
.post-photo { width: 100%; max-width: 100%; height: 100%; display: block; object-fit: cover; }
.photo-category {
  position: absolute;
  bottom: 13px;
  left: 14px;
  padding: 3px 8px;
  background: var(--color-surface);
  color: var(--color-brand);
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: 1px;
}
/* 사람이 먼저 보이도록 작성자를 사진 위에 둡니다. */
.post-head { padding: 12px 16px; }
.post-card .photo-wrap { border-radius: 0; }
.post-body { padding: 14px 16px 16px; }
.post-more { display: inline-block; margin-top: 2px; font-size: 14px; color: var(--color-text-muted); }
.author-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) max-content; align-items: start; gap: 10px; min-width: 0; }
.avatar {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  flex-shrink: 0;
  background: var(--color-surface-muted);
  color: var(--color-brand);
}
.author { min-width: 0; padding-top: 5px; overflow-wrap: anywhere; font-size: 14px; display: block; font-weight: 600; line-height: 1.5; }
.author-row time { padding-top: 5px; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); white-space: nowrap; }
.post-title { font-size: 15px; font-weight: 600; letter-spacing: -.2px; line-height: 1.5; margin: 4px 0 2px; overflow-wrap: anywhere; }
.post-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 14px; line-height: 1.6; color: var(--color-text); margin: 0; overflow-wrap: anywhere; }
.post-tags { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s2); }
.post-tag {
  font-size: 13px;
  color: var(--color-brand);
  background: var(--color-surface-muted);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  overflow-wrap: anywhere;
  max-width: 100%;
  text-align: left;
}
.post-tag:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; background: var(--color-bg); }
/* 제품 태그는 일반 태그와 구분되는 별도 줄이며 개수에 따라 아래로 늘어납니다. */
.post-products { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--color-border); }
.product-tag {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-brand);
  background: transparent;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-control);
  padding: 4px 10px;
  overflow-wrap: anywhere;
  max-width: 100%;
  text-align: left;
}
.product-tag:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; background: var(--color-bg); }
.feed-footer { text-align: center; padding: 54px 0 16px; }
.feed-footer p { font-size: 12px; color: var(--color-text-muted); margin: 8px 0 22px; }
.feed-footer > span:last-child { font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }
.bottom-nav { display: none; }
dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 30px;
  max-width: 660px;
  width: calc(100% - 40px);
  max-height: 88dvh;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-floating);
  overflow: auto;
}
dialog::backdrop { background: var(--color-backdrop); }
/* 윗줄: 분류 표시·닫기, 아랫줄: 제목·동작 버튼. 버튼이 없으면 닫기가 두 줄에 걸쳐 제목 공간을 넓힙니다. */
.panel-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: start; padding-bottom: 22px; border-bottom: 1px solid var(--color-border); }
#panel-kicker { grid-area: 1 / 1; margin-top: 0; }
#panel-title { grid-area: 2 / 1; }
#panel-action { grid-area: 2 / 2; align-self: center; justify-self: end; }
#panel-action:empty { display: none; }
#panel-action .solid-button { white-space: nowrap; }
/* 닫기를 위로 올려 아래 동작 버튼과 떨어뜨립니다. */
#panel { padding-top: 38px; }
/* 태그 탐색은 제목·관심 버튼·닫기를 고정하고 게시물 영역만 스크롤합니다. */
#panel:is([data-view='tag'], [data-view='post'])[open] { display: flex; flex-direction: column; padding: 0; overflow: hidden; --panel-inset: 30px; }
#panel:is([data-view='tag'], [data-view='post']) .panel-top { flex: 0 0 auto; background: var(--color-surface); }
#panel:is([data-view='tag'], [data-view='post']) .panel-header { margin: 0 var(--panel-inset); padding: 38px 0 22px; background: var(--color-surface); }
#panel:is([data-view='tag'], [data-view='post']) #panel-content { flex: 0 1 auto; min-height: 0; padding: 20px var(--panel-inset) var(--panel-inset); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#panel-author { padding: 24px var(--panel-inset) 28px; }
#panel-author[hidden] { display: none; }
#panel-author .author-row { margin: 0; }
@media (max-height: 500px) {
  /* 가로 회전한 작은 화면에서도 긴 태그와 동작 버튼에 접근할 수 있게 합니다. */
  #panel:is([data-view='tag'], [data-view='post']) .panel-top { max-height: 55dvh; overflow-y: auto; }
}
#close-panel { grid-area: 1 / 2 / 3 / 3; justify-self: end; margin: -18px -8px 0 0; }
.panel-header:has(#panel-action:not(:empty)) { row-gap: 18px; }
.panel-header:has(#panel-action:not(:empty)) #close-panel { grid-area: 1 / 2; }
.panel-header h2 { margin: 0; font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.icon-button { font-size: 27px; line-height: 1; width: 36px; height: 36px; flex-shrink: 0; color: var(--color-brand); }
.panel-description { font-size: 14px; color: var(--color-text-muted); line-height: 1.9; }
.interest-list { margin-top: var(--s2); }
.interest-chips { display: flex; flex-wrap: wrap; gap: 10px; }
/* 게시글 태그와 같은 타원을 키운 형태. 태그 이름은 탐색, ×는 해제입니다. */
.interest-chip { display: inline-flex; align-items: center; max-width: 100%; background: var(--color-surface-muted); border-radius: var(--radius-pill); }
.interest-name { font-size: 15px; color: var(--color-brand); overflow-wrap: anywhere; text-align: left; padding: 8px 2px 8px 16px; min-width: 0; border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.interest-name:hover:not(:disabled) { color: var(--color-brand); background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.interest-remove { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; margin-right: 3px; padding: 0 0 3px; font-size: 18px; line-height: 1; color: var(--color-brand); border-radius: 50%; }
.interest-remove:hover:not(:disabled) { color: var(--color-surface); background: var(--color-brand); }
.outline-button, .solid-button { padding: 9px var(--s2); border-radius: var(--radius-control); font-size: 14px; flex-shrink: 0; border: 1px solid var(--color-border); }
.outline-button { color: var(--color-brand); background: var(--color-surface); }
.outline-button:hover:not(:disabled) { border-color: var(--color-brand); }
.solid-button { background: var(--color-brand); color: var(--color-surface); border-color: var(--color-brand); }
.text-button:hover:not(:disabled) { background: var(--color-bg); color: var(--color-brand); border-color: var(--color-bg); }
.solid-button:hover:not(:disabled), .filter-chip.selected:hover:not(:disabled) { background: var(--color-text); color: var(--color-surface); border-color: var(--color-text); }
.tag-panel-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 21px; }
.tag-panel-summary p { font-size: 13px; color: var(--color-text-muted); }
.preview-note { font-size: 13px; color: var(--color-text-muted); margin: 12px 0 23px; }
.panel-posts { display: grid; gap: 30px; }
.compact .photo-wrap { aspect-ratio: 16/10; }
.sample-empty { padding-top: 30px; }
.sample-empty p { font-size: 13px; color: var(--color-text-muted); }
.sample-empty button span { color: var(--color-brand); margin-left: 10px; }
.empty-state { grid-column: 1/-1; text-align: center; padding: 65px 16px 90px; }
.empty-state > span { font-family: var(--serif); font-size: 42px; color: var(--color-gold); }
.empty-state h3 { font-size: 17px; font-weight: 500; }
.empty-state p { font-size: 14px; color: var(--color-text-muted); margin-bottom: 25px; }
.toast {
  position: fixed;
  inset: auto auto 24px 50%;
  margin: 0;
  transform: translate(-50%, 20px);
  padding: 13px 22px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-floating);
  font-size: 14px;
  max-width: calc(100% - 32px);
  width: max-content;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast::before { content: 'ⓘ'; margin-right: 8px; font-weight: 700; }
.toast[data-tone='success'] { color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success); }
.toast[data-tone='success']::before { content: '✓'; }
.toast[data-tone='error'] { color: var(--color-error); background: var(--color-error-bg); border-color: var(--color-error); }
.toast[data-tone='error']::before { content: '!'; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
button:disabled:is(.filter-chip, .nav-item, .solid-button, .text-button, .outline-button) {
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}
@media (min-width: 901px) {
}
@media (max-width: 900px), (pointer: coarse) {
  .post-open { min-height: var(--touch-target); }
  #panel-action .solid-button { min-height: var(--touch-target); padding: 0 12px; font-size: 13px; }
  .panel-header { column-gap: 12px; }
  .comment-delete, .comment-form-actions .solid-button { min-height: var(--touch-target); }
  .post-action { min-width: var(--touch-target); min-height: var(--touch-target); }
  .account-menu [role="menuitem"] { min-height: var(--touch-target); font-size: 15px; }
  #panel { padding-top: 34px; }
  #close-panel { margin: -22px -10px 0 0; }
  .interest-name { min-height: var(--touch-target); font-size: 16px; }
  .interest-remove { width: var(--touch-target); height: var(--touch-target); margin-right: 0; }
}
@media (min-width: 1101px) {
  .content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 216px; gap: 56px; align-items: start; }
  .interest-aside:not([hidden]) { display: block; position: sticky; top: calc(var(--brand-bar) + var(--s3)); padding-top: 20px; text-align: center; }
  .interest-aside .interest-chips { justify-content: center; }
  .manage-button, .profile-interests-inline { display: none; }
  .filter-section { padding-bottom: 22px; }
}
@media (min-width: 1600px) {
  main { padding-top: 55px; }
  .feed-grid { gap: 40px 30px; }
}
@media (max-width: 1050px) {
  .sidebar { --sidebar-pad: 20px; width: 200px; padding: 0 20px 38px; }
  .page { margin-left: 200px; }
  main { padding: 35px 26px; }
  .heading-note { display: none; }
  .feed-grid { gap: 28px 18px; }
  .post-body { padding: var(--s2); }
  .post-title { font-size: 15px; }
  .filter-chip { padding: 6px 13px; }
}
@media (max-width: 900px) {
  .sidebar { display: none; }
  .page { margin-left: 0; }
  :root { --brand-bar: 69px; }
  .topbar { padding: 0 22px; top: 0; }
  .mobile-brand { display: flex; align-items: center; min-height: var(--touch-target); margin-left: -8px; }
  .category-label { font-size: 13px; gap: 7px; }
  .category-en, .topbar > .text-button { display: none; }
  main { padding: 30px 20px calc(35px + 80px + env(safe-area-inset-bottom)); }
  .feed-heading { margin-bottom: 25px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.2px; }
  h1 { font-size: 29px; }
  .subtitle { font-size: 14px; }
  .filter-section { flex-wrap: wrap; gap: 9px; padding-bottom: 15px; }
  .filter-list {
    gap: 7px;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-padding-inline: 6px;
    padding: 8px 6px;
  }
  .filter-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .filter-chip { flex: 0 0 auto; max-width: none; white-space: nowrap; padding: 8px 17px; font-size: 14px; }
  button { min-width: var(--touch-target); min-height: var(--touch-target); }
  .manage-button { margin-left: auto; padding: 8px; font-size: 14px; }
  .feed-meta { margin: 17px 0 14px; }
  .feed-grid { gap: 28px 20px; }
  .post-body { padding: 14px 16px 16px; }
  .post-title { font-size: 16px; margin-top: 4px; }
  .post-text { font-size: 15px; line-height: 1.6; }
  .post-tag, .product-tag { display: inline-flex; align-items: center; padding: 8px 12px; font-size: 14px; }
  .panel-description, .empty-state p { font-size: 16px; }
  .outline-button, .solid-button { font-size: 14px; }
  .icon-button { width: var(--touch-target); height: var(--touch-target); }
  .bottom-nav {
    display: flex;
    position: fixed;
    inset: auto 0 0;
    justify-content: space-around;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 9px 8px calc(9px + env(safe-area-inset-bottom));
    z-index: 3;
  }
  .bottom-nav .nav-item { flex-direction: column; gap: 3px; font-size: 13px; padding: 4px 12px; min-width: 64px; min-height: 52px; }
  .bottom-nav .nav-item.active { color: var(--color-brand); background: var(--color-surface-muted); }
  .bottom-nav .nav-item svg { height: 21px; width: 21px; }
  .toast { bottom: calc(88px + env(safe-area-inset-bottom)); font-size: 13px; padding: 12px 16px; }
  dialog { padding: 23px 20px; width: calc(100% - 24px); max-height: 85dvh; }
  #panel:is([data-view='tag'], [data-view='post'])[open] { --panel-inset: 20px; }
  #panel-author { padding-top: 20px; padding-bottom: 24px; }
  .panel-header h2 { font-size: 23px; }
  .tag-panel-summary { flex-wrap: wrap; }
  .tag-panel-summary p { margin: 0; }
  .feed-footer { padding-top: 42px; }
}
@media (max-width: 600px) {
  .feed-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 600px) and (min-width: 901px) {
  .sidebar { padding-bottom: 24px; }
  .desktop-nav { margin-top: 24px; }
  .sidebar-bottom { display: none; }
}
@media (pointer: coarse) and (min-width: 901px) {
  button { min-width: var(--touch-target); min-height: var(--touch-target); }
  .post-tag, .product-tag { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* 실제 Auth UI: 기존 크림·커피 토큰과 반응형 규칙을 사용합니다. */
@font-face { font-family: 'Orquille Google Sans'; src: url('/assets/auth/google-sans.ttf') format('truetype'); font-weight: 500; font-display: swap; }
html { scrollbar-gutter: stable; }
html.modal-open, html.modal-open body { overflow: hidden; }
dialog { overscroll-behavior: contain; }
.topbar-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account-menu-wrap { position: relative; min-width: 0; }
.account-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 172px; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-floating); }
.account-menu[hidden] { display: none; }
.account-menu [role="menuitem"] { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 8px 12px; font-size: 14px; text-align: left; color: var(--color-brand); border-radius: var(--radius-control); }
.account-menu [role="menuitem"]:last-child { margin-top: 6px; position: relative; }
.account-menu [role="menuitem"]:last-child::before { content: ''; position: absolute; top: -4px; left: 6px; right: 6px; border-top: 1px solid var(--color-border); }
#auth-trigger { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 44px; }
.auth-dialog { max-width: 460px; padding: 32px; }
.auth-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.auth-dialog h2 { font-size: 21px; font-weight: 600; line-height: 1.5; margin: 0 0 16px; }
.auth-description { color: var(--color-text-muted); font-size: 15px; line-height: 1.7; }
.auth-help { color: var(--color-text-muted); font-size: 13px; line-height: 1.6; margin: 16px 0; }
.social-buttons { display: grid; gap: 12px; margin: 24px 0; }
.social-button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; width: 100%; text-align: center; font-size: 14px; }
.google-button { font-family: 'Orquille Google Sans', var(--sans); font-weight: 500; line-height: 20px; border: 1px solid #747775; padding: 12px; background: #FFFFFF; color: #1F1F1F; }
.google-button img { flex: 0 0 20px; object-fit: contain; }
.google-button:hover:not(:disabled) { background: #F2F2F2; color: #1F1F1F; }
.kakao-button { background: #FEE500; border-radius: 12px; overflow: hidden; padding: 0; }
.kakao-button img { display: block; width: 100%; height: 52px; object-fit: contain; }
.kakao-button:hover:not(:disabled) { background: #FEE500; }
.provider-unavailable, .auth-footnote { color: var(--color-text-muted); font-size: 13px; line-height: 1.7; margin: 0; }
.auth-footnote { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.provider-unavailable { text-align: center; margin-top: 4px; }
.account-trigger { font-weight: 600; }
.interest-error { margin: 16px 0 28px; padding: 16px; border-radius: var(--radius-control); background: var(--color-bg); }
.interest-error .preview-note { margin-top: 0; }
.auth-message { border-left: 3px solid var(--color-error); color: var(--color-error); background: var(--color-error-bg); padding: 12px; font-size: 14px; line-height: 1.6; }
.auth-wide { width: 100%; margin-top: 12px; min-height: 44px; }
#handle-form label { display: block; margin: 24px 0 8px; font-weight: 600; }
#public-handle { width: 100%; font-size: 16px; }
.auth-link { color: var(--color-brand); text-decoration: underline; text-underline-offset: 4px; margin-top: 16px; min-height: 44px; padding: 8px 0; }
.auth-identity { display: flex; align-items: center; gap: 12px; margin: 24px 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .topbar { gap: 10px; padding-inline: 20px; }
  .topbar { row-gap: 0; padding-bottom: 12px; }
  .topbar-actions { margin-left: auto; }
  #auth-trigger { max-width: 120px; font-size: 13px; padding-inline: 10px; }
  .auth-description { font-size: 16px; }
  .auth-dialog h2 { font-size: 23px; }
}
@media (max-width: 600px) {
  .auth-dialog { width: calc(100% - 24px); margin: auto; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .auth-top { margin-bottom: 24px; }
  .auth-dialog h2 { font-size: 25px; line-height: 1.55; }
  .auth-description { margin-bottom: 24px; }
}

#subcategory-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); }
#subcategory-group[hidden] { display: none; }
.category-menu { max-height: min(560px, calc(100dvh - var(--header-height) - 32px)); overflow-y: auto; overscroll-behavior: contain; }
.category-trigger .category-en:empty { display: none; }
.category-trigger { max-width: 100%; min-width: 0; }
.category-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .category-picker { justify-self: stretch; width: 100%; max-width: 100%; }
  .category-trigger { width: 100%; }
}

.record-menu-wrap { position: relative; }
.topbar .record-trigger { gap: 8px; min-height: 44px; white-space: nowrap; }
.topbar .record-trigger > span { font-size: 14px; font-weight: 500; }
.record-chevron { width: 16px; height: 16px; transition: transform .15s; }
.record-trigger[aria-expanded='true'] .record-chevron { transform: rotate(180deg); }
.record-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 264px; max-width: calc(100vw - 40px); padding: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-floating); }
.record-menu[hidden] { display: none; }
.record-menu [role='menuitem'] { display: block; width: 100%; min-height: 44px; padding: 12px; text-align: left; color: var(--color-brand); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.record-menu [role='menuitem']:hover { background: var(--color-surface-muted); }
.topbar .record-menu button:focus-visible { outline-color: var(--color-gold-text); outline-offset: -3px; background: var(--color-surface-muted); }
@media (max-width: 900px) {
  .topbar .record-menu-wrap { position: absolute; right: 22px; bottom: 12px; }
  .topbar .record-trigger { min-height: 46px; padding: 8px 10px; border-color: var(--color-border); }
  .header-search { width: calc(100% - 116px); }
}

/* Content workspace: shared tokens, private editing, public cards. */
.content-layout.is-workspace { display: block; }
.workspace { width: 100%; min-width: 0; }
.workspace-heading { display: flex; justify-content: space-between; align-items: start; gap: 24px; margin-bottom: 32px; }
.workspace h1 { margin: 8px 0; font-size: clamp(24px,3vw,34px); overflow-wrap: anywhere; }
.workspace h2 { font-size: 20px; line-height: 1.5; overflow-wrap: anywhere; }
.workspace h3 { font-size: 17px; overflow-wrap: anywhere; }
.workspace-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.workspace button, .workspace input:not([type='checkbox']):not([type='range']), .workspace select, .content-modal button { min-height: 44px; }
.workspace input, .workspace textarea, .workspace select, .content-modal input, .content-modal select { font: inherit; font-size: 16px; max-width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); }
.workspace input[type='checkbox'] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--color-brand); }
.workspace textarea { width: 100%; resize: vertical; line-height: 1.7; }
.workspace-form { display: grid; gap: 24px; max-width: 760px; }
.workspace label, .content-modal label { display: grid; gap: 8px; line-height: 1.6; font-size: 15px; min-width: 0; }
.workspace .check-row { display: flex; align-items: center; min-height: 44px; gap: 10px; overflow-wrap: anywhere; }
.workspace fieldset { min-width: 0; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-card); display: grid; gap: 16px; }
.workspace legend { padding: 0 8px; font-weight: 600; }
.workspace details { padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.workspace summary { min-height: 44px; cursor: pointer; }
.workspace-note { color: var(--color-text-muted); font-size: 14px; line-height: 1.7; margin: 0; overflow-wrap: anywhere; }
.form-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.editor-save { display: flex; flex-wrap: wrap; gap: 12px; background: var(--color-bg); padding: 16px 0; position: sticky; bottom: 0; z-index: 2; }
.photo-editor { display: grid; gap: 12px; min-width: 0; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.photo-editor > div { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-editor > img { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: var(--radius-card); }
.item-cover { display: block; max-width: 100%; width: 480px; max-height: 440px; object-fit: contain; border-radius: var(--radius-card); }
.collection-hub { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.collection-hub > section { min-width:0; padding:16px; border:1px solid var(--color-border); border-radius:var(--radius-card); }
.small-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,135px),210px)); gap:12px; margin-top:12px; }
.small-card { min-width:0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card); overflow:hidden; }
.small-card-link { display:grid; gap:6px; width:100%; padding:10px; text-align:left; overflow-wrap:anywhere; }
.small-card-thumb { display:grid; place-items:center; width:100%; aspect-ratio:4/3; background:var(--color-surface-muted); border-radius:8px; overflow:hidden; }
.generated-cover { width:min(100%,320px); }
.generated-cover svg { display:block; width:100%; height:auto; }
.small-card-thumb svg { width:100%; height:100%; }
.small-card-thumb img { width:100%; height:100%; object-fit:cover; }
.small-card > p,.small-card > .workspace-actions { margin:8px; }
.avatar { position:relative; overflow:hidden; }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#avatar-settings { margin-top:24px; }
[data-work="quill-card"][aria-pressed="true"] { background:var(--color-brand); color:var(--color-surface); }
@media(max-width:768px) {
  .collection-hub { grid-template-columns:1fr; }
  .bottom-nav .nav-item { min-width:0; padding-inline:7px; }
}
.photo-mobile-label, .workspace label.photo-camera { display:none; }
.discover-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:18px; }
.discover-card { padding:0; overflow:hidden; }
.discover-card-link { display:grid; gap:6px; text-align:left; width:100%; padding:12px; overflow-wrap:anywhere; }
.discover-card-link > span:last-child { color:var(--color-text-muted); }
.discover-preview { display:block; overflow:hidden; border-radius:var(--radius-control); }
.discover-preview > svg { display:block; width:100%; height:auto; }
@media(max-width:900px) {
  :root { --brand-bar:52px; --header-height:calc(var(--brand-bar) + 43px); }
  .topbar { grid-template-rows:var(--brand-bar) 36px; padding:0 14px 7px; column-gap:7px; }
  .mobile-brand { min-height:36px; }
  .category-trigger { width:auto; }
  .category-trigger, #auth-trigger, .topbar .record-trigger { min-height:36px; padding:5px 8px; font-size:12px; }
  .topbar .record-trigger { gap:4px; }
  .topbar .record-trigger > span { font-size:12px; }
  .topbar .record-menu-wrap { bottom:7px; right:14px; }
  .header-search { width:calc(100% - 96px); min-height:36px; height:36px; }
  .header-search input { padding:5px 8px; }
  .search-submit, .search-clear { flex-basis:32px; width:32px; min-height:34px; padding:5px; }
  .search-submit svg { width:16px; height:16px; }
  .discover-grid { grid-template-columns:1fr; }
  .photo-picker { display:flex; gap:8px; flex-wrap:wrap; }
  .workspace .photo-picker label { position:relative; display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border:1px solid var(--color-border); border-radius:var(--radius-control); background:var(--color-surface); cursor:pointer; }
  .photo-picker label:focus-within { outline:2px solid var(--color-brand); outline-offset:2px; }
  .photo-picker input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
  .photo-desktop-label { display:none; }
  .photo-mobile-label { display:inline; }
}
.owned-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 20px; list-style: none; padding: 0; }
.owned-tile { min-width: 0; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.workspace-slot { display: grid; gap: 24px; min-width: 0; }
.workspace-slot[hidden], .item-recognition:empty, #suggest-status:empty { display: none; }
.item-recognition { display: grid; gap: 8px; justify-items: start; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; min-width: 0; }
.item-recognition p { margin: 0; }
.item-recognition p[role="alert"] { color: var(--color-brand); font-weight: 600; }
.item-details { display: grid; gap: 8px; margin: 16px 0; }
.item-details div { display: grid; grid-template-columns: minmax(88px,140px) minmax(0,1fr); gap: 12px; }
.item-details dt { color: var(--color-text-muted); font-size: 14px; }
.item-details dd { margin: 0; overflow-wrap: anywhere; }
.suggest-field { position: relative; }
.suggest-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; max-height: 280px; margin: 4px 0 0; padding: 6px; overflow-y: auto; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-floating); }
.suggest-list[hidden] { display: none; }
.suggest-list li { display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; padding: 6px 10px; border-radius: 8px; cursor: pointer; overflow-wrap: anywhere; }
.suggest-list li:hover, .suggest-list li[aria-selected="true"] { background: var(--color-bg); }
.suggest-list strong { font-size: 15px; font-weight: 600; }
.suggest-list span { font-size: 13px; color: var(--color-text-muted); }
.owned-tile > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
/* 한 개만 있어도 화면을 채우지 않도록 넓은 화면에서는 가로 3칸으로 고정합니다. */
@media (min-width: 769px) { .owned-grid.is-compact { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.owned-grid.is-compact .owned-tile { padding: 12px; }
.owned-grid.is-compact h2 { margin: 10px 0; font-size: 16px; overflow-wrap: anywhere; }
.card-editor { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; align-items: start; }
.live-card-preview { position: sticky; top: calc(var(--header-height) + 20px); min-width: 0; }
#card-preview > svg, .shared-card > svg { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.shared-card { max-width: 760px; }
.sortable-items { padding-left: 24px; display: grid; gap: 16px; }
.sortable-items li { overflow-wrap: anywhere; }
.sortable-items li > button { margin: 6px; }
.selected-links { display: flex; flex-wrap: wrap; gap: 10px; }
.selected-links > span { display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; border: 1px solid var(--color-border); border-radius: 8px; max-width: 100%; overflow-wrap: anywhere; }
.content-modal { max-width: 640px; }
.content-modal form { display: grid; gap: 16px; }
.content-modal img { max-width: 100%; }
.preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
.author-link { min-height: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.post-detail > .post-detail-photo { margin-bottom: 16px; }
.real-post .post-photo { aspect-ratio: auto; }
.mobile-editor-tabs { display: none; }
.feed-footer button { margin: 12px auto; }
@media(max-width:900px) {
 .workspace-heading { flex-direction: column; gap: 12px; }
 .card-editor { display: block; }
 .live-card-preview { position: static; }
 .mobile-editor-tabs { display: flex; gap: 12px; margin-bottom: 20px; }
 .card-editor[data-tab='edit'] > .live-card-preview, .card-editor[data-tab='preview'] > form { display: none; }
 .editor-save { bottom: calc(78px + env(safe-area-inset-bottom)); }
 .workspace fieldset { padding: 14px; }
 .form-columns { grid-template-columns: minmax(0,1fr); }
}

.list-card-preview svg { width: 100%; height: auto; display: block; border-radius: 8px; }

.site-footer { padding: 1rem 1rem calc(5rem + env(safe-area-inset-bottom)); text-align: center; }
.operations-dialog { width: min(32rem, calc(100% - 2rem)); max-height: 85dvh; overflow: auto; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text); }
.operations-dialog::backdrop { background: rgb(48 41 35 / 48%); }
.operation-entry { margin-block: 1rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); overflow-wrap: anywhere; }
.operation-entry pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.report-menu { margin-block: 1rem; }
.report-menu summary { cursor: pointer; }
[data-section][aria-pressed="true"] { background: var(--color-brand); color: var(--color-surface); }

/* 디자인 정리 (방해 요소 1~4단계) */
/* 1단계: 저장 줄은 내용과 구분되게 두고, 모바일 편집 화면에서는 아래 메뉴와 검색 줄을 감춰 입력 공간을 확보합니다. */
.editor-save { border-top: 1px solid var(--color-border); box-shadow: 0 -10px 18px -16px rgb(48 41 35 / 45%); padding: 14px 0; margin-top: 8px; }
@media (max-width: 900px) {
  html.is-editing { --header-height: var(--brand-bar); }
  html.is-editing .topbar { grid-template-rows: var(--brand-bar); padding-bottom: 0; }
  html.is-editing .header-search, html.is-editing .topbar .record-menu-wrap { display: none; }
  html.is-editing .bottom-nav { display: none; }
  html.is-editing main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html.is-editing .editor-save { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--color-surface); justify-content: flex-end; }
  html.is-editing .site-footer { display: none; }
}
/* 2단계: 실제 사진은 사진 비율에 맞춘 틀을 써서 회색 빈 띠 없이 카드 폭을 채웁니다. */
.photo-wrap.is-fit { aspect-ratio: auto; }
.photo-wrap.is-fit .post-photo { height: auto; object-fit: cover; }
.post-detail-photo { width: auto; max-width: 100%; max-height: 78vh; margin-inline: auto; object-fit: contain; }
/* 3단계: 사진 선택은 브라우저 기본 버튼 대신 사이트 버튼으로 보입니다. */
.photo-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.workspace .photo-picker label:not(.photo-camera) { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-brand); font-weight: 600; cursor: pointer; }
.workspace .photo-picker label:not(.photo-camera):hover { border-color: var(--color-brand); }
.photo-picker label:focus-within { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.photo-picker input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
/* 3단계: 관심 태그가 없으면 '전체' 칩과 구분선을 빼고 관리 버튼만 한 줄로 둡니다. */
.filter-section.is-empty { padding-bottom: 0; border-bottom: 0; justify-content: flex-end; }
.filter-section.is-empty .filter-list { display: none; }
.filter-section.is-empty .manage-button { padding-block: 4px; min-height: 36px; }
.filter-section.is-empty + .feed-meta { margin-top: 4px; }
@media (max-width: 900px) {
  .filter-section.is-empty { flex-wrap: nowrap; }
  .filter-section.is-empty + .feed-meta { margin-top: 0; }
  #panel-author { padding-bottom: 12px; }
  #panel:is([data-view='tag'], [data-view='post']) #panel-content { padding-top: 8px; }
}
/* 3단계: 화면 이동은 글자 링크, 보기 전환은 하나로 묶인 선택 버튼, 저장은 진한 버튼으로 구분합니다. */
.back-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; min-height: 44px; background: none; border: 0; color: var(--color-brand); font-size: 14px; }
.back-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.mobile-editor-tabs { gap: 0 !important; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-muted); width: fit-content; }
.mobile-editor-tabs .outline-button { border: 0; border-radius: var(--radius-pill); background: none; min-width: 96px; }
.mobile-editor-tabs .outline-button[aria-pressed='true'] { background: var(--color-surface); color: var(--color-brand); font-weight: 600; box-shadow: 0 1px 3px rgb(48 41 35 / 18%); }
/* 3단계: 작성자 이름이 기록 링크를 겸하므로 카드 아래 밑줄 링크가 없습니다. */
.author-button { padding: 5px 0 0; min-height: 0; min-width: 0; text-align: left; background: none; border: 0; color: inherit; font: inherit; font-weight: 600; font-size: 14px; }
.author-button:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 4단계: 펼침 표시와 묶음 상자를 사이트 모양으로 맞춥니다. */
.workspace summary { list-style: none; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-brand); }
.workspace summary::-webkit-details-marker { display: none; }
.workspace summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--color-border); border-radius: 50%; font-weight: 400; }
.workspace details[open] > summary::before { content: '−'; }
.workspace fieldset { background: var(--color-surface); border-color: var(--color-border); }
.workspace legend { padding: 0 10px; font-size: 15px; color: var(--color-text); }
/* 4단계: 빈 프로필 안내와 문의 링크를 맥락 있는 모양으로 둡니다. */
.profile-section .profile-note, .profile-section .interest-list > .panel-description { margin: 0; font-size: 14px; color: var(--color-text-muted); padding: 18px; border: 1px dashed var(--color-border); border-radius: var(--radius-card); text-align: center; background: var(--color-surface); }
.site-footer { color: var(--color-text-muted); font-size: 13px; }
.site-footer a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse), (max-width: 900px) { .author-button { min-height: var(--touch-target); padding-top: 0; display: inline-flex; align-items: center; } }
/* 3단계: 돌아가기 링크는 제목 위에 붙여 두고 제목과 첫 입력칸 사이 빈 줄을 줄입니다. */
.workspace-heading:has(.back-link) { flex-direction: column-reverse; align-items: start; justify-content: start; gap: 0; margin-bottom: 20px; }
.workspace-heading:has(.back-link) .back-link { margin-left: -4px; }
/* 3단계: 상세에서 작성자 줄과 사진 사이, 빈 업로드 상태 줄이 만드는 공백을 없앱니다. */
.post-detail { margin-top: 12px; }
.post-detail .post-detail-photo { margin-top: 0; }
.upload-status:empty { display: none; }

.post-gallery { position: relative; z-index: 1; min-width: 0; background: var(--color-surface-muted); }
.post-detail .post-gallery { margin-bottom: 16px; border-radius: var(--radius-control); }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: inherit; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline-offset: -3px; }
.gallery-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; overflow: hidden; }
.gallery-count, .post-gallery button { position: absolute; color: var(--color-surface); background: var(--color-brand); border-radius: var(--radius-pill); }
.gallery-count { right: 10px; bottom: 10px; padding: 3px 9px; font-size: 13px; pointer-events: none; }
.post-gallery button { top: 50%; translate: 0 -50%; width: 44px; height: 44px; border: 1px solid var(--color-surface); font-size: 24px; }
.post-gallery button[aria-disabled="true"] { opacity: .55; cursor: default; }
.gallery-prev { left: 8px; }
.gallery-next { right: 8px; }

.search-picker { position: absolute; left: calc(50vw - 236px); transform: translateX(-50%); width: clamp(240px, 20vw, 280px); }
#search-trigger, .topbar .record-trigger { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; background: var(--color-surface); color: var(--color-brand); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
#search-trigger { width: 100%; justify-content: flex-start; padding-inline: 14px; }
#search-trigger svg, .record-trigger svg, .record-menu svg, .card-icon svg { width: 21px; height: 21px; flex: none; }
.search-picker .header-search { left: 50%; top: calc(100% + 8px); width: min(420px, 90vw); z-index: 31; }
.search-picker .header-search[hidden] { display: none; }
.topbar .record-trigger { width: 44px; height: 44px; padding: 0; }
.record-tooltip { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 4px 8px; white-space: nowrap; background: var(--color-brand); color: var(--color-surface); border-radius: 6px; font-size: 12px; pointer-events: none; visibility: hidden; }
@media (hover:hover) { .record-trigger:hover + .record-tooltip, .record-trigger:focus-visible + .record-tooltip { visibility: visible; } }
.record-trigger[aria-expanded="true"] + .record-tooltip { visibility: hidden; }
.record-menu [role='menuitem'] { display: flex; align-items: center; gap: 9px; }
#search-reset { display: inline-flex; padding: 3px 6px; }
#search-reset[hidden] { display: none; }
.card-icon { width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.card-icon[aria-pressed="true"] svg { fill: var(--color-gold); }
.card-download { position: relative; }
.card-download summary { cursor: pointer; list-style: none; }
.card-download summary::-webkit-details-marker { display: none; }
.card-download-options { position: absolute; left: 0; top: calc(100% + 5px); z-index: 3; display: grid; gap: 5px; width: max-content; max-width: calc(100vw - 160px); padding: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; }
@media (min-width: 901px) and (max-width: 1200px) { .search-picker { left: calc(50vw - 200px); } }
@media (max-width: 900px) {
  :root { --header-height: calc(var(--brand-bar) + 50px); }
  .topbar { grid-template-rows: var(--brand-bar) 44px; }
  .search-picker { position: static; grid-column: 1 / -1; grid-row: 2; width: auto; transform: none; justify-self: end; margin-right: 52px; }
  #search-trigger { width: 44px; justify-content: center; padding: 0; }
  #search-trigger span, .record-tooltip { display: none; }
  .search-picker .header-search { position: absolute; left: 14px; right: 14px; top: calc(100% + 5px); width: auto; height: 46px; }
  .topbar .record-menu-wrap { bottom: 6px; }
}
html.is-editing .search-picker { display: none; }

.search-close, .mobile-profile-actions, #mobile-field-slot { display: none; }
@media (max-width: 900px) {
  :root { --header-height: var(--brand-bar); }
  :root:has(#header-search:not([hidden])) { --header-height: calc(var(--brand-bar) + 56px); }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--brand-bar); padding: 0 14px; }
  .topbar-actions { display: none; }
  .search-picker { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
  #search-trigger { position: relative; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; }
  #search-trigger::before { content: ''; position: absolute; inset: 3px; border: 1px solid currentColor; opacity: .45; border-radius: 50%; pointer-events: none; }
  #search-trigger svg { width: 18px; height: 18px; }
  .search-picker .header-search { top: var(--brand-bar); height: 44px; min-height: 44px; outline: none; }
  .search-picker .header-search:focus-within { border-color: var(--color-gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-gold) 24%, transparent); }
  .search-picker .header-search input { border: 0; box-shadow: none; background: transparent; }
  .search-close { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 9px; color: var(--color-brand); }
  #mobile-field-slot { display: block; position: relative; margin-bottom: 10px; }
  #mobile-field-slot .category-trigger { min-height: 44px; color: var(--color-brand); background: var(--color-surface); border-color: var(--color-border); }
  #mobile-field-slot .category-menu { left: 0; right: 0; top: calc(100% + 4px); }
  .mobile-profile-actions { display: flex; gap: 8px; margin-block: 12px; }
  #mobile-record-slot .record-menu-wrap { position: fixed; z-index: 8; right: max(14px, env(safe-area-inset-right)); bottom: calc(81px + env(safe-area-inset-bottom)); }
  #mobile-record-slot .record-trigger { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid var(--color-brand); border-radius: 50%; background: var(--color-brand); color: var(--color-surface); }
  #mobile-record-slot .record-menu { top: auto; bottom: calc(100% + 8px); }
  html.is-editing #mobile-record-slot, body:has(dialog[open]) #mobile-record-slot,
  body:has(#header-search:not([hidden])) #mobile-record-slot,
  body:has(:is(input,textarea,[contenteditable="true"]):focus) #mobile-record-slot { display: none; }
  #mobile-record-slot.is-obstructing:not(:has(.record-menu:not([hidden]))) { visibility: hidden; }
  .site-footer { padding-bottom: calc(9rem + env(safe-area-inset-bottom)); }
}
/* 게시글 사진 틀: 작성자가 고른 비율·위치·확대를 피드·상세·작성 미리보기에서 같게 보여 줍니다. */
.photo-frame { position: relative; display: block; width: 100%; overflow: hidden; background: var(--color-surface-muted); }
.photo-frame > img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border-radius: 0; object-fit: cover; }
.photo-wrap.is-fit { aspect-ratio: auto; }
.detail-photo { margin-bottom: 16px; }
.photo-frame-detail { margin-inline: auto; border-radius: var(--radius-control); }
.gallery-slide { display: grid; place-items: center; }
.gallery-track { aspect-ratio: 1; }
.gallery-slide .photo-frame { width: 100%; height: auto; }
.gallery-slide.is-tall-slide .photo-frame, .gallery-slide .photo-frame.is-tall { width: auto; height: 100%; }
/* 장수 표시는 오른쪽 위에 두어 화면 아래쪽 작성 버튼·이전/다음 버튼과 겹치지 않게 합니다. */
.gallery-count { top: 10px; bottom: auto; }
.report-button { color: var(--color-text-muted); }
.report-button:hover:not(:disabled) { color: var(--color-brand); }
/* 게시글 작성 화면: 제목(선택) → 사진·본문 → 분야 → 제품 연결 → 추가 정보 → 작업 버튼 순서로 간결하게 둡니다. */
.composer { gap: 18px; }
.composer-title { display: flex; align-items: center; gap: 8px; }
.composer .title-field { flex: 1; }
.composer .title-field input { font-size: 18px; font-weight: 600; }
.chip-toggle { min-height: 40px; padding: 6px 16px; border: 1px dashed var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-brand); font-size: 14px; font-weight: 600; }
.chip-toggle:hover:not(:disabled) { border-style: solid; border-color: var(--color-brand); background: var(--color-surface); color: var(--color-brand); }
.composer .text-button { border-color: transparent; background: transparent; }
.composer-core { display: grid; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); overflow: hidden; }
.composer-core:focus-within { border-color: var(--color-gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-gold) 20%, transparent); }
.composer-photos { padding: 12px 12px 0; }
.photo-strip { display: flex; gap: 10px; margin: 0; padding: 0 0 12px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.photo-thumb { position: relative; flex: 0 0 104px; width: 104px; }
.photo-add { position: relative; flex: 0 0 auto; }
.photo-thumb .photo-frame { border-radius: var(--radius-control); border: 1px solid var(--color-border); }
.photo-thumb.is-cover .photo-frame { border: 2px solid var(--color-brand); }
.workspace .photo-thumb button { min-height: 0; }
.thumb-cover, .thumb-remove { position: absolute; top: 4px; display: inline-grid; place-items: center; height: 26px; border: 0; border-radius: var(--radius-pill); background: rgb(48 41 35 / 72%); color: var(--color-surface); font-size: 12px; }
.thumb-cover { left: 4px; padding: 0 8px; }
.thumb-cover[aria-pressed="true"] { background: var(--color-brand); }
.thumb-remove { right: 4px; width: 26px; font-size: 17px; line-height: 1; }
.thumb-actions { display: grid; grid-template-columns: 28px 1fr 28px; gap: 2px; margin-top: 4px; }
.thumb-actions button { height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-brand); font-size: 13px; }
.thumb-actions button:disabled { opacity: .35; }
.thumb-actions .thumb-edit { font-weight: 600; }
.photo-add { display: grid; align-content: start; gap: 6px; }
.photo-add .photo-picker { display: flex; flex-wrap: nowrap; gap: 6px; }
.workspace .photo-add .photo-picker label { width: 104px; min-height: 104px; justify-content: center; border-style: dashed; border-radius: var(--radius-control); background: var(--color-bg); }
.photo-strip:has(.photo-thumb) .photo-add .photo-picker label:not(.photo-camera) { min-height: 104px; }
.photo-add-hint { font-size: 12px; color: var(--color-text-muted); text-align: center; }
.composer-photos .workspace-note { margin: -4px 0 10px; font-size: 13px; }
.composer-photos .upload-status:not(:empty) { margin: 0 0 10px; font-size: 14px; }
.composer .body-field textarea { display: block; width: 100%; min-height: 140px; padding: 14px 16px 16px; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: transparent; resize: none; overflow: hidden; line-height: 1.75; }
.composer .body-field textarea:focus-visible { outline: none; }
.composer > .workspace-note { margin-top: -8px; font-size: 13px; }
.composer select:disabled { color: var(--color-text-muted); background: var(--color-bg); }
.composer-section { padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.workspace .composer-section > summary { min-height: 52px; padding: 0 16px; }
.composer-section .section-meta { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--color-text-muted); }
.composer-section .section-body { display: grid; gap: 14px; padding: 4px 16px 16px; }
.section-options { display: flex; flex-wrap: wrap; gap: 8px; }
.attach-list { display: grid; gap: 4px; }
.attach-label { font-size: 15px; }
.composer-actions { align-items: center; }
.composer-actions .solid-button { order: 3; min-width: 120px; padding-inline: 22px; font-weight: 700; }
.composer-actions [data-work="preview-post"] { order: 1; margin-right: auto; padding-inline: 8px; text-decoration: underline; text-underline-offset: 4px; }
.composer-actions [data-work="draft"] { order: 2; }
.draft-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.draft-list h2 { flex-basis: 100%; margin: 0 0 4px; font-size: 16px; }
/* 사진 편집 창 */
.photo-dialog { width: min(34rem, calc(100% - 24px)); }
.crop-stage { display: grid; place-items: center; max-height: 60vh; margin-bottom: 14px; touch-action: none; cursor: grab; border-radius: var(--radius-control); overflow: hidden; background: var(--color-surface-muted); }
.crop-stage:active { cursor: grabbing; }
.crop-stage .photo-frame { width: 100%; }
.ratio-choice { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ratio-choice [aria-pressed="true"] { background: var(--color-brand); color: var(--color-surface); border-color: var(--color-brand); }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 14px; }
.dialog-actions [data-crop-reset] { margin-right: auto; }
@media (max-width: 900px) {
  .composer-actions [data-work="preview-post"] { margin-right: auto; }
  .photo-thumb { flex-basis: 92px; width: 92px; }
  .workspace .photo-add .photo-picker label { width: 92px; min-height: 92px; }
}
/* PC 헤더: 본문과 같은 너비·격자에 맞춰 분야 선택은 왼쪽, 검색은 피드 열 위, 작성·계정은 오른쪽 열에 둡니다. */
@media (min-width: 901px) {
  .topbar { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(240px, 560px) minmax(0, 1fr) max-content; column-gap: 20px; align-items: center; justify-content: stretch; padding-inline: calc(max(0px, (100% - 1280px) / 2) + 26px); }
  .topbar > .category-picker { grid-column: 1; justify-self: start; }
  .search-picker { position: relative; left: auto; transform: none; grid-column: 2; width: 100%; }
  .topbar-actions { grid-column: 4; justify-self: end; gap: 8px; }
  .category-trigger, #search-trigger, .topbar .record-trigger, #auth-trigger { height: 44px; min-height: 44px; border-radius: var(--radius-control); border-width: 1px; font-size: 14px; }
  #search-trigger { gap: 10px; color: var(--color-text-muted); }
  .category-chevron, #search-trigger svg, .topbar .record-trigger svg { width: 20px; height: 20px; flex-basis: 20px; }
  .topbar .record-trigger { width: 44px; border-color: var(--color-border); background: var(--color-surface); color: var(--color-brand); }
  #auth-trigger { max-width: 160px; padding-inline: 14px; border-color: var(--color-border); background: var(--color-surface); color: var(--color-brand); font-weight: 600; }
  .search-picker .header-search { position: absolute; top: 0; left: 0; transform: none; width: 100%; height: 44px; min-height: 44px; }
}
@media (min-width: 1051px) { .topbar { padding-inline: calc(max(0px, (100% - 1280px) / 2) + 40px); } }
/* 오른쪽 열(관심 태그 216px)이 있는 너비에서는 검색이 피드 카드와 같은 가운데에 오도록 본문 격자를 그대로 따릅니다. */
@media (min-width: 1101px) {
  .topbar { grid-template-columns: minmax(max-content, 1fr) minmax(240px, 560px) minmax(0, 1fr) 56px 216px; column-gap: 0; }
  .topbar > .category-picker { margin-right: 16px; }
  .topbar-actions { grid-column: 5; }
}
/* 모바일 검색: 헤더 높이는 그대로 두고, 헤더 바로 아래 크림색 행으로 열어 아래 내용을 밀어냅니다. */
#mobile-search-slot { display: none; }
@media (max-width: 900px) {
  :root:has(#header-search:not([hidden])) { --header-height: var(--brand-bar); }
  #mobile-search-slot:has(#header-search:not([hidden])) { display: block; position: sticky; top: var(--brand-bar); z-index: 14; padding: 10px 20px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
  #mobile-search-slot .header-search { position: static; left: auto; transform: none; width: 100%; height: 46px; min-height: 46px; border: 1px solid var(--color-border); box-shadow: none; outline: none; }
  #mobile-search-slot .header-search:focus-within { border-color: var(--color-gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-gold) 24%, transparent); }
  #mobile-search-slot .header-search input { border: 0; box-shadow: none; background: transparent; }
  #mobile-search-slot .search-close { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px; color: var(--color-brand); }
}
.thumb-actions { grid-template-columns: 24px minmax(0, 1fr) 24px; }
.workspace .thumb-actions button { min-width: 0; min-height: 30px; height: 30px; padding: 0; }
.thumb-cover { font-size: 11px; }
.workspace input[type="range"], .content-modal input[type="range"] { accent-color: var(--color-brand); padding: 0; border: 0; }
.photo-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; }
.photo-dialog .crop-stage { max-height: 50dvh; }
.photo-dialog .ratio-choice .outline-button { min-height: 40px; padding: 6px 12px; }
@media (max-width: 900px) { .photo-dialog .crop-stage { max-height: 42dvh; } }
.ratio-choice .outline-button[aria-pressed="true"], .ratio-choice .outline-button[aria-pressed="true"]:hover:not(:disabled) { background: var(--color-brand); color: var(--color-surface); border-color: var(--color-brand); }
.photo-thumb .thumb-cover:hover:not(:disabled), .photo-thumb .thumb-remove:hover:not(:disabled) { background: var(--color-brand); color: var(--color-surface); }