/* ============================================================
   은혜교회 — 디자인 토큰 & 베이스
   따뜻한 베이지/브라운, 차분하고 경건한 톤
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

:root {
  /* surfaces */
  --bg:        #f4ede1;
  --bg-2:      #ece2d2;
  --surface:   #fffdf8;
  --surface-2: #faf3e7;
  --surface-3: #f3ead9;

  /* ink */
  --ink:       #33291f;
  --ink-soft:  #6e6253;
  --ink-faint: #a89a86;

  /* lines */
  --line:      #e7dcc8;
  --line-soft: #f0e7d6;

  /* brand */
  --brown:      #8a6d4b;
  --brown-deep: #6a5234;
  --brown-ink:  #4a3a26;
  --tan:        #c9a87c;
  --tan-soft:   #e6d6b9;
  --tan-faint:  #f1e7d3;
  --dark:       #3a3027;

  /* semantic accents */
  --amen:    #b6892f;   /* 아멘 (gold) */
  --amen-bg: #f5ebd2;
  --like:    #b5654a;   /* 좋아요 (terracotta) */
  --like-bg: #f4e2da;
  --answered:#5b7d5b;   /* 응답됨 (sage) */
  --answered-bg:#e6efe3;

  /* radius */
  --r-sm: 8px;
  --r:    13px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* shadow */
  --sh-sm: 0 1px 2px rgba(74,58,38,.05), 0 1px 3px rgba(74,58,38,.04);
  --sh:    0 2px 6px rgba(74,58,38,.06), 0 8px 20px rgba(74,58,38,.05);
  --sh-lg: 0 6px 16px rgba(74,58,38,.08), 0 20px 44px rgba(74,58,38,.08);

  /* type */
  --serif: 'Noto Serif KR', serif;
  --sans:  'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --maxw: 1180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  word-break: keep-all;
}
#root { min-height: 100vh; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--tan-soft); }

/* scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--tan-soft); border-radius: 99px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-track { background: transparent; }

h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }

/* ---- layout helpers ---- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.serif { font-family: var(--serif); }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

/* ---- section header (eyebrow + title) ---- */
.eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brown);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--tan); display: inline-block; }

.sec-title { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }

/* ---- card ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.card.hoverable:hover { box-shadow: var(--sh); transform: translateY(-2px); border-color: var(--tan-soft); }

/* ---- pill / tag ---- */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 6px 10px; border-radius: 999px;
  background: var(--tan-faint); color: var(--brown-deep);
  white-space: nowrap;
}
.tag.solid { background: var(--brown); color: #fff8ed; }
.tag.line  { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }
.tag.dot::before { content:""; width:6px;height:6px;border-radius:99px;background:currentColor;display:inline-block; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; line-height: 1;
  padding: 12px 20px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: var(--brown); color: #fffaf1;
  white-space: nowrap;
  transition: background .2s ease, transform .12s ease, box-shadow .2s ease, color .2s, border-color .2s;
}
.btn:hover { background: var(--brown-deep); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--brown-deep); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--tan); }
.btn.soft { background: var(--tan-faint); color: var(--brown-deep); }
.btn.soft:hover { background: var(--tan-soft); }
.btn.sm { padding: 9px 14px; font-size: 13px; }
.btn.block { width: 100%; }

/* ---- inputs ---- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.input, .textarea, .select {
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 14px; width: 100%;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--tan); background: #fff;
  box-shadow: 0 0 0 3px var(--tan-faint);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.textarea { resize: vertical; min-height: 96px; line-height: 1.6; }

/* ---- avatar ---- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-weight: 700; color: #fff;
  font-family: var(--sans); flex: none; user-select: none;
  letter-spacing: -.02em;
}

/* ---- image placeholder (striped) ---- */
.ph {
  position: relative; overflow: hidden; background: var(--surface-3);
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(138,109,75,.07) 11px 22px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
}
.ph .ph-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11.5px; letter-spacing: .04em; color: var(--brown);
  background: rgba(255,253,248,.82); padding: 5px 9px; border-radius: 6px;
  border: 1px solid var(--line-soft);
}
/* ---- real image fill (replaces stripe when a photo is supplied) ---- */
.ph.has-img { background: var(--surface-3); background-image: none; }
.ph .ph-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ---- reactions ---- */
.react {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; padding: 7px 12px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft);
  transition: all .18s ease; user-select: none;
}
.react:hover { border-color: var(--tan); background: var(--surface-2); }
.react.on.amen { background: var(--amen-bg); border-color: transparent; color: var(--amen); }
.react.on.like { background: var(--like-bg); border-color: transparent; color: var(--like); }
.react .ct { font-variant-numeric: tabular-nums; }

/* ---- divider ---- */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---- fade/slide in ---- */
/* Entrance animates transform only — never opacity — so a throttled/paused tab
   (which freezes CSS animations at frame 0) can never trap content invisible. */
@keyframes riseIn { from { transform: translateY(12px); } to { transform: none; } }
.rise { animation: riseIn .55s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* generic focus ring for keyboard */
:focus-visible { outline: 2px solid var(--tan); outline-offset: 2px; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 1080px) {
  .home-2col, .sermon-detail, .cal-grid { grid-template-columns: 1fr !important; }
  .nav-desktop { gap: 0 !important; }
  .nav-desktop button { padding: 9px 10px !important; font-size: 13.5px !important; }
}

@media (max-width: 920px) {
  :root { --maxw: 760px; }
  .nav-desktop, .nav-cta { display: none !important; }
  .nav-burger { display: inline-flex !important; }
  .mobile-tabbar { display: block !important; }
  .tabbar-spacer { display: block !important; }
  .hero-split { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* min-height + aspect-ratio 조합은 높이에서 너비를 역산해 화면을 넘기므로,
     너비(100%)에서 높이를 정하도록 min-height 제거 */
  .hero-split .ph { aspect-ratio: 16/10 !important; width: 100% !important; min-height: 0 !important; }
  /* 모바일: 그리드/플렉스 자식이 min-content(특히 nowrap 말줄임 텍스트·이미지)로 인해
     화면 우측 밖으로 넘치지 않도록 1fr 트랙 축소를 허용 (공지사항·최근 설교·히어로) */
  .home-2col > *, .hero-split > * { min-width: 0 !important; }
  .qs-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .qs-grid > div { border-left: none !important; padding-left: 0 !important; }
  .up-grid, .serv-grid, .comm-grid, .sermon-grid, .album-grid, .feat-grid, .photo-grid { grid-template-columns: 1fr 1fr !important; }
  .dist-grid, .footer-grid { grid-template-columns: 1fr !important; }
  .feat-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  .sec-title { font-size: 25px; }
  .qs-grid { grid-template-columns: 1fr 1fr !important; }
  .up-grid, .serv-grid, .comm-grid, .sermon-grid, .album-grid, .photo-grid, .form-2col { grid-template-columns: 1fr !important; }
  .photo-grid { grid-template-columns: 1fr 1fr !important; }
  .photo-grid > * { grid-column: span 1 !important; grid-row: span 1 !important; }
  .react { padding: 7px 10px; font-size: 12.5px; }
}