/* =============================================
   Treatment Page (진료과목 상세 페이지)
   ============================================= */

/* ── 서브 타이틀 ─────────────────────────────── */
.treatment-sub-title {
    background: #b5837c;
    padding: 30px 20px;
    text-align: center;
}

.treatment-sub-title h4 {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 6px;
}

.treatment-sub-title h1 {
    font-size: 26px;
    color: #fff;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.5px;
}


/* ── 본문 컨텐츠 ─────────────────────────────── */
.treatment-content {
    padding: 60px 20px 80px;
}

.treatment-wrap {
    max-width: 1180px;
    margin: 0 auto;
}

/* 이미지 자동 축소 (전체 적용) */
.treatment-wrap img {
    max-width: 100%;
    height: auto;
}

/* style.css 전역 리셋이 img를 display:block으로 바꿔놔서, 부모 .taC의
   text-align:center가 이미지에는 더 이상 적용되지 않는다(block 요소는
   text-align의 영향을 받지 않음) — 원본 콘텐츠 전반에서 <p class="taC"><img></p>
   패턴을 광범위하게 쓰고 있어 margin auto로 다시 가운데 정렬시킨다. */
.treatment-wrap .taC img {
    margin-left: auto;
    margin-right: auto;
}

/* ── 섹션 공통 ───────────────────────────────── */
.treatment-section,
.treatment-detail-section {
    margin-bottom: 80px;
}

