@charset "UTF-8";

/* 성공사례 v11 전용 스타일. 기존 테마와 충돌하지 않도록 bjc-/bjd- 프리픽스만 사용한다. */
:root {
    --bjc-green: #003B3F;
    --bjc-gold: #CCA652;
    --bjc-ivory: #F7F5F1;
    --bjc-line: #DDD8CC;
    --bjc-text: #1E2626;
    --bjc-muted: #6A716F;
}

.bjc-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin: 32px 0 40px;
    padding: 0;
    list-style: none;
}
.bjc-list-item { position: relative; min-width: 0; }
.bjc-list-check { position: absolute; z-index: 3; top: 12px; right: 12px; }
.bjc-card {
    --card-bg: #FFFFFF;
    display: flex;
    flex-direction: column;
    min-height: 430px;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--bjc-line);
    border-radius: 18px;
    background: var(--card-bg);
    color: var(--bjc-text);
    text-decoration: none !important;
    box-sizing: border-box;
    box-shadow: 0 8px 28px rgba(0, 59, 63, 0.07);
    container-type: inline-size;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bjc-card:not(.is-static):hover {
    transform: translateY(-4px);
    border-color: rgba(204, 166, 82, .8);
    box-shadow: 0 14px 34px rgba(0, 59, 63, 0.12);
}
.bjc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 14px 18px;
    background: var(--bjc-ivory);
    border-bottom: 1px solid var(--bjc-line);
    box-sizing: border-box;
}
.bjc-card.is-bankruptcy .bjc-card-top { background: var(--bjc-green); color: #fff; }
.bjc-type { font-weight: 700; white-space: nowrap; color: var(--bjc-green); }
.bjc-card.is-bankruptcy .bjc-type { color: #fff; }
.bjc-meta-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.bjc-meta-chips span {
    display: inline-block;
    padding: 4px 7px;
    border: 1px solid rgba(204,166,82,.55);
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
    color: #60573F;
    background: rgba(255,255,255,.7);
}
.bjc-card.is-bankruptcy .bjc-meta-chips span { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.bjc-card-core {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 24px 20px 18px;
}
.bjc-donut {
    --p: 0;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: conic-gradient(var(--bjc-gold) calc(var(--p) * 1%), #E7E5DF 0);
    position: relative;
    display: grid;
    place-items: center;
}
.bjc-donut::after {
    content: "";
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--card-bg);
}
.bjc-donut-label { position: relative; z-index: 1; text-align: center; line-height: 1.05; }
.bjc-donut-label strong { display: block; font-family: "Noto Serif KR", serif; font-size: 25px; color: var(--bjc-green); }
.bjc-donut-label span { display: block; margin-top: 5px; font-size: 11px; color: var(--bjc-muted); }
.bjc-bankruptcy-mark {
    width: 104px;
    height: 104px;
    border: 1px solid var(--bjc-gold);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--bjc-green);
    background: var(--bjc-ivory);
}
.bjc-bankruptcy-mark span { font-size: 12px; color: var(--bjc-muted); }
.bjc-bankruptcy-mark strong { margin-top: 3px; font-family: "Noto Serif KR", serif; font-size: 16px; }
.bjc-amount-flow { display: flex; min-width: 0; flex-direction: column; gap: 9px; }
.bjc-amount-flow > div:not(.bjc-reduction) { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bjc-amount-flow span { font-size: 12px; color: var(--bjc-muted); white-space: nowrap; }
.bjc-amount-flow strong { font-family: "Noto Serif KR", serif; font-size: 18px; color: var(--bjc-green); text-align: right; }
.bjc-reduction { padding-left: 4px; font-size: 12px; font-weight: 700; color: var(--bjc-gold); }
.bjc-card-subinfo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 18px;
    padding: 13px 0;
    border-top: 1px solid #EEEAE2;
    border-bottom: 1px solid #EEEAE2;
    font-size: 12px;
    color: var(--bjc-muted);
}
.bjc-card-subinfo b { margin-left: 4px; color: var(--bjc-text); font-weight: 600; }
.bjc-card-subject {
    display: -webkit-box;
    min-height: 70px;
    margin: 16px 18px 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-family: "Noto Serif KR", serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--bjc-text);
    word-break: keep-all;
}
.bjc-card.is-static .bjc-card-subject { display: block; min-height: 0; overflow: visible; }
.bjc-card-dates { display: flex; gap: 12px; margin: 12px 18px 0; font-size: 11px; color: var(--bjc-muted); }
.bjc-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 16px 18px 18px; }
.bjc-logo { display: inline-flex; align-items: center; height: 21px; }
.bjc-logo img { display: block; width: auto; max-width: 115px; height: 21px; object-fit: contain; }
.bjc-more { font-size: 12px; font-weight: 700; color: var(--bjc-green); }
.bjc-more b { color: var(--bjc-gold); }

