/* 문의 게시판 화면 CSS. tokens.css 다음에 불러온다. 색은 의미 토큰만 쓴다.
   기준은 휴대폰 폭이고, 768px 부터 PC 배치, 관리 화면은 960px 부터 2단 */
/* Roboto 500 에서 "Hearlog" 일곱 글자만 남긴 파일 */
@font-face { font-family: "Roboto"; src: url("assets/hearlog-wordmark.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --font-ui: system-ui, -apple-system, "Apple SD Gothic Neo", "Hiragino Sans", "Noto Sans CJK KR", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --col: 760px;
  --appbar-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
/* 세로 스크롤 막대 자리를 늘 비워, 짧은 화면과 긴 화면의 좌우 위치가 어긋나지 않게 한다 */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100dvh; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
:lang(ja) { word-break: normal; line-break: strict; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 테마에 따라 하나만 보이는 짝(로고, 테마 버튼 아이콘) */
.on-light, [data-theme="light"] .on-dark { display: none; }
[data-theme="light"] .on-light { display: block; }
.narrow { --col: 640px; }
.page, .admin .tabs-row, .split { max-width: var(--col); margin-inline: auto; }
.page { padding-bottom: 24px; }

/* ───────── 머리글 ───────── */
.appbar { --edge: max(0px, (100% - var(--col)) / 2); position: sticky; top: 0; z-index: 10; display: flex; align-items: center; height: var(--appbar-h); padding: 0 calc(var(--edge) + 4px) 0 calc(var(--edge) + 16px); background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
/* 맨 앞의 뒤로 버튼은 아이콘이 본문 왼쪽 선에 오도록 당긴다 */
.appbar > .icon-btn:first-child, .back-link { margin-left: -12px; }
.brand { display: inline-flex; flex: none; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; white-space: nowrap; }
.brand svg { width: 22px; height: 22px; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.brand img { width: 28px; height: 28px; border-radius: var(--radius-sm); }
/* Hearlog 로고 글자는 앱 로고와 같은 Roboto 500 */
.brand.hearlog { font-family: "Roboto", var(--font-ui); font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.brand-corp img { width: auto; height: 22px; border-radius: 0; }
.appbar-section { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--border-subtle); font-size: 15px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.appbar-actions { display: flex; flex: none; margin-left: auto; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-secondary); }
.icon-btn svg { width: 22px; height: 22px; }

/* ───────── 버튼 ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border: 0; border-radius: var(--radius-full); font-size: 16px; font-weight: 700; white-space: nowrap; }
.btn-md { height: 44px; padding: 0 20px; font-size: 15px; }
.btn-solid { background: var(--accent); color: var(--on-accent); }
.btn-secondary { background: var(--surface-sunken); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.btn-danger { background: var(--danger-solid); color: var(--on-danger); }
.btn-danger-text { height: 44px; padding: 0 12px; background: transparent; color: var(--danger); font-size: 15px; font-weight: 600; }

/* ───────── 탭·선택 ───────── */
.tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 6px; }
.tabs, .seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-full); background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.tab, .seg label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--radius-full); color: var(--text-secondary); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.tab[aria-current="page"], .seg label:has(input:checked) { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-tab); }
.tab .count { font-variant-numeric: tabular-nums; color: var(--text-tertiary); }
.seg { display: flex; }
.seg label { flex: 1; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:focus-visible), .thumb-add:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ───────── 상태 ───────── */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.st.done { color: var(--success); }
.st.wait { color: var(--text-secondary); }
.glyph { flex: none; width: 22px; height: 22px; }
.glyph.done { color: var(--success); }
.glyph.done path { stroke: var(--surface-page); }
.glyph.wait { color: var(--border-control); }
.glyph.lock { color: var(--text-tertiary); }
.st .glyph { width: 18px; height: 18px; }
/* 처리 상태: 접수 · 처리 중 · 완료. 문의 게시판과 업체 게시판이 같이 쓴다 */
.st.work-new { color: var(--text-secondary); }
.st.work-doing, .glyph.doing { color: var(--accent-text); }
.st.work-done { color: var(--success); }
.mine { color: var(--accent-text); font-weight: 600; }
.vis { display: inline-flex; align-items: center; gap: 4px; }
.vis svg { width: 14px; height: 14px; }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--text-secondary); font-size: 12px; font-weight: 600; white-space: nowrap; }
/* 색 바탕(운영자 답변, 고른 줄) 위에서는 약한 글자를 한 단계 진하게 쓴다(대비 4.5) */
.msg.operator, .a-row.is-selected, .q-row.is-selected { background: var(--accent-subtle); --text-tertiary: var(--text-secondary); }

