@charset "utf-8";

/* 변호사 상세 - 기존 문정 디자인 체계에 맞춘 전용 스타일 */
.member-view-renewal {
    --member-navy:#092054;
    --member-deep:#06183e;
    --member-gold:#b59658;
    --member-line:#e1e4e9;
    --member-muted:#687080;
    color:#171717;
}
.member-view-renewal *,
.member-view-renewal *:before,
.member-view-renewal *:after {
    box-sizing:border-box;
}

/* 1. 프로필 사진과 기본 정보 */
.member-profile-hero {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,54%) minmax(0,46%);
    width:100vw;
    min-height:620px;
    margin-left:calc(50% - 50vw);
    padding-right:calc((100vw - 1200px) / 2);
    padding-left:calc((100vw - 1200px) / 2);
    overflow:hidden;
    background:#f4f6f8 url('/images/sub/member_view_bg.jpg') no-repeat center/cover;
}
.member-profile-photo {
    display:flex;
    align-items:flex-end;
    justify-content:center;
    min-width:0;
    min-height:620px;
    overflow:hidden;
}
.member-profile-photo img {
    display:block;
    width:100%;
    height:620px;
    object-fit:contain;
    object-position:center bottom;
}
.member-photo-placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    color:#8b9099;
    font-size:18px;
}
.member-profile-copy {
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
    min-width:0;
    padding:70px 30px 70px 70px;
}
.member-profile-role {
    display:inline-block;
    padding:7px 12px;
    background:var(--member-navy);
    color:#fff;
    font-size:14px;
    line-height:1;
}
.member-profile-copy h1 {
    margin-top:18px;
    color:#111;
    font-weight:400;
    font-size:26px;
    line-height:1.2;
}
.member-profile-copy h1 strong {
    margin-right:7px;
    font-weight:700;
    font-size:48px;
}
.member-profile-intro {
    margin-top:28px;
    color:#525a66;
    font-size:19px;
    line-height:1.7;
}
.member-profile-intro span {
    display:block;
}
.member-profile-contact {
    display:flex;
    flex-wrap:wrap;
    gap:10px 28px;
    margin-top:34px;
}
.member-profile-contact div {
    display:flex;
    min-width:0;
    gap:8px;
}
.member-profile-contact dt {
    flex:0 0 auto;
    color:var(--member-navy);
    font-weight:700;
}
.member-profile-contact dd {
    min-width:0;
    margin:0;
    overflow-wrap:anywhere;
}
.member-reservation-btn {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    min-width:205px;
    padding:16px 20px;
    background:var(--member-navy);
    color:#fff !important;
    font-weight:600;
    font-size:16px;
    line-height:1;
    transition:background-color .2s ease;
}
.member-reservation-btn:hover,
.member-reservation-btn:focus {
    background:var(--member-deep);
}
.member-reservation-btn.hero {
    margin-top:32px;
}

