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

/* 로그인 전 첫 화면만 참고 이미지의 중앙형 구성으로 표현합니다. */
.heroBrand { position: absolute; top: clamp(190px, 22vh, 250px); left: 50%; z-index: 1; width: min(470px, 54vw); margin: 0; transform: translateX(-50%); perspective: 900px; }
.heroBrand img { width: 100%; height: auto; transform-origin: center; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease; filter: drop-shadow(0 12px 12px rgba(36,50,47,.12)); }
.heroBrand:hover img { transform: rotateX(7deg) rotateY(-9deg) translateY(-8px) scale(1.04); filter: drop-shadow(16px 22px 14px rgba(36,50,47,.22)); }
.heroText { max-width: 720px; }
.heroText h1 { font-family: "Noto Serif KR", "Batang", "Malgun Gothic", serif; font-weight: 700; letter-spacing: -.05em; line-height: 1.3; }
.heroText .eyebrow { font-family: "Noto Serif KR", "Batang", "Malgun Gothic", serif; font-size: clamp(15px, 1.2vw, 18px); font-weight: 600; letter-spacing: -.05em; }

@media (min-width: 901px) {
  .hero {
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    row-gap: clamp(28px, 5vh, 56px);
    background-image:
      linear-gradient(90deg, rgba(251,247,238,.9) 0%, rgba(251,247,238,.62) 40%, rgba(251,247,238,.08) 78%),
      url("images/home-background-clean.jpg");
    background-position: center top, center clamp(60px, 6vh, 90px);
    background-size: cover, auto min(100%, 943px);
    background-repeat: no-repeat;
  }

  .heroBrand { position: relative; top: auto; left: auto; margin: 0; transform: none; }
  .heroInner { display: block; width: min(1360px, calc(100% - 48px)); padding: 0; }
  .heroText { width: min(560px, calc(100vw - 48px)); max-width: none; margin: 0 auto; text-align: center; }
}

.categoryTabs { display: flex; gap: 10px; flex-wrap: wrap; }
.categoryTab { min-height: 42px; border: 1px solid #cbbda9; border-radius: 999px; padding: 0 16px; background: var(--milk); color: var(--ink); font: inherit; font-weight: 900; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.categoryTab:hover { transform: translateY(-2px); box-shadow: 0 9px 18px rgba(36,50,47,.12); }
.categoryTab.active { border-color: var(--ink); background: var(--ink); color: var(--milk); }
.textLink { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 4px; background: var(--ink); color: var(--milk); font-weight: 900; }
.textLink:hover { background: #2f433e; box-shadow: 0 10px 18px rgba(36,50,47,.16); transform: translateY(-2px); }
.articleSection { background: #f5f2ea; }
#about .sectionMark,
#about h2 { font-family: "Noto Serif KR", "Batang", "Malgun Gothic", serif; letter-spacing: -.05em; }
#about .sectionMark { font-weight: 600; }
#about h2 { font-weight: 700; }
#inspection > .wrap { max-width: 1080px; }
#inspection .sectionHead { max-width: 720px; margin: 0 auto 28px; justify-items: center; text-align: center; }
#inspection .sectionMark,
#inspection h2 { font-family: "Noto Serif KR", "Batang", "Malgun Gothic", serif; letter-spacing: -.05em; }
#inspection .sectionMark { font-weight: 600; }
#inspection h2 { font-weight: 700; }
#inspection .categoryTabs { justify-content: center; }
#inspection .articleGrid { width: 100%; max-width: 1040px; margin: 0 auto; }
#treatment .sectionMark,
#treatment h2 { font-family: "Noto Serif KR", "Batang", "Malgun Gothic", serif; letter-spacing: -.05em; }
#treatment .sectionMark { font-weight: 600; }
#treatment h2 { font-weight: 700; }
#counselor .sectionMark,
#counselor h2 { font-family: "Noto Serif KR", "Batang", "Malgun Gothic", serif; letter-spacing: -.05em; }
#counselor .sectionMark { color: var(--milk); font-weight: 600; }
#counselor h2 { font-weight: 700; }
#interior .sectionMark,
#interior h2 { font-family: "Noto Serif KR", "Batang", "Malgun Gothic", serif; letter-spacing: -.05em; }
#interior .sectionMark { font-weight: 600; }
#interior h2 { font-weight: 700; }
#location .sectionMark,
#location h2 { font-family: "Noto Serif KR", "Batang", "Malgun Gothic", serif; letter-spacing: -.05em; }
#location .sectionMark { font-weight: 600; }
#location h2 { font-weight: 700; }
.categoryTabs { margin-bottom: 22px; }
.articleGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.articleCard { min-height: 190px; padding: 22px; border: 1px solid var(--line); background: var(--milk); transition: transform .2s ease, box-shadow .2s ease; }
.articleCard:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(36,50,47,.1); }
.articleCard.isHidden { display: none; }
.articleCard span { display: inline-block; margin-bottom: 18px; color: var(--clay); font-size: 13px; font-weight: 900; }
.articleCard b { display: block; margin-bottom: 12px; font-size: 21px; line-height: 1.35; }
.articleCard p { margin: 0; color: var(--muted); }

@media (max-width: 900px) {
  .heroBrand { display: none; }
  .articleGrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .articleGrid { grid-template-columns: 1fr; }
  .categoryTab { width: 100%; justify-content: center; border-radius: 6px; }
  .articleCard { min-height: auto; }
}