/* =========================================================
   공통 컴포넌트 통합
   - 기존 .as-intro-eyebrow / .as-review-eyebrow / .as-works-eyebrow /
     .as-products-eyebrow 는 완전히 동일한 규칙이라 셀렉터만 묶음.
   - 마크업(class="as-intro-eyebrow" 등)은 그대로 둬도 되고,
     신규 섹션에는 .as-eyebrow 하나만 쓰면 됨.
   ========================================================= */

   .as-intro-eyebrow,
   .as-review-eyebrow,
   .as-works-eyebrow,
   .as-products-eyebrow,
   .as-eyebrow {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 28px;
   }
   
   .as-intro-dot,
   .as-review-dot,
   .as-works-dot,
   .as-products-dot,
   .as-eyebrow-dot {
     width: 8px;
     height: 8px;
     background: var(--color-green);
     border-radius: 50%;
     display: inline-block;
   }
   
   .as-intro-eyebrow span:last-child,
   .as-review-eyebrow span:last-child,
   .as-works-eyebrow span:last-child,
   .as-products-eyebrow span:last-child,
   .as-eyebrow span:last-child {
     font-size: 13px;
     letter-spacing: .14em;
     color: var(--color-green);
     font-weight: 700;
     text-transform: uppercase;
   }
   
   /* 필터 버튼도 동일 케이스 (as-works / as-products) */
   .as-works-filter-btn,
   .as-products-filter-btn,
   .as-filter-btn {
     padding: 10px 20px;
     border: 1px solid #333;
     background: transparent;
     color: #9a9a9a;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     transition: border-color .2s ease, color .2s ease, background .2s ease;
   }
   .as-works-filter-btn:hover,
   .as-products-filter-btn:hover,
   .as-filter-btn:hover {
     border-color: #555;
     color: #fff;
   }
   .as-works-filter-btn.is-active,
   .as-products-filter-btn.is-active,
   .as-filter-btn.is-active {
     background: var(--color-green);
     border-color: var(--color-green);
     color: #0a0a0a;
   }
   
   /* 버튼 베이스도 통합 (as-intro-btn 패턴 재사용) */
   .as-btn {
     padding: 14px 26px;
     font-weight: 700;
     font-size: 14px;
     letter-spacing: .02em;
     text-decoration: none;
     display: inline-block;
     transition: opacity .2s ease;
   }
   .as-btn:hover { opacity: .85; }
   .as-btn--primary { background: var(--color-green); color: #0a0a0a; }
   .as-btn--outline { border: 1px solid #333; color: #fff; }
   
   
   /* =========================================================
      ===== 올라운드샵 컨택트 섹션 (.as-contact) =====
      as-intro-stats 의 "세로 리스트 / gap 1px 구분선" 패턴을
      그대로 재사용해서 톤을 통일함.
      ========================================================= */
   .as-contact {
     background: #0a0a0a;
     padding: var(--area-sapce);
     color: #fff;
   }
   
   .as-contact-inner {
     max-width: 1600px;
     margin: 0 auto;
     padding-top: 80px;
   }
   
   .as-contact-title {
     font-size: var(--title-size);
     line-height: 1.02;
     font-weight: 800;
     letter-spacing: -0.02em;
     text-transform: uppercase;
     margin: 0 0 16px;
   }
   
   .as-contact-desc {
     font-size: 16px;
     color: #9a9a9a;
     margin: 0 0 48px;
     max-width: 480px;
     line-height: 1.6;
   }
   
   /* ---- 리스트 (as-intro-stats 패턴 재사용) ---- */
   .as-contact-list {
     display: flex;
     flex-direction: column;
     gap: 1px;
     background: #222;
   }
   
   .as-contact-row {
     background: #0a0a0a;
     padding: 28px 30px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     text-decoration: none;
     color: #fff;
     transition: background .2s ease;
   }
   
   .as-contact-row.is-link:hover {
     background: #131313;
   }
   
   .as-contact-row-label {
     font-size: 15px;
     color: #9a9a9a;
   }
   
   .as-contact-row-value {
     font-size: clamp(1.25rem, 2vw, 28px);
     font-weight: 800;
     letter-spacing: -0.02em;
     display: flex;
     align-items: center;
     gap: 12px;
     text-align: right;
   }
   
   .as-contact-row-value .arrow {
     color: var(--color-green);
     font-size: 18px;
     transition: transform .2s ease;
     flex-shrink: 0;
   }
   
   .as-contact-row.is-link:hover .arrow {
     transform: translateX(6px);
   }
   
   /* ---- 하단 CTA ---- */
   .as-contact-cta {
     margin-top: 48px;
     display: flex;
     gap: 14px;
   }
   
   /* ===== 반응형 ===== */
   @media (max-width: 1024px) {
     .as-contact { padding: var(--area-sapce); }
     .as-contact-title { font-size: var(--title-size); }
   }
   
   @media (max-width: 768px) {
     .as-contact-desc { font-size: 12px; }
     .as-contact-row {
       flex-direction: column;
       align-items: flex-start;
       gap: 8px;
       padding: 22px 4px;
     }
     .as-contact-row-value {
       font-size: 18px;
       text-align: left;
     }
     .as-contact-cta {
       flex-direction: column;
     }
     .as-contact-cta .as-btn {
       text-align: center;
     }
   }