/* ── 유틸리티 ────────────────────────────────── */
.tc { text-align: center; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt60 { margin-top: 60px; }
.mt80 { margin-top: 80px; }
.mb60 { margin-bottom: 60px; }
.pt40 { padding-top: 40px; }
.lh35 { line-height: 1.8; }
.lh40 { line-height: 2; }
.bold { font-weight: 700; }
.fs20 { font-size: 20px; }
.fs30 { font-size: 30px; }

/* ── 색상 ──────────────────────────────────── */
.c-red { color: #e53935; }
.highlight-blue { color: #417bff; font-weight: 600; }
.bg-red {
    background: #e53935;
    color: #fff;
    padding: 2px 6px;
    border-radius: 2px;
}

/* ── 섹션 타이틀 ─────────────────────────────── */
.section-title {
    font-size: 24px;
    font-weight: 700;
    color: #2c2c2c;
    line-height: 1.5;
    margin: 20px 0 0;
}

.h30 {
    font-size: 20px;
    font-weight: 700;
    color: #2c2c2c;
}

.divider {
    border: none;
    border-top: 2px solid #ddd;
    margin: 15px 0 30px;
}

/* ── 강조 박스 ───────────────────────────────── */
.highlight-box {
    background: #f7f5f4;
    border: 1px solid #e0d8d5;
    border-radius: 4px;
    padding: 40px;
}

/* ── 증상 체크 리스트 ────────────────────────── */
.symptom-list {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.symptom-list li {
    flex: 1;
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 2;
    color: #444;
}

/* ── 2컬럼 레이아웃 ─────────────────────────── */
.two-col {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.two-col .col-left {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    line-height: 1.9;
    color: #444;
}

.two-col .col-right {
    flex: 0 0 auto;
}

.two-col .col-right iframe {
    display: block;
}

/* ── 상세 섹션 ───────────────────────────────── */
.treatment-detail-wrap {
    border-top: 2px solid #b5837c;
}

.treatment-detail-section {
    border-bottom: 1px solid #e8e2e0;
    padding: 50px 0;
}

.detail-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #2c2c2c;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.detail-section-title span {
    color: #b5837c;
    margin-right: 6px;
}

.detail-section-body {
    font-size: 15px;
    line-height: 1.9;
    color: #444;
}

.detail-section-body p {
    margin-bottom: 16px;
}

.detail-subtitle {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin: 24px 0 8px;
}

/* ── 상세 2컬럼 ─────────────────────────────── */
.two-col-detail {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: 20px;
}

.two-col-detail .detail-left {
    flex: 0 0 420px;
}

.two-col-detail .detail-right {
    flex: 1;
    min-width: 0;
}

/* ── 테이블 ─────────────────────────────────── */
.treat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.treat-table caption {
    font-weight: 700;
    font-size: 15px;
    color: #417bff;
    text-align: left;
    padding-bottom: 10px;
}

.treat-table th {
    background: #417bff;
    color: #fff;
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    border: 1px solid #3366dd;
}

.treat-table td {
    padding: 9px 12px;
    border: 1px solid #dde4f0;
    color: #444;
    vertical-align: top;
}

.treat-table tbody tr:nth-child(even) td {
    background: #f5f7ff;
}

/* ── 주의사항 리스트 ─────────────────────────── */
.notice-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.notice-list li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    color: #444;
}

/* ── CTA 버튼 ───────────────────────────────── */
.btn-consult {
    display: inline-block;
    background: #417bff;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 36px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
    letter-spacing: -0.3px;
}

.btn-consult:hover {
    background: #2c5fcc;
    transform: translateY(-1px);
}

/* ── 탭 활성화 스크롤 오프셋 (앵커 이동 보정) ── */
section[id^="tap-"] {
    scroll-margin-top: 88px; /* 헤더(72px) + 여유 16px */
}

/* ── CTA 배너 컴포넌트 ──────────────────────── */
.cta-banner {
    background: linear-gradient(135deg, #417bff 0%, #2c5fcc 100%);
    border-radius: 8px;
    margin: 60px 0;
    padding: 50px 40px;
    text-align: center;
}

.cta-banner-inner {
    max-width: 600px;
    margin: 0 auto;
}

.cta-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.4;
}

.cta-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 28px;
}

.cta-btn {
    display: inline-block;
    background: #fff;
    color: #417bff;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 40px;
    border-radius: 4px;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* ── 반응형 ─────────────────────────────────── */
@media (max-width: 1024px) {
    .two-col-detail .detail-left {
        flex: 0 0 320px;
    }
}

@media (max-width: 768px) {
    .treatment-sub-title h1 {
        font-size: 20px;
    }

    /* 2컬럼 → 단일 컬럼 */
    .two-col,
    .two-col-detail {
        flex-direction: column;
    }

    .two-col .col-right {
        width: 100%;
        text-align: center;
    }

    /* iframe 비율 유지 (16:9) */
    .two-col .col-right iframe {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        margin: 0 auto;
    }

    .two-col-detail .detail-left {
        flex: none;
        width: 100%;
    }

    /* 증상 리스트 세로 */
    .symptom-list {
        flex-direction: column;
    }

    /* 본문 패딩 */
    .treatment-content {
        padding: 40px 16px 60px;
    }

    /* 섹션 여백 축소 */
    .treatment-section,
    .treatment-detail-section {
        margin-bottom: 56px;
    }

    .treatment-detail-section {
        padding: 36px 0;
    }

    /* 타이틀 축소 */
    .section-title {
        font-size: 20px;
    }

    .detail-section-title {
        font-size: 19px;
    }

    .h30 {
        font-size: 18px;
    }

    /* 강조 박스 */
    .highlight-box {
        padding: 24px 20px;
    }

    /* 유틸 폰트 축소 */
    .fs30 { font-size: 22px; }
    .fs20 { font-size: 17px; }

    /* 테이블 가로 스크롤 */
    .treat-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 모바일 헤더(60px) 기준 앵커 보정 */
    section[id^="tap-"] {
        scroll-margin-top: 76px;
    }
}

@media (max-width: 480px) {
    .treatment-sub-title {
        padding: 22px 16px;
    }

    .treatment-sub-title h4 {
        font-size: 12px;
    }

    .treatment-sub-title h1 {
        font-size: 18px;
    }

    .section-title {
        font-size: 18px;
    }

    .detail-section-title {
        font-size: 17px;
        padding-bottom: 10px;
        margin-bottom: 18px;
    }

    .detail-section-body {
        font-size: 14px;
    }

    .detail-subtitle {
        font-size: 15px;
    }

    .h30 {
        font-size: 16px;
    }

    .symptom-list li {
        font-size: 14px;
        padding: 16px;
        line-height: 1.9;
    }

    .highlight-box {
        padding: 20px 16px;
    }

    .treat-table {
        font-size: 13px;
    }

    .treat-table th,
    .treat-table td {
        padding: 7px 8px;
    }

    .cta-banner {
        padding: 36px 20px;
    }

    .cta-title {
        font-size: 20px;
    }

    .cta-desc {
        font-size: 14px;
    }

    .cta-btn {
        padding: 12px 28px;
        font-size: 15px;
    }

    .btn-consult {
        padding: 12px 24px;
        font-size: 15px;
    }

    .fs30 { font-size: 19px; }
    .fs20 { font-size: 16px; }
}

@media (max-width: 360px) {
    .treatment-sub-title h1 {
        font-size: 17px;
    }

    .treatment-content {
        padding: 28px 14px 44px;
    }

    .treatment-section,
    .treatment-detail-section {
        margin-bottom: 44px;
    }

    .treatment-detail-section {
        padding: 28px 0;
    }

    .section-title {
        font-size: 16px;
    }

    .detail-section-title {
        font-size: 15px;
    }

    .detail-section-body {
        font-size: 13px;
    }

    .h30 {
        font-size: 15px;
    }

    .highlight-box {
        padding: 18px 14px;
    }

    .treat-table {
        font-size: 12px;
    }

    .treat-table th,
    .treat-table td {
        padding: 6px 6px;
    }

    .cta-banner {
        padding: 28px 16px;
        margin: 36px 0;
    }

    .cta-title {
        font-size: 18px;
    }

    .btn-consult {
        padding: 10px 20px;
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .fs30 { font-size: 18px; }
    .fs20 { font-size: 15px; }
}


/* ==============================================
   원본 그누보드 유틸리티 클래스 (전환 템플릿용)
   ============================================== */

/* ── 텍스트 정렬 ─── */
.taC { text-align: center; }
.taL { text-align: left; }
.taR { text-align: right; }

/* ── 플로트 / 클리어 ─── */
.fL  { float: left; }
.fR  { float: right; }
.fcb { clear: both; display: block; }
.fwb { font-weight: bold; }

/* ── 너비 % ─── */
.widp10 { width: 10%; }
.widp20 { width: 20%; }
.widp30 { width: 30%; }
.widp40 { width: 40%; }
.widp50 { width: 50%; }
.widp60 { width: 60%; }
.widp70 { width: 70%; }
.widp80 { width: 80%; }
.widp90 { width: 90%; }

/* ── 마진 (원본에서 사용 중인 값) ─── */
.mt5   { margin-top:  5px; }
.mt10  { margin-top: 10px; }
.mt25  { margin-top: 25px; }
.mt35  { margin-top: 35px; }
.mt45  { margin-top: 45px; }
.mt50  { margin-top: 50px; }
.mt55  { margin-top: 55px; }
.mt70  { margin-top: 70px; }
.mt90  { margin-top: 90px; }
.mt100 { margin-top: 100px; }
.mt110 { margin-top: 110px; }
.mt120 { margin-top: 120px; }
.mt130 { margin-top: 130px; }
.mt140 { margin-top: 140px; }
.mt150 { margin-top: 150px; }

.mb5   { margin-bottom:  5px; }
.mb10  { margin-bottom: 10px; }
.mb15  { margin-bottom: 15px; }
.mb20  { margin-bottom: 20px; }
.mb25  { margin-bottom: 25px; }
.mb30  { margin-bottom: 30px; }
.mb35  { margin-bottom: 35px; }
.mb40  { margin-bottom: 40px; }
.mb45  { margin-bottom: 45px; }
.mb50  { margin-bottom: 50px; }
.mb70  { margin-bottom: 70px; }
.mb80  { margin-bottom: 80px; }
.mb90  { margin-bottom: 90px; }
.mb100 { margin-bottom: 100px; }
.mb200 { margin-bottom: 200px; }

/* ── 패딩 ─── */
.pt5   { padding-top:  5px; }
.pt10  { padding-top: 10px; }
.pt15  { padding-top: 15px; }
.pt20  { padding-top: 20px; }
.pt25  { padding-top: 25px; }
.pt30  { padding-top: 30px; }
.pt35  { padding-top: 35px; }
.pt45  { padding-top: 45px; }
.pt50  { padding-top: 50px; }
.pt60  { padding-top: 60px; }
.pt100 { padding-top: 100px; }

.pb10  { padding-bottom: 10px; }
.pb20  { padding-bottom: 20px; }
.pb30  { padding-bottom: 30px; }
.pb40  { padding-bottom: 40px; }
.pb50  { padding-bottom: 50px; }
.pb60  { padding-bottom: 60px; }
.pb80  { padding-bottom: 80px; }
.pb100 { padding-bottom: 100px; }

.pl10  { padding-left: 10px; }
.pl20  { padding-left: 20px; }
.pl30  { padding-left: 30px; }
.pl40  { padding-left: 40px; }
.pl50  { padding-left: 50px; }

.pr10  { padding-right: 10px; }
.pr20  { padding-right: 20px; }
.pr30  { padding-right: 30px; }
.pr40  { padding-right: 40px; }
.pr50  { padding-right: 50px; }

/* ── 폰트 크기 ─── */
.fs13 { font-size: 13px; }
.fs14 { font-size: 14px; }
.fs15 { font-size: 15px; }
.fs16 { font-size: 16px; }
.fs17 { font-size: 17px; }
.fs18 { font-size: 18px; }
.fs19 { font-size: 19px; }
.fs21 { font-size: 21px; }
.fs22 { font-size: 22px; }
.fs23 { font-size: 23px; }
.fs24 { font-size: 24px; }
.fs25 { font-size: 25px; }
.fs26 { font-size: 26px; }
.fs27 { font-size: 27px; }
.fs28 { font-size: 28px; }
.fs29 { font-size: 29px; }
.fs35 { font-size: 35px; }
.fs40 { font-size: 40px; }

/* ── 라인 높이 ─── */
.lh30 { line-height: 30px; }
.lh35 { line-height: 35px; }
.lh40 { line-height: 40px; }
.lh50 { line-height: 50px; }

/* ── 색상 클래스 ─── */
.bgcolor_f4f4f4 { background: #f4f4f4; }
.bcolor_417bff  { color: #417bff; font-weight: bold; }
.color_417bff   { color: #417bff; }
.bgred          { background: yellow; font-weight: bold; color: #ff0000; }
.rednbd         { font-weight: bold; color: #ff0000; }
.cff0000        { color: #ff0000; }
.red            { font-weight: bold; color: #ff0000; border-bottom: 1px solid #ff0000; }

/* ── 제목 크기 ─── */
.h40title { font-size: 40px; margin: 20px 0; line-height: 50px; font-weight: bold; }
.h30title { font-size: 30px; line-height: 40px; font-weight: bold; }
.h24title { font-size: 24px; line-height: 34px; font-weight: bold; }
.h20title { font-size: 20px; line-height: 30px; font-weight: bold; }

/* ── CTA 버튼 (원본) ─── */
.sub_btn_01 {
    display: inline-block;
    height: 50px;
    min-width: 200px;
    text-align: center;
    font-size: 16px;
    line-height: 50px;
    background: #417bff;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 0 24px;
    transition: background 0.2s;
}
.sub_btn_01:hover { background: #2c5fcc; color: #fff; }

/* ── HR ─── */
hr.botail {
    display: block;
    border: none;
    border-bottom: 2px solid #ccc;
    margin: 15px 0;
    height: 0;
}

/* ── 테이블 (tbclass1 / tbclass2) ─── */
.tbclass1 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
    margin-top: 10px;
}
.tbclass1 caption {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    padding: 0;
}
.tbclass1 th {
    font-size: 16px;
    color: #3e7dfe;
    border-top: 2px solid #3e7dfe;
    border-bottom: 2px solid #3e7dfe;
    padding: 6px 8px;
    text-align: center;
}
.tbclass1 td {
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #3e7dfe;
    padding: 6px 5px;
    vertical-align: top;
}

.tbclass2 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
    margin: 0 auto;
}
.tbclass2 caption {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    padding: 0;
}
.tbclass2 th {
    font-size: 17px;
    padding: 10px 12px;
    background: #e4e4e4;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    text-align: center;
    font-weight: bold;
}
.tbclass2 td {
    font-size: 15px;
    padding: 8px 10px 20px;
    border-bottom: 2px solid #000;
    vertical-align: top;
}

/* ── 아코디언 리스트 (page_wrap2) ─── */
.ul_li_style {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}
.ul_li_style > li {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 4px;
}
.ul_li_style h4 {
    font-size: 20px;
    border-bottom: 1px solid #000;
    padding: 10px 0;
    cursor: pointer;
    margin: 0;
}
.ul_li_style h4 a {
    color: #222;
    text-decoration: none;
    display: block;
}
.ul_li_style h4 span {
    position: relative;
    font-size: 12px;
    top: -3px;
    margin-right: 4px;
    color: #b5837c;
}
.ul_li_style h5 {
    font-size: 16px;
    margin-top: 20px;
    font-weight: bold;
}
.ul_li_style p {
    font-size: 16px;
    margin: 10px 0;
    line-height: 1.9;
}

.ul_li_left {
    position: relative;
    width: 450px;
    float: left;
    box-sizing: border-box;
}
.ul_li_right {
    position: relative;
    float: left;
    width: calc(100% - 490px);
    padding-left: 40px;
    box-sizing: border-box;
}

/* ── page_wrap 래퍼 ─── */
#page_wrap1,
#page_wrap2 {
    position: relative;
    width: 100%;
    line-height: 2em;
}

#page_wrap2 {
    display: none;
}

#page_wrap1 p          { font-size: 16px; }
#page_wrap1 h4.h40title { font-size: 40px; margin: 20px 0; line-height: 50px; }
#page_wrap1 h4.h30title { font-size: 30px; line-height: 40px; }
#page_wrap1 h5.h20title { font-size: 20px; line-height: 30px; }

/* ── 탭 내비 (#sub_menu_dep2) ─── */
#sub_menu_dep2 {
    position: sticky;
    top: 0;
    width: 100%;
    background: #f3f3f3;
    margin: 0 0 35px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

#sub_menu_dep2 ul {
    display: inline-flex;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0 auto;
    list-style: none;
    height: 36px;
    align-items: center;
}

#sub_menu_dep2 li {
    display: inline-block;
    padding: 0 10px;
    height: 36px;
    line-height: 36px;
}

#sub_menu_dep2 li a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    display: block;
}

#sub_menu_dep2 li.ov a {
    color: #af8568;
    font-weight: bold;
}

/* ── page_wrap1 이미지 레이아웃 ─── */
#page_wrap1 ul {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#page_wrap1 ul.ul01 {
    max-width: 900px;
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 40px;
    overflow: visible;
    font-size: 16px;
    line-height: 40px;
}

#page_wrap1 ul.ul01 li {
    float: none;
    flex: 0 0 calc(50% - 20px);
    box-sizing: border-box;
}

/* anger/impulse/eating류 "단일 섹션" 콘텐츠는 원본이 <br>로 묶은 2블럭이 아니라
   한 줄짜리 항목을 li 하나하나로 나열한다(6~20개) — 위의 2열 강제 배치를 그대로
   적용하면 항목 수가 홀수일 때 마지막 줄 오른쪽이 텅 비어 어색해 보인다.
   li가 3개 이상이면(=한 줄짜리 나열형) 한 줄에 하나씩 쌓이도록 되돌린다. */
#page_wrap1 ul.ul01:has(li:nth-child(3)) li {
    flex: 0 0 100%;
}

/* 표(td) 안에 중첩된 ul01은 원본 라이브 사이트도 별도 축소 스타일을 씀
   (width:200px 1단, font-size:14px) — 2블럭 중앙 배치는 표 밖 증상 인트로
   박스 전용이라 표 안에서는 원래의 컴팩트한 1단 목록으로 되돌린다. */
#page_wrap1 td ul.ul01 {
    display: block;
    max-width: 100%;
    margin: 0;
    gap: 0;
    font-size: 14px;
    line-height: 25px;
}

