@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;600;650;700;750&display=swap');

:root {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #253e31;
  background: #f4f6ef;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
main { width: min(1040px, 100%); margin: 0 auto; padding: 100px 32px 80px; }
.camp-header { display: flex; flex-direction: column; align-items: center; gap: 26px; margin-bottom: 60px; text-align: center; }
.camp-mark { display: grid; grid-template-columns: repeat(2, 16px); grid-template-rows: repeat(2, 16px); gap: 5px; transform: rotate(-5deg); }
.camp-mark i { background: #335a40; border-radius: 4px; }
.camp-mark i:last-child { background: #a8be87; transform: rotate(13deg); }
h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); font-weight: 750; letter-spacing: -1.8px; line-height: 1.5; }
h1 span { white-space: nowrap; }
.service-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.service-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; grid-column: span 2; min-width: 0; min-height: 205px; padding: 29px; border: 1px solid #e0e6d8; border-radius: 17px; color: #30452f; background: #fffefa; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .2s, border-color .2s, box-shadow .2s; }
.service-card:nth-child(4), .service-card:nth-child(5) { grid-column: span 3; }
.service-icon { width: 54px; height: 54px; display: grid; place-items: center; color: var(--accent); background: var(--tint); border-radius: 15px; }
svg { display: block; width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service-arrow { position: absolute; right: 28px; top: 30px; color: #9aa88a; }
.service-arrow svg { width: 20px; height: 20px; transition: transform .2s; }
.service-name { margin-top: 38px; font-size: 21px; font-weight: 600; line-height: 1.6; letter-spacing: -.6px; overflow-wrap: anywhere; }
a.service-card:hover { transform: translateY(-4px); border-color: #afc09d; box-shadow: 0 12px 32px #31452c0d; }
a.service-card:hover .service-arrow svg { transform: translate(2px, -2px); }
a.service-card:focus-visible { outline: 3px solid #668c55; outline-offset: 5px; }
.is-unconfigured .service-arrow { opacity: .35; }
[data-color="sage"] { --tint: #eef3e4; --accent: #789455; }
[data-color="lavender"] { --tint: #f0ecf8; --accent: #9984b8; }
[data-color="sand"] { --tint: #f8f0de; --accent: #b6995c; }
[data-color="peach"] { --tint: #faeee5; --accent: #c59579; }
[data-color="blue"] { --tint: #eaf0f7; --accent: #7d9ab8; }

@media (max-width: 700px) {
  main { padding: 64px 24px 48px; }
  .camp-header { margin-bottom: 40px; gap: 23px; }
  h1 { font-size: 30px; letter-spacing: -1.4px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .service-card, .service-card:nth-child(4), .service-card:nth-child(5) { grid-column: span 1; min-height: 182px; padding: 23px; border-radius: 14px; }
  .service-card:last-child { grid-column: 1 / -1; min-height: 165px; }
  .service-icon { width: 45px; height: 45px; border-radius: 12px; }
  .service-icon svg { width: 23px; height: 23px; }
  .service-arrow { top: 24px; right: 21px; }
  .service-arrow svg { width: 17px; height: 17px; }
  .service-name { margin-top: 29px; font-size: 19px; }
}

@media (max-width: 400px) {
  main { padding: 50px 20px 36px; }
  h1 { font-size: 26px; letter-spacing: -1.3px; }
  .camp-header { margin-bottom: 34px; }
  .service-grid { gap: 12px; }
  .service-card, .service-card:nth-child(4), .service-card:nth-child(5) { padding: 20px; min-height: 166px; }
  .service-card:last-child { min-height: 150px; }
  .service-arrow { right: 17px; top: 21px; }
  .service-name { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}