/* cctv-removal — Hue 110 / Paper(P) strategy, serif heading + sans body */
:root{
  --h: 110;
  --bg:      hsl(var(--h) 12% 95%);
  --surface: hsl(var(--h) 18% 99%);
  --ink:     hsl(var(--h) 28% 13%);
  --muted:   hsl(var(--h) 10% 40%);
  --accent:  hsl(var(--h) 60% 32%);
  --accent-ink: hsl(var(--h) 60% 22%);
  --line:    hsl(var(--h) 14% 84%);
  --r: 4px;
  --font-head: 'Noto Serif KR', 'Noto Serif CJK KR', 'Nanum Myeongjo', serif;
  --font-body: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-head);
  color:var(--ink);
  line-height:1.35;
  margin:0 0 .6em;
}
p{ margin:0 0 1em; }
a{ color:var(--accent-ink); }
img{ max-width:100%; }

:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--surface); color:var(--ink); padding:.6em 1em;
  border:1px solid var(--line); border-radius:var(--r); z-index:200;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------- Header: 좌정렬 워드마크 ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--surface);
  position:sticky; top:0; z-index:100;
}
.header-inner{
  max-width:1100px; margin:0 auto;
  padding:.9rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
}
.wordmark{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.01em;
  text-align:left;
  color:var(--ink);
  border-left:4px solid var(--accent);
  padding-left:.6rem;
}
.header-tel{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.9rem; font-weight:600;
  text-decoration:none;
  color:var(--accent-ink);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.45rem .95rem;
  white-space:nowrap;
}
.header-tel svg{ width:16px; height:16px; stroke:currentColor; fill:none; }
.header-tel:hover{ border-color:var(--accent); }

main{ max-width:1100px; margin:0 auto; padding:0 1.25rem; }

/* ---------- Hero: 좌우 비대칭 2단 ---------- */
.hero{ padding:3.2rem 0 2.4rem; }
.hero__inner{
  display:grid;
  grid-template-columns: 1.7fr 1fr;
  gap:2.5rem;
  align-items:end;
}
.hero__main h1{
  font-size:clamp(1.7rem, 3.4vw, 2.5rem);
  margin-bottom:.5rem;
}
.hero__eyebrow{
  display:inline-block;
  font-size:.82rem; font-weight:600;
  color:var(--accent-ink);
  background:hsl(var(--h) 40% 90%);
  border-radius:999px;
  padding:.3rem .8rem;
  margin-bottom:.9rem;
}
.hero__lead{
  color:var(--muted);
  font-size:1.02rem;
  max-width:46ch;
}
.hero__actions{ display:flex; gap:.7rem; margin-top:1.3rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.75rem 1.3rem;
  border-radius:var(--r);
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  border:1px solid transparent;
}
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-ink); }
.btn--ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ background:var(--surface); }

.hero__side{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.4rem 1.4rem;
  align-self:stretch;
}
.hero__side h2{
  font-size:.95rem;
  font-family:var(--font-body);
  font-weight:700;
  color:var(--muted);
  margin-bottom:.8rem;
}
.hero__points{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.hero__points li{
  padding-left:1.4rem;
  position:relative;
  font-size:.93rem;
}
.hero__points li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:8px; height:8px;
  background:var(--accent);
  border-radius:2px;
}

/* ---------- Sections ---------- */
.section{ padding:2.4rem 0; border-top:1px solid var(--line); }
.section h2{
  font-size:1.4rem;
  margin-bottom:1rem;
}
.section h2 .idx{
  display:inline-block;
  color:var(--accent-ink);
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:700;
  margin-right:.5rem;
  border:1px solid var(--accent);
  border-radius:999px;
  width:1.6em; height:1.6em;
  line-height:1.5em;
  text-align:center;
}

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.check-table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.check-table th, .check-table td{
  text-align:left;
  padding:.85rem 1rem;
  border-bottom:1px solid var(--line);
  font-size:.93rem;
  vertical-align:top;
}
.check-table th{
  background:hsl(var(--h) 20% 93%);
  width:34%;
  font-weight:700;
}
.check-table tr:last-child th, .check-table tr:last-child td{ border-bottom:none; }

