/* Fonday flyer — CI tokens, base, hero, ecosystem, footer */
:root {
  --bg: #FFFFFF;
  --panel: #FFF2EC;
  --ink: #262220;
  --sub: #4E4741;
  --body: #6E665E;
  --faint: #A79D93;
  --line: #EFE8E1;
  --red: #E53E3E;
  --red-deep: #C93434;
  --eco-bg: #FFF2EC;
  --eco-line: rgba(38, 34, 32, 0.14);
  --sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --display: Fraunces, Georgia, "Times New Roman", serif;
  --shadow-img: 0 1px 2px rgba(46, 43, 39, 0.08), 0 10px 28px rgba(46, 43, 39, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--body);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
figure { margin: 0; }

h1, h2 {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.22;
  text-wrap: balance;
}
h1 { font-size: clamp(36px, 5.5vw, 58px); }
h2 { font-size: clamp(27px, 4.2vw, 40px); }
h3 { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; }

b { color: var(--sub); font-weight: 700; }

.eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-bottom: 20px;
}
.eyebrow em { font-style: normal; color: var(--red); }

.lead {
  max-width: 36em;
  margin-top: 22px;
  color: var(--sub);
  font-size: clamp(15px, 2vw, 17px);
}

/* ---- sticky top bar ---- */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px clamp(20px, 5vw, 48px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.top-nav { display: flex; gap: clamp(16px, 3vw, 32px); margin-left: auto; }
.top-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--sub);
  transition: color 0.2s;
}
.top-nav a:hover { color: var(--red); }
.logo { height: 26px; width: auto; mix-blend-mode: multiply; }
.top-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--sub);
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 0.25s;
}
.top-link:hover { border-color: var(--red); }

/* ---- hero ---- */
.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(56px, 10vh, 110px) clamp(20px, 5vw, 48px) clamp(48px, 8vh, 90px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}
.hero-sub {
  max-width: 32em;
  margin-top: 26px;
  font-size: clamp(15px, 2vw, 17px);
  color: var(--sub);
}
.hero-photo {
  position: relative;
  max-width: 400px;
  justify-self: end;
}
.hero-photo img { border-radius: 6px; box-shadow: var(--shadow-img); }
.chip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 10px 16px;
  box-shadow: 0 4px 20px rgba(46, 43, 39, 0.16);
  font-size: 12px;
  color: var(--body);
  line-height: 1.4;
}
.chip em {
  font-style: normal;
  font-family: var(--display);
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.chip-temp { top: 9%; left: -9%; }
.chip-humid { bottom: 12%; right: -7%; }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.cta-ghost {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  padding: 14px 26px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  transition: border-color 0.25s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-ghost:hover { border-color: var(--red); transform: translateY(-2px); }

.hero-index { margin-top: clamp(36px, 6vh, 60px); border-top: 1px solid var(--line); }
.hero-index a {
  display: grid;
  grid-template-columns: 2.6em minmax(8em, max-content) 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s;
}
.hero-index a:hover { background: rgba(46, 43, 39, 0.03); }
.idx { font-family: var(--display); font-size: 15px; color: var(--faint); font-variant-numeric: tabular-nums; }
.idx-name { font-size: clamp(16px, 2vw, 19px); font-weight: 700; color: var(--ink); white-space: nowrap; }
.idx-desc { font-size: 14px; color: var(--body); }
.idx-arrow { color: var(--red); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-index a:hover .idx-arrow { transform: translateY(4px); }

/* ---- ecosystem ---- */
.eco { background: var(--eco-bg); }
.eco-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 120px) clamp(20px, 5vw, 48px);
}
.eco h2 { color: var(--ink); }
.eyebrow-dark { color: var(--red); }
.eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(36px, 6vh, 60px);
}
.eco-item { border-top: 1px solid var(--eco-line); padding-top: 22px; }
.eco-kind {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFF7F3;
  background: var(--red);
  border-radius: 3px;
  padding: 3px 10px;
}
.eco-item h3 { color: var(--ink); font-size: 19px; margin-top: 16px; }
.eco-item p { margin-top: 10px; font-size: 15px; color: var(--body); }
.eco-item .eco-note { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--red-deep); }
.eco-flow {
  margin-top: clamp(36px, 6vh, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--eco-line);
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--body);
  max-width: 44em;
}
.eco-flow b { color: var(--ink); }

/* ---- section shell ---- */
.sec {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(68px, 11vh, 130px) clamp(20px, 5vw, 48px);
}
.sec-alt { background: var(--panel); }

/* ---- CTA ---- */
.cta {
  display: inline-block;
  background: var(--red);
  color: #FFF7F3;
  font-size: 16px;
  font-weight: 700;
  padding: 15px 28px;
  border-radius: 6px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s;
}
.cta:hover { transform: translateY(-2px); background: var(--red-deep); }

/* ---- footer ---- */
.foot {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(44px, 7vh, 72px) clamp(20px, 5vw, 48px) 56px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.foot .logo { height: 24px; }
.foot p { margin-top: 14px; }
.foot-copy { color: var(--faint); font-size: 13px; margin-top: 6px !important; }

/* ---- reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-photo { justify-self: start; max-width: 340px; margin-left: 6%; }
  .chip-temp { left: -6%; }
  .chip-humid { right: -4%; }
  .eco-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero-index a { grid-template-columns: 2.2em 1fr auto; }
  .idx-desc { grid-column: 2 / 3; grid-row: 2; }
  .top-nav { gap: 14px; }
  .top-nav a { font-size: 13px; }
}