/* ============================================================
   pd_consult.css — AX Consulting 상세 페이지
   accent: #14B8A6
   공용 토큰은 향후 shared/pd_base.css 로 추출 예정
   ============================================================ */

.pd {
    --pd-navy: #0E2A4A;
    --pd-ink: #1A2332;
    --pd-mute: #64748B;
    --pd-canvas: #F8FAFC;
    --pd-border: #E2E8F0;
    --pd-accent: #14B8A6;
    --pd-accent-soft: rgba(20, 184, 166, 0.15);
    --pd-accent-strong: #0F766E;   /* teal-700, AA on white (~5.1:1) */
    --pd-accent-on-dark: #14B8A6;  /* teal original already AA on navy (~5.4:1) */

    color: var(--pd-ink);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
}

.pd * { box-sizing: border-box; }

.pd h1, .pd h2, .pd h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; color: var(--pd-ink); }
.pd p { margin: 0; }
.pd ul { margin: 0; padding: 0; list-style: none; }

/* ----- common section wrapper ----- */
.pd-sec__header { text-align: center; margin: 0 auto 56px; max-width: 800px; }
.pd-sec__title  { font-size: 40px; line-height: 1.25; margin-bottom: 16px; }
.pd-sec__kicker { font-size: 18px; color: var(--pd-mute); }

/* ----- 1. HERO ----- */
.pd-hero {
    position: relative;
    background: radial-gradient(ellipse at 70% 30%, var(--pd-accent-soft) 0%, transparent 55%), var(--pd-navy);
    color: #F8FAFC;
    padding: 160px 0 140px;
    overflow: hidden;
}
.pd-hero__bg     { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: flex-end; }
.pd-hero__motif  { width: min(680px, 80%); height: auto; color: var(--pd-accent); }
.pd-hero__inner  { position: relative; max-width: 1400px; margin: 0 auto; padding: 0 24px; z-index: 1; }
.pd-hero__eyebrow { font-size: 14px; letter-spacing: 0.15em; color: var(--pd-accent-on-dark); text-transform: uppercase; margin-bottom: 16px; }
.pd-hero__title   { font-size: 56px; line-height: 1.15; margin-bottom: 24px; }
.pd-hero .pd-hero__title { color: #F8FAFC; }
.pd-hero__lead    { font-size: 18px; color: rgba(248, 250, 252, 0.82); max-width: 560px; }

/* ----- 2. WHAT ----- */
.pd-what { padding: 120px 0; background: var(--pd-canvas); }
.pd-what__inner { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.pd-what__grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pd-what__item  {
    background: #FFFFFF;
    border: 1px solid var(--pd-border);
    border-radius: 16px;
    padding: 32px 28px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pd-what__item:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(14, 42, 74, 0.08); }
.pd-what__icon  { display: inline-flex; width: 48px; height: 48px; border-radius: 12px; background: var(--pd-accent-soft); color: var(--pd-accent); align-items: center; justify-content: center; margin-bottom: 20px; }
.pd-what__h3    { font-size: 20px; margin-bottom: 8px; }
.pd-what__p     { font-size: 15px; color: var(--pd-mute); line-height: 1.55; }

/* ----- 3. PRODUCTS ----- */
.pd-products { padding: 120px 0; }
.pd-products__inner { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.pd-product { border-top: 1px solid var(--pd-border); padding: 56px 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
.pd-product:last-child { border-bottom: 1px solid var(--pd-border); }
.pd-product__head { position: sticky; top: 80px; }
.pd-product__num  { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--pd-accent-strong); margin-bottom: 8px; }
.pd-product__name { font-size: 28px; line-height: 1.3; margin-bottom: 12px; }
.pd-product__tagline { font-size: 16px; color: var(--pd-mute); }
.pd-product__body { display: flex; flex-direction: column; gap: 24px; }
.pd-product__features { display: flex; flex-direction: column; gap: 12px; }
.pd-product__features li { font-size: 15px; color: var(--pd-ink); padding-left: 20px; position: relative; }
.pd-product__features li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 2px; background: var(--pd-accent); }
.pd-product__features strong { color: var(--pd-ink); font-weight: 600; }
.pd-product__media img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--pd-border); background: var(--pd-navy); }

/* ----- 4. CTA ----- */
.pd-cta {
    background: linear-gradient(135deg, var(--pd-navy) 0%, var(--pd-navy) 55%, var(--pd-accent) 200%);
    color: #F8FAFC;
    padding: 120px 0;
}
.pd-cta__inner { max-width: 800px; margin: 0 auto; padding: 0 24px; text-align: center; }
.pd .pd-cta__title { font-size: 40px; line-height: 1.25; margin-bottom: 16px; color: #F8FAFC; }
.pd-cta__sub   { font-size: 17px; color: rgba(248, 250, 252, 0.78); margin-bottom: 32px; }
.pd-cta__actions { display: flex; justify-content: center; gap: 16px; }

.pd-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; border-radius: 999px; font-size: 16px; font-weight: 600; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; min-height: 44px; }
.pd-btn--primary { background: var(--pd-accent-strong); color: #FFFFFF; }
.pd-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20, 184, 166, 0.4); }

/* ----- mobile ≤ 768px ----- */
@media (max-width: 768px) {
    .pd-hero { padding: 88px 0 72px; }
    .pd-hero__title { font-size: 32px; }
    .pd-hero__lead { font-size: 16px; }
    .pd-hero__motif { width: 90%; opacity: 0.5; }

    .pd-what, .pd-products, .pd-cta { padding: 72px 0; }
    .pd-sec__title { font-size: 28px; }
    .pd-sec__kicker { font-size: 16px; }
    .pd-sec__header { margin-bottom: 40px; }

    .pd-what__grid { grid-template-columns: 1fr; gap: 16px; }
    .pd-product { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
    .pd-product__head { position: static; }
    .pd-product__name { font-size: 22px; }

    .pd-cta__title { font-size: 28px; }
    .pd-cta__actions { flex-direction: column; }
}

/* ----- entry-state for GSAP (JS off-시 fallback 은 바로 보이게) ----- */
.pd [data-pd-tween="in"]:not(.is-ready) {
    opacity: 0;
    transform: translateY(24px);
}
.pd [data-pd-tween="in"].is-ready {
    opacity: 1;
    transform: none;
    transition: opacity 600ms ease, transform 600ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .pd [data-pd-tween="in"] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .pd-what__item:hover { transform: none; }
    .pd-btn--primary:hover { transform: none; }
}