/* 회사소개 시안 v02 — DRAFT · 승인 대기 (FINAL 아님) */
.draft-badge{position:fixed;right:14px;bottom:14px;z-index:3000;padding:7px 12px;border-radius:999px;
  background:rgba(52,48,74,.82);color:#fff;font-size:12px;font-weight:600;letter-spacing:.2px;pointer-events:none}

/* 메인 FINAL과 같은 섹션 제목 규칙 */
.section-kicker{margin:0;font-size:21px;line-height:29px;font-weight:600;color:#764EB1}
.section-title{margin:6px 0 0;font-family:"PayboocFont",sans-serif;font-size:46px;line-height:56px;font-weight:800;color:#ED2B79}
.section-title span{color:#6F269F}

/* ── 1. HERO ── */
.ab-hero{position:relative;height:540px;
  background:url("./assets/about_v02/sky_hero.png") center 62%/cover no-repeat}
.ab-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.72) 62%,#fff)}
.ab-hero-inner{position:relative;z-index:2;height:100%;max-width:1585px;margin:0 auto;padding:0 160px 0 225px;
  display:flex;align-items:center;justify-content:space-between}
.ab-hero-copy{position:relative;margin-top:-20px}
.ab-hero-copy::before{content:"";position:absolute;inset:-70px -110px -60px -120px;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,255,255,.88),rgba(255,255,255,.55) 55%,rgba(255,255,255,0))}
.ab-pill{display:inline-flex;align-items:center;height:40px;padding:0 22px;margin:0 0 22px 32px;border-radius:999px;
  background:rgba(255,255,255,.82);font-size:18px;font-weight:600;color:#7C5AA6}
.ab-hero-copy h1{margin:0}
.ab-line{display:block;font-family:"SchoolSafetyRoundedSmile",sans-serif;font-size:64px;line-height:72px;font-weight:700;letter-spacing:-2px}
.ab-line.dark{color:#29232C}.ab-line.purple{color:#782B90}
.ab-hero-text{margin:22px 0 0;font-size:19px;line-height:33px;color:#4C464E}
.ab-hero-art{position:relative;width:300px;flex:0 0 auto;margin-top:10px}
.ab-hero-art img{position:relative;display:block;width:100%;filter:drop-shadow(0 18px 26px rgba(120,43,144,.18));
  animation:ab-float 5s ease-in-out infinite}
.ab-glow{position:absolute;left:8%;right:8%;bottom:-4%;height:22%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,240,250,.95),rgba(255,214,240,0))}
@keyframes ab-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── 2. INTRO ── */
.ab-intro{position:relative;padding:40px 72px 90px;
  background:
    radial-gradient(ellipse 520px 380px at 8% 70%,rgba(240,214,246,.45),rgba(255,255,255,0)),
    radial-gradient(ellipse 600px 420px at 96% 30%,rgba(255,226,240,.45),rgba(255,255,255,0)),#fff}
.ab-intro-grid{margin-top:42px;display:grid;grid-template-columns:480px 1fr;gap:44px;align-items:center}
.ab-intro-copy{padding:40px 40px 36px;border-radius:32px;background:linear-gradient(160deg,#FFFDFF 0%,#FBF4FD 100%);
  border:2px solid #fff;box-shadow:0 0 0 1px #EEDDF3,0 18px 40px rgba(120,43,144,.08)}
.ab-lead{margin:0 0 22px;font-family:"Cafe24Surround",sans-serif;font-size:30px;line-height:42px;color:#782B90}
.ab-lead em{font-style:normal;color:#ED0C6E}
.ab-intro-copy p:not(.ab-lead){margin:0 0 12px;font-size:17px;line-height:30px;color:#55505A}
.ab-intro-copy strong{color:#34304A;font-weight:700}
.ab-chips{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.ab-chips li{height:38px;padding:0 18px;border-radius:999px;display:flex;align-items:center;
  font-family:"SchoolSafeVaultingBox",sans-serif;font-size:19px}
.chip-story{background:#FDE7F2;color:#BF1D66}.chip-music{background:#ECE6FB;color:#692DBE}
.chip-play{background:#FFF1DC;color:#C9611E}.chip-stage{background:#E1F4EE;color:#15805F}

.ab-stage{margin:0;position:relative}
.ab-stage-title{position:absolute;left:50%;top:-19px;transform:translateX(-50%);z-index:3;white-space:nowrap;
  padding:9px 24px;border-radius:999px;background:#fff;box-shadow:0 6px 16px rgba(120,43,144,.10);
  font-family:"SchoolSafetyStarrySky",sans-serif;font-size:20px;color:#845E9E}
.ab-stage-title .heart{color:#ED0C6E}
.ab-stage-art{position:relative;aspect-ratio:1672/941;container-type:inline-size;border-radius:32px;overflow:hidden;
  border:2px solid #fff;box-shadow:0 0 0 1px #EEDDF3,0 18px 40px rgba(120,43,144,.10)}
.ab-stage-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ab-bubble{position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center}
.ab-bubble.edu{left:9%;top:27%;width:34%}
.ab-bubble.perf{left:64.5%;top:24%;width:31%}
.ab-bubble img{width:62%;height:auto;margin:2.2cqw 0 1.4cqw}
.ab-bubble p{margin:0;font-size:max(13px,1.75cqw);line-height:1.5;color:#55505A}
.ab-bubble strong{font-size:1.2em;color:#34304A}
.ab-tag{display:inline-flex;align-items:center;height:max(26px,3.2cqw);padding:0 1.8cqw;border-radius:999px;
  font-size:max(13px,1.6cqw);font-weight:700}
.ab-tag.edu{background:#782B90;color:#fff}.ab-tag.perf{background:#FBB040;color:#4A2A00}

.ab-stage-list{display:none}

.ab-head.center{text-align:center}

/* ── 3. VALUES ── */
.ab-values{padding:30px 72px 100px;background:linear-gradient(to bottom,#fff,#FBF6FD 40%,#fff)}
.ab-value-grid{margin:46px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:16px}
.ab-value-grid li{--tint:#FDE7F2;--ink:#BF1D66;position:relative;padding:22px 14px 26px;text-align:center;border-radius:28px;
  background:linear-gradient(180deg,#fff 0%,var(--tint) 100%);border:2px solid #fff;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tint) 70%,#E6D6EE),0 14px 30px rgba(120,43,144,.08);transition:.2s ease}
.ab-value-grid li:hover{transform:translateY(-6px);box-shadow:0 0 0 1px color-mix(in srgb,var(--tint) 70%,#E6D6EE),0 20px 36px rgba(120,43,144,.13)}
.ab-value-grid img{display:block;width:118px;height:118px;object-fit:contain;margin:0 auto 10px}
.ab-value-grid h3{margin:0 0 10px;font-family:"SchoolSafeVaultingBox",sans-serif;font-size:25px;line-height:30px;font-weight:400;color:var(--ink)}
.ab-value-grid p{margin:0;font-size:14.5px;line-height:23px;color:#55505A}
.v-pink{--tint:#FDE7F2!important;--ink:#BF1D66!important}
.v-violet{--tint:#ECE6FB!important;--ink:#692DBE!important}
.v-mint{--tint:#E1F4EE!important;--ink:#15805F!important}
.v-rose{--tint:#FBE3EC!important;--ink:#C8285E!important}
.v-yellow{--tint:#FFF3D6!important;--ink:#B9700E!important}
.v-sky{--tint:#E3F1FC!important;--ink:#2563A8!important}
.v-peach{--tint:#FFE8DC!important;--ink:#D0582A!important}

/* ── 4. STORY + ACTIVITIES ── */
.ab-story{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:10px 72px 100px}
.ab-letter,.ab-activities{padding:42px 44px;border-radius:32px;border:2px solid #fff;
  box-shadow:0 0 0 1px #EEDDF3,0 18px 40px rgba(120,43,144,.08)}
.ab-letter{background:linear-gradient(160deg,#FFFDFF,#FDF0F7)}
.ab-activities{background:linear-gradient(160deg,#FFFFFF,#EFF6FD)}
.ab-h2{margin:4px 0 24px;font-family:"PayboocFont",sans-serif;font-size:32px;line-height:40px;font-weight:800;color:#6F269F}
.ab-letter blockquote{position:relative;margin:0 0 24px;padding:22px 26px 22px 64px;border-radius:22px;background:rgba(255,255,255,.8)}
.ab-letter .q{position:absolute;left:20px;top:2px;font-family:"Cafe24Surround",serif;font-size:64px;line-height:1;color:#F5A3C7}
.ab-letter blockquote p{margin:0;font-family:"Cafe24Surround",sans-serif;font-size:25px;line-height:38px;color:#782B90}
.ab-letter blockquote em{font-style:normal;color:#ED0C6E}
.ab-letter > p{margin:0 0 12px;font-size:16.5px;line-height:29px;color:#55505A}
.ab-letter .ab-sign{margin-top:22px;text-align:right;color:#636466;font-size:15.5px}
.ab-letter .ab-sign strong{font-size:19px;color:#34304A;margin-left:4px}
.ab-creds{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.ab-creds li{height:32px;padding:0 14px;border-radius:999px;display:flex;align-items:center;
  background:#fff;border:1px solid #F1D3E6;font-size:14px;font-weight:600;color:#9A2E6E}
@media (max-width:700px){.ab-creds{justify-content:center}.ab-creds li{font-size:13px;height:30px;padding:0 12px}}
.ab-activities ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.ab-activities li{display:flex;gap:18px;align-items:center;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.85)}
.ai{flex:0 0 auto;width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.ai svg{width:26px;height:26px;fill:currentColor}
.ai.pink{background:#FDE7F2;color:#ED0C6E}.ai.violet{background:#ECE6FB;color:#782B90}
.ai.yellow{background:#FFF1D2;color:#F29A12}.ai.mint{background:#E1F4EE;color:#15805F}
.ab-activities h3{margin:0 0 4px;font-size:17.5px;line-height:25px;font-weight:700;color:#34304A}
.ab-activities p{margin:0;font-size:15px;line-height:24px;color:#636466}

/* ── 5. FRIENDS ── */
.ab-friends{padding:20px 72px 90px;background:linear-gradient(to bottom,#fff,#FDF3FA 55%,#fff)}
.ab-friends-grid{margin-top:44px;display:grid;grid-template-columns:600px 1fr;gap:40px;align-items:center}
.ab-friends-stage{position:relative;aspect-ratio:4/3;border-radius:32px;overflow:hidden;border:2px solid #fff;
  box-shadow:0 0 0 1px #EEDDF3,0 18px 40px rgba(120,43,144,.10)}
.ab-friends-stage .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-friends-stage .duo{position:absolute;left:0;right:0;margin:0 auto;bottom:15%;height:68%;width:auto;max-width:80%;
  filter:drop-shadow(0 12px 16px rgba(120,43,144,.22));animation:ab-float 5s ease-in-out infinite}
/* 로고 설명 카드 (토리·벼리 그림 자리 대체) */
.ab-logo-card{position:relative;padding:40px 36px 38px;border-radius:32px;text-align:center;border:2px solid #fff;
  background:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,#FBF3FD 60%,#F6ECFB 100%);
  box-shadow:0 0 0 1px #EEDDF3,0 18px 40px rgba(120,43,144,.10)}
.ab-logo-mark{display:block;width:210px;height:auto;margin:0 auto 22px}
.ab-logo-keys{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ab-logo-keys li{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;
  color:#fff;font-size:15.5px;font-weight:800;box-shadow:0 6px 14px rgba(60,40,90,.12)}
.ab-logo-keys .k-purple{background:#7A2E97}.ab-logo-keys .k-pink{background:#ED0C6E}.ab-logo-keys .k-orange{background:#F7A93B}
.ab-logo-text{margin:0;font-size:16.5px;line-height:29px;color:#4C464E;word-break:keep-all}
.ab-logo-text strong{color:#782B90}
.ab-profiles{display:flex;flex-direction:column;gap:22px}
.ab-profile{display:flex;gap:26px;align-items:center;padding:26px 30px;border-radius:30px;border:2px solid #fff;
  box-shadow:0 0 0 1px #EEDDF3,0 14px 30px rgba(120,43,144,.08)}
.ab-profile.tori{background:linear-gradient(120deg,#FFF5FB,#FDE4F1)}
.ab-profile.byeori{background:linear-gradient(120deg,#FFFBF0,#FFEFC9)}
.ab-profile img{flex:0 0 auto;width:130px;height:150px;object-fit:contain}
.ab-profile .name{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:999px;
  font-family:"SchoolSafeVaultingBox",sans-serif;font-size:19px;color:#fff}
.ab-profile.tori .name{background:#ED0C6E}.ab-profile.byeori .name{background:#F29A12}
.ab-profile h3{margin:10px 0 8px;font-size:21px;line-height:29px;font-weight:700;color:#34304A}
.ab-profile p{margin:0;font-size:16px;line-height:27px;color:#55505A}


/* ── RESPONSIVE ── */
@media (max-width:1300px){
  .ab-hero-inner{padding:0 60px 0 90px}
  .ab-intro-grid{grid-template-columns:1fr;max-width:860px;margin-left:auto;margin-right:auto}
  .ab-stage{margin-top:20px}
  .ab-value-grid{grid-template-columns:repeat(4,1fr)}
  .ab-story{grid-template-columns:1fr}
  .ab-friends-grid{grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto}
}
@media (max-width:900px){
  .ab-hero{height:auto;padding:46px 0 80px}
  .ab-hero-inner{flex-direction:column;padding:0 24px;text-align:center}
  .ab-hero-copy{margin:0}.ab-pill{margin:0 0 18px}
  .ab-hero-art{width:min(246px,58vw);margin-top:26px}
}
@media (max-width:700px){
  .section-kicker{font-size:16px;line-height:24px}
  .section-title{font-size:30px;line-height:40px}
  .ab-pill{font-size:14px;height:34px;padding:0 16px}
  .ab-line{font-size:40px;line-height:48px;letter-spacing:-1px}
  .ab-hero-text{font-size:16px;line-height:27px}
  .ab-hero-text br{display:none}
  .ab-intro{padding:20px 20px 60px}
  .ab-intro-grid{margin-top:26px}
  .ab-intro-copy{padding:28px 22px}
  .ab-lead{font-size:24px;line-height:34px}
  .ab-intro-copy p:not(.ab-lead){font-size:15.5px;line-height:27px}
  .ab-stage-title{font-size:16px;padding:7px 16px}
  .ab-hero-art{width:min(189px,48vw)}
  .ab-bubble .ab-tag,.ab-bubble p{display:none}
  .ab-bubble.edu{top:36%}.ab-bubble.perf{top:33%}
  .ab-bubble img{width:78%;margin:0}
  .ab-stage-list{display:flex;flex-direction:column;gap:10px;margin:16px 0 0;padding:0;list-style:none}
  .ab-stage-list li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:#FBF6FD;
    font-size:14.5px;line-height:1.45;color:#55505A}
  .ab-stage-list strong{color:#34304A}
  .ab-stage-list .ab-tag{flex:0 0 auto;height:26px;font-size:12.5px;padding:0 10px}
  .ab-values{padding:20px 20px 64px}
  .ab-value-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px}
  .ab-value-grid li{padding:16px 10px 18px;border-radius:22px}
  .ab-value-grid li:last-child{grid-column:1 / -1;max-width:50%;justify-self:center;width:100%}
  .ab-value-grid img{width:84px;height:84px}
  .ab-value-grid h3{font-size:21px;line-height:26px;margin-bottom:6px}
  .ab-value-grid p{font-size:13px;line-height:20px}
  .ab-story{padding:0 20px 64px;gap:18px}
  .ab-letter,.ab-activities{padding:28px 20px;border-radius:24px}
  .ab-h2{font-size:24px;line-height:32px;margin-bottom:18px}
  .ab-letter blockquote{padding:16px 16px 16px 46px}
  .ab-letter .q{left:12px;font-size:48px}
  .ab-letter blockquote p{font-size:19px;line-height:29px}
  .ab-letter blockquote br{display:none}
  .ab-letter > p{font-size:15.5px;line-height:27px}
  .ab-activities li{gap:12px;padding:14px}
  .ai{width:44px;height:44px;border-radius:14px}.ai svg{width:22px;height:22px}
  .ab-activities h3{font-size:16px}.ab-activities p{font-size:14px;line-height:22px}
  .ab-friends{padding:10px 20px 60px}
  .ab-friends-grid{margin-top:26px;gap:18px}
  .ab-profile{flex-direction:column;text-align:center;gap:10px;padding:22px 20px;border-radius:24px}
  .ab-profile img{width:100px;height:116px}
  .ab-profile h3{font-size:18px;line-height:26px}
  .ab-profile p{font-size:14.5px;line-height:24px}
  .ab-logo-card{padding:28px 18px 26px;border-radius:24px}
  .ab-logo-mark{width:160px;margin-bottom:18px}
  .ab-logo-keys{gap:7px}
  .ab-logo-keys li{width:52px;height:52px;font-size:13px}
  .ab-logo-text{font-size:15px;line-height:26px}
  .ab-logo-text br{display:none}
}