/* 메인 Swiper에서는 카드 폭을 일정하게 유지한다. */
.main-case-list .swiper-slide.bjc-main-slide { width: 320px; height: auto; }
.main-case-list .bjc-card { min-height: 410px; }
.main-case-list .swiper-wrapper { transition-timing-function: linear !important; }
.main-case-list.bjc-reduced-motion { overflow-x: auto; }
.main-case-list.bjc-reduced-motion .swiper-wrapper { transform: none !important; }

/* 글쓰기 구조화 필드 */
.bjc-write-panel {
    margin: 22px 0;
    padding: 22px;
    border: 1px solid #D8D5CC;
    border-radius: 12px;
    background: #FAF9F6;
}
.bjc-write-title { margin: 0 0 17px; font-size: 18px; color: var(--bjc-green); }
.bjc-write-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bjc-field { min-width: 0; }
.bjc-field.is-full { grid-column: 1 / -1; }
.bjc-field > label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; color: #3E4745; }
.bjc-field .frm_input, .bjc-field select, .bjc-field textarea { width: 100%; box-sizing: border-box; }
.bjc-money-wrap { position: relative; }
.bjc-money-wrap input { padding-right: 32px !important; text-align: right; }
.bjc-money-wrap span { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 12px; color: #7B817E; pointer-events: none; }
.bjc-ym-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bjc-ym-wrap select { height: 42px; border: 1px solid #D5D5D5; background: #fff; }
.bjc-live-preview { margin-top: 18px; padding: 16px; border: 1px solid rgba(204,166,82,.45); border-radius: 10px; background: #fff; }
.bjc-live-preview h3 { margin: 0 0 10px; font-size: 14px; color: var(--bjc-green); }
.bjc-preview-row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; font-size: 13px; }
.bjc-preview-row strong { color: var(--bjc-green); }
.bjc-preview-em { margin-top: 8px; padding-top: 8px; border-top: 1px solid #EEEAE2; }
.bjc-write-help { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: #777; }

/* 상세 페이지 */
.bjd-case-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 34px; align-items: start; }
.bjd-case-main { min-width: 0; }
.bjd-case-summary { margin-bottom: 24px; }
.bjd-case-summary .bjc-card { min-height: 0; }
.bjd-toc-desktop { position: sticky; top: 90px; padding: 18px; border: 1px solid var(--bjc-line); border-radius: 12px; background: #fff; }
.bjd-toc-desktop h2 { margin: 0 0 12px; font-size: 14px; color: var(--bjc-green); }
.bjd-toc-desktop ol { margin: 0; padding-left: 18px; }
.bjd-toc-desktop li { margin: 7px 0; font-size: 12px; line-height: 1.45; }
.bjd-toc-desktop a { color: #4A5654; text-decoration: none; }
.bjd-toc-desktop a:hover { color: var(--bjc-green); }
.bjd-toc-mobile { display: none; margin: 0 0 18px; padding: 13px 15px; border: 1px solid var(--bjc-line); border-radius: 10px; background: #fff; }
.bjd-toc-mobile summary { cursor: pointer; font-weight: 700; color: var(--bjc-green); }
.bjd-toc-mobile ol { padding-left: 20px; }
.bjd-result { margin: 28px 0; }
.bjd-result > h2, .case-faq > h2 { margin: 0 0 14px; font-family: "Noto Serif KR", serif; font-size: 26px; color: var(--bjc-green); }
.bjd-result-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 10px; font-size: 12px; color: var(--bjc-muted); }
.bjd-table-scroll { overflow-x: auto; }
.bjd-result-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--bjc-green); background: #fff; }
.bjd-result-table th, .bjd-result-table td { padding: 13px 15px; border-bottom: 1px solid #E7E3DA; text-align: left; font-size: 13px; }
.bjd-result-table thead th { background: var(--bjc-ivory); color: var(--bjc-green); }
.bjd-result-table tbody th { width: 30%; color: #4D5654; }
.bjd-body-content { min-width: 0; }
.bjd-body-content img { max-width: 100%; height: auto; }
.bjd-body-content h2 { scroll-margin-top: 100px; }
.case-faq { margin: 34px 0; }
.case-faq details { border-top: 1px solid #DDD8CC; }
.case-faq details:last-child { border-bottom: 1px solid #DDD8CC; }
.case-faq summary { position: relative; padding: 17px 38px 17px 4px; cursor: pointer; font-weight: 700; color: #283331; list-style: none; }
.case-faq summary::-webkit-details-marker { display: none; }
.case-faq summary::after { content: "+"; position: absolute; right: 8px; top: 14px; font-size: 20px; color: var(--bjc-gold); }
.case-faq details[open] summary::after { content: "−"; }
.case-faq-answer { padding: 0 8px 16px; color: #555F5D; line-height: 1.75; }
.case-faq-answer p { margin: 8px 0; }

/* 상담 CTA */
.bjd-cta { margin: 26px 0; padding: 28px; border: 1px solid var(--bjc-line); border-radius: 14px; background: var(--bjc-ivory); container-type: inline-size; }
.bjd-cta-head { text-align: center; }
.bjd-cta-symbol { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--bjc-gold); font-family: serif; font-size: 24px; }
.bjd-cta-head h2 { margin: 5px 0 5px; font-size: 22px; color: var(--bjc-green); }
.bjd-cta-head p { margin: 0 0 18px; color: var(--bjc-muted); font-size: 13px; }
.bjd-cta-actions { display: flex; flex-direction: column; gap: 10px; }
.bjd-cta-link { display: flex; align-items: center; gap: 14px; min-height: 86px; padding: 16px 18px; border-radius: 10px; box-sizing: border-box; text-decoration: none !important; }
.bjd-cta-link.is-phone { background: var(--bjc-green); color: #fff; }
.bjd-cta-link.is-kakao { background: #fff; color: var(--bjc-green); border: 1px solid var(--bjc-gold); }
.bjd-cta-icon { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor; font-size: 15px; }
.bjd-cta-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.bjd-cta-copy strong { font-size: 15px; }
.bjd-cta-copy b { font-size: 17px; line-height: 1.3; word-break: keep-all; }
.bjd-cta-copy small { font-size: 11px; font-weight: 400; opacity: .82; }
.bjd-cta-arrow { flex: 0 0 auto; font-size: 20px; color: var(--bjc-gold); }
.bjd-cta-note { margin: 14px 0 0; text-align: center; font-size: 11px; color: #6C7472; }

@container (max-width: 300px) {
    .bjc-card-core { grid-template-columns: 86px minmax(0, 1fr); gap: 10px; padding-left: 14px; padding-right: 14px; }
    .bjc-donut, .bjc-bankruptcy-mark { width: 82px; height: 82px; }
    .bjc-donut::after { width: 58px; height: 58px; }
    .bjc-donut-label strong { font-size: 20px; }
    .bjc-amount-flow strong { font-size: 15px; }
    .bjc-card-top, .bjc-card-bottom { padding-left: 14px; padding-right: 14px; }
    .bjc-card-subinfo, .bjc-card-subject, .bjc-card-dates { margin-left: 14px; margin-right: 14px; }
}

@media (max-width: 1024px) {
    .bjc-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bjd-case-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 760px) {
    .bjc-list-grid { grid-template-columns: 1fr; }
    .bjc-card { min-height: 0; }
    .bjd-case-layout { display: block; }
    .bjd-toc-desktop { display: none !important; }
    .bjd-toc-mobile.is-ready { display: block; }
    .bjc-write-grid { grid-template-columns: 1fr; }
    .bjc-field.is-full { grid-column: auto; }
    .bjd-cta { padding: 20px 14px; }
}
@media (max-width: 412px) {
    .bjc-card-core { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 20px 15px 15px; }
    .bjc-donut, .bjc-bankruptcy-mark { width: 90px; height: 90px; }
    .bjc-donut::after { width: 62px; height: 62px; }
    .bjc-donut-label strong { font-size: 21px; }
    .bjc-card-top { align-items: flex-start; flex-direction: column; }
    .bjc-meta-chips { justify-content: flex-start; }
    .bjc-amount-flow strong { font-size: 16px; }
    .bjd-cta-link { min-height: 94px; padding: 14px 12px; gap: 10px; }
    .bjd-cta-copy b { font-size: 15px; }
    .bjd-cta-copy small { font-size: 10px; }
    .bjd-cta-icon { flex-basis: 30px; width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .bjc-card { transition: none; }
}

/* 기존 메인페이지 .main-case-slide a 규칙보다 높은 우선순위로 신규 카드 레이아웃을 고정한다. */
.main-case-list .main-case-slide a.bjc-card {
    display: flex;
    background: var(--card-bg);
    text-align: left;
    border: 1px solid var(--bjc-line);
    border-radius: 18px;
}
.main-case-list.bjc-reduced-motion {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.main-case-list.bjc-reduced-motion .swiper-wrapper {
    width: max-content !important;
    transform: none !important;
    transition: none !important;
}
.main-case-list.bjc-reduced-motion .bjc-main-slide {
    flex: 0 0 320px;
}
.bjc-logo {
    font-size: 11px;
    letter-spacing: -0.02em;
    color: #6B716F;
    white-space: nowrap;
}
.bjc-logo b {
    margin-left: 3px;
    font-family: "Noto Serif KR", serif;
    font-size: 16px;
    color: var(--bjc-green);
}