/* 상단 프로필 비주얼 */
.member-overview-head {
    display:grid;
    grid-template-columns:minmax(0,68%) minmax(340px,32%);
    align-items:stretch;
    gap:0;
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:112px max(30px, calc((100vw - 1500px) / 2)) 54px;
    border-bottom:1px solid #dfe2e7;
    background:#f4f6f8 url('/images/sub/member_view_bg.jpg') no-repeat center/cover;
}
.member-hero-primary {
    display:grid;
    grid-template-columns:minmax(330px,40%) minmax(0,60%);
    align-items:center;
    min-width:0;
    padding-right:48px;
    border-right:1px solid rgba(9,32,84,.18);
}
.member-overview-head .member-profile-copy {
    width:100%;
    max-width:430px;
    padding:20px 42px 20px 0;
}
.member-hero-primary .member-profile-gallery {
    min-width:0;
    padding:0 !important;
    border:0;
}
.member-hero-rail {
    display:flex;
    justify-content:center;
    flex-direction:column;
    min-width:0;
    padding-left:48px;
}
.member-hero-rail .member-overview-certificate,
.member-hero-rail .member-overview-activities {
    min-width:0;
    padding:0 !important;
}
.member-hero-rail .member-overview-activities {
    margin-top:34px;
    padding-top:30px !important;
    border-top:1px solid rgba(9,32,84,.16);
}
.member-gallery-stage {
    position:relative;
    height:500px;
    overflow:hidden;
    border:1px solid var(--member-line);
    background:#f3f4f6;
    touch-action:pan-y;
    user-select:none;
}
.member-gallery-slide {
    width:100%;
    height:100%;
}
.member-gallery-slide[hidden] {
    display:none;
}
.member-gallery-slide > img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    transition:opacity .25s ease;
}
.member-gallery-placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    width:100%;
    height:100%;
    padding:30px;
    color:#717783;
    text-align:center;
}
.member-gallery-placeholder img {
    width:110px;
    max-width:45%;
    height:auto;
    margin-bottom:24px;
    opacity:.38;
}
.member-gallery-arrow {
    position:absolute;
    z-index:2;
    top:50%;
    width:42px;
    height:42px;
    padding:0;
    transform:translateY(-50%);
    border:1px solid rgba(255,255,255,.75);
    background:rgba(9,32,84,.78);
    color:#fff;
    font-size:19px;
    cursor:pointer;
}
.member-gallery-arrow.prev { left:12px; }
.member-gallery-arrow.next { right:12px; }
.member-gallery-arrow:hover,
.member-gallery-arrow:focus { background:var(--member-navy); }
.member-gallery-thumbs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:10px;
}
.member-gallery-thumb {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:72px;
    padding:0;
    overflow:hidden;
    border:1px solid #d9dde3;
    background:#f3f4f6;
    cursor:pointer;
}
.member-gallery-thumb.is-active {
    border:2px solid var(--member-navy);
}
.member-gallery-thumb img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
}
.member-gallery-thumb:not(.is-active) img { opacity:.66; }
.member-gallery-thumb.is-placeholder img {
    width:58%;
    height:58%;
    object-fit:contain;
    opacity:.25;
}
.member-overview-certificate .member-certificate-frame {
    min-height:330px;
    padding:16px;
}
.member-overview-certificate .member-certificate-frame img {
    height:298px;
}
.member-hero-rail .member-section-title {
    margin-bottom:18px;
}
.member-hero-rail .member-section-title h2 {
    font-size:23px;
}
.member-overview-activities ul {
    border-top:2px solid var(--member-navy);
}
.member-overview-activities li {
    position:relative;
    padding:18px 8px 18px 22px;
    border-bottom:1px solid var(--member-line);
    color:#292929;
    font-size:16px;
    line-height:1.55;
    word-break:keep-all;
}
.member-overview-activities li:before {
    content:"";
    position:absolute;
    top:27px;
    left:6px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--member-gold);
}

/* 2. 전문등록증서와 활동사항 */
.member-qualification-section {
    display:grid;
    grid-template-columns:minmax(0,44%) minmax(0,56%);
    gap:56px;
    padding-top:72px;
}
.member-certificate-block,
.member-activity-block {
    min-width:0;
}
.member-section-title {
    margin-bottom:27px;
}
.member-section-title > span,
.member-related-section > header span {
    display:block;
    margin-bottom:7px;
    color:var(--member-gold);
    font-size:13px;
    font-weight:700;
    letter-spacing:.12em;
}
.member-section-title h2,
.member-related-section > header h2 {
    color:#111;
    font-size:28px;
    line-height:1.25;
}
.member-certificate-frame {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:480px;
    padding:24px;
    border:1px solid var(--member-line);
    background:#f7f8fa;
}
.member-certificate-frame img {
    display:block;
    width:100%;
    height:430px;
    object-fit:contain;
    object-position:center;
}
.member-certificate-placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    width:76%;
    aspect-ratio:3 / 4;
    border:1px solid #d4c39f;
    background:#fff;
    color:#858585;
    text-align:center;
}
.member-certificate-placeholder:before {
    content:"";
    width:34px;
    height:2px;
    margin-bottom:20px;
    background:var(--member-gold);
}
.member-certificate-placeholder strong {
    color:var(--member-navy);
    font-size:19px;
}
.member-certificate-placeholder span {
    margin-top:9px;
    font-size:13px;
}
.member-activity-block {
    padding-left:45px;
    border-left:1px solid var(--member-line);
}
.member-activity-block ul {
    border-top:2px solid var(--member-navy);
}
.member-activity-block li {
    position:relative;
    padding:20px 12px 20px 25px;
    border-bottom:1px solid var(--member-line);
    color:#292929;
    font-size:17px;
    line-height:1.55;
    word-break:keep-all;
}
.member-activity-block li:before {
    content:"";
    position:absolute;
    top:29px;
    left:7px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--member-gold);
}
.member-empty-copy {
    padding:28px 0;
    border-top:2px solid var(--member-navy);
    border-bottom:1px solid var(--member-line);
    color:#888;
}

