/* =========================================================
   GWANGJU HOSPITAL
   ABOUT V2
========================================================= */

:root{
    --about-navy:#07365e;
    --about-navy2:#092f50;
    --about-blue:#087fd1;
    --about-sky:#16a2eb;
    --about-text:#163c59;
    --about-muted:#748b9c;
    --about-line:#dfe9f0;
    --about-soft:#f4f9fc;
}

.about-v2{
    background:#fff;
    color:var(--about-text);
}

.about-v2 *{
    box-sizing:border-box;
}

.about-container{
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
}


/* =========================================================
   HERO
========================================================= */

.about-hero{
    position:relative;
    overflow:hidden;
    min-height:390px;
    display:flex;
    align-items:center;
    background:
        radial-gradient(
            circle at 86% 38%,
            rgba(55,190,255,.34),
            transparent 31%
        ),
        linear-gradient(
            118deg,
            #062e50 0%,
            #075a99 55%,
            #159de3 100%
        );
}

.about-hero:before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-80px;
    top:-190px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;
}

.about-hero:after{
    content:"";
    position:absolute;
    width:330px;
    height:330px;
    right:120px;
    bottom:-220px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
}

.about-hero-inner{
    position:relative;
    z-index:2;
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:70px;
    align-items:center;
}

.about-breadcrumb{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:23px;
    color:#b9d8eb;
    font-size:12px;
    font-weight:700;
}

.about-breadcrumb b{
    color:#fff;
}

.about-eyebrow{
    display:block;
    margin-bottom:12px;
    color:#76d0ff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.18em;
}

.about-hero h1{
    margin:0;
    color:#fff;
    font-size:52px;
    line-height:1.12;
    letter-spacing:-.055em;
}

.about-hero-copy{
    max-width:630px;
    margin:18px 0 0;
    color:#d8eaf5;
    font-size:15px;
    line-height:1.8;
    word-break:keep-all;
}

.about-hero-symbol{
    position:relative;
    min-height:205px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:34px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:26px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
}

.about-hero-symbol small{
    color:#9bd9fb;
    font-size:11px;
    font-weight:800;
    letter-spacing:.2em;
}

.about-hero-symbol strong{
    display:block;
    margin-top:9px;
    color:#fff;
    font-size:28px;
    letter-spacing:-.03em;
}

.about-hero-symbol span{
    display:block;
    margin-top:30px;
    color:#c8e3f3;
    font-size:12px;
}


/* =========================================================
   ABOUT NAV
========================================================= */

.about-anchor-wrap{
    position:relative;
    z-index:4;
    margin-top:-35px;
}

.about-anchor{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    overflow:hidden;
    border:1px solid #e1eaf0;
    border-radius:18px;
    background:#fff;
    box-shadow:0 18px 50px rgba(16,62,95,.10);
}

.about-anchor a{
    position:relative;
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-right:1px solid #e8eff4;
    color:#557085;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    transition:.2s ease;
}

.about-anchor a:last-child{
    border-right:0;
}

.about-anchor a span{
    color:#0d8ddd;
    font-size:10px;
    font-weight:900;
}

.about-anchor a:hover{
    background:#f5fbff;
    color:#087dc9;
}


/* =========================================================
   INTRO
========================================================= */

.about-intro{
    padding:115px 0 105px;
}

.about-intro-grid{
    display:grid;
    grid-template-columns:430px minmax(0,1fr);
    gap:90px;
    align-items:start;
}

.about-section-label{
    display:block;
    margin-bottom:12px;
    color:#078be0;
    font-size:11px;
    font-weight:900;
    letter-spacing:.16em;
}

.about-intro h2,
.about-history-head h2,
.about-director-copy h2{
    margin:0;
    color:#143c5a;
    font-size:39px;
    line-height:1.25;
    letter-spacing:-.055em;
}

.about-intro-lead{
    margin:22px 0 0;
    color:#4f7188;
    font-size:17px;
    font-weight:700;
    line-height:1.8;
    word-break:keep-all;
}

.about-intro-body{
    padding-top:4px;
}

.about-intro-body p{
    margin:0 0 18px;
    color:#6d8596;
    font-size:14px;
    line-height:2;
    word-break:keep-all;
}

.about-philosophy{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:35px;
}

.about-philosophy article{
    min-height:150px;
    padding:24px 21px;
    border:1px solid #e1ebf1;
    border-radius:17px;
    background:#fff;
}

.about-philosophy b{
    display:block;
    margin-bottom:19px;
    color:#0c8ddd;
    font-size:10px;
    letter-spacing:.12em;
}

