/* ========================================================================
   cafe-local/style.css
   동네 카페 — MELLOW CORNER · 따뜻하고 편안한 감성 (cream / olive / wood)
   사진 ≈ 70% / 디자인 요소 ≈ 30% · 짧고 친근한 구성
   ======================================================================== */

:root {
  /* ---- Brand palette ---- */
  --color-bg:           #fbf5e9;   /* warm cream */
  --color-bg-alt:       #f0e6d0;   /* slightly deeper cream */
  --color-paper:        #fffaf0;   /* almost white */
  --color-ink:          #3a2e22;   /* warm dark brown */
  --color-ink-soft:     #5a4a3a;
  --color-ink-muted:    #8e7f6e;
  --color-olive:        #6b7a48;   /* primary accent */
  --color-olive-deep:   #4f5d33;
  --color-wood:         #a87553;
  --color-blush:        #d8a98a;
  --color-line:         rgba(58, 46, 34, 0.13);
  --color-line-soft:    rgba(58, 46, 34, 0.07);

  /* ---- Component overrides ---- */
  --color-primary:      var(--color-olive);
  --color-on-primary:   var(--color-paper);
  --color-secondary-fg: var(--color-ink);
  --color-on-accent:    var(--color-paper);

  --header-bg:     rgba(251, 245, 233, 0.94);
  --header-fg:     var(--color-ink);
  --header-border: rgba(58, 46, 34, 0.08);
  --nav-cta-bg:    var(--color-olive);
  --nav-cta-fg:    var(--color-paper);

  --footer-bg:        #2e2a22;
  --footer-fg:        #cbbfa9;
  --footer-fg-strong: #d2c79f;

  --notice-bg:     var(--color-bg-alt);
  --notice-fg:     var(--color-ink-soft);
  --notice-border: rgba(58, 46, 34, 0.08);

  --mcta-bg:    var(--color-paper);
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: 'Apple SD Gothic Neo', 'Pretendard', 'Noto Sans KR',
    'Malgun Gothic', system-ui, sans-serif;
  word-break: keep-all;
}
::selection { background: var(--color-olive); color: var(--color-paper); }

/* ---------- Section base ---------- */
.section { padding: 84px 0; }
@media (max-width: 768px) { .section { padding: 56px 0; } }

/* ---------- Eyebrow modifiers ---------- */
.eyebrow--olive {
  color: var(--color-olive-deep);
}
.eyebrow--olive::before { background: var(--color-olive); }
.eyebrow--cream {
  color: #ddd4b8;
}
.eyebrow--cream::before { background: #c2b886; }

/* =====================================================================
   1. HERO — split layout (image left, copy right). Mobile: stacked.
   ===================================================================== */
.cl-hero {
  padding: 88px 0 72px;
  background: var(--color-bg);
}
@media (max-width: 540px) {
  .cl-hero { padding: 24px 0 0; background: var(--color-paper); }
}

.cl-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) {
  .cl-hero__inner { grid-template-columns: 1fr; gap: 32px; }
}

.cl-hero__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-bg-alt);
  aspect-ratio: 7 / 5;
}
@media (max-width: 540px) {
  .cl-hero__media {
    border-radius: 0;
    aspect-ratio: 4 / 3;
  }
}
.cl-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cl-hero__copy {
  padding: 4px 0;
}
@media (max-width: 540px) {
  .cl-hero__copy { padding: 32px 20px 36px; }
}
.cl-hero__title {
  font-size: 44px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 14px 0 20px;
  max-width: 520px;
}
@media (max-width: 860px) { .cl-hero__title { font-size: 38px; } }
@media (max-width: 540px) { .cl-hero__title { font-size: 34px; line-height: 1.2; margin-bottom: 16px; max-width: 100%; } }
@media (max-width: 380px) { .cl-hero__title { font-size: 30px; line-height: 1.18; letter-spacing: -0.022em; } }