/* 중간 상담 유도 */
.member-reservation-band {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-top:80px;
    padding:30px 36px;
    border-left:4px solid var(--member-navy);
    background:#f2f4f7;
}
.member-reservation-band strong {
    display:block;
    color:#111;
    font-size:21px;
}
.member-reservation-band p {
    margin-top:7px;
    color:var(--member-muted);
    font-size:15px;
}

/* 3. 성공사례, 고객후기, 영상 */
.member-related-section {
    min-width:0;
    padding-top:90px;
}
.member-related-section > header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:30px;
}
.member-related-section > header > a {
    flex:0 0 auto;
    padding:8px 0;
    color:#555;
    font-size:14px;
}
.member-related-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    min-width:0;
}
.member-related-card,
.member-video-card {
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    border:1px solid var(--member-line);
    background:#fff;
    text-align:left;
    transition:border-color .2s ease,box-shadow .2s ease;
}
.member-related-card:hover,
.member-related-card:focus,
.member-video-card:hover,
.member-video-card:focus {
    border-color:#bdc4cf;
    box-shadow:0 10px 24px rgba(9,32,84,.09);
}
.member-related-card .thumb,
.member-video-card .thumb {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:16 / 10;
    overflow:hidden;
    background:#eef0f3;
    color:var(--member-navy);
    font-weight:700;
}
.member-related-card .thumb img,
.member-video-card .thumb img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}
.member-related-card .copy,
.member-video-card .copy {
    display:block;
    padding:21px 22px 24px;
}
.member-related-card em,
.member-video-card em {
    display:block;
    margin-bottom:9px;
    color:var(--member-gold);
    font-style:normal;
    font-size:13px;
}
.member-related-card h3,
.member-video-card strong {
    display:block;
    min-height:52px;
    overflow-wrap:anywhere;
    color:#171717;
    font-size:18px;
    line-height:1.45;
    word-break:keep-all;
}
.member-related-card .copy > span {
    display:block;
    margin-top:18px;
    color:var(--member-navy);
    font-size:13px;
    font-weight:700;
}
.member-video-card {
    padding:0;
    cursor:pointer;
}
.member-video-card .thumb {
    aspect-ratio:16 / 9;
    background:var(--member-deep);
}
.member-video-card .thumb i {
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:50%;
    background:rgba(255,255,255,.94);
    color:var(--member-navy);
    font-style:normal;
}
.member-video-card small {
    display:block;
    margin-top:12px;
    color:#888;
}

/* 하단 상담 유도 */
.member-reservation-bottom {
    margin-top:90px;
    padding:52px 30px;
    background:var(--member-navy);
    color:#fff;
    text-align:center;
}
.member-reservation-bottom h2 {
    color:#fff;
    font-size:28px;
}
.member-reservation-bottom p {
    margin-top:10px;
    color:#d4dbea;
    font-size:15px;
}
.member-reservation-bottom .member-reservation-btn {
    margin-top:23px;
}
.member-reservation-btn.light {
    background:var(--member-gold);
}
.member-reservation-btn.light:hover,
.member-reservation-btn.light:focus {
    background:#a58447;
}
.member-mobile-reservation {
    display:none;
}