/* ───────── 문의 목록 ───────── */
.q + .q { border-top: 1px solid var(--border-subtle); }
.q-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; align-items: start; min-height: 68px; padding: 14px 16px; }
.q-row .glyph { grid-row: span 2; margin-top: 1px; }
.q-title, .a-title { font-size: 16px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.q.locked .q-title { font-weight: 500; color: var(--text-secondary); }
.q-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 13px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
@media (hover: hover) { a.q-row:not(.is-selected):hover { background: var(--surface-sunken); } }
.more { display: flex; width: fit-content; margin: 16px auto 0; }
/* 업체 게시판 목록 위의 업체 이름 */
.board-owner { font-size: 18px; font-weight: 700; }
.empty { padding: 72px 16px; text-align: center; color: var(--text-tertiary); font-size: 15px; }
.foot { padding: 28px 16px 8px; font-size: 12px; line-height: 1.7; color: var(--text-tertiary); }
.foot a { text-decoration: underline; text-underline-offset: 2px; }

/* 주 버튼: 휴대폰은 화면 아래 고정, PC는 제자리 */
.bottom-bar { display: flex; justify-content: flex-end; }
.bottom-bar .btn { height: 44px; padding: 0 20px; font-size: 15px; }
@media (max-width: 767.98px) {
  /* 고정 막대가 마지막 내용을 가리지 않게 한다. 2단 화면은 바닥글이 .split 밖에 있어 body 를 띄운다 */
  .page:has(.bottom-bar), body:has(.split[data-view="list"] .pane-list .bottom-bar:not([hidden])), body:has(.split[data-view="detail"] .pane-detail .bottom-bar) { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface-page); border-top: 1px solid var(--border-subtle); }
  .bottom-bar .btn { flex: 1; height: 52px; font-size: 16px; }
}

/* ───────── 문의 상세 ───────── */
.doc { padding: 20px 16px 32px; }
.doc-title { margin-top: 10px; font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.doc-title + .q-meta { margin-top: 8px; }
.banner { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border-subtle); font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.banner svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.thread { display: grid; gap: 12px; margin-top: 20px; }
.msg { padding: 16px 0 4px; border-top: 1px solid var(--border-subtle); }
.msg-head { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.msg-head b { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.msg-body { margin-top: 8px; line-height: 1.7; white-space: pre-wrap; }
.msg-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
/* 운영자 답변: 바탕색과 이름 색으로 구분한다 */
.msg.operator { padding: 16px; border-top: 0; border-radius: var(--radius-lg); }
.msg.operator .msg-head b { color: var(--accent-text); }
.msg.operator + .msg { border-top: 0; }
.attach { margin-top: 14px; }
.attach-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.attach-label svg { width: 14px; height: 14px; color: var(--text-tertiary); }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--text-tertiary); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb > svg { width: 24px; height: 24px; }
.thumb-remove { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-tab); }
.thumb-remove svg { width: 14px; height: 14px; }
.thumb-add { border: 1.5px dashed var(--border-control); background: transparent; box-shadow: none; color: var(--text-secondary); }
.inline-form { display: grid; gap: 10px; margin-top: 24px; }
.inline-form > .btn { justify-self: end; }
.dialog-actions, .doc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.doc-actions { padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.doc-actions .field-help { margin-right: auto; align-self: center; }
.locked-note { display: grid; justify-items: center; gap: 8px; margin-top: 24px; padding: 40px 16px; border-radius: var(--radius-lg); background: var(--surface-sunken); text-align: center; color: var(--text-secondary); font-size: 15px; }
.locked-note .glyph { width: 28px; height: 28px; }
.locked-note b { font-size: 16px; color: var(--text-primary); }

/* ───────── 입력 ───────── */
.form { display: grid; gap: 22px; padding: 20px 16px 32px; }
.form .doc-title { margin-top: 0; }
.field { display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field > label, .field > legend, .field-label { display: flex; align-items: baseline; gap: 8px; padding: 0; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.field .opt { font-size: 12px; font-weight: 500; color: var(--text-tertiary); }
.input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 16px; line-height: 1.5; }
textarea.input { min-height: 168px; resize: vertical; }
textarea.input.short { min-height: 104px; }
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--accent-subtle); }
.field-help { font-size: 13px; color: var(--text-tertiary); }
.field-error { font-size: 13px; color: var(--danger); }
.field.is-error .input { border-color: var(--danger); }
.field-note { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.field-note svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--text-tertiary); }
/* 비공개를 고르면 제목 입력란 아래 안내가 나온다 */
.private-note { display: none; }
form:has([name="visibility"][value="private"]:checked) .private-note { display: flex; }
.readout { font-size: 15px; }
/* 비밀번호 입력란: 오른쪽 끝에 보기 전환 버튼 */
.password-row { position: relative; }
.password-row .input { padding-right: 52px; }
.password-row .icon-btn { position: absolute; top: 2px; right: 2px; }
.password-row .icon-btn[aria-pressed="true"] { color: var(--accent-text); }
/* 업체 게시판의 비밀번호 화면 */
.lock-page { --col: 440px; }
.form.lock { padding-top: 40px; }
.form.lock > .glyph { width: 28px; height: 28px; }
.form.lock .doc-title { margin-top: -10px; }
.form.lock .banner { margin-top: 0; }
.turnstile-slot { display: flex; align-items: center; justify-content: center; width: 300px; max-width: 100%; height: 65px; border-radius: var(--radius-sm); border: 1px dashed var(--border-control); font-size: 13px; color: var(--text-tertiary); }

