:root {
  --color-1: #FFF8E7;
  --color-2: #22333B;
  --color-3: #C6AC8F;
  --color-4: #5E503F;
  --color-5: #EAE0D5;
  --font-display: 'Yeon Sung', system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --font-body: 'Noto Sans KR', system-ui, -apple-system, "Malgun Gothic", sans-serif;
}

body {
  font-family: var(--font-body);
  background: var(--color-1);
  color: var(--color-2);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--color-2); }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; border-bottom: 3px solid var(--color-3); padding-bottom: 0.4rem; display: inline-block; }
h3 { font-size: 1.15rem; color: var(--color-4); }

.logo { font-family: var(--font-display); font-size: 1.25rem; text-decoration: none; color: var(--color-2); }
header.site-header { background: var(--color-5); }
header.site-header nav a { text-decoration: none; color: var(--color-2); font-weight: 700; }
.nav-toggle {
  border: 2px solid var(--color-2);
  background: transparent;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

section.hero { background: var(--color-5); text-align: left; }
.hero p { max-width: 620px; }

.tel-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.85rem 1.9rem;
  background: var(--color-4);
  color: var(--color-1);
  text-decoration: none;
  font-weight: 700;
  border: 2px solid var(--color-2);
  border-radius: 0;
  transition: transform 0.15s ease;
}
.tel-button:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--color-2); }

/* Tabs (CSS-only radio toggle) */
.tabs { margin-top: 1.5rem; }
.tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tab-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 2px solid var(--color-3);
}
.tab-labels label {
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  background: var(--color-5);
  border: 1px solid var(--color-3);
  border-bottom: none;
  font-weight: 700;
}
.tab-panel { display: none; padding: 1.25rem 0.25rem; border-left: 3px solid var(--color-3); padding-left: 1rem; }
#tab-food:checked ~ .tab-labels label[for="tab-food"],
#tab-office:checked ~ .tab-labels label[for="tab-office"],
#tab-salon:checked ~ .tab-labels label[for="tab-salon"] {
  background: var(--color-3);
  color: var(--color-2);
}
#tab-food:checked ~ .tab-panels .panel-food,
#tab-office:checked ~ .tab-panels .panel-office,
#tab-salon:checked ~ .tab-panels .panel-salon {
  display: block;
}

/* Horizontal scroll steps (signature layout) */
.scroll-steps {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  margin-top: 1.5rem;
  padding-bottom: 0.75rem;
}
.scroll-steps ol {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  width: max-content;
}
.scroll-steps li {
  scroll-snap-align: start;
  flex: 0 0 220px;
  background: var(--color-5);
  border: 2px solid var(--color-2);
  padding: 1.25rem 1rem;
  position: relative;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--color-2);
  color: var(--color-1);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.scroll-steps li h3 { margin: 0.25rem 0; font-size: 1.05rem; }
.scroll-steps li p { margin: 0; font-size: 0.9rem; }

section.store-caution, section.store-cost, section.store-intro { max-width: 760px; }

blockquote.review {
  background: var(--color-5);
  border-left: 4px solid var(--color-4);
}
blockquote.review cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--color-4);
}

section.related ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
section.related a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-5);
  border: 1px solid var(--color-3);
  text-decoration: none;
  color: var(--color-2);
}

section.cta { background: var(--color-2); color: var(--color-1); }
section.cta .cta-heading { color: var(--color-1); border-bottom-color: var(--color-3); }
section.cta .tel-button { background: var(--color-3); border-color: var(--color-1); color: var(--color-2); }

footer.site-footer { background: var(--color-5); }

@media (max-width: 640px) {
  .scroll-steps li { flex-basis: 180px; }
}

@keyframes underline-grow {
  from { border-bottom-color: transparent; }
  to { border-bottom-color: var(--color-3); }
}
h2 { animation: underline-grow 0.6s ease-out; }