@charset "utf-8";
/* ============================================================
   user/about.php — 운영취지 (왜 「열린 전주」를 열었을까)
   ============================================================ */

/* 운영취지 페이지: 본문 여백 제거 (섹션별 자체 패딩 사용) */
#main { padding:0; }

/* 공통 헤드 */
.ab-head { text-align:center; margin-bottom:32px; }
.ab-head h2 { font-size:clamp(22px,3vw,28px); font-weight:800; color:#16264D; margin-bottom:0; word-break:keep-all; }
.ab-head p { font-size:15px; color:#333; word-break:keep-all; }

/* ① HERO */
.ab-hero {
    background:#1B4B9B;
    background-image:linear-gradient(135deg,#173F86 0%,#1F58B8 100%);
    color:#fff; text-align:center; padding:52px 0 48px;
}
.ab-hero-badge {
    display:inline-block; background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.30); border-radius:20px;
    font-size:13px; font-weight:700; padding:5px 16px; margin-bottom:18px;
}
.ab-hero-title { font-size:clamp(28px,4.5vw,40px); font-weight:300; letter-spacing:-.02em; margin-bottom:14px; word-break:keep-all; }
.ab-hero-title .ab-round { font-weight:700; }
.ab-hero-sub { font-size:16px; color:rgba(255,255,255,.85); word-break:keep-all; }

/* ② 시장 편지 */
.ab-letter-sec { padding:56px 0; background:#fff; }
.ab-letter {
    max-width:760px; margin:0 auto; background:#fff;
    border-radius:16px; border:0;
    padding:34px 36px; display:flex; gap:24px;
}
.ab-letter-avatar {
    flex-shrink:0; width:54px; height:54px; border-radius:50%;
    background:#1B4B9B; color:#fff; font-size:22px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
}
.ab-letter-body p { font-size:20px; line-height:1.85; color:#3A424F; margin-bottom:12px; word-break:keep-all; }
@media(max-width:1023px){ .ab-letter-body p { font-size:16px; } }
.ab-letter-body strong { color:#1B4B9B; }
.ab-letter-sign { font-weight:700; color:#16264D !important; margin-top:6px; }
@media(max-width:599px){ .ab-letter{ flex-direction:column; gap:16px; padding:26px 22px; } }

/* ③ 친근하게 설명 */
.ab-explain-sec { background:var(--surface-soft,#F6F7F9); padding:48px 0 128px; }
.ab-explain-grid { display:grid; grid-template-columns:1fr; gap:18px; max-width:900px; margin:0 auto; }
@media(min-width:768px){ .ab-explain-grid{ grid-template-columns:repeat(2,1fr); } }
.ab-explain-card {
    background:#fff; border:1px solid var(--border-soft,#D3D7DE); border-radius:14px;
    padding:26px 24px; transition:background .15s, border-color .15s;
}
.ab-explain-card:hover { background:#1B4B9B; background-image:linear-gradient(135deg,#1F58B8 0%,#15407F 100%); border-color:#1B4B9B; }
.ab-explain-card:hover h3,
.ab-explain-card:hover p,
.ab-explain-card:hover strong { color:#fff; }
.ab-explain-card:hover .ab-no { background:#fff; color:#1B4B9B; }
.ab-no {
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%;
    background:#1B4B9B; color:#fff; font-size:14px; font-weight:800; margin-bottom:12px;
}
.ab-explain-card h3 { font-size:22px; font-weight:600; color:#16264D; margin-bottom:10px; word-break:keep-all; }
.ab-explain-card p { font-size:16px; line-height:1.75; color:#55607A; word-break:keep-all; }
.ab-explain-card strong { color:#1B4B9B; }

/* ④ 시정 3대 철학 */
.ab-philo-sec { background:#fff; padding:64px 0; }
.ab-philo-grid { display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:768px){ .ab-philo-grid{ grid-template-columns:repeat(3,1fr); } }
.ab-philo-card {
    background:#1B4B9B;
    background-image:linear-gradient(160deg,#1F58B8,#15407F);
    color:#fff; border-radius:14px; padding:28px 24px;
}
.ab-philo-tag {
    display:inline-block; background:#F2C14E; color:#3A2E00;
    font-size:12px; font-weight:800; border-radius:6px; padding:3px 10px; margin-bottom:12px;
}
.ab-philo-card h3 { font-size:22px; font-weight:900; margin-bottom:10px; }
.ab-philo-card p { font-size:16px; line-height:1.7; color:rgba(255,255,255,.88); word-break:keep-all; }

/* ⑤ 시정 4대 기조 — 컬러 배지 카드 */
.ab-base-sec { background:var(--surface-soft,#F6F7F9); padding:64px 0; }
.ab-base-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(min-width:768px){ .ab-base-grid{ grid-template-columns:repeat(4,1fr); } }
.ab-base-card {
    position:relative; background:#fff; border:1px solid var(--border-soft,#D3D7DE); border-radius:16px;
    padding:34px 18px 28px; text-align:center; overflow:hidden;
    transition:transform .15s, box-shadow .15s;
}
.ab-base-card:hover{ transform:translateY(-5px); box-shadow:0 12px 26px rgba(20,40,90,.12); }
.ab-base-key {
    display:flex; align-items:center; justify-content:center;
    width:66px; height:66px; margin:0 auto 16px; border-radius:50%;
    background:var(--ac-bg); color:var(--ac);
    font-size:21px; font-weight:900; letter-spacing:-.01em;
}
.ab-base-name { font-size:16px; font-weight:600; color:#2A3550; line-height:1.45; word-break:keep-all; }
.ab-base-card:nth-child(1){ --ac:#2E6BE6; --ac-bg:#E7EEFC; }
.ab-base-card:nth-child(2){ --ac:#16A34A; --ac-bg:#E2F6E9; }
.ab-base-card:nth-child(3){ --ac:#8B5CF6; --ac-bg:#EFE9FD; }
.ab-base-card:nth-child(4){ --ac:#E8923D; --ac-bg:#FBEEDC; }
.ab-base-ic { font-size:34px; margin-bottom:12px; }

/* ⑥ 우리의 4대 약속 — 다크 네이비 띠 */
.ab-promise-sec {
    background:#0F2347;
    background-image:linear-gradient(135deg,#1B3A6B 0%,#0E2143 100%);
    padding:60px 0;
}
.ab-promise-sec .ab-head h2 { color:#fff; }
.ab-promise-sec .ab-head p { color:rgba(255,255,255,.72); }
.ab-promise-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:30px 0; }
@media(min-width:768px){ .ab-promise-grid{ grid-template-columns:repeat(4,1fr); gap:0; } }
.ab-promise-card {
    position:relative; background:transparent; border:0; border-radius:0;
    padding:10px 16px; text-align:center;
}
@media(min-width:768px){
    .ab-promise-card:not(:first-child)::before{
        content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
        width:1px; height:58px; background:rgba(255,255,255,.16);
    }
}
.ab-promise-num { font-size:42px; font-weight:900; color:#F2C14E; line-height:1; margin-bottom:10px; }
.ab-promise-lbl { font-size:16px; color:rgba(255,255,255,.9); font-weight:500; }

/* ⑦ 처리 절차 */
.ab-flow-sec { background:#fff; padding:64px 0; }
.ab-flow { display:flex; flex-direction:column; gap:14px; align-items:stretch; max-width:920px; margin:0 auto; }
@media(min-width:760px){ .ab-flow{ flex-direction:row; align-items:center; justify-content:center; } }
.ab-flow-step {
    flex:1; background:#F7FAFF; border:1.5px solid #D8E4F5; border-radius:14px;
    padding:24px 18px; text-align:center;
}
.ab-flow-no {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
    background:#1B4B9B; color:#fff; font-size:15px; font-weight:800; margin-bottom:10px;
}
.ab-flow-title { font-size:16px; font-weight:800; color:#16264D; margin-bottom:6px; }
.ab-flow-when { display:inline-block; font-size:14px; font-weight:800; color:#C8102E; background:#FBE7EA; border-radius:6px; padding:2px 10px; margin-bottom:8px; }
.ab-flow-desc { font-size:15px; color:#3E4759; line-height:1.6; word-break:keep-all; }
.ab-flow-arrow { color:#9DB0CC; font-size:22px; font-weight:700; text-align:center; flex-shrink:0; }
@media(max-width:759px){ .ab-flow-arrow{ transform:rotate(90deg); } }
.ab-flow-note { text-align:center; font-size:17px; color:#3E4759; margin-top:24px; word-break:keep-all; }

/* ⑧ CTA */
.ab-cta-sec {
    background:#1B4B9B;
    background-image:linear-gradient(135deg,#173F86,#1F58B8);
    color:#fff; text-align:center; padding:64px 0;
}
.ab-cta-sec h2 { font-size:clamp(22px,3vw,30px); font-weight:900; margin-bottom:10px; word-break:keep-all; }
.ab-cta-sec p { font-size:15px; color:rgba(255,255,255,.85); margin-bottom:26px; }
.ab-cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.ab-cta-primary {
    display:inline-flex; align-items:center; background:#F2C14E; color:#3A2E00;
    font-size:15px; font-weight:800; padding:14px 26px; border-radius:8px;
    text-decoration:none; box-shadow:0 4px 16px rgba(0,0,0,.20); transition:transform .1s,background .15s;
}
.ab-cta-primary:hover{ background:#EBB534; transform:translateY(-2px); }
.ab-cta-outline {
    display:inline-flex; align-items:center; background:transparent; color:#fff;
    font-size:15px; font-weight:700; padding:13px 24px; border-radius:8px;
    border:1.5px solid rgba(255,255,255,.6); text-decoration:none; transition:background .15s;
}
.ab-cta-outline:hover{ background:rgba(255,255,255,.12); }