/* ─────────────────────────────────────────────────────────────────
   Coffee Hub — Design Tokens & Base
   insane-design: Roma (Editorial Hospitality) — 2026-05-28
   크림 #F9F7EF + 포레스트그린 #264E33 + 버건디 #991C20, serif 디스플레이, flat
   ───────────────────────────────────────────────────────────────── */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=Noto+Serif+KR:wght@400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600&display=swap');

:root {
  /* ── Surfaces (Lovable warm cream) ── */
  --cream:       #F9F5EF;   /* page base — Lovable warm cream */
  --cream-warm:  #F3EBE0;   /* card / divider */
  --cream-deep:  #EBDED0;   /* deeper section */
  --paper:       #FFFFFF;   /* lifted card */

  /* ── Brand (Lovable coral signature + espresso ink) ── */
  --espresso:    #2E211C;   /* dark sections + text */
  --green:       #2E211C;   /* legacy alias → espresso (dark blocks/text) */
  --green-90:    #241a16;   /* hover deepen */
  --green-line:  rgba(46,33,28,0.16);
  --coral:       #E8643C;   /* Lovable signature coral */
  --coral-soft:  #F0916F;
  --pink:        #F3A98C;   /* soft gradient partner */

  /* ── Accent (Roma burgundy + coffee bean) ── */
  --burgundy:    #991C20;   /* Roma deep accent — 절제 사용 */
  --bean:        #6F4518;   /* roasted coffee bean — hover glow */

  /* ── Origin micro-accents (functional bean dots) ── */
  --mint:        #b1e0d4;
  --sage:        #c8d9c3;
  --clay:        #c0743f;
  --honey:       #d9a85a;

  /* ── Ink ── */
  --ink:         #2E211C;
  --ink-soft:    rgba(46,33,28,0.74);
  --ink-mute:    rgba(46,33,28,0.54);
  --ink-line:    rgba(46,33,28,0.12);
  --inverse:     #F9F5EF;
  --inverse-soft:rgba(249,245,239,0.74);

  /* ── Type (Roma serif display + Inter body, Korean fallbacks) ── */
  --font-display:    'Instrument Serif', 'Noto Serif KR', Georgia, serif;
  --font-en-display: 'Instrument Serif', 'Cormorant Garamond', serif;
  --font-body:       'Inter', 'Pretendard Variable', 'Pretendard', -apple-system, 'Segoe UI', sans-serif;
  --font-ui:         'Switzer', 'Inter', 'Pretendard Variable', sans-serif;

  /* ── Layout ── */
  --page-pad: 16px;
  --page-pad-m: 40px;
  --page-pad-l: 102px;
  --grid-v: 56px;
  --grid-v-l: 96px;
  --max-w: 1600px;
  --col-text: 640px;

  /* ── Motion (Roma cubic-bezier, unhurried) ── */
  --t-fast: .15s;
  --t-base: .3s;
  --t-slow: .5s;
  --t-ambient: 20s;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow: cubic-bezier(0.25, 0.8, 0.5, 1);

  /* ── Radii (Roma — 30px pill / 16px card) ── */
  --r-0: 0;
  --r-tiny: 2px;
  --r-card: 16px;
  --r-pill: 30px;
}

@media (min-width: 640px) {
  :root { --page-pad: var(--page-pad-m); }
}
@media (min-width: 1024px) {
  :root { --page-pad: var(--page-pad-l); --grid-v: var(--grid-v-l); }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; }
body {
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 400;
}
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ── Type system (Roma serif ladder, weight 400 elegance) ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(48px, 8vw, 120px); letter-spacing: -0.04em; line-height: 0.98; }
h2 { font-size: clamp(32px, 4.4vw, 56px); letter-spacing: -0.035em; }
h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; }
h4 { font-size: clamp(18px, 1.4vw, 22px); font-weight: 500; letter-spacing: -0.02em; }
p  { margin: 0; }

.serif       { font-family: var(--font-display); font-weight: 400; }
.serif-en    { font-family: var(--font-en-display); font-weight: 400; font-style: italic; }
.eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
}
.lead {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
  font-weight: 400;
}
.dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 4.5em;
  float: left;
  line-height: 0.9;
  margin: 0.06em 0.12em 0 -0.04em;
  color: var(--green);
  font-weight: 400;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(153,28,32,0.35);
  transition: text-decoration-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
a:hover { color: var(--burgundy); text-decoration-color: var(--burgundy); }