.steps{
  list-style:none;
  counter-reset:step;
  margin:0; padding:0;
  display:grid; gap:.9rem;
}
.steps li{
  counter-increment:step;
  position:relative;
  padding:1rem 1.1rem 1rem 3.1rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  font-size:.95rem;
}
.steps li::before{
  content:counter(step);
  position:absolute; left:1rem; top:1rem;
  width:1.6em; height:1.6em;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  text-align:center;
  line-height:1.6em;
}

.notice-box{
  border-left:4px solid var(--accent);
  background:var(--surface);
  padding:1.1rem 1.3rem;
  border-radius:0 var(--r) var(--r) 0;
  font-size:.95rem;
}

.flow-diagram{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.2rem;
}
.flow-diagram svg{ width:100%; height:auto; display:block; }

/* ---------- Shot images ---------- */
.shot{ margin: 3rem auto; max-width: 1000px; }
.shot__row{ display:flex; justify-content:center; align-items:stretch; gap:1rem; flex-wrap:nowrap; }
.shot__row img{ flex:1 1 0; min-width:0; width:100%; height:auto; display:block; object-fit:cover; border-radius: var(--r, 6px); }
.shot figcaption{ text-align:center; color:var(--muted); font-size:.85rem; margin-top:.6rem; }
@media (max-width: 640px){ .shot__row{ flex-wrap:wrap; } .shot__row img{ flex:1 1 100%; } }

/* ---------- CTA border box ---------- */
.cta-box{
  margin:2.6rem 0;
  border:2px solid var(--accent);
  border-radius:var(--r);
  padding:1.8rem 1.6rem;
  background:var(--surface);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
}
.cta-box__text h2{ font-size:1.15rem; margin-bottom:.3rem; }
.cta-box__text p{ margin:0; color:var(--muted); font-size:.92rem; }
.cta-box__actions{ display:flex; gap:.7rem; flex-wrap:wrap; }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:.8rem; }
.faq-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.1rem 1.2rem;
}
.faq-item h3{
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:700;
  margin:0 0 .5rem;
  display:flex; gap:.5rem;
}
.faq-item h3 .q-mark{
  flex:none;
  color:var(--accent-ink);
  font-family:var(--font-head);
}
.faq-item p{
  margin:0;
  color:var(--muted);
  font-size:.93rem;
  padding-left:1.4rem;
}

/* ---------- Footer: 2단 좌우 ---------- */
.ftr{
  margin-top:3rem;
  background:hsl(var(--h) 22% 16%);
  color:hsl(var(--h) 10% 88%);
  padding:2.4rem 1.25rem;
}
.ftr__inner{
  max-width:1100px; margin:0 auto;
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:2rem;
  align-items:start;
}
.ftr__biz{
  margin:0;
  font-size:.9rem;
  line-height:1.9;
}
.ftr__biz a{ color:hsl(var(--h) 40% 78%); }
.ftr__nav{
  display:flex; flex-direction:column; gap:.6rem;
  font-size:.92rem;
  justify-self:end;
  text-align:right;
}
.ftr__nav a{ color:hsl(var(--h) 10% 88%); text-decoration:none; }
.ftr__nav a:hover{ text-decoration:underline; }
.ftr__copy{
  grid-column:1 / -1;
  margin:1.2rem 0 0;
  padding-top:1.2rem;
  border-top:1px solid hsl(var(--h) 20% 28%);
  font-size:.8rem;
  color:hsl(var(--h) 8% 65%);
}

@media (max-width: 800px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__side{ order:2; }
  .ftr__inner{ grid-template-columns:1fr; }
  .ftr__nav{ justify-self:start; text-align:left; }
}

@media (max-width: 480px){
  .header-inner{ flex-wrap:wrap; }
  .cta-box{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}