.about-philosophy strong{
    display:block;
    color:#193f5b;
    font-size:17px;
}

.about-philosophy p{
    margin:7px 0 0;
    color:#8396a4;
    font-size:11px;
    line-height:1.7;
}


/* =========================================================
   DIRECTOR
========================================================= */

.about-director{
    padding:95px 0;
    background:#f4f9fc;
}

.about-director-grid{
    display:grid;
    grid-template-columns:330px minmax(0,1fr);
    gap:80px;
    align-items:center;
}

.about-director-visual{
    position:relative;
    min-height:400px;
    overflow:hidden;
    border-radius:24px;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(41,171,238,.34),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #073d69,
            #0a82c9
        );
}

.about-director-visual:before{
    content:"";
    position:absolute;
    width:270px;
    height:270px;
    right:-90px;
    top:-70px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:50%;
}

.about-director-mark{
    position:absolute;
    left:30px;
    bottom:31px;
}

.about-director-mark small{
    display:block;
    color:#8bd6fb;
    font-size:10px;
    font-weight:900;
    letter-spacing:.15em;
}

.about-director-mark strong{
    display:block;
    margin-top:8px;
    color:#fff;
    font-size:27px;
}

.about-director-copy .about-section-label{
    margin-bottom:13px;
}

.about-director-copy > p{
    margin:23px 0 0;
    color:#647e90;
    font-size:14px;
    line-height:2;
    word-break:keep-all;
}

.about-director-name{
    display:flex;
    align-items:flex-end;
    gap:11px;
    margin-top:31px;
    padding-top:23px;
    border-top:1px solid #d9e6ee;
}

.about-director-name span{
    color:#71899a;
    font-size:12px;
}

.about-director-name strong{
    color:#173f5c;
    font-size:20px;
}


/* =========================================================
   HISTORY
========================================================= */

.about-history{
    padding:110px 0 120px;
}

.about-history-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:60px;
    align-items:end;
    padding-bottom:37px;
    border-bottom:1px solid #dfe8ee;
}

.about-history-head p{
    margin:0;
    color:#71899b;
    font-size:13px;
    line-height:1.8;
    word-break:keep-all;
}

.about-history-layout{
    display:grid;
    grid-template-columns:185px minmax(0,1fr);
    gap:45px;
    margin-top:42px;
}

.about-year-nav{
    position:sticky;
    top:110px;
    align-self:start;
}

.about-year-nav button{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:11px 14px;
    border:0;
    border-bottom:1px solid #edf2f5;
    background:transparent;
    color:#9aabb6;
    font-family:inherit;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}

.about-year-nav button.on{
    color:#0787d8;
}

.about-year-nav button.on:after{
    content:"→";
}

.about-history-list{
    min-width:0;
}

.about-year-group{
    display:grid;
    grid-template-columns:105px minmax(0,1fr);
    gap:25px;
    padding:0 0 47px;
}

.about-year{
    color:#0a87d7;
    font-size:25px;
    font-weight:900;
    letter-spacing:-.04em;
}

.about-events{
    position:relative;
    padding-left:27px;
    border-left:1px solid #dce8ef;
}

.about-event{
    position:relative;
    display:grid;
    grid-template-columns:75px minmax(0,1fr);
    gap:17px;
    padding:0 0 21px;
}

.about-event:last-child{
    padding-bottom:0;
}

.about-event:before{
    content:"";
    position:absolute;
    left:-32px;
    top:6px;
    width:9px;
    height:9px;
    border:3px solid #fff;
    border-radius:50%;
    background:#1599e5;
    box-shadow:0 0 0 1px #b9dced;
}

