/* 하루한잔 — 공유 콘텐츠 스타일 (단일 소스: 웹 + wakit 앱)
   web/src/app.html 과 wakit app.html 이 둘 다 로드.
   페이지(+page.svelte)는 scoped <style> 없이 이 클래스들만 사용 → 앱 셸에 주입돼도 동일하게 렌더.
   ※ 웹/앱의 '크롬'(상단바·탭바)은 각 셸 전용 CSS에 있음. 여기엔 콘텐츠만. */
:root {
  --bg: #ffffff;
  --card: #FFFFFF;
  --beige: #E8DFD3;
  --line: #EBE3D8;
  --ink: #3D3530;
  --sub: #8B7E72;
  --mocha: #A67B5B;
  --mocha-d: #8A6347;
  /* 상태 색(경고·성공) — 라이트 */
  --danger: #c0392b;        /* 빨강 텍스트·아이콘·테두리 */
  --danger-bg: #fdecea;     /* 옅은 빨강 배경(배너·에러칸) */
  --danger-border: #e7b8b2;
  --danger-strong: #c0392b; /* 채워진 빨강(흰 글씨용) — 라이트·다크 공통 */
  --ok: #1e8449;
  --ok-bg: #e8f5ee;
  --shadow: 0 1px 2px rgba(61, 53, 48, .04), 0 6px 20px rgba(61, 53, 48, .05);
  --radius: 18px;
}

