/* 안내 페이지(소개·개인정보처리방침·이용약관·문의·프로그램 안내) 공통 스타일 */
:root {
  --bg: #ffffff; --soft: #f6f7f9; --text: #16181d; --muted: #6b7280; --faint: #9ca3af; --line: #eceef2;
  --accent: #f47b20; --accent-soft: #fff3ea;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); line-height: 1.75;
  font-family: "Noto Sans KR", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.site-header { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 10; }
.site-header .inner { max-width: 880px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; text-decoration: none; letter-spacing: -.02em; }
.brand i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.site-nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.site-nav a { text-decoration: none; color: var(--muted); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }
.site-nav .map-link { color: #fff; background: var(--accent); padding: 4px 12px; border-radius: 99px; }
.site-nav .map-link:hover { color: #fff; opacity: .9; }

main { max-width: 880px; margin: 0 auto; padding: 36px 20px 64px; }
.kicker { font-size: 13px; font-weight: 500; color: var(--accent); margin: 0 0 6px; }
h1 { font-size: 30px; line-height: 1.35; margin: 0 0 12px; letter-spacing: -.02em; }
.lede { font-size: 17px; color: var(--muted); margin: 0 0 28px; }
h2 { font-size: 21px; margin: 40px 0 10px; letter-spacing: -.01em; }
h3 { font-size: 17px; margin: 26px 0 6px; }
p, li { font-size: 15.5px; }
ul, ol { padding-left: 22px; }
.meta { font-size: 13px; color: var(--faint); }
.note { background: var(--soft); border-radius: 12px; padding: 16px 18px; font-size: 14.5px; }
.note p { margin: 0; font-size: 14.5px; }

table { width: 100%; border-collapse: collapse; margin: 12px 0 4px; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 500; color: var(--muted); background: var(--soft); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.card { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 18px; text-decoration: none; transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 6px; }
.card strong { font-size: 16px; }
.card p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.card .n { font-size: 13px; color: var(--accent); font-weight: 500; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 99px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 500; font-size: 15px; }
.btn:hover { opacity: .92; }
.btn.ghost { background: var(--soft); color: var(--text); }

.stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 8px; }
.stat { background: var(--soft); border-radius: 12px; padding: 12px 16px; min-width: 120px; }
.stat b { display: block; font-size: 22px; color: var(--accent); }
.stat span { font-size: 13px; color: var(--muted); }

.region-block { margin-top: 26px; }
.region-block h3 { display: flex; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--text); padding-bottom: 6px; }
.region-block h3 small { font-size: 13px; font-weight: 400; color: var(--faint); }
.place-list { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 28px; }
.place-list li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; }
.place-list a { text-decoration: none; font-weight: 500; }
.place-list a:hover { color: var(--accent); }
.place-list span { display: block; font-size: 12.5px; color: var(--faint); }

.contact-form { display: grid; gap: 14px; max-width: 560px; margin: 16px 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; }
.contact-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; min-width: 0; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-width: 0; }
.contact-form small { font-weight: 400; color: var(--faint); }
.contact-form input, .contact-form select, .contact-form textarea {
  font: inherit; font-size: 15px; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); color: var(--text);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: #fff; }
.contact-form .btn { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }

.site-footer { border-top: 1px solid var(--line); background: var(--soft); }
.site-footer .inner { max-width: 880px; margin: 0 auto; padding: 24px 20px 32px; font-size: 13px; color: var(--muted); }
.site-footer nav { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.site-footer nav a { text-decoration: none; color: var(--text); }
.site-footer nav a:hover { color: var(--accent); }
.site-footer p { margin: 2px 0; font-size: 13px; }

@media (max-width: 640px) {
  h1 { font-size: 25px; }
  .lede { font-size: 16px; }
  main { padding-top: 26px; }
  .place-list { columns: 1; }
  .contact-form { padding: 14px; }
  .site-header .inner { gap: 10px; }
  .site-nav { gap: 12px; font-size: 13.5px; }
}