/* ponytail: Freesentation CDN 미검증으로 폴백 사용, 실제 폰트 라이선스 확보 후 교체 */

:root{
  --c-ink:#292524;
  --c-bg:#FAFAF9;
  --c-accent:#DC2626;
  --c-line:#D6D3D1;
  --c-muted:#57534E;

  --font-heading:'Freesentation','Pretendard','Noto Sans KR',sans-serif;
  --font-body:'Pretendard','Noto Sans KR',sans-serif;

  --ratio:1.333;
  --fs-base:16px;
  --fs-sm:calc(var(--fs-base) / var(--ratio));
  --fs-md:calc(var(--fs-base) * var(--ratio));
  --fs-lg:calc(var(--fs-md) * var(--ratio));
  --fs-xl:calc(var(--fs-lg) * var(--ratio));
  --fs-xxl:calc(var(--fs-xl) * var(--ratio));

  --space-section:64px;
  --radius:0px;

  --max-w:1120px;
  --max-w-narrow:760px;
}

@media (min-width:1024px){
  :root{ --space-section:80px; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-display:swap;
  color:var(--c-ink);
  background:var(--c-bg);
  line-height:1.7;
  font-size:var(--fs-base);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3{
  font-family:var(--font-heading);
  font-display:swap;
  color:var(--c-ink);
  line-height:1.3;
  margin:0 0 0.6em;
}
p{ margin:0 0 1em; }
a{ color:var(--c-accent); }
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid var(--c-accent);
  outline-offset:2px;
}

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 20px;
}
.wrap-narrow{
  max-width:var(--max-w-narrow);
  margin:0 auto;
  padding:0 20px;
}

/* header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--c-bg);
  border-bottom:1px solid var(--c-line);
  height:68px;
}
.header-inner{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:var(--fs-md);
  letter-spacing:-0.01em;
}

.btn{
  display:inline-block;
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:700;
  font-family:var(--font-body);
  cursor:pointer;
  border:2px solid var(--c-ink);
  transition:background-color .15s ease, color .15s ease;
}
@media (prefers-reduced-motion:reduce){
  .btn{ transition:none; }
}
.btn-header{
  padding:9px 16px;
  font-size:var(--fs-sm);
  background:var(--c-ink);
  color:var(--c-bg);
  border-color:var(--c-ink);
}
.btn-header:hover{ background:var(--c-accent); border-color:var(--c-accent); }
.btn-primary{
  padding:14px 28px;
  font-size:var(--fs-md);
  background:var(--c-accent);
  color:var(--c-bg);
  border-color:var(--c-accent);
}
.btn-primary:hover{ background:var(--c-ink); border-color:var(--c-ink); }
.btn-large{ padding:16px 36px; font-size:var(--fs-lg); }

/* hero: 대칭 대조형 */
.hero{
  padding:48px 0;
  border-bottom:1px solid var(--c-line);
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  text-align:center;
}
.hero-side{
  border:1px solid var(--c-line);
  padding:20px;
}
.hero-side--a{ border-left:4px solid var(--c-ink); }
.hero-side--b{ border-left:4px solid var(--c-accent); }
.hero-label{
  display:inline-block;
  font-size:var(--fs-sm);
  color:var(--c-muted);
  font-weight:700;
  margin-bottom:6px;
}
.hero-side-title{
  font-family:var(--font-heading);
  font-size:var(--fs-lg);
  font-weight:700;
  margin-bottom:4px;
}
.hero-side-desc{
  font-size:var(--fs-sm);
  color:var(--c-muted);
  margin:0;
}
.hero-center h1{
  font-size:var(--fs-xxl);
  font-weight:800;
  letter-spacing:-0.02em;
}
.hero-summary{
  font-size:var(--fs-md);
  color:var(--c-muted);
  max-width:36em;
  margin-left:auto;
  margin-right:auto;
}

@media (min-width:1024px){
  .hero{ padding:64px 0; }
  .hero-grid{
    grid-template-columns:1fr 1.6fr 1fr;
    align-items:center;
    gap:32px;
    text-align:left;
  }
  .hero-side--a{ text-align:right; }
  .hero-side--a{ border-left:none; border-right:4px solid var(--c-ink); }
  .hero-center{ text-align:center; }
  .hero-summary{ margin-left:auto; margin-right:auto; }
}

/* sections */
.section{ padding:var(--space-section) 0; }
.section h2{
  font-size:var(--fs-xl);
  font-weight:800;
  margin-bottom:0.8em;
}
.section-lead{ color:var(--c-muted); }

.section-problem{ background:var(--c-bg); }
.section-core{ background:#F5F5F4; }
.section-core h2{
  padding-bottom:10px;
  border-bottom:3px solid var(--c-accent);
  display:inline-block;
}
.section-core h2 + p{ margin-top:1em; }
.section-core > .wrap-narrow > h2:not(:first-child){ margin-top:2em; }

/* diagram */
.svg-wrap{
  border:1px solid var(--c-line);
  padding:16px;
  overflow-x:auto;
  background:var(--c-bg);
}
.svg-wrap svg{
  width:100%;
  height:auto;
  min-width:640px;
}

/* table */
.table-scroll{
  overflow-x:auto;
  border:1px solid var(--c-line);
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:560px;
  font-size:var(--fs-sm);
}
caption{
  text-align:left;
  padding:12px 14px;
  font-weight:700;
  background:#F5F5F4;
  border-bottom:1px solid var(--c-line);
}
th,td{
  padding:12px 14px;
  border-bottom:1px solid var(--c-line);
  text-align:left;
  vertical-align:top;
}
thead th{
  background:var(--c-ink);
  color:var(--c-bg);
}
tbody tr:nth-child(even){ background:#F5F5F4; }

/* photos */
.photo-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}
.photo-card{
  margin:0;
  max-width:420px;
  width:100%;
  text-align:center;
}
.photo-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border:1px solid var(--c-line);
}
.photo-card figcaption{
  font-size:var(--fs-sm);
  color:var(--c-muted);
  margin-top:8px;
}

@media (min-width:1024px){
  .photo-grid{
    flex-direction:row;
    justify-content:center;
    align-items:flex-start;
  }
}

/* faq */
.faq-item{
  border-bottom:1px solid var(--c-line);
  padding:18px 0;
}
.faq-item:first-of-type{ border-top:1px solid var(--c-line); }
.faq-item h3{
  font-size:var(--fs-md);
  font-weight:700;
}
.faq-item p{ margin:0; color:var(--c-muted); }

/* cta */
.cta-section{
  background:var(--c-ink);
  color:var(--c-bg);
  text-align:center;
}
.cta-title{
  font-family:var(--font-heading);
  font-size:var(--fs-xl);
  font-weight:800;
  margin-bottom:0.3em;
}
.cta-desc{ color:#D6D3D1; margin-bottom:1.4em; }
.cta-section .btn-primary{ border-color:var(--c-accent); }

/* footer */
.site-footer{
  padding:40px 0;
  border-top:1px solid var(--c-line);
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px 20px;
  margin-bottom:16px;
  font-size:var(--fs-sm);
}
.footer-links a{ color:var(--c-ink); text-decoration:underline; }
.footer-biz{
  font-size:var(--fs-sm);
  color:var(--c-muted);
  margin:0;
}

@media (min-width:640px){
  .wrap,.wrap-narrow{ padding:0 32px; }
}