/* ===== 다크 모드 (theme-init.js 가 <html data-theme="dark"> 설정) ===== */
[data-theme="dark"] {
  --bg: #1A1614;
  --card: #241F1C;
  --beige: #332B26;
  --line: #3A322D;
  --ink: #ECE4DC;
  --sub: #A89A8C;
  --mocha: #C49A77;
  --mocha-d: #B5895F;
  /* 상태 색 — 다크(옅은 배경은 어둡게, 텍스트는 밝게) */
  --danger: #E8897D;
  --danger-bg: #3A2320;
  --danger-border: #5A3833;
  --danger-strong: #C0392B;
  --ok: #7DCEA0;
  --ok-bg: #1E2E24;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .4);
}
/* 하드코딩된 라이트 그라데이션(이미지 자리)도 다크로 */
[data-theme="dark"] .ph,
[data-theme="dark"] .d-hero { background: linear-gradient(135deg, #2A2421, #332B26); }
[data-theme="dark"] .pop__emoji { background: #332B26; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }   /* 장식 요소 풀블리드 허용 + 가로 스크롤 방지(scroll container 미생성 → sticky 안전) */
body {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===== 본문 레이아웃 ===== */
.shell { max-width: 1180px; margin: 0 auto; padding: 24px; }
.layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 280px;
  gap: 24px; align-items: start;
}

/* 카테고리 사이드바 (좌) */
.side { position: sticky; top: 88px; }
.side__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow); }
.side__h { font-size: 12px; font-weight: 700; color: var(--sub); padding: 10px 12px 6px; letter-spacing: .02em; }
.cat {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 12px; font-weight: 600; font-size: 14.5px; color: var(--ink);
}
.cat:hover { background: var(--beige); }
.cat.active { background: linear-gradient(135deg, var(--mocha), var(--mocha-d)); color: #fff; }
.cat .ico { font-size: 17px; }

/* 인기 레일 (우) */
.rail { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.rail__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.rail__h { font-size: 15px; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }
.pop { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.pop + .pop { border-top: 1px solid var(--line); }
.pop__rank { font-size: 15px; font-weight: 800; color: var(--mocha); width: 16px; }
.pop__emoji { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; background: var(--beige); overflow: hidden; flex: 0 0 auto; }
.pop__emoji img { width: 100%; height: 100%; object-fit: cover; }
.pop__t { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.pop__m { font-size: 12px; color: var(--sub); margin-top: 2px; }
.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tagcloud a { font-size: 13px; color: var(--mocha-d); background: var(--beige); padding: 6px 11px; border-radius: 20px; font-weight: 600; }

/* 카테고리 칩 (모바일 가로 스크롤) */
.chips { display: none; gap: 8px; overflow-x: auto; padding: 4px 0 14px; -ms-overflow-style: none; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 8px 15px; border-radius: 20px; font-weight: 600; font-size: 14px;
  background: var(--card); border: 1px solid var(--line); color: var(--sub); display: inline-block;
}
.chip.on { background: linear-gradient(135deg, var(--mocha), var(--mocha-d)); color: #fff; border-color: transparent; }

/* ===== 피드 (메이슨리) ===== */
.feed__h { font-size: 18px; font-weight: 800; margin: 0 0 16px; }
.grid { columns: 2; column-gap: 18px; }
.post {
  display: block; break-inside: avoid; margin-bottom: 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s;
}
.post:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(61,53,48,.06), 0 14px 30px rgba(61,53,48,.08); }
.post .top { display: flex; align-items: center; gap: 9px; padding: 13px 15px 0; }
.ava { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--beige); color: var(--mocha-d); flex: 0 0 auto; }
.who { display: flex; flex-direction: column; line-height: 1.2; }
.who b { font-size: 13.5px; font-weight: 700; }
.who span { font-size: 11.5px; color: var(--sub); }
.cat-chip { margin-left: auto; font-size: 11.5px; color: var(--mocha-d); background: var(--beige); padding: 4px 9px; border-radius: 16px; font-weight: 600; }
.ph { position: relative; margin: 12px 0 0; display: grid; place-items: center; background: linear-gradient(135deg, #F3ECE2, #E8DFD3); }
.ph.sq { aspect-ratio: 1/1; }
.ph.wide { aspect-ratio: 4/3; }
.ph.tall { aspect-ratio: 3/4; }
.ph .emoji { font-size: 52px; filter: drop-shadow(0 4px 8px rgba(61,53,48,.12)); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post .body { padding: 13px 15px 15px; }
.title { font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.desc { font-size: 13.5px; color: var(--sub); line-height: 1.5; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bar { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 13px; color: var(--sub); font-weight: 600; }
.empty { text-align: center; color: var(--sub); padding: 60px 0; line-height: 1.6; }

/* 검색 박스 (검색 페이지) */
.search-box { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; }
.search-box input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 15px; }
.search-box .search-x { border: 0; background: var(--beige); color: var(--sub); width: 24px; height: 24px; border-radius: 50%; font-size: 12px; line-height: 1; display: grid; place-items: center; flex: 0 0 auto; }

/* ===== 글 상세 ===== */
.detail { max-width: 720px; margin: 0 auto; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--sub); font-weight: 600; font-size: 14px; margin-bottom: 16px; }
.back-link:hover { color: var(--ink); }
.d-hero {
  aspect-ratio: 16/10; border-radius: var(--radius);
  background: linear-gradient(135deg, #F3ECE2, #E8DFD3);
  display: grid; place-items: center; box-shadow: var(--shadow);
}
.d-hero { position: relative; overflow: hidden; }
.d-hero .emoji { font-size: 90px; filter: drop-shadow(0 6px 14px rgba(61,53,48,.15)); }
.d-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-body { margin-top: 22px; }
.d-meta { display: flex; align-items: center; gap: 10px; }
.d-meta .who { line-height: 1.25; }
.d-meta .who b { font-size: 14.5px; }
.d-meta .who span { font-size: 12.5px; color: var(--sub); }
.detail h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 16px 0 10px; line-height: 1.3; }
.detail .lead { font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.recipe { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 20px 0; box-shadow: var(--shadow); }
.recipe h4 { margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.recipe ul { margin: 0; padding-left: 20px; }
.recipe li { font-size: 14.5px; line-height: 1.9; color: var(--ink); }
.d-actions { display: flex; align-items: center; gap: 10px; margin: 22px 0; }
.d-actions .like {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--card);
  font-weight: 700; font-size: 15px; color: var(--ink);
}
.d-actions .like.on { background: #FCE9E4; border-color: #F3C8BD; color: #C0432A; }
.d-actions .save {
  width: 50px; height: 50px; border-radius: 14px; border: 1px solid var(--line); background: var(--card);
  display: grid; place-items: center; font-size: 20px;
}
.d-actions .save.on { background: var(--beige); border-color: var(--mocha); }
.cmt h4 { font-size: 16px; font-weight: 800; margin: 26px 0 14px; }
.cmt-form { display: flex; gap: 8px; }
.field { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; outline: 0; background: var(--card); color: var(--ink); }
.field:focus { border-color: var(--mocha); }
.btn { background: linear-gradient(135deg, var(--mocha), var(--mocha-d)); color: #fff; border: 0; border-radius: 12px; padding: 0 18px; font-weight: 700; font-size: 14px; }
.cmt .item { display: flex; gap: 11px; padding: 14px 0; }
.cmt .item + .item { border-top: 1px solid var(--line); }
.cmt .c b { font-size: 13.5px; }
.cmt .c p { margin: 4px 0 3px; font-size: 14px; line-height: 1.5; }
.cmt .c span { font-size: 12px; color: var(--sub); }

/* ===== 인증 (로그인 / 회원가입) ===== */
.auth { max-width: 360px; margin: 0 auto; padding-top: 40px; }
.auth__brand { text-align: center; margin-bottom: 26px; }
.auth__brand .mark { width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 28px; background: linear-gradient(135deg, var(--mocha), var(--mocha-d)); color: #fff; }
.auth__brand h1 { font-size: 22px; font-weight: 800; margin: 0; }
.auth__brand p { color: var(--sub); font-size: 14px; margin: 6px 0 0; }
.auth__form { display: flex; flex-direction: column; gap: 12px; }
.auth__form .btn { padding: 14px; border-radius: 14px; justify-content: center; }
.btn--block { width: 100%; display: flex; align-items: center; justify-content: center; }
.btn--ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.auth__err { color: #C0432A; font-size: 13.5px; background: #FCE9E4; border: 1px solid #F3C8BD; border-radius: 10px; padding: 10px 12px; }
.auth__alt { text-align: center; color: var(--sub); font-size: 13.5px; margin-top: 18px; }
.auth__alt a { color: var(--mocha-d); font-weight: 700; }
.auth__note { text-align: center; color: var(--sub); font-size: 12.5px; margin-top: 14px; }

/* 마이 메뉴 (공통) */
.my-menu { display: flex; align-items: center; gap: 12px; padding: 16px; color: var(--ink); font-weight: 600; font-size: 15px; }
.my-menu + .my-menu { border-top: 1px solid var(--line); }
.my-menu:hover { background: var(--beige); }

/* 테마 설정 (시스템/라이트/다크 세그먼트) — theme-toggle.js 가 [data-theme-option] 처리 */
.set-h { font-size: 13px; font-weight: 700; color: var(--sub); margin: 22px 4px 8px; }
.theme-seg { display: flex; gap: 6px; background: var(--beige); padding: 5px; border-radius: 14px; }
.theme-seg button {
  flex: 1; padding: 11px 8px; border: 0; border-radius: 10px;
  background: transparent; color: var(--sub); font-weight: 700; font-size: 13.5px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.theme-seg button.is-active { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

/* ===== 콘텐츠 반응형 ===== */
@media (max-width: 980px) {
  .layout { grid-template-columns: 180px minmax(0, 1fr); }
  .rail { display: none; }
}
@media (max-width: 768px) {
  .shell { padding: 14px 16px 90px; }
  .layout { grid-template-columns: 1fr; gap: 0; }
  .side { display: none; }
  .chips { display: flex; }
  .feed__h { display: none; }
  .grid { columns: 1; }
  .post { margin-bottom: 14px; }
  .ph .emoji { font-size: 64px; }
}

/* ── 법률 문서(이용약관·개인정보처리방침) 공용 ── */
.legal { max-width: 820px; margin: 0 auto; padding: 8px 4px 48px; color: var(--ink); }
.legal h1 { font-size: 24px; font-weight: 800; margin: 8px 0 6px; }
.legal .legal__meta { color: var(--sub); font-size: 13px; margin: 0 0 22px; }
.legal h2 { font-size: 17px; font-weight: 800; margin: 30px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.legal h3 { font-size: 14.5px; font-weight: 700; margin: 16px 0 6px; }
.legal p, .legal li { font-size: 14px; line-height: 1.8; }
.legal ul, .legal ol { padding-left: 20px; margin: 8px 0; }
.legal li { margin: 4px 0; }
.legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.legal th, .legal td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal th { background: var(--beige); color: var(--mocha-d); font-weight: 700; white-space: nowrap; }
.legal__note { background: var(--beige); border-radius: 12px; padding: 12px 16px; font-size: 13px; line-height: 1.7; margin: 16px 0; }
.legal a { color: var(--mocha-d); font-weight: 600; }
.legal__toc { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 8px; font-size: 13px; }
.legal__toc a { color: var(--sub); }

/* 푸터 법률 링크 */
.site-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0 auto 12px; font-size: 13px; }
.site-foot__links a { color: var(--sub); font-weight: 600; }
.site-foot__links a:hover { color: var(--ink); }

/* 회원가입 동의 */
.consent { margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); margin-bottom:15px; }
.consent__row { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.5; padding: 5px 0; color: var(--ink); }
.consent__row.all { font-weight: 700; padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.consent__row input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--mocha); }
.consent__row a { color: var(--mocha-d); font-weight: 700; text-decoration: underline; }
.consent__req { color: var(--mocha-d); font-weight: 700; }
.consent__opt { color: var(--sub); }

/* ── 소통구(공지·FAQ·문의) 공용 ── */
.board { max-width: 820px; margin: 0 auto; padding: 8px 4px 56px; }
.board__head { margin: 6px 0 18px; }
.board__head h1 { font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.board__head p { color: var(--sub); font-size: 14px; margin: 0; }
.board__empty { text-align: center; color: var(--sub); padding: 48px 0; font-size: 14px; }
.board__tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.board__tabs a, .board__tabs button { padding: 8px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); color: var(--sub); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.board__tabs a.on, .board__tabs button.on { background: var(--mocha); color: #fff; border-color: transparent; }

/* 아코디언 항목(공지·FAQ) */
.acc { border: 1px solid var(--line); border-radius: 14px; background: var(--card); margin: 0 0 10px; overflow: hidden; }
.acc__sum { display: flex; align-items: center; gap: 10px; padding: 15px 18px; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink); list-style: none; }
.acc__sum::-webkit-details-marker { display: none; }
.acc__sum .pin { font-size: 12px; color: var(--mocha-d); background: var(--beige); padding: 2px 8px; border-radius: 12px; font-weight: 700; }
.acc__sum .date { margin-left: auto; font-size: 12.5px; color: var(--sub); font-weight: 500; }
.acc__body { padding: 2px 18px 18px; color: var(--ink); font-size: 14px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.acc[open] .acc__sum { border-bottom: 1px solid var(--line); }

/* 문의 카드 */
.inq { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 15px 18px; margin: 0 0 11px; }
.inq__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.inq__cat { font-size: 12px; font-weight: 700; color: var(--mocha-d); background: var(--beige); padding: 2px 9px; border-radius: 12px; }
.inq__title { font-weight: 700; font-size: 15px; color: var(--ink); }
.inq__date { margin-left: auto; font-size: 12.5px; color: var(--sub); }
.inq__body { color: var(--ink); font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; margin: 4px 0 0; }
.inq__reply { margin-top: 12px; padding: 11px 14px; background: var(--beige); border-radius: 10px; font-size: 13.5px; line-height: 1.7; }
.inq__reply b { color: var(--mocha-d); }
.badge { font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 12px; }
.badge.open { background: #fde9c8; color: #9a6a00; }
.badge.prog { background: #cfe6ff; color: #1763b6; }
.badge.done { background: #d4f1e0; color: #14794a; }

/* 작성 폼 */
.board__form { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 16px 18px; margin: 0 0 22px; }
.board__form .row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.board__form select.field { flex: 0 0 auto; min-width: 120px; }
.board__form textarea.field { width: 100%; resize: vertical; min-height: 96px; font-family: inherit; line-height: 1.6; }
.board__form .acts { display: flex; justify-content: flex-end; gap: 8px; }
.board__msg { color: var(--mocha-d); font-size: 13px; margin: 0 0 10px; }

/* 공지·FAQ 아코디언(상태 기반 + slide 트랜지션) — 버튼형 summary + 셰브론 회전 */
.acc__sum { width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; }
.acc__title { flex: 1; min-width: 0; }
.acc__chev { margin-left: 8px; color: var(--sub); font-size: 12px; transition: transform .24s ease; }
.acc.open .acc__chev { transform: rotate(180deg); }
.acc.open .acc__sum { border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .acc__chev { transition: none; } }

/* ── 소통구 공통 레이아웃: 데스크톱 사이드바 / 모바일 가로 탭 ── */
.cmty { display: flex; gap: 26px; max-width: none; margin: 0 auto; }
.cmty-side { width: 180px; flex: 0 0 auto; }
.cmty-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 82px; }
.cmty-nav a { padding: 10px 14px; border-radius: 10px; color: var(--ink); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.cmty-nav a:hover { background: var(--beige); }
.cmty-nav a.on { background: var(--mocha); color: #fff; }
.cmty-main { flex: 1; min-width: 0; }
.cmty-main .board { margin: 0; max-width: none; padding-top: 0; }

@media (max-width: 760px) {
  .cmty { flex-direction: column; gap: 14px; }
  .cmty-side { width: auto; }
  .cmty-nav { flex-direction: row; gap: 8px; overflow-x: auto; position: static; padding-bottom: 2px; }
  .cmty-nav a { flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); color: var(--sub); font-weight: 700; font-size: 13.5px; }
  .cmty-nav a.on { background: var(--mocha); color: #fff; border-color: transparent; }
}

/* 사이드 메뉴 그룹 구분선(데스크톱만) */
.cmty-sep { height: 1px; background: var(--line); margin: 8px 6px; }
@media (max-width: 760px) { .cmty-sep { display: none; } }

/* 게시판/폼의 기본 .btn은 세로 패딩이 0이라 납작해짐 → 세로 패딩 보정
   (삭제 등 인라인 padding을 가진 작은 버튼은 인라인이 우선하므로 영향 없음) */
.board .btn, .board__form .btn { padding: 11px 18px; }

/* uicons 인라인 정렬(텍스트와 베이스라인 맞춤) */
i[class^="fi-"], i[class*=" fi-"] { vertical-align: -.125em; }
