:root {
  color-scheme: dark;
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: #eeeae1;
  background: #0d1010;
  --surface: #151918;
  --line: #353a36;
  --line-strong: #6b6048;
  --gold: #d8b76f;
  --muted: #aaa9a2;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #0d1010; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: #0d1010;
  color: #eeeae1;
  font-size: 16px;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #f0cf81; outline-offset: 4px; }

.site-header,
main {
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;
}
.site-header {
  min-height: 86px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand-logo { width: 64px; height: 64px; display: block; object-fit: contain; }
.brand small,
.brand strong { display: block; letter-spacing: 0; }
.brand small { color: var(--gold); font-size: 11px; font-weight: 700; }
.brand strong { margin-top: 1px; font-family: Georgia, "Noto Serif KR", serif; font-size: 22px; font-weight: 600; }

.service-list { padding: 28px 0 48px; }
.service {
  min-height: 340px;
  padding: 28px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr);
  gap: clamp(32px, 4vw, 68px);
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.service:first-child { border-top: 1px solid var(--line-strong); }
.service:hover .service-preview img { transform: scale(1.012); filter: saturate(1) contrast(1.04); }
.service:hover .service-enter { color: #f5daa1; border-color: #b59759; }
.service:hover .service-enter span { transform: translateX(5px); }
.service-preview {
  position: relative;
  min-height: 284px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #454840;
  background: var(--surface);
}
.service-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  filter: saturate(.86) contrast(1.03);
  transition: transform 180ms ease, filter 180ms ease;
}
.service-preview figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 7px 10px;
  border-left: 2px solid var(--gold);
  background: rgba(9, 11, 11, .92);
  color: #e8deca;
  font-size: 12px;
}
.service-copy {
  min-width: 0;
  padding: 10px 0 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.service-number {
  width: 42px;
  padding-top: 7px;
  border-top: 1px solid #9e8653;
  color: var(--gold);
  font: 600 13px/1 Georgia, serif;
}
.service-kicker { margin: 24px 0 2px; color: var(--gold); font-size: 12px; font-weight: 800; }
.service h2 { margin: 0; font-family: Georgia, "Noto Serif KR", serif; font-size: clamp(34px, 3vw, 46px); font-weight: 500; letter-spacing: 0; }
.service-copy > p:not(.service-kicker) { margin: 18px 0 0; color: #c1beb5; font-size: 16px; }
.service-enter {
  width: 100%;
  min-height: 48px;
  margin-top: auto;
  padding: 12px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #9e8653;
  color: #f0ddb0;
  font-weight: 700;
  transition: color 160ms ease, border-color 160ms ease;
}
.service-enter span { font-size: 22px; transition: transform 160ms ease; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
  .site-header,
  main { width: min(100% - 28px, 1500px); }
  .site-header { min-height: 72px; }
  .brand { gap: 10px; }
  .brand-logo { width: 52px; height: 52px; }
  .brand small { font-size: 9px; }
  .brand strong { font-size: 17px; }
  .service-list { padding-top: 16px; }
  .service { min-height: 0; padding: 24px 0 30px; display: flex; flex-direction: column; gap: 20px; }
  .service-preview { min-height: 0; aspect-ratio: 16 / 10; }
  .service-copy { padding: 0; }
  .service-kicker { margin-top: 16px; }
  .service h2 { font-size: 34px; }
  .service-enter { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}