/* ==========================================================
   북스캔 (예시) - 정적 호스팅 비교용 사이트 스타일
   Cloudflare Pages 등 정적 웹 호스팅에 그대로 올릴 수 있습니다.
   ========================================================== */

:root{
  --navy:#1e3a8a;
  --navy-deep:#152a63;
  --amber:#d9861f;
  --paper:#f4f6f8;
  --ink:#15202e;
  --ink-soft:#4c5a6b;
  --line:#e0e5eb;
  --good:#2c7a57;
  --danger-bg:#f6ddd6;
  --danger-line:#e6b6a9;
  --danger-ink:#8f2e1c;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",Roboto,sans-serif;
  line-height:1.6;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
svg{display:block;}

/* ---------- 헤더 / 내비게이션 ---------- */
.site-header{
  background:var(--navy-deep);
  color:#eaf0f6;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  max-width:1040px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:16px;
  color:#eaf0f6;
}
.brand svg{width:20px;height:20px;color:var(--amber);}
.site-nav{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}
.site-nav a{
  font-size:13.5px;
  font-weight:600;
  color:#c4d2e0;
  padding:8px 12px;
  border-radius:8px;
  transition:background .15s ease,color .15s ease;
}
.site-nav a:hover{background:rgba(255,255,255,.08);color:#fff;}
.site-nav a.active{background:var(--amber);color:#3a2100;}
.site-nav a.pending{opacity:.55;cursor:default;}

/* ---------- 히어로 ---------- */
.hero{
  background:var(--navy-deep);
  color:#eaf0f6;
  padding:64px 20px 52px;
  text-align:center;
  border-bottom:3px solid var(--amber);
}
.hero h1{
  font-size:clamp(26px,5vw,38px);
  font-weight:800;
  margin:0 0 12px;
  letter-spacing:-.01em;
}
.hero p{
  font-size:15.5px;
  color:#b9c8db;
  margin:0;
  max-width:46ch;
  margin:0 auto;
}

/* ---------- 페이지 공통 헤드(FAQ/오시는 길/이용안내) ---------- */
.page-head{
  background:var(--navy-deep);
  color:#eaf0f6;
  padding:44px 20px 36px;
  text-align:center;
  border-bottom:3px solid var(--amber);
}
.page-head h1{
  font-size:clamp(22px,4.4vw,30px);
  font-weight:800;
  margin:0 0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.page-head h1 svg{width:22px;height:22px;color:var(--amber);}
.page-head p{font-size:14.5px;color:#b9c8db;margin:0;}

/* ---------- 컨테이너 ---------- */
.container{max-width:880px;margin:0 auto;padding:0 20px;}
.container-narrow{max-width:760px;margin:0 auto;padding:0 20px;}

/* ---------- 메뉴 카드(홈) ---------- */
.card-grid{
  margin-top:-28px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  padding-bottom:8px;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 20px;
  box-shadow:0 2px 10px rgba(21,32,46,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(21,32,46,.1);}
.card .card-icon{
  width:40px;height:40px;border-radius:10px;
  background:#eef2f8;color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.card .card-icon svg{width:21px;height:21px;}
.card h3{
  font-size:16px;font-weight:700;margin:0 0 5px;
  color:var(--navy-deep);
  display:flex;align-items:center;gap:6px;
}
.card h3 svg{width:14px;height:14px;color:var(--ink-soft);}
.card p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.5;}
.card.pending{opacity:.6;}

/* ---------- 카카오톡 버튼 ---------- */
.kakao-cta{margin:24px 0 0;}
.kakao-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#fee500;color:#3c1e1e;font-weight:700;font-size:15px;
  padding:15px;border-radius:12px;
}
.kakao-btn svg{width:19px;height:19px;}

/* ---------- 섹션 여백 ---------- */
.section{padding:36px 0;}

/* ---------- FAQ ---------- */
.faq-group{margin-bottom:24px;}
.faq-group h2{
  font-size:13px;color:var(--amber);font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;margin:0 0 12px;
}
details.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  margin-bottom:9px;overflow:hidden;
}
details.faq-item summary{
  list-style:none;cursor:pointer;padding:15px 18px;
  font-size:14.5px;font-weight:600;color:var(--navy-deep);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary svg{width:16px;height:16px;color:var(--ink-soft);flex:none;transition:transform .15s ease;}
details.faq-item[open] summary svg{transform:rotate(180deg);}
.faq-body{padding:0 18px 18px;font-size:14px;color:var(--ink-soft);line-height:1.65;}
.faq-body ol,.faq-body ul{margin:8px 0 0;padding-left:19px;}

/* ---------- 오시는 길 ---------- */
.info-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px;margin-bottom:16px;
}
.info-card h3{
  display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;
  color:var(--navy-deep);margin:0 0 9px;
}
.info-card h3 svg{width:17px;height:17px;color:var(--navy);}
.info-card p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.65;}
.notice{
  font-size:13px;color:var(--danger-ink);background:var(--danger-bg);
  border:1px solid var(--danger-line);border-radius:10px;
  padding:12px 16px;margin:12px 0 18px;
}
.photo-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;margin-bottom:18px;
}
.photo{
  border-radius:12px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3;background:#eef2f8;
}
.photo img{width:100%;height:100%;object-fit:cover;}
.map-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--navy);color:#fff;font-weight:700;font-size:14.5px;
  padding:14px;border-radius:12px;
}
.map-btn svg{width:18px;height:18px;}

/* ---------- 이용 안내 ---------- */
.flow{display:flex;flex-direction:column;gap:12px;}
.flow-item{
  display:flex;gap:16px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;align-items:flex-start;
}
.flow-num{
  flex:none;width:30px;height:30px;border-radius:9px;
  background:var(--navy);color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.flow-item h4{margin:0 0 5px;font-size:15px;font-weight:700;color:var(--navy-deep);}
.flow-item p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.55;}

/* ---------- 푸터 ---------- */
.site-footer{
  text-align:center;font-size:12.5px;color:var(--ink-soft);
  padding:30px 16px 40px;border-top:1px solid var(--line);margin-top:20px;
}