/* =========================================================
   루모스논문 (theme/21) — 보조 CSS
   본문은 Tailwind utility 중심. 여기엔 컨테이너/풀블리드/
   배경 그라데이션/슬라이드 보정/CDN 한계 보정만 둔다.
   ========================================================= */

/* 컨테이너 — 원본 max-width 1040px, 좌우 24px */
.wrap{
  width:100%;
  max-width:1040px;
  margin-inline:auto;
  padding-inline:24px;
}
@media (max-width:360px){ .wrap{ padding-inline:18px; } }

/* 섹션 공통 상하 여백 */
.sec{ padding-block:64px; }
@media (min-width:768px){ .sec{ padding-block:84px; } }

/* 섹션 타이틀 (26px / 700 / -0.52px) */
.sec-title{
  font-size:24px; font-weight:700; line-height:1.45;
  letter-spacing:-0.52px;
}
@media (min-width:768px){ .sec-title{ font-size:26px; } }

/* 타이틀 하단 골드 라인 */
.sec-rule{
  display:block; width:40px; height:3px; margin:18px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg,#C9A05A,#E8C886);
}

/* =========== Hero 배경 (마룬 그라데이션 + 서재 이미지) =========== */
.hero-bg{
  background:
    linear-gradient(180deg, rgba(43,12,18,0.82) 0%, rgba(74,14,27,0.86) 45%, rgba(107,21,39,0.9) 100%),
    url('https://images.unsplash.com/photo-1507842217343-583bb7270b66?w=1600&q=80');
  background-size:cover;
  background-position:center;
}

/* 골드 그라데이션 텍스트 (마스터키) */
.text-gold{
  background:linear-gradient(90deg,#E8C886 0%,#D4A95F 50%,#C9A05A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* =========== Contact CTA 배경 (마룬 + 이미지) =========== */
.cta-bg{
  background:
    linear-gradient(180deg, rgba(74,14,27,0.92) 0%, rgba(107,21,39,0.88) 100%),
    url('https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=1600&q=80');
  background-size:cover;
  background-position:center;
}

/* =========================================================
   버튼 / 컴포넌트 (utility로 재사용)
   ========================================================= */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#6B1527; color:#fff; font-weight:700;
  border-radius:8px; line-height:1;
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn-primary:hover{ background:#561019; }
.btn-primary:active{ transform:translateY(1px); }

.btn-kakao{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#FEE500; color:#3C1E1E; font-weight:700; font-size:15px;
  padding:14px 36px; border-radius:8px; line-height:1;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
  transition:filter .2s ease, transform .15s ease;
}
.btn-kakao:hover{ filter:brightness(.96); }
.btn-kakao:active{ transform:translateY(1px); }

/* nav hover underline */
.nav-link{ position:relative; transition:color .2s ease; }
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:#6B1527; transform:scaleX(0); transform-origin:center; transition:transform .25s ease;
}
.nav-link:hover{ color:#6B1527; }
.nav-link:hover::after{ transform:scaleX(1); }

/* 헤더 스크롤 시 그림자 */
#siteHeader.scrolled{ box-shadow:0 4px 20px rgba(0,0,0,.06); }

/* =========== Pain 카드 =========== */
.pain-card{
  background:#fff; border-radius:16px; padding:40px 28px; text-align:center;
  box-shadow:0 2px 14px rgba(24,24,32,.04);
  border:1px solid rgba(24,24,32,.04);
  transition:transform .25s ease, box-shadow .25s ease;
}
.pain-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(24,24,32,.09); }
.pain-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:rgba(107,21,39,.08); color:#6B1527; margin-bottom:18px;
}
.pain-title{ font-size:17px; font-weight:700; color:#181820; }
.pain-desc{ margin-top:10px; font-size:13.5px; line-height:1.7; color:#8A8A96; }

/* =========== About feature 카드 (다크) =========== */
.feat-card{
  background:#21212B; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  transition:transform .25s ease, border-color .25s ease;
}
.feat-card:hover{ transform:translateY(-4px); border-color:rgba(212,169,95,.4); }
.feat-img{
  height:180px; background-size:cover; background-position:center;
  filter:grayscale(.15) brightness(.85);
}

/* =========== Process step 번호 원 =========== */
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:#fff; border:1.5px solid #6B1527; color:#6B1527;
  font-size:18px; font-weight:700;
  font-family:'Cormorant Garamond','Playfair Display',serif;
  position:relative; z-index:1;
}

/* =========== FAQ 아코디언 =========== */
.faq-item{ }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 4px; text-align:left;
  font-size:15px; font-weight:600; color:#181820; cursor:pointer;
}
.faq-ico{ color:#9CA3AF; transition:transform .3s ease; flex-shrink:0; }
.faq-item.open .faq-ico{ transform:rotate(180deg); color:#6B1527; }
.faq-a{
  overflow:hidden; max-height:0; transition:max-height .35s ease;
}
.faq-a p{
  padding:0 4px 22px; font-size:14px; line-height:1.8; color:#6B7280;
}

/* =========== Floating / Top 버튼 =========== */
.float-btn{
  width:48px; height:48px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .2s ease, opacity .3s ease, box-shadow .2s ease;
}
.float-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.24); }

/* =========== 모달 폼 =========== */
.form-label{ display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:7px; }
.form-input{
  width:100%; border:1px solid #E2E2E8; border-radius:8px;
  padding:12px 14px; font-size:14px; color:#181820; background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-input::placeholder{ color:#B6B6C0; }
.form-input:focus{
  outline:none; border-color:#6B1527; box-shadow:0 0 0 3px rgba(107,21,39,.12);
}

/* =========== 진입 팝업 비주얼 헤더 =========== */
.popup-hero{
  background:
    linear-gradient(160deg, rgba(43,12,18,0.86) 0%, rgba(74,14,27,0.82) 50%, rgba(107,21,39,0.86) 100%),
    url('https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=800&q=80');
  background-size:cover;
  background-position:center;
}

/* 활성 모달/메뉴 상태 (script.js에서 토글) */
.is-open{ display:flex !important; }
.is-open-block{ display:block !important; }

/* CDN grid 한계 보정: 모든 grid 자식 min-width 0 */
[class*="grid-cols"] > *{ min-width:0; }

/* body 스크롤 잠금 */
body.no-scroll{ overflow:hidden; }