#page_wrap1 td ul.ul01 li {
    flex: none;
    width: 100%;
}

/* ── 반응형 (원본 클래스 오버라이드) ─── */
@media (max-width: 1024px) {
    .ul_li_left  { width: 340px; }
    .ul_li_right { width: calc(100% - 380px); }
}

@media (max-width: 900px) {
    .ul_li_left,
    .ul_li_right {
        float: none;
        width: 100%;
        padding-left: 0;
    }
    .tbclass2 {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .fL, .fR        { float: none; }
    .fcb             { clear: none; }
    .widp10, .widp20, .widp30,
    .widp40, .widp50, .widp60,
    .widp70, .widp80, .widp90 { width: 100%; }

    #page_wrap1 ul li.taR  { text-align: center; }

    #page_wrap1 ul.ul01 li { flex: 0 0 100%; }

    .h40title { font-size: 22px; line-height: 1.4; }
    .h30title { font-size: 19px; line-height: 1.4; }
    .h24title { font-size: 18px; line-height: 1.4; }
    .h20title { font-size: 17px; }

    #page_wrap1 h4.h40title { font-size: 22px; line-height: 1.4; }
    #page_wrap1 h4.h30title { font-size: 19px; }

    .sub_btn_01 { min-width: 160px; font-size: 15px; padding: 0 16px; }

    .tbclass1,
    .tbclass2 {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .bcolor_417bff { font-size: 15px !important; }
    .bgred         { font-size: 15px !important; }
    .rednbd        { font-size: 15px !important; }
    .red           { font-size: 15px !important; }

    .mt100 { margin-top: 60px; }
    .mt150 { margin-top: 80px; }
    .pt100 { padding-top: 60px; }
    .pb100 { padding-bottom: 60px; }
}

@media (max-width: 480px) {
    .h40title { font-size: 19px; }
    .h30title { font-size: 17px; }
    .h24title { font-size: 16px; }
    .sub_btn_01 { min-width: 140px; font-size: 14px; }

    #sub_menu_dep2 li a { font-size: 13px; }
    #sub_menu_dep2 li   { padding: 0 7px; }

    .bgcolor_f4f4f4 { padding: 20px 16px; }
}

@media (max-width: 360px) {
    .h40title { font-size: 17px; }
    .h30title { font-size: 15px; }
    .h24title { font-size: 15px; }
    .mt100 { margin-top: 40px; }
    .pt100 { padding-top: 40px; }
    .pb100 { padding-bottom: 40px; }
    #sub_menu_dep2 li a { font-size: 12px; }
}

/* ── 추가 유틸리티 ──────────────────── */
.bgcolor_ffff00 { background: #ffff00; }

/* 테이블 클래스 */
.tbclass6 {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 20px;
}
.tbclass6 td,
.tbclass6 th {
    border: 1px solid #ddd;
    padding: 10px 12px;
    vertical-align: middle;
}
.tbclass6 caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

/* 인라인 리스트 (테이블 내부 ul) */
#page_wrap1 ul.ul02 {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.8;
    padding: 6px 0;
}
#page_wrap1 ul.ul02 li {
    width: 100%;
    box-sizing: border-box;
    padding-left: 4px;
}

@media (max-width: 768px) {
    .tbclass6 { font-size: 13px; }
    .tbclass6 td,
    .tbclass6 th { padding: 8px; }

    #page_wrap1 > table.tbclass6,
    #page_wrap1 div > table.tbclass6 {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .tbclass6 { font-size: 12px; }
}

.new_under { text-decoration: underline; }
.bgredbd   { background: #ffe0e0; font-weight: bold; color: #cc0000; }
.pl60  { padding-left: 60px; }
.border000 { border: 1px solid #000 !important; }
.cfff      { color: #fff; }
.bgcolor_3d3d3d { background: #3d3d3d; }

/* ── tbclass7 (3-box layout) ── */
.tbclass7 { width: 100%; border-collapse: collapse; }
.tbclass7 caption { font-size: 0; line-height: 0; overflow: hidden; padding: 0; }
.tbclass7 td { padding: 20px 15px; vertical-align: top; font-size: 15px; line-height: 1.8; text-align: center; }

/* ── tbclass5-3 (3-col with dark header) ── */
.tbclass5-3 { width: 100%; border-collapse: collapse; }
.tbclass5-3 caption { font-size: 0; line-height: 0; overflow: hidden; padding: 0; }
.tbclass5-3 th { background: #555; color: #fff; padding: 14px 10px; text-align: center; border: 1px solid #444; font-size: 15px; }
.tbclass5-3 td { padding: 15px 20px; vertical-align: top; border: 1px solid #ddd; font-size: 14px; line-height: 1.8; }

/* ── tbclass6-2 (2-col with dark header) ── */
.tbclass6-2 { width: 100%; border-collapse: collapse; }
.tbclass6-2 caption { font-size: 0; line-height: 0; overflow: hidden; padding: 0; }
.tbclass6-2 th { background: #3d3d3d; color: #fff; padding: 14px; text-align: center; border: 1px solid #555; font-size: 15px; }
.tbclass6-2 td { padding: 12px 15px; border: 1px solid #ccc; vertical-align: middle; line-height: 1.8; font-size: 14px; }

/* ── tbclass6-3 (multi-col/rowspan table) ── */
.tbclass6-3 { width: 100%; border-collapse: collapse; }
.tbclass6-3 caption { font-size: 0; line-height: 0; overflow: hidden; padding: 0; }
.tbclass6-3 td { padding: 10px 12px; border: 1px solid #ccc; vertical-align: middle; line-height: 1.8; font-size: 14px; }

/* ── tbclass6-4 (with th header row) ── */
.tbclass6-4 { width: 100%; border-collapse: collapse; }
.tbclass6-4 caption { font-size: 0; line-height: 0; overflow: hidden; padding: 0; }
.tbclass6-4 th { background: #f0f0f0; padding: 12px 10px; text-align: center; border: 1px solid #ccc; font-size: 14px; font-weight: bold; }
.tbclass6-4 td { padding: 12px 15px; border: 1px solid #ccc; vertical-align: top; line-height: 1.8; font-size: 14px; }

@media (max-width: 900px) {
    .tbclass5-3,
    .tbclass6-2,
    .tbclass6-3,
    .tbclass6-4,
    .tbclass7 { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
    .tbclass5-3 th, .tbclass5-3 td,
    .tbclass6-2 th, .tbclass6-2 td,
    .tbclass6-3 td,
    .tbclass6-4 th, .tbclass6-4 td,
    .tbclass7 td { font-size: 12px; padding: 8px; }
}

.pt55  { padding-top: 55px; }

/* ── tbclass9 (2-col with td header row) ── */
.tbclass9 { width: 100%; border-collapse: collapse; }
.tbclass9 caption { font-size: 0; line-height: 0; overflow: hidden; padding: 0; }
.tbclass9 td { padding: 12px 15px; border: 1px solid #ccc; vertical-align: top; line-height: 1.8; font-size: 14px; }

/* ── new_con_box1 (DSM classification box) ── */
.new_con_box1 {
    background: #f8f9ff;
    border: 1px solid #dde4ff;
    padding: 30px 40px;
    margin: 20px 0;
    line-height: 1.8;
}
@media (max-width: 768px) {
    .new_con_box1 { padding: 20px 20px; }
    .tbclass9 { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tbclass9 td { font-size: 13px; padding: 10px; }
}


/* ==============================================
   산후우울증 페이지 전용
   ============================================== */

/* ── 증상 체크리스트 2열 ── */
.postpartum-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
    background: #f7f5f4;
    border: 1px solid #e0d8d5;
    border-radius: 4px;
    padding: 30px 36px;
}
.postpartum-check-col {
    list-style: none;
    padding: 0;
    margin: 0;
}
.postpartum-check-col li {
    padding: 8px 0 8px 22px;
    border-bottom: 1px solid #ece8e6;
    font-size: 15px;
    color: #444;
    position: relative;
}
.postpartum-check-col li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #b5837c;
    font-weight: 700;
}
.postpartum-check-col li:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    .postpartum-checklist {
        grid-template-columns: 1fr;
        padding: 20px 20px;
        gap: 0;
    }
    .postpartum-check-col:first-child li:last-child {
        border-bottom: 1px solid #ece8e6;
    }
}

@media (max-width: 480px) {
    .postpartum-checklist { padding: 16px; }
    .postpartum-check-col li { font-size: 14px; }
}


/* ==============================================
   월경전불쾌감장애 페이지 전용
   ============================================== */

/* ── 3열 그리드 ── */
.pmdd-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 20px;
}
.pmdd-col-item {
    border-top: 2px solid #b5837c;
    padding-top: 20px;
}

@media (max-width: 768px) {
    .pmdd-three-col {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}


/* ==============================================
   기분저하증 페이지 전용
   ============================================== */

/* ── 히어로 배너 ── */
.dysthymia-hero {
    margin: 0 0 60px;
    line-height: 0; /* 이미지 하단 여백 제거 */
}
.dysthymia-hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── 인포그래픽 이미지 ── */
.dysthymia-infographic {
    text-align: center;
}
.dysthymia-infographic img {
    max-width: 100%;
    height: auto;
}

/* ── 치료법 그리드 ── */
.dysthymia-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
    margin-top: 20px;
}
.method-item {
    border-top: 2px solid #b5837c;
    padding-top: 20px;
}

/* ── 반응형 ── */
@media (max-width: 768px) {
    .dysthymia-hero { margin-bottom: 40px; }

    .dysthymia-methods {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


/* ==============================================
   ADHD 페이지 전용 클래스
   ============================================== */

/* font-weight normal */
.fwn { font-weight: normal; }

/* padding-top 추가 */
.pt70  { padding-top: 70px; }
.pt90  { padding-top: 90px; }

/* ── tbclass4 (2-col with blue header) ── */
.tbclass4 { width: 100%; border-collapse: collapse; }
.tbclass4 caption { font-size: 0; line-height: 0; overflow: hidden; padding: 0; }
.tbclass4 th { background: #417bff; color: #fff; padding: 14px 10px; text-align: center; border: 1px solid #2b64e0; font-size: 15px; }
.tbclass4 td { padding: 15px 20px; vertical-align: top; border: 1px solid #ddd; font-size: 14px; line-height: 1.8; }

/* ── tbclass5 (2-col with blue/dark header, 생물학적/심리적 요인) ── */
.tbclass5 { width: 100%; border-collapse: collapse; }
.tbclass5 caption { font-size: 0; line-height: 0; overflow: hidden; padding: 0; }
.tbclass5 th { background: #417bff; color: #fff; padding: 14px 10px; text-align: center; border: 1px solid #2b64e0; font-size: 15px; }
.tbclass5 td { padding: 15px 20px; vertical-align: top; border: 1px solid #ddd; font-size: 14px; line-height: 1.8; }

/* ── ul_li_left / ul_li_right (50:50 float layout inside accordion) ── */
.ul_li_left  { float: left;  width: 50%; box-sizing: border-box; padding-right: 15px; }
.ul_li_right { float: right; width: 50%; box-sizing: border-box; padding-left:  15px; }

@media (max-width: 768px) {
    .tbclass4, .tbclass5 { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tbclass4 th, .tbclass4 td,
    .tbclass5 th, .tbclass5 td { font-size: 13px; padding: 10px; }
    .ul_li_left, .ul_li_right { float: none; width: 100%; padding: 0; }
}
@media (max-width: 480px) {
    .tbclass4 th, .tbclass4 td,
    .tbclass5 th, .tbclass5 td { font-size: 12px; padding: 8px; }
}

@media (max-width: 480px) {
    .dysthymia-hero { margin-bottom: 28px; }
}

@media (max-width: 360px) {
    .dysthymia-hero { margin-bottom: 20px; }
}

/* ── 범불안장애 – 5단계 흐름도 ── */
.gad-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.gad-step {
    flex: 0 1 160px;
    border: 2px solid #4a7fd4;
    border-radius: 8px;
    padding: 20px 14px;
    text-align: center;
    background: #f5f8ff;
}
.gad-step-num {
    display: block;
    font-size: 11px;
    font-weight: bold;
    color: #4a7fd4;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.gad-step-area {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #2a2a2a;
    margin-bottom: 10px;
}
.gad-step p {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}
.gad-arrow {
    width: 28px;
    height: auto;
    align-self: center;
    flex-shrink: 0;
    margin: 0 6px;
}

@media (max-width: 900px) {
    .gad-flow { gap: 10px; }
    .gad-step { flex: 0 1 140px; padding: 16px 10px; }
    .gad-arrow { width: 20px; }
}

@media (max-width: 768px) {
    .gad-flow {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .gad-step {
        flex: none;
        width: 100%;
        max-width: 320px;
    }
    .gad-arrow {
        transform: rotate(90deg);
        margin: 4px 0;
    }
}

@media (max-width: 360px) {
    .gad-step { max-width: 100%; }
}

/* tbclass8 (2-col label+content, no header) */
.tbclass8 { width: 100%; border-collapse: collapse; }
.tbclass8 caption { font-size: 0; line-height: 0; overflow: hidden; padding: 0; }
.tbclass8 td { padding: 15px 20px; border: 1px solid #ddd; vertical-align: middle; font-size: 14px; line-height: 1.8; }
@media (max-width: 768px) {
    .tbclass8 { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tbclass8 td { font-size: 13px; padding: 10px; }
}
@media (max-width: 480px) {
    .tbclass8 td { font-size: 12px; padding: 8px; }
}

/* tbclass3 (2-col label+설명, 행마다 밑줄 구분 — 진료과목 공통 마무리 컴포넌트 전용) */
.tbclass3 { width: 100%; border-collapse: collapse; border-spacing: 5px; margin-top: 0; }
.tbclass3 caption { font-size: 0; line-height: 0; overflow: hidden; padding: 0; }
.tbclass3 td { border-bottom: 1px solid #ccc; padding: 30px; }
.tbclass3 tr:last-child td { border-bottom: none; }
@media (max-width: 768px) {
    .tbclass3 td { padding: 20px 10px; }
}
@media (max-width: 480px) {
    .tbclass3 { display: block; }
    .tbclass3 tbody,
    .tbclass3 tr { display: block; width: 100%; }
    .tbclass3 td { display: block; width: 100%; padding: 14px 4px; }
    .tbclass3 tr td:first-child { padding-bottom: 4px; border-bottom: none; }
    .tbclass3 tr td:last-child { padding-top: 0; }
}

/* tbclass4-2 (3-col comparison table: left | center-label | right) */
.tbclass4-2 { width: 100%; border-collapse: collapse; }
.tbclass4-2 caption { font-size: 0; line-height: 0; overflow: hidden; padding: 0; }
.tbclass4-2 th { padding: 14px 10px; text-align: center; border: 1px solid #ddd; font-size: 15px; font-weight: bold; }
.tbclass4-2 td { padding: 15px 12px; vertical-align: top; border: 1px solid #ddd; font-size: 14px; line-height: 1.8; }
@media (max-width: 768px) {
    .tbclass4-2 { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tbclass4-2 th, .tbclass4-2 td { font-size: 13px; padding: 8px; }
}
@media (max-width: 480px) {
    .tbclass4-2 th, .tbclass4-2 td { font-size: 12px; padding: 6px; }
}


/* ==============================================
   일반 페이지 (page.php) 레이아웃
   ============================================== */
.page-content {
    padding: 60px 20px 80px;
}

.page-wrap {
    max-width: 1180px;
    margin: 0 auto;
}

.page-article__body {
    font-size: 15px;
    line-height: 1.9;
    color: #333;
}

.page-article__body h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 40px 0 16px;
    color: #1e1814;
}

.page-article__body h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 32px 0 12px;
    color: #1e1814;
}

.page-article__body p {
    margin-bottom: 16px;
}

.page-article__body ul,
.page-article__body ol {
    margin: 12px 0 20px 20px;
    line-height: 1.9;
}

.page-article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}

.page-article__body th {
    background: #f4ece0;
    padding: 10px 14px;
    text-align: left;
    border: 1px solid #ddd;
    font-weight: 700;
}

.page-article__body td {
    padding: 10px 14px;
    border: 1px solid #ddd;
    vertical-align: top;
}

@media (max-width: 768px) {
    .page-content { padding: 40px 16px 60px; }

    .page-article__body h2 { font-size: 20px; margin: 32px 0 12px; }
    .page-article__body h3 { font-size: 18px; margin: 24px 0 10px; }
    .page-article__body { font-size: 14px; }

    .page-article__body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 360px) {
    .page-content { padding: 28px 14px 44px; }
}


/* ==============================================
   치료 페이지 인라인 고정 너비 반응형 오버라이드
   ============================================== */
@media (max-width: 768px) {
    #page_wrap1 div[style*="width:800px"],
    #page_wrap1 div[style*="width: 800px"],
    #page_wrap1 div[style*="width:900px"],
    #page_wrap1 div[style*="width: 900px"],
    #page_wrap1 div[style*="width:1000px"],
    #page_wrap1 div[style*="width: 1000px"],
    #page_wrap1 div[style*="width:1010px"],
    #page_wrap1 div[style*="width: 1010px"],
    #page_wrap2 div[style*="width:800px"],
    #page_wrap2 div[style*="width: 800px"],
    #page_wrap2 div[style*="width:900px"],
    #page_wrap2 div[style*="width: 900px"],
    #page_wrap2 div[style*="width:500px"],
    #page_wrap2 div[style*="width: 500px"] {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* iframe 16:9 비율 유지 */
    #page_wrap1 iframe,
    #page_wrap2 iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
}

/* =============================================
   관련 자주묻는질문 (components/treatment-related-faq.php)
   2026-07-24 추가 — 진료과목 상세 본문과 치료장점 비교표 사이에 들어가는
   압축된 FAQ 목록. 마크업(.faq-list/.faq-item 등)은 faq.css를 그대로 재사용하고,
   여기서는 제목 + "조그맣게" 요청에 맞춘 축소 변형(.faq-list--compact)만 둔다.
   바로 뒤에 이어지는 치료장점 비교표(h40title, 큰 헤드라인)에 묻혀서 눈에 안
   띈다는 피드백으로(2026-07-24), 배경 박스 + eyebrow 라벨 + 큰 제목으로
   섹션 자체를 훨씬 눈에 띄게 만듦. */
.treatment-related-faq {
    margin: 56px 0;
    padding: 36px 32px 12px;
    background: var(--hyoo-bg-soft);
    border: 1px solid var(--hyoo-border);
    border-radius: 16px;
}

.treatment-related-faq__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--hyoo-accent-dark);
    margin-bottom: 10px;
}

.treatment-related-faq__title {
    font-size: 26px;
    font-weight: 800;
    color: var(--hyoo-text);
    letter-spacing: -0.5px;
    margin: 0 0 20px;
}

.faq-list--compact.faq-list {
    border-top-width: 1px;
}

.faq-list--compact .faq-item__q {
    padding: 12px 2px;
    gap: 10px;
}

.faq-list--compact .faq-item__q-mark,
.faq-list--compact .faq-item__a-mark {
    width: 22px;
    height: 22px;
    font-size: 11px;
}

.faq-list--compact .faq-item__q-text {
    font-size: 13px;
}

.faq-list--compact .faq-item__a-inner {
    margin: 4px 4px 14px;
    padding: 12px 14px;
    gap: 10px;
}

.faq-list--compact .faq-item__a-text {
    font-size: 13px;
}

/* /faq/ 페이지의 같은 카테고리로 이동하는 링크(2026-07-24) — main.css의
   .main-notice__more와 같은 시각 언어(강조색 텍스트 + 화살표, 호버 시 이동)를 씀. */
.treatment-related-faq__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 20px 0 24px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hyoo-accent-dark);
    text-decoration: none;
    transition: color 0.2s;
}

.treatment-related-faq__more svg {
    flex-shrink: 0;
    transition: transform 0.15s;
}

.treatment-related-faq__more:hover {
    color: var(--hyoo-accent-light);
}

.treatment-related-faq__more:hover svg {
    transform: translateX(3px);
}