/* 시안 J: Paper Stack 테마 오버라이드 — style.css 뒤에 로드, :root 변수만 교체해 대부분 컴포넌트가 자동으로 새 팔레트를 따르게 함 */
:root {
  --white: #fffdf8;
  --silver-50: #f6f0e4;
  --silver-100: #f2e9dc;
  --silver-200: #e3d7c2;
  --silver-300: #cbb99d;
  --steel: #6b7a4f;
  --steel-dark: #4f5c39;
  --steel-light: #93a373;
  --ink: #3a3226;
  --muted: #746b58;
  --sage: #a3623c;
  --radius: 3px;
}

body { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
h1, h2, h3, .logo-text { font-family: "Gowun Batang", serif; font-weight: 700; letter-spacing: -0.01em; }
.hero-tag, .section-eyebrow, .step-num, .ba-tag { font-family: "IBM Plex Mono", monospace; }

.logo-mark { border-top-color: var(--steel); }
.logo-mark::before, .logo-mark::after { background: var(--silver-300); }

.hero { background: linear-gradient(180deg, var(--silver-100), var(--white)); }
.hero-photo, .d-photo-wrap {
  box-shadow: 0 14px 30px rgba(58,50,38,.18); border-radius: 2px; overflow: visible; position: relative;
  max-width: 940px; margin-left: auto; margin-right: auto;
}
.hero-photo img, .d-photo-wrap img { border-radius: 2px; }
.hero-photo::before {
  content: ""; position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(-1.5deg);
  width: 92px; height: 30px; z-index: 3;
  background: repeating-linear-gradient(100deg, rgba(107,122,79,.9) 0 3px, rgba(93,107,68,.9) 3px 6px);
  box-shadow: 0 3px 6px rgba(58,50,38,.3);
  opacity: .88;
}

/* 전후비교 사진도 종이 카드처럼 살짝 기울여 테이프로 고정한 느낌 */
.ba-box { padding-top: 18px; max-width: 560px; }
.ba-grid-single { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
.ba-photo {
  overflow: visible; box-shadow: 0 8px 18px rgba(58,50,38,.18); border-radius: 2px; transition: transform .18s;
  margin: 0 14px;
}
.ba-photo img { border-radius: 2px; }
.ba-photo::before {
  content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(2deg);
  width: 62px; height: 22px; z-index: 3;
  background: repeating-linear-gradient(100deg, rgba(107,122,79,.9) 0 3px, rgba(93,107,68,.9) 3px 6px);
  box-shadow: 0 3px 6px rgba(58,50,38,.3);
  opacity: .88;
}
.ba-box:nth-child(odd) .ba-photo { transform: rotate(-1.3deg); }
.ba-box:nth-child(even) .ba-photo { transform: rotate(1.3deg); }
.ba-photo:hover { transform: rotate(0deg) translateY(-2px); }

/* 서비스 카드 / 관련 서비스 카드 — 살짝 기울어진 종이 카드 + 테이프 포인트 */
.shelf-grid { border-top: none; gap: 22px; display: grid; grid-template-columns: repeat(5, 1fr); }
.card-row { grid-template-columns: repeat(5, 1fr); gap: 22px; }
@media (max-width: 900px) { .card-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .card-row { grid-template-columns: 1fr; } }
.shelf-item, .proj-card {
  border: none !important; background: var(--white); border-radius: 2px;
  box-shadow: 0 6px 16px rgba(58,50,38,.16); position: relative; padding-bottom: 4px; padding-top: 6px;
  transition: transform .18s;
}
.shelf-item::before, .proj-card::before {
  content: ""; position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 58px; height: 20px; z-index: 2;
  background: repeating-linear-gradient(100deg, rgba(107,122,79,.9) 0 3px, rgba(93,107,68,.9) 3px 6px);
  box-shadow: 0 3px 6px rgba(58,50,38,.3);
  opacity: .88;
}
.shelf-item:nth-child(odd), .proj-card:nth-child(odd) { transform: rotate(-1.4deg); }
.shelf-item:nth-child(even), .proj-card:nth-child(even) { transform: rotate(1.4deg); }
.shelf-item:hover, .proj-card:hover { transform: rotate(0deg) translateY(-2px); }
.shelf-photo, .proj-photo { margin: 6px 16px 0; width: calc(100% - 32px); }
.shelf-body { padding: 10px 12px 14px; text-align: center; }
.shelf-body .shelf-go { display: none; }
.proj-title { padding: 10px 12px 14px; font-family: "Gowun Batang", serif; font-weight: 700; text-align: center; }
.ba-caption { text-align: center; }
.hl { color: var(--steel); font-weight: 700; }

/* 현재 페이지 카드 — 더 진하고 두껍고 살짝 크게 */
.proj-card-self {
  transform: rotate(0deg) scale(1.06) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: 0 10px 22px rgba(58,50,38,.26);
  z-index: 3;
}
.proj-card-self::before {
  width: 68px; height: 22px; transform: translateX(-50%) rotate(0deg);
  background: repeating-linear-gradient(100deg, rgba(58,50,38,.92) 0 3px, rgba(40,34,26,.92) 3px 6px);
}
.proj-card-self .proj-title { font-weight: 800; }
.proj-card-self .self-tag {
  display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: .68rem;
  color: var(--white); background: var(--ink); padding: 2px 8px; border-radius: 2px; margin: 10px 12px 0;
}

.icon-card-grid { background: var(--silver-200); border-color: var(--silver-200); }
.icon-card { background: var(--white); }
.icon-dot { background: var(--steel); }
.step-grid { border-color: var(--silver-200); }
.step-card { border-color: var(--silver-200); }
.step-num { color: var(--steel); }
.faq-item .q::before { color: var(--steel); }
.faq-item .a::before { color: var(--sage); }
.btn-primary, .btn-light, .nav-cta, .float-call, .mobile-call-bar { background: var(--steel) !important; color: var(--white) !important; border-radius: 2px; }
.cta-final { background: var(--steel-dark); }
.cta-final p { color: #e5e2d5; }
.site-footer { background: var(--silver-100); border-color: var(--silver-200); }

@media (max-width: 720px) {
  .shelf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .shelf-grid { grid-template-columns: 1fr; }
}