/* =========================================================
   COMPLAINT PROCEDURE FLOWCHART - V33
   ========================================================= */

.complaint-procedure-section{
    padding-top:52px;
}

.complaint-flow-head,
.complaint-flow-subhead{
    max-width:72ch;
}

.complaint-flowchart{
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    gap:26px;
    align-items:start;
}

.complaint-origin-card{
    position:sticky;
    top:118px;
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:24px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 18px 34px -30px rgba(11,30,61,.28);
}

.complaint-origin-icon,
.complaint-branch-icon,
.complaint-channel-icon{
    display:grid;
    place-items:center;
    border-radius:999px;
    flex:0 0 auto;
}

.complaint-origin-icon{
    width:68px;
    height:68px;
    background:#EEF4FF;
    color:var(--royal);
    font-size:1.55rem;
}

.complaint-origin-label,
.complaint-branch-type{
    display:inline-block;
    margin-bottom:8px;
    color:var(--royal);
    font-family:'JetBrains Mono',monospace;
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.complaint-origin-card h3{
    margin:0 0 8px;
    font-size:1.1rem;
}

.complaint-origin-card p{
    margin:0;
    color:var(--ink-soft);
    font-size:.92rem;
    line-height:1.7;
}

.complaint-branch-list{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.complaint-branch-list::before{
    content:"";
    position:absolute;
    left:-14px;
    top:52px;
    bottom:52px;
    width:2px;
    background:#D9E2F0;
}

.complaint-branch{
    position:relative;
    padding:22px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 18px 34px -30px rgba(11,30,61,.22);
}

.complaint-branch::before{
    content:"";
    position:absolute;
    left:-14px;
    top:42px;
    width:14px;
    height:2px;
    background:#D9E2F0;
}

.complaint-branch-head{
    display:flex;
    gap:16px;
    align-items:flex-start;
    margin-bottom:18px;
}

.complaint-branch-head h3{
    margin:0 0 6px;
    font-size:1.12rem;
}

.complaint-branch-head p{
    margin:0;
    color:var(--ink-soft);
    font-size:.9rem;
    line-height:1.65;
}

.complaint-branch-icon{
    width:56px;
    height:56px;
    background:#EEF4FF;
    color:var(--royal);
    font-size:1.2rem;
}

.complaint-branch-icon-written{
    background:#F1FBE8;
    color:#6A9A1E;
}

.complaint-channel-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
}

.complaint-channel-grid-two{
    grid-template-columns:repeat(2, minmax(0,1fr));
}

.complaint-channel-card{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:16px;
    border:1px solid #E4EAF3;
    border-radius:14px;
    background:#FAFCFF;
}

.complaint-channel-icon{
    width:42px;
    height:42px;
    background:#fff;
    border:1px solid #D5DFEC;
    color:var(--royal);
    font-size:1rem;
}

.complaint-channel-card h4{
    margin:0 0 6px;
    font-size:.96rem;
    line-height:1.45;
}

.complaint-channel-card p{
    margin:0;
    color:var(--ink-soft);
    font-size:.86rem;
    line-height:1.6;
}

.complaint-channel-card p + p{
    margin-top:2px;
}

.complaint-channel-card a{
    color:var(--royal);
    font-weight:600;
    text-decoration:none;
}

.complaint-channel-card a:hover{
    text-decoration:underline;
}

.complaint-followup-panel{
    margin-top:34px;
}

.complaint-followup-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
}

.complaint-followup-card{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:18px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 16px 30px -30px rgba(11,30,61,.22);
}

.complaint-followup-num{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:var(--royal);
    color:#fff;
    font-family:'JetBrains Mono',monospace;
    font-size:.88rem;
    font-weight:700;
    flex:0 0 auto;
}

.complaint-followup-card h4{
    margin:0 0 6px;
    font-size:.98rem;
}

.complaint-followup-card p{
    margin:0;
    color:var(--ink-soft);
    font-size:.88rem;
    line-height:1.65;
}

.complaint-procedure-aside{
    position:sticky;
    top:118px;
}

.complaint-procedure-note{
    margin-top:18px;
    padding:14px 15px;
    border:1px solid #E4EAF3;
    border-radius:14px;
    background:#F8FAFD;
}

.complaint-procedure-note strong{
    display:block;
    margin-bottom:6px;
    color:var(--navy);
}

.complaint-procedure-note p{
    margin:0;
    font-size:.88rem;
    line-height:1.6;
}

.complaint-procedure-button{
    width:100%;
    justify-content:center;
    margin-top:18px;
}

@media (max-width: 1100px){
    .complaint-flowchart{
        grid-template-columns:1fr;
    }

    .complaint-origin-card,
    .complaint-procedure-aside{
        position:static;
    }

    .complaint-branch-list::before,
    .complaint-branch::before{
        display:none;
    }
}

@media (max-width: 860px){
    .complaint-channel-grid,
    .complaint-channel-grid-two,
    .complaint-followup-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 680px){
    .complaint-procedure-section{
        padding-top:40px;
    }

    .complaint-branch,
    .complaint-origin-card{
        padding:18px;
        border-radius:16px;
    }

    .complaint-branch-head{
        gap:12px;
    }

    .complaint-branch-icon{
        width:48px;
        height:48px;
        font-size:1rem;
    }

    .complaint-channel-card{
        padding:14px;
    }
}