@charset "utf-8";
/* ============================================================
   user/categories.php — 5분과 + 3특위 소개 페이지
   메인 히어로(#002060 + gold) 디자인 계열
   ============================================================ */
#main { padding:0; }

/* ══ 페이지 히어로 ══ */
.cat-hero {
    background-color: #002060;
    background-image:
        linear-gradient(to right,
            rgba(0,32,96,1.00)   0%,
            rgba(0,40,110,1.00) 35%,
            rgba(0,55,130,0.88) 55%,
            rgba(0,55,130,0.50) 72%,
            rgba(0,40,100,0.15) 100%
        );
    padding: 52px 0 48px;
    position: relative;
    overflow: hidden;
}
.cat-hero::after {
    content: "";
    position: absolute;
    right: -60px; top: -60px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255,215,0,.10), transparent 65%);
    pointer-events: none;
}
.cat-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }

.cat-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: #fff;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 20px; padding: 6px 16px;
    margin-bottom: 20px;
}
.cat-badge-dot {
    width: 7px; height: 7px;
    background: #FFD700; border-radius: 50%;
    animation: catPulse 1.8s ease-in-out infinite; flex-shrink: 0;
}
@keyframes catPulse {
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.4; transform:scale(.6); }
}
.cat-hero-title {
    font-size: clamp(26px, 4.5vw, 48px);
    font-weight: 900; line-height: 1.2;
    letter-spacing: -.03em; color: #fff;
    margin-bottom: 18px; word-break: keep-all;
}
.cat-accent { color: #FFD700; display: block; margin-top: 4px; }

.cat-hero-desc {
    font-size: 16px; line-height: 1.85;
    color: rgba(255,255,255,.88);
    margin-bottom: 32px; word-break: keep-all;
}
.cat-hero-stats {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.cat-hs-item { text-align: center; }
.cat-hs-num {
    display: block;
    font-size: 36px; font-weight: 900;
    color: #FFD700; line-height: 1;
    font-family: var(--font-family-num, sans-serif);
}
.cat-hs-lbl { font-size: 13px; color: rgba(255,255,255,.80); margin-top: 4px; display: block; }
.cat-hs-div { font-size: 28px; font-weight: 700; color: rgba(255,255,255,.40); }

/* ══ 본문 컨테이너 ══ */
.cat-body { padding-top: 56px; padding-bottom: 80px; }

/* ══ 구조 안내 — 다이아몬드 ══ */
.cat-intro-section { margin-bottom: 56px; }
.cat-diamond-wrap {
    display: flex; justify-content: center; align-items: center;
    gap: 28px;
    padding: 72px 0;
    overflow: hidden;
}
.cat-diamond {
    width: 320px; height: 320px;
    border-radius: 56px;
    transform: rotate(45deg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.diamond-bunka {
    background: linear-gradient(160deg, #4A5FC9 0%, #2E3F9E 100%);
    position: relative; z-index: 2;
}
.diamond-teukwi {
    background: linear-gradient(160deg, #E4E9FB 0%, #CFD7F5 100%);
    position: relative; z-index: 1;
}
.diamond-etc {
    background: linear-gradient(160deg, #F1F3F7 0%, #DDE1E9 100%);
    position: relative; z-index: 0;
}
.cat-diamond-inner {
    transform: rotate(-45deg);
    text-align: center;
    width: 80%;
}
.cat-diamond-inner h3 { font-size: 26px; font-weight: 800; margin-bottom: 14px; }
.cdi-line { display: block; width: 36px; height: 2px; margin: 0 auto 16px; }
.cat-diamond-inner p { font-size: 17px; line-height: 1.6; word-break: keep-all; }
.diamond-bunka  .cat-diamond-inner { color: #fff; }
.diamond-bunka  .cdi-line { background: rgba(255,255,255,.55); }
.diamond-teukwi .cat-diamond-inner { color: #27316E; }
.diamond-teukwi .cdi-line { background: rgba(39,49,110,.45); }
.diamond-etc    .cat-diamond-inner { color: #3A4150; }
.diamond-etc    .cdi-line { background: rgba(58,65,80,.40); }
@media(max-width:1180px){
    .cat-diamond { width: 260px; height: 260px; border-radius: 46px; }
    .cat-diamond-inner h3 { font-size: 22px; }
    .cat-diamond-inner p { font-size: 13px; }
}
@media(max-width:900px){
    .cat-diamond { width: 215px; height: 215px; border-radius: 38px; }
    .cat-diamond-inner h3 { font-size: 18px; margin-bottom: 10px; }
    .cat-diamond-inner p { font-size: 12px; line-height: 1.7; }
    .cdi-line { margin-bottom: 10px; }
}
@media(max-width:680px){
    .cat-diamond-wrap { flex-direction: column; gap: 48px; padding: 56px 0; }
    .cat-diamond { width: 250px; height: 250px; border-radius: 44px; }
    .cat-diamond-inner h3 { font-size: 21px; }
    .cat-diamond-inner p { font-size: 13px; }
}

/* ══ 섹션 공통 ══ */
.cat-section { }
.cat-section-head { margin-bottom: 28px; }
.cat-type-badge {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    border-radius: 20px; padding: 5px 14px;
    margin-bottom: 10px;
}
.bunka-badge  { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.teukwi-badge { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.cat-section-head h2 {
    font-size: clamp(22px, 3vw, 30px); font-weight: 800;
    color: #111; margin-bottom: 8px; word-break: keep-all;
}
.cat-section-head p { font-size: 15px; color: var(--color-text-mute); word-break: keep-all; }

/* ══ 분과·특위 쇼케이스 (대표 카드 + 번호 목록) ══ */
.cat-showcase {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 48px;
    align-items: start;
}
@media(max-width:900px){
    .cat-showcase { grid-template-columns: 1fr; gap: 0; }
}

/* 데스크탑: 행 안의 상세 패널 숨김 (좌측 featured 사용) */
.cs-row-detail { display: none; }

/* ── 모바일: 아코디언 (featured 숨기고, 행을 그 자리에서 펼침) ── */
@media(max-width:900px){
    .cat-showcase > .cs-featured { display: none; }
    .cs-list { border: 1px solid #E3E6EC; border-radius: 12px; overflow: hidden; }
    .cs-row { display: block; border-bottom: 1px solid #E3E6EC; padding: 0; background: #fff; }
    .cs-row:last-child { border-bottom: none; }
    .cs-row .cs-row-btn { width: 100%; padding: 18px 16px; background: #fff; }
    .cs-row .cs-arrow {
        position: absolute; right: 16px; top: 18px;
        transition: transform .2s; pointer-events: none;
        /* 70% 축소 */
        width: 32px; height: 32px; font-size: 13px;
    }
    .cs-row { position: relative; }
    .cs-row.is-open .cs-arrow { transform: rotate(90deg); }
    .cs-row.is-open { background: #fff; }
    /* 번호 70% 축소 */
    .cs-row .cs-num { font-size: 27px; width: 46px; }
    /* 펼침 영역 */
    .cs-row-detail { display: none; padding: 0 16px 18px; }
    .cs-row.is-open .cs-row-detail { display: block; }
    .cs-row-detail .cs-card { border: none; box-shadow: none; padding: 4px 0 0; border-radius: 0; }
}

/* 좌측 대표 카드 */
.cs-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1.5px solid #1C3D77;
    border-radius: 24px;
    padding: 44px 38px 38px;
}
.cs-card-cnt  { font-size: 14px; font-weight: 700; color: #1C3D77; margin-bottom: 16px; }
.cs-card-name {
    font-size: clamp(26px, 2.8vw, 38px);
    font-weight: 900; color: #1C3D77;
    letter-spacing: -.02em; line-height: 1.25;
    margin-bottom: 20px; word-break: keep-all;
}
.cs-card-desc { font-size: 16px; line-height: 1.8; color: #2B3A5C; margin-bottom: 26px; word-break: keep-all; }
.cs-card-agenda {
    list-style: none; padding: 0; margin: 0 0 14px;
    display: flex; flex-direction: column; gap: 13px;
}
.cs-card-agenda li {
    position: relative; padding-left: 30px;
    font-size: 15px; font-weight: 600; color: #1C3D77;
    line-height: 1.45; word-break: keep-all;
}
.cs-card-agenda li::before {
    content: "✓";
    position: absolute; left: 0; top: 1px;
    width: 19px; height: 19px;
    border: 1.5px solid #2D52B0; border-radius: 50%;
    color: #2D52B0; font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.cs-card-more { font-size: 14px; color: #98A0AE; font-style: italic; margin-bottom: 24px; }
.cs-card-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.cs-card-bar { flex: 1; height: 6px; background: #D9D9D9; border-radius: 3px; overflow: hidden; }
.cs-card-bar-fill { height: 100%; background: #005BAC; border-radius: 3px; transition: width .6s ease; }
.cs-card-rate { font-size: 14px; color: #3A4663; white-space: nowrap; }
.cs-card-link { font-size: 16px; font-weight: 800; color: #1C3D77; text-decoration: none; }
.cs-card-link:hover { text-decoration: underline; }

/* 우측 번호 목록 */
.cs-list { list-style: none; padding: 0; margin: 0; }
.cs-row {
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid #E3E6EC;
    padding: 24px 4px;
}
.cs-row:first-child { padding-top: 6px; }
.cs-row-btn {
    flex: 1; min-width: 0;
    display: flex; align-items: flex-start; gap: 26px;
    background: none; border: 0; padding: 0; margin: 0;
    text-align: left; cursor: pointer; font: inherit;
}
.cs-num {
    flex-shrink: 0; width: 74px;
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 52px; font-weight: 600; line-height: 1;
    color: #C2C8D4;
    transition: color .2s;
}
.cs-info { display: flex; flex-direction: column; min-width: 0; }
.cs-cnt  { font-size: 13px; font-weight: 700; color: #6B7488; margin-bottom: 5px; transition: color .2s; }
.cs-name { font-size: 21px; font-weight: 800; color: #16264D; margin-bottom: 7px; word-break: keep-all; line-height: 1.3; }
.cs-desc {
    font-size: 14px; color: #66708A; line-height: 1.65; word-break: keep-all;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cs-arrow {
    flex-shrink: 0;
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid #C8CEDA;
    display: flex; align-items: center; justify-content: center;
    color: #8A93A6; font-size: 18px;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}
.cs-arrow:hover { background: #1C3D77; border-color: #1C3D77; color: #fff; }
.cs-row.is-active .cs-num   { color: #1C3D77; }
.cs-row.is-active .cs-cnt   { color: #1C3D77; }
.cs-row.is-active .cs-arrow { background: #1C3D77; border-color: #1C3D77; color: #fff; }

@media(max-width:600px){
    .cs-card { padding: 30px 24px 28px; border-radius: 18px; }
    .cs-row-btn { gap: 0; }
    .cs-num  { font-size: 38px; width: 52px; }
    .cs-name { font-size: 18px; }
    .cs-arrow { width: 40px; height: 40px; }
}

/* ══ 하단 CTA ══ */
.cat-cta {
    margin-top: 72px;
    background: linear-gradient(135deg, #002060, #003D87);
    border-radius: 20px;
    padding: 56px 32px;
    text-align: center;
    color: #fff;
}
.cat-cta h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 900; margin-bottom: 12px; word-break: keep-all; }
.cat-cta p  { font-size: 16px; color: rgba(255,255,255,.85); margin-bottom: 28px; word-break: keep-all; }
.cat-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: nowrap; }
@media(max-width:480px){
    .cat-cta-btns .cat-cta-primary, .cat-cta-btns .cat-cta-outline { padding-left: 16px; padding-right: 16px; white-space: nowrap; font-size: 14px; }
}
.cat-cta-primary {
    display: inline-flex; align-items: center;
    background: #FFD700; color: #003060;
    font-size: 16px; font-weight: 800;
    padding: 14px 28px; border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,.20);
    transition: background .15s, transform .1s;
}
.cat-cta-primary:hover { background: #FFC200; transform: translateY(-2px); }
.cat-cta-outline {
    display: inline-flex; align-items: center;
    background: transparent; color: #fff;
    font-size: 16px; font-weight: 700;
    padding: 13px 26px; border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,.60);
    text-decoration: none;
    transition: background .15s;
}
.cat-cta-outline:hover { background: rgba(255,255,255,.12); }