/* 소개 페이지는 앱의 색·서체·간격 토큰을 그대로 읽는다. */
body.about-page{
  padding-bottom:0;
  font-weight:400;
  line-height:1.7;
}
.about-page .about-header,
.about-page main,
.about-page footer{
  width:calc(100% - var(--sp-4) * 2);
  max-width:var(--w-content);
  margin:0 auto;
}
.about-page .about-header{padding:var(--sp-3) 0}
.about-page a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  min-width:44px;
  font-size:var(--fs-body);
  font-weight:500;
  text-underline-offset:var(--sp-1);
}
.about-page .about-brand{color:var(--text);font-weight:700;text-decoration:none}
.about-page a:focus-visible{outline:3px solid var(--primary-deep);outline-offset:var(--sp-1)}
.about-page section{padding:var(--sp-5) 0}
.about-page #intro{
  background-color:var(--brand-home-base);
  background-image:var(--brand-home-gradient);
  color:var(--surface);
  padding:var(--sp-5);
  border-radius:var(--r-lg);
}
.about-page h1{font-size:var(--fs-display);font-weight:700;line-height:1.4;margin:var(--sp-2) 0 var(--sp-4)}
.about-page h2{font-size:var(--fs-h2);font-weight:700;line-height:1.5;margin:0 0 var(--sp-4)}
.about-page p{margin:0 0 var(--sp-3)}
.about-page p:last-child{margin-bottom:0}
.about-page .about-eyebrow{font-size:var(--fs-meta);margin:0}
.about-page ul{margin:0;padding-left:var(--sp-5)}
.about-page ul li+li{margin-top:var(--sp-3)}
.about-page .about-note{font-size:var(--fs-meta);color:var(--text-sub);margin-top:var(--sp-4)}
.about-page #flow{border-top:1px solid var(--line-strong)}
.about-page .about-flow{display:grid;gap:var(--sp-5);list-style:none;margin:0;padding:0}
.about-page .about-flow li{min-width:0}
.about-page figure{margin:0}
.about-page figcaption{display:grid;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.about-page .about-step{font-weight:500;color:var(--primary-deep)}
.about-page img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.about-page #try{padding:var(--sp-5);border-radius:var(--r-lg);background:var(--surface)}
.about-page .about-cta{justify-content:center;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-btn);background:var(--primary);color:var(--surface);text-decoration:none;margin-top:var(--sp-2)}
.about-page .about-cta:hover{background:var(--primary-deep)}
.about-page .about-cta-intro{background:var(--surface);color:var(--primary-deep)}
.about-page .about-cta-intro:hover{background:var(--primary-soft)}
.about-page .about-cta-intro:focus-visible{outline-color:var(--surface)}
.about-page address{font-style:normal}
.about-page .about-mail{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-2)}
.about-page #contact nav{display:flex;flex-wrap:wrap;gap:0 var(--sp-5);margin-top:var(--sp-3)}
.about-page footer{border-top:1px solid var(--line-strong);padding:var(--sp-4) 0 var(--sp-5);font-size:var(--fs-meta);color:var(--text-sub)}
@media (min-width:600px){
  .about-page .about-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-page #intro{padding:var(--sp-6)}
  .about-page section{padding:var(--sp-6) 0}
  .about-page #try{padding:var(--sp-5)}
  .about-page figcaption{min-height:calc(var(--sp-6) + var(--sp-5) + var(--sp-2))}
}