:root {
  color-scheme: light;
  --ink: #2f2119;
  --muted: #78675a;
  --paper: #fbf7f0;
  --line: #e8dccd;
  --gold: #a96d2c;
}

* { box-sizing: border-box; }

html { background: #e8dfd3; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top, rgba(255,255,255,.92), transparent 34rem),
    #e8dfd3;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
}

.page {
  width: min(100%, 34rem);
  min-height: 100vh;
  margin: 0 auto;
  padding: 2rem 1.1rem 2.6rem;
  background: var(--paper);
  box-shadow: 0 0 40px rgba(70, 48, 30, .12);
}

.hero { text-align: center; padding: .4rem .5rem 1.7rem; }

.brand-logo {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 0 auto .65rem;
}

.eyebrow {
  margin: 0 0 .45rem;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .18em;
}

h1 { margin: 0; font-family: Georgia, "Noto Serif KR", serif; font-size: 2rem; letter-spacing: -.04em; }

.intro { margin: .85rem 0 0; color: var(--muted); font-size: 1.03rem; font-weight: 650; line-height: 1.55; }

.links { display: grid; gap: .72rem; }

.link-card {
  display: grid;
  grid-template-columns: 2.8rem 1fr 1rem;
  align-items: center;
  gap: .8rem;
  min-height: 4.5rem;
  padding: .72rem .9rem;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 5px 16px rgba(72, 47, 25, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.link-card:active { transform: scale(.985); }
.link-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(72, 47, 25, .11); }

.mark {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  color: white;
  background: #402b1f;
  border-radius: .85rem;
  font-size: 1rem;
  font-weight: 900;
}

.instagram .mark { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.threads .mark { background: #111; }
.naver .mark, .blog .mark { background: #03c75a; }
.kakao .mark { color: #351f1f; background: #fee500; }
.daangn .mark { background: #ff6f0f; }
.map .mark { background: #2d69e0; }
.google .mark { background: linear-gradient(135deg, #4285f4 0 32%, #34a853 32% 54%, #fbbc05 54% 76%, #ea4335 76%); }

.link-card strong { display: block; font-size: 1rem; line-height: 1.25; }
.link-card small { display: block; margin-top: .2rem; color: var(--muted); font-size: .78rem; line-height: 1.25; }
.arrow { color: #b59c87; font-family: Arial, sans-serif; font-size: 1.6rem; line-height: 1; }

.store-card {
  overflow: hidden;
  margin: 1.35rem 0 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.05rem;
}

.store-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.store-card figcaption { padding: .9rem; text-align: center; color: var(--muted); font-size: .84rem; font-weight: 650; }

footer { padding: 1.4rem 0 0; text-align: center; color: #9a8879; font-size: .72rem; }

@media (min-width: 35rem) {
  .page { padding-inline: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .link-card { transition: none; }
}