/* KNOL Quiz informational pages — use the same visual grammar as the yellow home. */
.about-body{--ink:#272521;--muted:#706956;--line:#e9dfc6;--pink:#a06b05;--accent:#ffda56;background:#fffdf5;color:#272521;font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;line-height:1.6;font-size:15px}
.about-body :is(button,input,select,textarea){font-family:inherit}
.about-body :is(a,button,input,select,textarea):focus-visible{outline:3px solid #946200;outline-offset:3px}
.about-body .family-info-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid #e9dfc6;padding:10px max(20px,calc((100vw - 1456px)/2));min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:none}
.about-body .family-info-brand{display:flex;align-items:center;gap:24px;min-width:0}
.about-body .family-info-identity{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;color:#272521;font-size:25px;letter-spacing:-.04em;font-weight:850;line-height:1.1}
.about-body .family-info-identity img{width:52px;height:52px;object-fit:contain}
.about-body .family-info-identity small{display:block;margin-top:5px;font-size:9px;letter-spacing:2.7px;color:#706956;font-weight:700}
.about-body .family-info-services{display:flex;align-items:center;gap:8px;padding-left:18px;border-left:1px solid #e9dfc6}
.about-body .family-info-services a{display:flex;gap:6px;align-items:center;padding:7px 9px;min-height:42px;border-radius:9px;color:#625b4c;text-decoration:none;font-size:12px;font-weight:650;white-space:nowrap}
.about-body .family-info-services img{width:28px;height:28px;object-fit:contain}
.about-body .family-info-services a:hover{background:#fff3cb;color:#272521}
.about-body .site-nav{gap:6px}
.about-body .site-nav a{min-height:42px;border-radius:9px;color:#514b3e;font-weight:650;font-size:13px;padding:0 12px}
.about-body .site-nav a:hover{background:#fff3cb;border-color:#e4cf8e;color:#272521}
.about-body .site-nav a[aria-current="page"]{background:#ffda56;border:1px solid #d6ab3a;color:#272521}
.about-body .site-nav .home-button{background:#302b20;color:#fff;border:1px solid #302b20}
.about-body .site-nav .home-button:hover{background:#4f422a;border-color:#4f422a;color:#fff}
.about-body .about-page{width:min(1140px,calc(100% - 40px));padding:38px 0 80px;gap:48px}
.about-body .about-hero{text-align:left;margin:0;max-width:970px;gap:14px;padding:22px 0 32px;border-bottom:1px solid #e9dfc6}
.about-body .about-hero-eyebrow{color:#946200;background:#fff4d2;border:1px solid #ecdba9;border-radius:8px;width:fit-content;padding:7px 12px;font-size:12px;font-weight:750}
.about-body .about-hero-title{color:#272521;letter-spacing:-.055em;font-weight:850;line-height:1.28;font-size:clamp(30px,4vw,48px)}
.about-body .about-hero-desc{color:#5f594d;font-size:15px;line-height:1.9;font-weight:450;max-width:750px}
.about-body .about-hero-badges{justify-content:flex-start;gap:8px}
.about-body .about-hero-badges .badge{font-size:11px;line-height:1.5;border-radius:7px;font-weight:650;padding:7px 10px;background:#fff5d8;color:#594923;border:1px solid #ead79a}
.about-body :is(.badge-orange,.badge-purple,.badge-blue){background:#fff5d8;color:#594923;border-color:#ead79a}
.about-body .about-page :is(h2,h3,h4){color:#272521;letter-spacing:-.035em}
.about-body .about-page :is(p,li){line-height:1.75}
.about-body .about-page :is(.about-principle-card,.about-feature-card,.about-value-card,.about-step-card,.about-panel,.manual-card,.feature-card,.about-card){background:#fff;border-color:#e9dfc6;border-radius:14px;box-shadow:0 6px 20px #55471909}
.about-body .about-page :is(.about-principle-card,.about-feature-card,.about-value-card,.about-step-card,.about-panel,.manual-card,.feature-card,.about-card):hover{border-color:#d8c17a}
.about-body .about-page :is(.step,.about-step-number,.about-feature-icon,.about-icon){background:#fff1c2;color:#654909;border-color:#e7d38d}
.about-body .about-page :is(.about-btn,.manual-btn,.cta-button,.about-cta a){border-radius:10px;font-weight:700}
.about-body .about-page a{accent-color:#a06b05}
.about-body .about-page a:hover{color:#8a5900}
.about-body .about-page :is(.about-highlight,.about-callout,.manual-note){background:#fff8e3;border-color:#e8d599;color:#42391f;border-radius:12px}
.about-body .about-page :is(.about-section-heading,.section-heading){border-color:#e9dfc6}
@media(max-width:990px){.about-body .family-info-header{flex-wrap:wrap;gap:7px;padding:10px 20px}.about-body .site-nav{width:100%;justify-content:flex-start}}
@media(max-width:600px){.about-body .family-info-header{padding:10px 14px}.about-body .family-info-brand{width:100%;flex-wrap:wrap;gap:8px}.about-body .family-info-identity{font-size:21px}.about-body .family-info-identity img{width:45px;height:45px}.about-body .family-info-services{border-left:0;border-top:1px solid #e9dfc6;padding:6px 0 0;width:100%}.about-body .family-info-services a{flex:1;justify-content:center}.about-body .site-nav{flex-wrap:wrap}.about-body .site-nav a{font-size:12px;padding:0 9px}.about-body .about-page{width:calc(100% - 28px);padding-top:22px;gap:36px}.about-body .about-hero{padding-top:6px}.about-body .about-hero-desc{font-size:14px}}
@media(prefers-reduced-motion:reduce){.about-body *{scroll-behavior:auto!important}}