.cl-hero__sub {
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-ink-soft);
  margin-bottom: 32px;
  max-width: 420px;
}
@media (max-width: 540px) { .cl-hero__sub { font-size: 15.5px; margin-bottom: 24px; max-width: 100%; } }

.cl-hero .btn-row { flex-direction: row; }
@media (max-width: 540px) {
  .cl-hero .btn-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cl-hero .btn-row > .btn {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
  }
}

/* =====================================================================
   2. ABOUT — image + short copy
   ===================================================================== */
.cl-about { background: var(--color-paper); }
.cl-about__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) {
  .cl-about__grid { grid-template-columns: 1fr; gap: 32px; }
}

.cl-about__photo {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
}
.cl-about__photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

.cl-about__title {
  font-size: 34px;
  line-height: 1.3;
  letter-spacing: -0.018em;
  margin: 14px 0 22px;
}
@media (max-width: 768px) { .cl-about__title { font-size: 26px; } }

.cl-about__copy p {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--color-ink-soft);
  margin-bottom: 14px;
  max-width: 520px;
}
.cl-about__copy p:last-child { margin-bottom: 0; }
@media (max-width: 480px) { .cl-about__copy p { font-size: 15px; } }

/* =====================================================================
   3. SIGNATURE MENU — 4 cards (2x2 on PC, 1-col on small)
   ===================================================================== */
.cl-menu { background: var(--color-bg); }

.cl-menu__head { text-align: center; margin-bottom: 48px; max-width: 620px; margin-left: auto; margin-right: auto; }
.cl-menu__title {
  font-size: 34px;
  line-height: 1.3;
  margin: 12px 0 12px;
}
@media (max-width: 768px) { .cl-menu__title { font-size: 26px; } }
.cl-menu__lead {
  font-size: 15.5px;
  color: var(--color-ink-soft);
  line-height: 1.75;
}

.cl-menu__head .eyebrow { justify-content: center; }
.cl-menu__head .eyebrow::before { display: none; }

.cl-menu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 540px) {
  .cl-menu__grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; gap: 24px; }
}

.cl-menu-item {
  background: var(--color-paper);
  border: 1px solid var(--color-line-soft);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}
.cl-menu-item__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.cl-menu-item__photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.cl-menu-item__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tag-hot { background: #c4582a; color: #fff; }
.tag-ice { background: #5781a6; color: #fff; }
.tag-pick { background: var(--color-olive); color: var(--color-paper); }

.cl-menu-item__body { padding: 18px 20px 22px; }
@media (max-width: 480px) { .cl-menu-item__body { padding: 16px 18px 20px; } }

.cl-menu-item__name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.35;
}
.cl-menu-item__desc {
  font-size: 13.5px;
  color: var(--color-ink-soft);
  line-height: 1.65;
  margin-bottom: 14px;
}
.cl-menu-item__price {
  font-size: 13px;
  color: var(--color-ink-muted);
  padding-top: 12px;
  border-top: 1px solid var(--color-line-soft);
}
.cl-menu-item__price strong {
  color: var(--color-ink);
  font-weight: 700;
  margin-left: 4px;
}

.cl-menu__notice {
  text-align: center;
  font-size: 12.5px;
  color: var(--color-ink-muted);
  margin-top: 30px;
}

/* =====================================================================
   4. SPACE — gallery (1 big + 2 small)
   ===================================================================== */
.cl-space { background: var(--color-paper); }

.cl-space__head { margin-bottom: 36px; max-width: 600px; }
.cl-space__title {
  font-size: 34px;
  margin: 12px 0 12px;
  line-height: 1.3;
}
@media (max-width: 768px) { .cl-space__title { font-size: 26px; } }
.cl-space__lead {
  font-size: 15.5px;
  color: var(--color-ink-soft);
  line-height: 1.75;
}

.cl-space__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 18px;
}
.cl-space__photo {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-alt);
  height: 100%;
}
.cl-space__photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.cl-space__photo--big {
  grid-row: span 2;
}