/* 영상 모달 */
.member-video-modal {
    position:fixed;
    z-index:10000;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.75);
}
.member-video-modal[hidden] {
    display:none;
}
.member-video-modal .panel {
    position:relative;
    width:min(900px,100%);
}
.member-video-modal .close {
    position:absolute;
    top:-45px;
    right:0;
    border:0;
    background:transparent;
    color:#fff;
    font-size:34px;
}
.member-video-modal .frame {
    aspect-ratio:16 / 9;
    background:#000;
}
.member-video-modal iframe {
    width:100%;
    height:100%;
    border:0;
}

@media screen and (max-width:1200px) {
    .member-profile-hero {
        padding-right:30px;
        padding-left:30px;
    }
    .member-overview-head {
        padding-right:30px;
        padding-left:30px;
    }
}

@media screen and (max-width:1100px) {
    .member-overview-head {
        grid-template-columns:minmax(0,1fr);
        gap:46px;
    }
    .member-hero-primary {
        grid-template-columns:minmax(330px,38%) minmax(0,62%);
        padding-right:0;
        border-right:0;
    }
    .member-hero-rail {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:46px;
        padding:42px 0 0;
        border-top:1px solid rgba(9,32,84,.18);
    }
    .member-hero-rail .member-overview-activities {
        margin-top:0;
        padding-top:0 !important;
        border-top:0;
    }
}