.about-event-date{
    color:#168bd5;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

.about-event-text{
    color:#526f83;
    font-size:13px;
    line-height:1.75;
    word-break:keep-all;
}

.about-history-empty{
    padding:35px;
    border-radius:16px;
    background:#f5f9fb;
    color:#8295a3;
    font-size:13px;
}


/* =========================================================
   LINKS
========================================================= */

.about-links{
    padding:0 0 120px;
}

.about-links-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.about-link-card{
    position:relative;
    min-height:185px;
    padding:27px;
    overflow:hidden;
    border:1px solid #dce8f0;
    border-radius:19px;
    background:#fff;
    text-decoration:none;
}

.about-link-card:first-child{
    border-color:transparent;
    background:linear-gradient(140deg,#06365f,#087fc4);
}

.about-link-card small{
    color:#0a8bdf;
    font-size:9px;
    font-weight:900;
    letter-spacing:.13em;
}

.about-link-card:first-child small{
    color:#83d2fb;
}

.about-link-card strong{
    display:block;
    margin-top:12px;
    color:#183e5b;
    font-size:20px;
}

.about-link-card:first-child strong{
    color:#fff;
}

.about-link-card p{
    margin:8px 0 0;
    color:#8296a5;
    font-size:11px;
    line-height:1.7;
}

.about-link-card:first-child p{
    color:#c9e2f1;
}

.about-link-card b{
    position:absolute;
    right:25px;
    bottom:23px;
    color:#0b8cdc;
    font-size:20px;
}

.about-link-card:first-child b{
    color:#fff;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:900px){

    .about-container,
    .about-hero-inner{
        width:min(100% - 32px,1180px);
    }

    .about-hero{
        min-height:350px;
    }

    .about-hero-inner{
        grid-template-columns:1fr;
    }

    .about-hero-symbol{
        display:none;
    }

    .about-hero h1{
        font-size:39px;
    }

    .about-anchor{
        grid-template-columns:repeat(2,1fr);
    }

    .about-anchor a{
        min-height:63px;
    }

    .about-anchor a:nth-child(2){
        border-right:0;
    }

    .about-anchor a:nth-child(-n+2){
        border-bottom:1px solid #e8eff4;
    }

    .about-intro{
        padding:85px 0 75px;
    }

    .about-intro-grid,
    .about-director-grid,
    .about-history-head{
        grid-template-columns:1fr;
        gap:35px;
    }

    .about-philosophy{
        grid-template-columns:1fr;
    }

    .about-director{
        padding:70px 0;
    }

    .about-director-visual{
        min-height:250px;
    }

    .about-history{
        padding:80px 0;
    }

    .about-history-layout{
        grid-template-columns:1fr;
    }

    .about-year-nav{
        position:static;
        display:flex;
        gap:7px;
        overflow-x:auto;
        padding-bottom:5px;
    }

    .about-year-nav button{
        width:auto;
        flex:none;
        padding:8px 13px;
        border:1px solid #deebf2;
        border-radius:100px;
    }

    .about-year-nav button.on{
        border-color:#0a8ddd;
        background:#0a8ddd;
        color:#fff;
    }

    .about-year-nav button.on:after{
        display:none;
    }

    .about-links-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:600px){

    .about-hero{
        min-height:310px;
    }

    .about-breadcrumb{
        font-size:10px;
    }

    .about-hero h1{
        font-size:34px;
    }

    .about-hero-copy{
        font-size:13px;
    }

    .about-anchor-wrap{
        margin-top:-25px;
    }

    .about-intro h2,
    .about-history-head h2,
    .about-director-copy h2{
        font-size:29px;
    }

    .about-intro-lead{
        font-size:15px;
    }

    .about-history-layout{
        gap:27px;
    }

    .about-year-group{
        grid-template-columns:1fr;
        gap:13px;
        padding-bottom:40px;
    }

    .about-year{
        font-size:22px;
    }

    .about-events{
        margin-left:4px;
    }

    .about-event{
        grid-template-columns:64px minmax(0,1fr);
        gap:11px;
    }

    .about-event-text{
        font-size:12px;
    }

}


/* =========================================================
   ABOUT FOOTER / GLOBAL AI FINAL FIX
   ========================================================= */

body.about-page footer,
body footer{
    position:relative;
    z-index:2;
}

/* 병원소개 페이지 footer */
footer{
    width:100%;
    margin-top:0;
    padding:42px 24px 46px;
    background:#f4f8fb;
    border-top:1px solid #e7eef5;
}

footer > div{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
}

footer img{
    display:block;
    width:auto;
    height:38px;
    max-width:180px;
    object-fit:contain;
    margin-bottom:17px;
}

footer p{
    margin:0 0 8px;
    color:#60758a;
    font-size:13px;
    line-height:1.6;
}

footer small{
    display:block;
    color:#91a2b3;
    font-size:11px;
    line-height:1.5;
}


/*
 * about 페이지 안에 과거에 생성했던
 * 자체 floating AI가 남더라도 숨김.
 * 실제 AI 버튼은 sub-ai-drawer.php가 담당.
 */
main + .gjh-ai-float{
    display:none !important;
}


@media(max-width:720px){

    footer{
        padding:34px 20px 100px;
    }

    footer > div{
        width:100%;
    }

    footer img{
        height:32px;
    }

}