/* =========================================================
   PropHub 기능 상세페이지
   클래스 접두사: pd-
========================================================= */

#workflow,
#register,
#portal,
#content,
#distribution,
#analysis {
    scroll-margin-top: 76px;
}

body.prophub-detail-page {
    margin: 0;
    background: #080b20;
    color: #fff;
}

/* Hero */
.pd-hero {
    position: relative;
    overflow: hidden;
    padding: 92px 0 96px;
    background:
        radial-gradient(circle at 8% 18%, rgba(123, 72, 255, .22), transparent 31%),
        radial-gradient(circle at 90% 24%, rgba(234, 75, 255, .12), transparent 27%),
        linear-gradient(135deg, #08091e, #111039 58%, #12153a);
}

.pd-hero::before,
.pd-detail-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(151, 118, 216, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(151, 118, 216, .05) 1px, transparent 1px);
    background-size: 52px 52px;
}

.pd-hero__layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(390px, .9fr) minmax(600px, 1.1fr);
    gap: 68px;
    align-items: center;
}

.pd-eyebrow {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
    color: #c578ff;
    font-size: 12px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: .21em;
}

.pd-eyebrow::before {
    content: "";
    width: 34px;
    height: 2px;
    background: linear-gradient(90deg,#925fff,#ef65ff);
    box-shadow: 0 0 12px rgba(196, 92, 255, .65);
}

.pd-hero__copy h1 {
    margin: 0;
    font-size: clamp(68px,7vw,108px);
    line-height: .88;
    font-weight: 950;
    letter-spacing: -.075em;
}

.pd-hero__copy h1 span { color:#9a6bff; }

.pd-hero__copy h2 {
    margin: 32px 0 0;
    font-size: clamp(33px,3vw,47px);
    line-height: 1.3;
    letter-spacing: -.05em;
}

.pd-hero__copy p {
    max-width: 650px;
    margin: 24px 0 0;
    color:#c4c3dc;
    font-size:17px;
    line-height:1.85;
    word-break: keep-all;
}

.pd-hero__badges {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:27px;
}

.pd-hero__badges span {
    display:inline-flex;
    min-height:37px;
    align-items:center;
    padding:0 15px;
    border:1px solid rgba(179,104,255,.38);
    border-radius:999px;
    background:rgba(54,29,100,.62);
    color:#f0e5ff;
    font-size:12px;
    font-weight:780;
}

.pd-hero__actions { display:flex; gap:13px; flex-wrap:wrap; margin-top:31px; }

.pd-button {
    display:inline-flex;
    min-height:51px;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 23px;
    border-radius:11px;
    font-size:14px;
    font-weight:850;
    transition:.22s ease;
}

.pd-button:hover { transform:translateY(-3px); }

.pd-button--primary {
    background:linear-gradient(135deg,#a45dff,#6634dc);
    box-shadow:0 15px 32px rgba(108,50,218,.31);
}

.pd-button--outline {
    border:1px solid rgba(181,111,255,.55);
    background:rgba(31,17,69,.52);
}

/* Flow panel */
.pd-flow-panel {
    padding:32px 30px;
    border:1px solid rgba(177,109,255,.31);
    border-radius:29px;
    background:radial-gradient(circle at 50% 35%,rgba(119,63,210,.26),rgba(16,15,51,.92) 66%);
    box-shadow:0 30px 72px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.055);
}

.pd-flow-panel__label {
    display:block;
    margin-bottom:26px;
    color:#d27dff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.18em;
}

.pd-flow-panel__steps {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:9px;
}

.pd-flow-panel__steps i { font-style:normal; color:#8c78bd; font-size:18px; }

.pd-flow-step {
    display:flex;
    min-width:86px;
    min-height:100px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:12px 8px;
    border:1px solid rgba(173,110,255,.3);
    border-radius:16px;
    background:rgba(45,27,91,.75);
    transition:.22s ease;
}

.pd-flow-step:hover {
    transform:translateY(-5px);
    border-color:#d06eff;
    background:rgba(73,38,135,.86);
}

.pd-flow-step b { color:#d878ff; font-size:11px; letter-spacing:.12em; }
.pd-flow-step span { margin-top:10px; font-size:13px; font-weight:820; }

.pd-flow-panel__result {
    margin-top:27px;
    padding:22px 23px;
    border:1px solid rgba(184,118,255,.22);
    border-radius:18px;
    background:rgba(255,255,255,.045);
}

.pd-flow-panel__result strong { display:block; font-size:18px; line-height:1.5; }
.pd-flow-panel__result p { margin:9px 0 0; color:#bab6cf; font-size:13px; line-height:1.65; }

/* headings */
.pd-section-heading { max-width:820px; }
.pd-section-heading--center { margin:0 auto 50px; text-align:center; }
.pd-section-heading > span { display:block; margin-bottom:15px; color:#c976ff; font-size:11px; font-weight:900; letter-spacing:.19em; }
.pd-section-heading h2 { margin:0; font-size:clamp(35px,4vw,56px); line-height:1.25; letter-spacing:-.055em; }
.pd-section-heading p { margin:20px 0 0; color:#b8b5cb; font-size:16px; line-height:1.75; }

/* quick nav */
.pd-nav-section {
    padding:106px 0;
    background:linear-gradient(180deg,#11102c,#17143b);
}

.pd-nav-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:17px;
}

.pd-nav-card {
    position:relative;
    min-height:245px;
    padding:27px 21px 23px;
    border:1px solid rgba(177,109,255,.25);
    border-radius:21px;
    background:linear-gradient(180deg,rgba(48,29,93,.9),rgba(26,19,64,.96));
    box-shadow:0 21px 47px rgba(0,0,0,.19);
    transition:.24s ease;
}

.pd-nav-card:hover {
    transform:translateY(-7px);
    border-color:#c666ff;
    box-shadow:0 30px 62px rgba(0,0,0,.27),0 0 25px rgba(173,82,255,.15);
}

.pd-nav-card > b {
    position:absolute;
    top:20px;
    right:20px;
    color:rgba(214,194,240,.34);
    font-size:30px;
}

.pd-nav-card > span {
    display:grid;
    width:60px;
    height:60px;
    place-items:center;
    border:1px solid rgba(196,110,255,.48);
    border-radius:17px;
    background:linear-gradient(145deg,#b361ff,#6932cf);
    font-size:25px;
    font-weight:900;
}

.pd-nav-card h3 { margin:22px 0 0; font-size:22px; }
.pd-nav-card p { margin:13px 0 0; color:#bdb7cf; font-size:13px; line-height:1.65; }

/* detail sections */
.pd-detail-section {
    position:relative;
    overflow:hidden;
    padding:118px 0;
}

.pd-detail-section--purple {
    background:
        radial-gradient(circle at 10% 20%,rgba(135,71,255,.13),transparent 30%),
        linear-gradient(180deg,#100d2b,#17123d);
}

.pd-detail-section--dark {
    background:
        radial-gradient(circle at 90% 22%,rgba(229,75,255,.08),transparent 28%),
        linear-gradient(180deg,#090b20,#11112f);
}

.pd-detail-section > .wrap { position:relative; z-index:2; }

.pd-detail-intro {
    display:grid;
    grid-template-columns:minmax(390px,.9fr) minmax(560px,1.1fr);
    gap:67px;
    align-items:center;
    margin-bottom:54px;
}

.pd-detail-intro--reverse .pd-detail-copy { order:2; }
.pd-detail-intro--reverse > :not(.pd-detail-copy) { order:1; }

.pd-detail-number { display:block; margin-bottom:10px; color:rgba(188,128,255,.35); font-size:48px; line-height:1; font-weight:950; }
.pd-detail-label { display:block; margin-bottom:14px; color:#ca74ff; font-size:11px; font-weight:900; letter-spacing:.18em; }
.pd-detail-copy h2 { margin:0; font-size:clamp(36px,4vw,57px); line-height:1.25; letter-spacing:-.055em; }
.pd-detail-copy p { margin:23px 0 0; color:#c0bdd0; font-size:17px; line-height:1.85; word-break:keep-all; }

/* screen frame */
.pd-screen,
.pd-content-showcase figure,
.pd-mobile-showcase figure {
    margin:0;
}

.pd-screen {
    overflow:hidden;
    border:1px solid rgba(186,117,255,.33);
    border-radius:24px;
    background:#120f2f;
    box-shadow:0 28px 65px rgba(0,0,0,.28);
}

.pd-browser-bar {
    display:flex;
    height:42px;
    align-items:center;
    gap:7px;
    padding:0 15px;
    border-bottom:1px solid rgba(190,132,255,.18);
    background:#1b1742;
}

.pd-browser-bar i { width:8px; height:8px; border-radius:50%; background:#826aa8; }
.pd-browser-bar span { margin-left:8px; color:#b8a9cf; font-size:10px; }

.pd-screen__viewport {
    position:relative;
    overflow:hidden;
    background:#f4f3f7;
}

.pd-screen__viewport img {
    position:absolute;
    top:0;
    left:50%;
    width:100%;
    max-width:none;
    height:auto;
    transform:translateX(-50%);
}

.pd-screen__viewport--register { height:410px; }
.pd-screen__viewport--register img { width:135%; top:-10px; }

.pd-screen__viewport--list { height:410px; }
.pd-screen__viewport--list img { width:125%; top:-20px; }

.pd-screen__viewport--detail { height:410px; }
.pd-screen__viewport--detail img { width:130%; top:-5px; }

.pd-screen__viewport--video { height:360px; }
.pd-screen__viewport--video img { width:115%; top:-10px; }

.pd-screen__viewport--blog { height:250px; }
.pd-screen__viewport--blog img { width:120%; top:-10px; }

.pd-screen figcaption,
.pd-content-showcase figcaption {
    padding:19px 21px 21px;
}

.pd-screen figcaption strong,
.pd-content-showcase figcaption strong { display:block; font-size:17px; line-height:1.5; }
.pd-screen figcaption p,
.pd-content-showcase figcaption p { margin:7px 0 0; color:#b7b1c9; font-size:12px; line-height:1.6; }

/* mobile showcase */
.pd-mobile-showcase {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    align-items:start;
}

.pd-mobile-showcase figure {
    padding:12px 12px 14px;
    border:1px solid rgba(185,113,255,.26);
    border-radius:22px;
    background:rgba(40,25,80,.62);
    box-shadow:0 20px 45px rgba(0,0,0,.2);
}

.pd-mobile-showcase img {
    display:block;
    width:100%;
    height:390px;
    object-fit:cover;
    object-position:top;
    border-radius:15px;
}

.pd-mobile-showcase figcaption {
    padding:13px 4px 0;
    text-align:center;
    color:#e9ddf7;
    font-size:12px;
    font-weight:800;
}

/* content showcase */
.pd-content-showcase {
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:18px;
    align-items:stretch;
}

.pd-content-showcase__main,
.pd-content-showcase__side {
    overflow:hidden;
    border:1px solid rgba(185,113,255,.3);
    border-radius:23px;
    background:#120f2f;
    box-shadow:0 25px 58px rgba(0,0,0,.25);
}

/* feature cards */
.pd-feature-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.pd-feature-grid--four { grid-template-columns:repeat(4,minmax(0,1fr)); }

.pd-feature-grid article {
    min-height:245px;
    padding:28px 25px 24px;
    border:1px solid rgba(180,110,255,.24);
    border-radius:21px;
    background:linear-gradient(180deg,rgba(47,29,91,.9),rgba(25,19,63,.96));
    box-shadow:0 19px 44px rgba(0,0,0,.18);
    transition:.23s ease;
}

.pd-feature-grid article:hover {
    transform:translateY(-6px);
    border-color:rgba(210,105,255,.62);
}

.pd-feature-grid article span {
    display:block;
    margin-bottom:19px;
    color:#d078ff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.15em;
}

.pd-feature-grid article h3 { margin:0; font-size:21px; line-height:1.35; }
.pd-feature-grid article p { margin:15px 0 0; color:#bcb6ca; font-size:14px; line-height:1.75; }

/* result */
.pd-result-bar {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-top:28px;
    padding:23px 25px;
    border:1px solid rgba(188,116,255,.26);
    border-radius:19px;
    background:rgba(37,24,76,.72);
}

.pd-result-bar span {
    margin-right:7px;
    color:#cf75ff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.15em;
}

.pd-result-bar strong {
    display:inline-flex;
    min-height:36px;
    align-items:center;
    padding:0 14px;
    border:1px solid rgba(190,118,255,.31);
    border-radius:999px;
    background:rgba(92,48,150,.4);
    font-size:12px;
    font-weight:780;
}

/* why */
.pd-why-section {
    padding:112px 0;
    background:
        radial-gradient(circle at 50% 10%,rgba(142,69,255,.18),transparent 35%),
        linear-gradient(180deg,#12102f,#09091d);
}

.pd-why-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:19px;
}

.pd-why-grid > div {
    min-height:220px;
    padding:27px 24px;
    border:1px solid rgba(183,112,255,.24);
    border-radius:20px;
    background:rgba(52,30,97,.64);
}

.pd-why-grid b { color:#cf75ff; font-size:11px; letter-spacing:.15em; }
.pd-why-grid strong { display:block; margin-top:23px; font-size:20px; line-height:1.4; }
.pd-why-grid p { margin:14px 0 0; color:#b7b0c6; font-size:13px; line-height:1.7; }

.pd-final-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-top:42px;
    padding:35px 38px;
    border:1px solid rgba(190,116,255,.35);
    border-radius:23px;
    background:linear-gradient(100deg,rgba(76,35,140,.92),rgba(34,22,82,.96));
    box-shadow:0 24px 57px rgba(0,0,0,.22);
}

.pd-final-cta span { display:block; margin-bottom:9px; color:#d17cff; font-size:11px; font-weight:900; letter-spacing:.18em; }
.pd-final-cta strong { display:block; font-size:25px; line-height:1.46; }
.pd-final-cta a {
    display:inline-flex;
    flex:0 0 auto;
    min-height:53px;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 24px;
    border-radius:11px;
    background:linear-gradient(135deg,#a45dff,#6634dc);
    font-size:14px;
    font-weight:850;
    box-shadow:0 14px 31px rgba(104,49,213,.31);
}

/* responsive */
@media(max-width:1120px){
    .pd-hero__layout,
    .pd-detail-intro {
        grid-template-columns:1fr;
    }

    .pd-detail-intro--reverse .pd-detail-copy,
    .pd-detail-intro--reverse > :not(.pd-detail-copy) {
        order:initial;
    }

    .pd-nav-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .pd-feature-grid,
    .pd-feature-grid--four { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pd-why-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:720px){
    .pd-hero { padding:70px 0 76px; }
    .pd-hero__copy h1 { font-size:59px; }
    .pd-hero__copy h2 { font-size:31px; }
    .pd-hero__actions { flex-direction:column; }
    .pd-button { width:100%; }

    .pd-flow-panel { padding:25px 20px; }
    .pd-flow-panel__steps { display:grid; grid-template-columns:1fr; }
    .pd-flow-panel__steps i { text-align:center; transform:rotate(90deg); }
    .pd-flow-step { min-height:74px; }

    .pd-nav-section,
    .pd-detail-section,
    .pd-why-section { padding:82px 0; }

    .pd-nav-grid,
    .pd-feature-grid,
    .pd-feature-grid--four,
    .pd-why-grid,
    .pd-mobile-showcase,
    .pd-content-showcase { grid-template-columns:1fr; }

    .pd-detail-copy h2 { font-size:34px; }

    .pd-mobile-showcase img { height:520px; }

    .pd-result-bar { align-items:flex-start; flex-direction:column; }
    .pd-result-bar strong { width:100%; justify-content:center; }

    .pd-final-cta { align-items:flex-start; flex-direction:column; }
    .pd-final-cta a { width:100%; }

    .pd-screen__viewport--register,
    .pd-screen__viewport--list,
    .pd-screen__viewport--detail { height:280px; }
}