/* ── Layout primitives ── */
.page-pad { padding-left: 16px; padding-right: 16px; }
@media (min-width: 640px)  { .page-pad { padding-left: 40px;  padding-right: 40px;  } }
@media (min-width: 1024px) { .page-pad { padding-left: 102px; padding-right: 102px; } }
.section    { padding-top: var(--grid-v); padding-bottom: var(--grid-v); }
.section-lg { padding-top: calc(var(--grid-v) * 1.4); padding-bottom: calc(var(--grid-v) * 1.4); }
.wrap       { max-width: var(--max-w); margin: 0 auto; }

.divider { height: 1px; background: var(--green-line); border: 0; }

/* ── Buttons (Roma 30px pill, flat, transform hover) ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 24px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  cursor: pointer;
  border: 1px solid var(--green);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  text-decoration: none;
}
.btn { border-color: var(--coral); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(111,69,24,0.28); }
.btn--solid  { background: linear-gradient(135deg, var(--coral) 0%, var(--pink) 100%); color: #fff; border-color: transparent; }
.btn--solid:hover { background: linear-gradient(135deg, var(--burgundy) 0%, var(--coral) 100%); }
.btn--ghost  { background: transparent; color: var(--coral); border-color: var(--coral); }
.btn--ghost:hover { background: var(--coral); color: #fff; }
.btn--light  {
  background: transparent; color: var(--inverse);
  border-color: rgba(249,245,239,0.55);
}
.btn--light:hover { background: rgba(249,245,239,0.12); border-color: var(--inverse); }
.btn .arrow { font-family: var(--font-en-display); font-style: normal; font-size: 17px; line-height: 1; transform: translateY(-1px); }

/* ── Origin dot ── */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-right: 8px;
}
.dot--mint { background: var(--mint); }
.dot--clay { background: var(--clay); }
.dot--honey { background: var(--honey); }
.dot--sage { background: var(--sage); }
.dot--lilac { background: #c9a7c6; }
.dot--blue  { background: #9cc4dc; }

/* ── Image placeholder skin for <image-slot> ── */
image-slot {
  background: var(--cream-warm);
  color: var(--ink-mute);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Utility motion ── */
@keyframes pan-left {
  0% { transform: scale(1.12) translate(2%, 0); }
  100% { transform: scale(1.2) translate(-3%, -2%); }
}
@keyframes pan-right {
  0% { transform: scale(1.12) translate(-2%, 0); }
  100% { transform: scale(1.2) translate(3%, -2%); }
}
@keyframes zoom-slow {
  0% { transform: scale(1.0); }
  100% { transform: scale(1.12); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ambient-pan-l img,
.ambient-pan-l video { animation: pan-left  var(--t-ambient) ease-out forwards; }
.ambient-pan-r img,
.ambient-pan-r video { animation: pan-right var(--t-ambient) ease-out forwards; }
.ambient-zoom img    { animation: zoom-slow 18s ease-out forwards; }

.fade-up    { animation: fade-up .9s var(--ease-slow) both; }
.fade-up-d1 { animation: fade-up .9s var(--ease-slow) .12s both; }
.fade-up-d2 { animation: fade-up .9s var(--ease-slow) .24s both; }
.fade-up-d3 { animation: fade-up .9s var(--ease-slow) .36s both; }

/* ── Accessibility ── */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── data-screen-label region marker — invisible ── */
[data-screen-label] { display: contents; }
section[data-screen-label],
div[data-screen-label] { display: block; }

/* ── Headline italic-English accent (Lovable coral pop) ── */
h1 em, h2 em, h3 em, h4 em {
  font-family: var(--font-en-display);
  font-style: italic;
  font-weight: 400;
  color: var(--coral);
}

/* ── Coffee-bean hover glow on boxes (user request) ── */
.bean-card, .bean-detail, .weekly-card-large, .weekly-archive-card,
.weekly-pre__main, .weekly-pre__side-card, .journal-post, .journal-pre__card,
.process__cell, .access-item, .philosophy__item {
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.weekly-card-large:hover, .weekly-archive-card:hover,
.weekly-pre__main:hover, .weekly-pre__side-card:hover,
.journal-post:hover, .journal-pre__card:hover,
.process__cell:hover, .access-item:hover, .philosophy__item:hover {
  outline: 1.5px solid var(--bean);
  outline-offset: 8px;
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(111,69,24,0.18);
  transform: translateY(-4px);
}
/* product boxes — stronger bean glow (링은 콘텐츠에서 띄워 여백 확보) */
.bean-card:hover, .bean-detail:hover {
  outline: 2px solid var(--bean);
  outline-offset: 10px;
  border-radius: 2px;
  box-shadow: 0 0 22px rgba(111,69,24,0.30), 0 16px 38px rgba(111,69,24,0.22);
  transform: translateY(-5px);
}

/* ── Staggered scroll reveal (Roma unhurried orchestration) ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-slow), transform .7s var(--ease-slow); }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}