/* =============================================
   Group_Homepage_aboutUs
   기준폭: 973.71px  /  기준높이: 786.07px
   스케일: max(360/973.71, min(1, vw/973.71))
   중앙 정렬 — 740~1920 여백 축소 후 스케일
   ============================================= */

:root {
  --about-base-w: 973.71px;
  --about-base-h: 786.07px;
}

/* ── 섹션 래퍼 ── */
.about {
  position: relative;
  width: 100%;
  /*overflow: hidden;*/
  /*background: #F8F8F8;*/
  height: var(--about-base-h); /* JS가 scale에 맞춰 덮어씀 */
}

/* ── 973.71px 기준 내부 컨테이너 ──
   transform-origin: top center → scale 기준점 컨테이너 중앙 상단
*/
.about__inner {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -486.855px;
  width: 973.71px;
  height: 786.07px;
  transform-origin: top center;
}

/* ── About Us 태그 ──
   Figma: x=321.24, y=0, size 356.48×81.06
*/
.about__tag {
  position: absolute;
  left: 321.24px;
  top: 0;
  width: 356.48px;
  height: 81.06px;
  z-index: 3;
  filter: drop-shadow(0px 2.94px 2.94px rgba(64, 97, 180, 0.25));
}

.about__tag-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.about__tag-text {
  position: absolute;
  left: 82px;
  top: 25px;
  width: 170px;
  height: 43px;
  display: flex;
  align-items: center;
  font-family: 'A2Z', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2em;
  color: #F8F8F8;
  text-shadow: 0px 0px 4.41px rgba(38, 45, 61, 0.25);
  pointer-events: none;
}

/* ── 배경 블러 글로우 ──
   Figma 4:97: content(y=131.06) + backImage(y=42.19) → y=173.25
   gradient + blur(295px)
*/
.about__bg-glow {
  position: absolute;
  left: 0;
  top: 153.25px;
  width: 962.54px;
  height: 439.93px;
  scale: 0.8;
  background: linear-gradient(180deg, rgba(219, 231, 246, 1) 0%, rgba(239, 224, 255, 1) 100%);
  filter: blur(295px);
  pointer-events: none;
  z-index: 0;
}

/* ── 열린 따옴표 " ──
   texts_upper(168.48, 0) + main(0, 0) + deco_left(0, 11.19) → (168.48, 142.25)
   A2Z 400 70.86px, #8CC8E7
*/
.about__deco-left {
  position: absolute;
  left: 168.48px;
  top: 142.25px;
  width: 44px;
  height: 85px;
  font-family: 'A2Z', sans-serif;
  font-weight: 400;
  font-size: 70.86px;
  line-height: 1.2em;
  letter-spacing: -0.05em;
  color: #8CC8E7;
  pointer-events: none;
  z-index: 2;
}

/* ── 메인 헤딩 ──
   texts_upper(168.48, 0) + mainText(37.65, 25.95) → (206.13, 157.01)
   A2Z 600 36px, #313131
*/
.about__heading-text {
  position: absolute;
  left: 206.13px;
  top: 157.01px;
  width: 586px;
  height: 43px;
  font-family: 'A2Z', sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.2em;
  letter-spacing: -0.05em;
  color: #313131;
  pointer-events: none;
  z-index: 2;
}

/* ── 닫힌 따옴표 " ──
   texts_upper(168.48, 0) + deco_right(605.57, 0) → (774.05, 131.06)
   A2Z 400 70.86px, #8E93F2
*/
.about__deco-right {
  position: absolute;
  /*left: 774.05px;*/
  left: 783.05px;
  top: 131.06px;
  width: 44px;
  height: 85px;
  font-family: 'A2Z', sans-serif;
  font-weight: 400;
  font-size: 70.86px;
  line-height: 1.2em;
  letter-spacing: -0.05em;
  color: #8E93F2;
  pointer-events: none;
  z-index: 2;

  transform: scaleY(-1) scaleX(-1);
}