@media (max-width: 860px) {
  .cl-space__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 240px 240px;
  }
  .cl-space__photo--big {
    grid-column: span 2;
    grid-row: span 1;
  }
}
@media (max-width: 540px) {
  .cl-space__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 220px);
  }
  .cl-space__photo--big { grid-column: span 1; aspect-ratio: auto; }
}

/* =====================================================================
   5. GROUP ORDER — photo right + copy left
   ===================================================================== */
.cl-group { background: var(--color-bg); }
.cl-group__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) {
  .cl-group__inner { grid-template-columns: 1fr; gap: 32px; }
}

.cl-group__photo {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
}
.cl-group__photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

.cl-group__title {
  font-size: 32px;
  line-height: 1.3;
  margin: 12px 0 16px;
}
@media (max-width: 768px) { .cl-group__title { font-size: 26px; } }
.cl-group__lead {
  font-size: 15.5px;
  color: var(--color-ink-soft);
  line-height: 1.8;
  margin-bottom: 22px;
  max-width: 520px;
}
.cl-group__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 10px;
}
.cl-group__list li {
  font-size: 14px;
  color: var(--color-ink-soft);
  padding-left: 22px;
  position: relative;
  line-height: 1.7;
}
.cl-group__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-olive);
}
.cl-group__list li strong {
  display: block;
  color: var(--color-ink);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}
.cl-group__cta {
  min-height: 52px;
  padding-left: 26px;
  padding-right: 26px;
}
@media (max-width: 540px) {
  .cl-group__cta { width: 100%; }
}

/* =====================================================================
   6. VISIT INFO — photo + info list + icon links
   ===================================================================== */
.cl-visit { background: var(--color-paper); }
.cl-visit__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) {
  .cl-visit__inner { grid-template-columns: 1fr; gap: 32px; }
}

.cl-visit__photo {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
}
.cl-visit__photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

.cl-visit__title {
  font-size: 32px;
  margin: 12px 0 22px;
  line-height: 1.3;
}
@media (max-width: 768px) { .cl-visit__title { font-size: 24px; } }

.cl-info-list { margin-bottom: 24px; }
.cl-info-list dt {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-olive-deep);
  font-weight: 700;
  margin-top: 16px;
  margin-bottom: 4px;
}
.cl-info-list dt:first-child { margin-top: 0; }
.cl-info-list dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--color-ink-soft);
  line-height: 1.7;
}
.cl-info-list dd small {
  display: block;
  font-size: 12.5px;
  color: var(--color-ink-muted);
  margin-top: 3px;
}

.cl-visit__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cl-info__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s;
  color: var(--color-ink);
}
.cl-info__link:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-olive);
}
.cl-info__link svg {
  width: 16px;
  height: 16px;
  color: var(--color-olive-deep);
}

/* =====================================================================
   7. FINAL CTA — bg image + center text
   ===================================================================== */
.cl-cta {
  position: relative;
  overflow: hidden;
  padding: 88px 0;
  text-align: center;
  background: #2e2a22;
  color: var(--color-paper);
}
@media (max-width: 768px) { .cl-cta { padding: 56px 0; } }

.cl-cta__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.4;
}
.cl-cta__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cl-cta__inner { position: relative; z-index: 1; }

.cl-cta__title {
  font-size: 36px;
  line-height: 1.3;
  margin: 14px 0 14px;
}
@media (max-width: 768px) { .cl-cta__title { font-size: 26px; } }

.cl-cta__sub {
  font-size: 15.5px;
  color: rgba(255, 250, 240, 0.78);
  margin-bottom: 28px;
}

.cl-cta .btn-row { justify-content: center; }
.cl-cta .btn-primary {
  background: var(--color-paper);
  color: var(--color-ink);
}
.cl-cta .btn-secondary {
  color: var(--color-paper);
  border-color: rgba(255, 250, 240, 0.5);
}
.cl-cta .btn-secondary:hover {
  background: rgba(255, 250, 240, 0.12);
  border-color: rgba(255, 250, 240, 0.8);
}