/* ══════════════════════════════════════════════════════
 * about.php 전용 스타일
 * /css/page-about.css
 * ※ 원본 인라인 규칙 그대로 이관 (시각 동일성 우선)
 * ══════════════════════════════════════════════════════ */

/* 히어로 */
.about-hero{background:var(--ink);padding:/*calc(var(--nav-h)+80px)*/ 80px 80px;text-align:center;position:relative;overflow:hidden;margin:70px auto;}
.about-hero::before{content:'';position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(196,105,74,.12) 0%,transparent 70%);pointer-events:none;}
.ah-tag{display:inline-block;padding:5px 16px;border-radius:999px;background:rgba(196,105,74,.15);color:var(--terracotta);font-size:var(--fs-12);font-weight:600;margin-bottom:20px;letter-spacing:.5px;}
.ah-h1{font-family:'DM Serif Display',serif;font-size:clamp(32px,5vw,56px);color:white;line-height:1.15;margin-bottom:16px;}
.ah-h1 em{color:var(--terracotta);font-style:italic;}
.ah-sub{font-size:var(--fs-16);color:rgba(255,255,255,.5);max-width:560px;margin:0 auto;line-height:1.75;font-weight:300;}

/* 섹션 공통 */
.about-section{max-width:1080px;margin:0 auto;padding:80px 40px;}
.as-label{display:inline-block;padding:4px 12px;border-radius:999px;font-size:var(--fs-11);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;}
.as-h2{font-size:clamp(26px,3.5vw,42px);line-height:1.15;margin-bottom:14px;color:var(--ink);}
.as-lead{font-size:var(--fs-15);color:var(--ink-60);line-height:1.75;max-width:520px;font-weight:300;margin-bottom:40px;}

/* 미션 */
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.mission-visual{background:linear-gradient(135deg,var(--terra-lt),var(--warm));border-radius:28px;padding:48px;text-align:center;font-size:var(--fs-80);position:relative;}
.mission-visual::after{content:'bloom.';font-family:'DM Serif Display',serif;position:absolute;bottom:20px;right:24px;font-size:var(--fs-18);color:var(--terracotta);opacity:.4;}

/* 카운트 */
.count-band{background:var(--warm);padding:60px 40px;}
.count-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.count-num{font-family:'DM Serif Display',serif;font-size:clamp(30px,4vw,48px);color:var(--terracotta);margin-bottom:4px;}
.count-label{font-size:var(--fs-13);color:var(--ink-60);}

/* 프로세스 */
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.proc-card{background:white;border-radius:22px;padding:32px 24px;border:1px solid rgba(26,20,16,.05);text-align:center;transition:all .3s var(--ease);}
.proc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.proc-num{font-family:'DM Serif Display',serif;font-size:var(--fs-36);color:var(--terracotta);margin-bottom:10px;opacity:.3;}
.proc-icon{font-size:var(--fs-40);margin-bottom:14px;}
.proc-h{font-size:var(--fs-16);font-weight:600;color:var(--ink);margin-bottom:8px;}
.proc-p{font-size:var(--fs-13);color:var(--ink-60);line-height:1.7;font-weight:300;}

/* 왜 bloom */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.why-card{background:white;border-radius:20px;padding:28px;border:1px solid rgba(26,20,16,.05);display:flex;gap:16px;}
.why-icon{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-24);flex-shrink:0;}
.why-h{font-size:var(--fs-15);font-weight:600;color:var(--ink);margin-bottom:6px;}
.why-p{font-size:var(--fs-13);color:var(--ink-60);line-height:1.65;font-weight:300;}

/* CTA */
.about-cta{background:var(--ink);padding:80px 40px;text-align:center;}
.ac-h{font-family:'DM Serif Display',serif;font-size:clamp(26px,3.5vw,42px);color:white;margin-bottom:10px;}
.ac-h em{color:var(--terracotta);font-style:italic;}
.ac-p{font-size:var(--fs-15);color:rgba(255,255,255,.45);margin-bottom:28px;font-weight:300;}
.ac-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

@media(max-width:900px){
  .mission-grid,.why-grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  .count-inner{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .about-hero{padding:calc(var(--nav-h)+48px) 20px 48px;}
  .about-section{padding:48px 20px;}
  .count-band{padding:40px 20px;}
}