/* ── 일본어 부제 ──
   texts_upper(168.48, 0) + subText(183.06, 77.99) → (351.54, 209.05)
   A2Z 400 18px, #9C9C9C
*/
.about__subtext-jp {
  position: absolute;
  left: 351.54px;
  top: 209.05px;
  width: 291px;
  font-family: 'A2Z', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2em;
  letter-spacing: -0.05em;
  color: #9C9C9C;
  pointer-events: none;
  z-index: 2;
}

/* ── Intro 그룹 ──
   content(0, 131.06) + introGroup(43.73, 185.39) → (43.73, 316.45)
   size 902.15×295.07
*/
.about__intro-group {
  position: absolute;
  left: 43.73px;
  top: 316.45px;
  width: 902.15px;
  height: 295.07px;
  pointer-events: none;
  z-index: 1;
}

/* ── 카드 공통 ── */
.about__card {
  position: absolute;
  width: 261.44px;
  height: 295.07px;
}

.about__card--start {
  left: 0;
  filter: drop-shadow(0px 2.95px 2.95px rgba(64, 97, 180, 0.25));
}

.about__card--draw {
  left: 320.35px;
  filter: drop-shadow(0px 4px 4px rgba(64, 97, 180, 0.25));
}

.about__card--connect {
  left: 640.71px;
  filter: drop-shadow(0px 2.95px 2.95px rgba(64, 97, 180, 0.25));
}

.about__card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── 카드 텍스트 공통 ── */
.about__card-upper,
.about__card-main,
.about__card-lower {
  position: absolute;
}

/* "인연을" — A2Z 400 24px, #D5D5D5 */
.about__card-upper {
  font-family: 'A2Z', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2em;
  letter-spacing: -0.05em;
  color: #D5D5D5;
  width: 64px;
  height: 29px;
}

/* 동사 — A2Z 600 36px, #313131 */
.about__card-main {
  font-family: 'A2Z', sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.2em;
  letter-spacing: -0.05em;
  color: #313131;
}

/* 영문 레이블 — A2Z 600 28px, gradient, opacity 0.5 */
.about__card-lower {
  font-family: 'A2Z', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2em;
  letter-spacing: -0.05em;
  background: linear-gradient(93deg, rgba(140, 200, 231, 1) 6%, rgba(142, 147, 242, 1) 93%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.5;
  height: 34px;
}

/* ── Start 카드 텍스트 위치 ── (texts: x=67.17, y=27.31) */
.about__card--start .about__card-upper { left: 98.91px; top: 27.31px; }
.about__card--start .about__card-main  { left: 67.17px; top: 109.24px; width: 129px; }
.about__card--start .about__card-lower { left: 90.45px; top: 155.75px; width: 83px; }

/* ── Draw 카드 텍스트 위치 ── (texts: x=80.11, y=27.31) */
.about__card--draw .about__card-upper { left: 98.91px; top: 27.31px; }
.about__card--draw .about__card-main  { left: 82.67px; top: 109.24px; width: 97px; }
.about__card--draw .about__card-lower { left: 80.11px; top: 152.06px; width: 103px; }

/* ── Connect 카드 텍스트 위치 ── (texts: x=66.39, y=27.31) */
.about__card--connect .about__card-upper { left: 98.91px; top: 27.31px; }
.about__card--connect .about__card-main  { left: 66.39px; top: 109.24px; width: 129px; text-align: center; }
.about__card--connect .about__card-lower { left: 115.15px; top: 155.75px; }

/* ── 데코 하단 (스레드) ──
   content(0, 131.06) + deco_lower(16.42, 501.31) → (16.42, 632.37)
   size 957.29×114.33
*/
.about__deco-lower {
  position: absolute;
  left: 16.42px;
  top: 632.37px;
  width: 957.29px;
  height: 114.33px;
  pointer-events: none;
  z-index: 2;
}

/* ── 하단 텍스트 ──
   content(0, 131.06) + text_lower(170.25, 629.01) → (170.25, 760.07)
   A2Z 500 22px, #313131
*/
.about__text-lower {
  position: absolute;
  left: 170.25px;
  top: 760.07px;
  width: 647px;
  font-family: 'A2Z', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2em;
  letter-spacing: -0.05em;
  color: #313131;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}