@media screen and (max-width:950px) {
    .member-profile-hero {
        grid-template-columns:minmax(0,52%) minmax(0,48%);
        min-height:540px;
    }
    .member-profile-photo {
        min-height:540px;
    }
    .member-profile-photo img {
        height:540px;
    }
    .member-profile-copy {
        padding:55px 25px 55px 38px;
    }
    .member-profile-copy h1 strong {
        font-size:39px;
    }
    .member-qualification-section {
        gap:40px;
    }
    .member-activity-block {
        padding-left:30px;
    }
    .member-certificate-frame {
        min-height:430px;
        padding:18px;
    }
    .member-certificate-frame img {
        height:392px;
    }
    .member-related-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media screen and (max-width:767px) {
    body.member-reservation-active {
        padding-bottom:68px;
    }
    body.member-reservation-active .floating-consult-bar {
        display:none !important;
    }
    .member-profile-hero {
        display:flex;
        flex-direction:column;
        min-height:0;
        padding-top:95px;
        padding-right:0;
        padding-left:0;
    }
    .member-profile-photo {
        order:1;
        width:100%;
        min-height:0;
        height:460px;
    }
    .member-profile-photo img {
        width:100%;
        height:100%;
        max-width:100%;
        object-fit:contain;
        object-position:center bottom;
    }
    .member-profile-copy {
        order:2;
        width:100%;
        padding:32px 20px 40px;
        background:rgba(255,255,255,.88);
    }
    .member-profile-copy h1 {
        margin-top:14px;
        font-size:19px;
    }
    .member-profile-copy h1 strong {
        font-size:34px;
    }
    .member-profile-intro {
        margin-top:18px;
        font-size:16px;
    }
    .member-profile-contact {
        flex-direction:column;
        gap:7px;
        margin-top:22px;
        font-size:14px;
    }
    .member-reservation-btn.hero {
        display:none;
    }
    .member-overview-head {
        display:grid;
        grid-template-columns:minmax(0,1fr);
        gap:42px;
        padding:105px 20px 38px;
    }
    .member-hero-primary {
        grid-template-columns:minmax(0,1fr);
    }
    .member-overview-head .member-profile-copy {
        order:initial;
        width:100%;
        max-width:none;
        padding:0;
        background:transparent;
    }
    .member-hero-primary .member-profile-gallery {
        margin-top:42px;
    }
    .member-hero-rail {
        display:grid;
        grid-template-columns:minmax(0,1fr);
        gap:0;
        padding-top:42px;
    }
    .member-hero-rail .member-overview-activities {
        margin-top:45px;
        padding-top:42px !important;
        border-top:1px solid var(--member-line);
    }
    .member-gallery-stage {
        height:430px;
    }
    .member-gallery-thumbs {
        gap:6px;
        margin-top:7px;
    }
    .member-gallery-thumb {
        height:72px;
    }
    .member-gallery-arrow {
        width:38px;
        height:38px;
    }
    .member-overview-certificate .member-certificate-frame {
        min-height:0;
        padding:18px;
    }
    .member-overview-certificate .member-certificate-frame img {
        height:auto;
        max-height:520px;
    }
    .member-overview-activities li {
        padding:16px 8px 16px 22px;
        font-size:15px;
    }
    .member-overview-activities li:before {
        top:25px;
    }
    .member-qualification-section {
        grid-template-columns:minmax(0,1fr);
        gap:50px;
        padding-top:55px;
    }
    .member-section-title {
        margin-bottom:20px;
    }
    .member-section-title h2,
    .member-related-section > header h2 {
        font-size:23px;
    }
    .member-certificate-frame {
        width:100%;
        min-height:0;
        padding:18px;
    }
    .member-certificate-frame img {
        width:100%;
        height:auto;
        max-height:520px;
        object-fit:contain;
    }
    .member-certificate-placeholder {
        width:min(82%,300px);
    }
    .member-activity-block {
        padding-left:0;
        border-left:0;
    }
    .member-activity-block li {
        padding:16px 8px 16px 22px;
        font-size:15px;
    }
    .member-activity-block li:before {
        top:25px;
        left:6px;
    }
    .member-reservation-band {
        align-items:stretch;
        flex-direction:column;
        gap:20px;
        margin-top:55px;
        padding:24px;
    }
    .member-reservation-band strong {
        font-size:18px;
    }
    .member-reservation-band .member-reservation-btn {
        width:100%;
    }
    .member-related-section {
        padding-top:60px;
    }
    .member-related-section > header {
        align-items:flex-end;
        margin-bottom:22px;
    }
    .member-related-grid {
        grid-template-columns:minmax(0,1fr);
        gap:18px;
        width:100%;
        overflow:visible;
    }
    .member-related-card,
    .member-video-card {
        width:100%;
        min-width:0;
        max-width:100%;
    }
    .member-related-card .thumb,
    .member-video-card .thumb {
        width:100%;
        height:auto;
    }
    .member-related-card .thumb img,
    .member-video-card .thumb img {
        max-width:100%;
        object-fit:contain;
        object-position:center;
    }
    .member-related-card h3,
    .member-video-card strong {
        min-height:0;
        font-size:16px;
    }
    .member-reservation-bottom {
        margin-top:60px;
        padding:40px 20px;
    }
    .member-reservation-bottom h2 {
        font-size:23px;
    }
    .member-mobile-reservation {
        position:fixed;
        z-index:9999;
        right:0;
        bottom:0;
        left:0;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:11px 16px max(11px,env(safe-area-inset-bottom));
        background:#071a43;
        color:#fff;
        box-shadow:0 -4px 15px rgba(0,0,0,.18);
    }
    .member-mobile-reservation a {
        padding:11px 18px;
        background:var(--member-gold);
        color:#fff;
        font-weight:700;
    }
}

@media screen and (max-width:420px) {
    .member-profile-photo {
        height:400px;
    }
    .member-profile-copy {
        padding-right:16px;
        padding-left:16px;
    }
    .member-related-section > header > a {
        font-size:12px;
    }
    .member-related-card .copy,
    .member-video-card .copy {
        padding:18px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .member-reservation-btn,
    .member-related-card,
    .member-video-card {
        transition:none;
    }
}