/* =========================================================
   1마침 (machim.net) 공통 스타일시트
   - 색상 변수, 기본 리셋, 버튼/태그/헤더/푸터/애니메이션처럼
     여러 페이지가 똑같이 쓰는 부분만 모아둔 파일입니다.
   - 페이지마다 다른 레이아웃/섹션 스타일은 각 파일의 <style> 안에 그대로 둡니다.
   - 적용 대상: index.html, contact.html, check.html, admin.html,
     detail-price-monitoring.html, detail-webmaking.html, detail-writer-profile.html,
     privacy.html, terms.html (같은 색상 체계를 쓰는 페이지들)
   ========================================================= */

:root{
  --paper:#F1EEE6;
  --paper-dark:#E8E3D6;
  --card:#FBFAF6;
  --ink:#1B4332;
  --ink-soft:#4C5A68;
  --ink-faint:#8B9199;
  --brick:#D97757;
  --brick-dark:#B85F42;
  --gold:#C79A45;
  --line:#DAD3C3;
  --green:#5B7A5E;
  --radius:18px;
}

/* ----- 리셋 & 기본 타이포 ----- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Pretendard","Noto Sans KR",sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.75;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:"Pretendard","Noto Sans KR",sans-serif;font-weight:800;letter-spacing:-0.01em;}

/* ----- 레이아웃 ----- */
.container{width:min(1120px, calc(100% - 48px));margin:0 auto;}
.section{padding:104px 0;}
.section-tight{padding:64px 0;}

/* ----- 태그(뱃지) ----- */
.tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border:1px solid var(--line);border-radius:999px;
  font-size:13px;color:var(--ink-soft);background:var(--card);
}
.tag .dot{width:6px;height:6px;border-radius:50%;background:var(--brick);}

/* ----- 버튼 ----- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 26px;border-radius:10px;font-size:15.5px;font-weight:600;
  transition:.2s ease;
}
.btn-primary{background:var(--brick);color:#fff;box-shadow:0 10px 24px rgba(217,119,87,.28);}
.btn-primary:hover{background:var(--brick-dark);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--paper);}
.btn-ghost{color:var(--ink-soft);border-bottom:1px solid var(--ink-faint);border-radius:0;padding:4px 0;}

/* ----- 공통 헤더 (하위 페이지: 로고 + 뒤로가기) ----- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(241,238,230,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{width:min(1120px, calc(100% - 48px));margin:0 auto;height:72px;display:flex;align-items:center;justify-content:space-between;}
.logo{font-family:"Pretendard","Noto Sans KR",sans-serif;font-weight:800;font-size:22px;display:flex;align-items:baseline;gap:2px;}
.logo .mark{color:var(--brick);}
.back-link{font-size:14px;color:var(--ink-soft);}

/* ----- 스크롤 페이드인 ----- */
.fade{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.fade.visible{opacity:1;transform:translateY(0);}

/* ----- FAQ 아코디언 ----- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;padding:20px 4px;display:flex;justify-content:space-between;
  align-items:center;font-size:15.5px;font-weight:600;
}
.faq-q .plus{font-size:20px;color:var(--brick);transition:.2s ease;font-weight:400;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 4px 20px;color:var(--ink-soft);font-size:14.5px;max-width:640px;}

/* ----- 푸터(공통 정보 라인) ----- */
footer{background:var(--paper-dark);border-top:1px solid var(--line);padding:48px 0 30px;}
.footer-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:28px;}
.footer-logo{font-family:"Pretendard","Noto Sans KR",sans-serif;font-weight:800;font-size:19px;margin-bottom:10px;}
.footer-links{display:flex;gap:20px;font-size:13.5px;color:var(--ink-soft);flex-wrap:wrap;}
.footer-fine{font-size:12.3px;color:var(--ink-faint);line-height:1.9;border-top:1px solid var(--line);padding-top:20px;}