/* ───────── 대화상자 ───────── */
.dialog { width: min(400px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-raised); }
.dialog::backdrop { background: var(--scrim); }
.dialog h2 { font-size: 19px; line-height: 1.35; letter-spacing: -.01em; }
.dialog p { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
.info-list { display: grid; gap: 12px; margin-top: 16px; padding-left: 18px; list-style: disc; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.info-list li::marker { color: var(--border-control); }

/* ───────── 관리 화면 ───────── */
/* 2단 화면(관리 화면, 업체 게시판)은 단이 넓다 */
.admin, .partner { --col: 1280px; }
.partner .foot { max-width: var(--col); margin-inline: auto; }
/* 머리글에서 다른 관리 페이지(앱 문의 ↔ 파트너)로 가는 링크: 이름은 강조색, 처리할 건수는 채운 알약 */
.area-link { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; color: var(--accent-text); font-size: 14px; font-weight: 700; white-space: nowrap; }
.area-link .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
/* 탭이 좁은 화면을 넘치면 가로로 민다 */
.admin .tabs-row { overflow-x: auto; }
.admin .tabs-row .tabs { flex: none; }
/* 업체 게시판: 탭 아래에서 어느 업체의 게시판인지 알리는 줄 */
.crumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; max-width: var(--col); margin-inline: auto; padding: 2px 16px 12px; font-size: 15px; }
.crumb span { color: var(--text-tertiary); }
.crumb a { color: var(--accent-text); font-size: 14px; font-weight: 600; }
.crumb .crumb-end { margin-left: auto; }
/* 종료된 게시판의 읽기 전용 안내 */
.board-note { max-width: var(--col); margin-inline: auto; padding: 0 16px 12px; }
.board-note .banner { margin-top: 0; }
.partner .board-note { padding-top: 12px; }
.board-link { display: grid; gap: 12px; justify-items: start; margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.board-link .field { width: 100%; }
.filters .tabs { max-width: 100%; overflow-x: auto; }
.filters .tab { padding: 0 12px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 6px 16px 10px; }
.a-row { display: grid; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--border-subtle); }
.a-top { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.a-top .a-aside { margin-left: auto; }
.a-title { font-size: 15px; }
.a-title svg { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--text-tertiary); }
@media (hover: hover) { .a-row:not(.is-selected):hover { background: var(--surface-sunken); } }
.pane-detail .doc { padding-top: 16px; }
.pane-empty { display: flex; align-items: center; justify-content: center; min-height: 60vh; color: var(--text-tertiary); font-size: 15px; }
.inline-edit { margin-top: 6px; }
.inline-edit summary { display: inline-flex; align-items: center; height: 36px; color: var(--accent-text); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.inline-edit summary::-webkit-details-marker { display: none; }
.row-form { display: flex; flex-wrap: wrap; gap: 8px; }
.row-form .input { flex: 1 1 180px; width: auto; min-height: 44px; padding-block: 9px; }
.inline-edit .field-help { margin-top: 6px; }
.row-form .seg { flex: 1 1 240px; }
.work-form { margin-top: 16px; }
.inline-edit .row-form { margin-top: 4px; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-subtle); font-size: 14px; }
.facts dt { color: var(--text-tertiary); }
.facts dd { white-space: pre-wrap; }
/* 좁은 화면에서는 목록과 상세 가운데 data-view 가 가리키는 쪽만 보인다 */
@media (max-width: 959.98px) {
  .split[data-view="detail"] .pane-list, .split[data-view="list"] .pane-detail { display: none; }
}

/* ───────── PC ───────── */
@media (min-width: 768px) {
  .q-row { padding-block: 16px; }
  .tabs-row { padding-top: 20px; padding-bottom: 10px; }
  .doc, .form { padding-top: 32px; }
  .doc-title { font-size: 26px; }
}
@media (min-width: 960px) {
  .split { display: grid; grid-template-columns: 400px minmax(0, 1fr); align-items: start; border-top: 1px solid var(--border-subtle); }
  .pane-list { position: sticky; top: var(--appbar-h); max-height: calc(100dvh - var(--appbar-h)); overflow-y: auto; border-right: 1px solid var(--border-subtle); }
  .pane-list .filters { padding-top: 14px; }
  .pane-detail { min-height: calc(100dvh - var(--appbar-h) - 70px); }
  .pane-detail .doc { max-width: 760px; padding: 24px 32px 40px; }
  .pane-detail .form { max-width: 640px; padding: 24px 32px 40px; }
  /* 목록만 있는 화면(업체 게시판 목록): 2단과 같은 폭을 목록 하나가 쓴다 */
  .split.is-single { grid-template-columns: minmax(0, 1fr); }
  .split.is-single .pane-list { position: static; max-height: none; border-right: 0; }
  .split.is-single ul { border-bottom: 1px solid var(--border-subtle); }
  /* 업체 게시판은 머리글 바로 아래가 2단이라 위쪽 선이 겹친다 */
  .partner .split { border-top: 0; }
  .back-link { display: none; }
}