/* =========================================
   학폭케어서비스 (/schoolcare)
   DB손보 제공 화면 복제 — 모바일 우선(375–430)
   ========================================= */

.sc-page {
    font-family: 'Noto Sans KR', 'Inter', sans-serif;
    color: #111;
    background: #f5f6f8;
    -webkit-font-smoothing: antialiased;
}

/* 푸터 위치 — 내용이 화면보다 짧으면 푸터가 스크롤 없이 화면 아래에 붙고, 길면 내용 뒤에 온다.
   (.subpage-content 의 min-height: 100vh 가 푸터를 항상 화면 밖으로 밀어내는 것을 이 페이지에서만 바로잡음.
   전역 수정은 회사소개·약관 등 다른 서브페이지 회귀 확인이 필요해 별도 건으로 둔다) */
.right-wrapper:has(> .sc-page) {
    display: flex;
    flex-direction: column;
}

.right-wrapper:has(> .sc-page) > .nav-bar {
    flex-shrink: 0;
}

.right-wrapper:has(> .sc-page) > .sc-page {
    flex: 1 0 auto;
    min-height: 0;
}

/* ---------- 메인 ---------- */
.sc-hero {
    background: #fff;
    padding: 40px 20px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sc-badge {
    display: inline-block;
    background: #222;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    padding: 11px 18px;
    border-radius: 999px;
}

/* DB손해보험 로고 (원본 304x126) */
.sc-logo-img {
    display: block;
    margin: 22px auto 0;
    height: 36px;
    width: auto;
}

.sc-title {
    margin: 14px 0 0;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    letter-spacing: -0.5px;
    word-break: keep-all;
}

.sc-banners {
    width: 100%;
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sc-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 26px 18px 26px 20px;
    background: #f7f8fa;
    border: none;
    border-radius: 18px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.12s ease-out, transform 0.12s ease-out;
}

.sc-banner:active {
    background: #eef0f3;
    transform: scale(0.99);
}

.sc-banner:focus-visible,
.sc-notice-link:focus-visible,
.sc-sheet-close:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

.sc-banner-icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
}

.sc-banner-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sc-banner-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sc-banner-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    word-break: keep-all; /* 2026-09-29: 약관 명칭 제목이 길어져 '보장' 의 '장' 한 글자만 넘어가던 것 방지 */
}

.sc-banner-desc {
    font-size: 15px;
    line-height: 1.5;
    color: #666;
    word-break: keep-all;
}

.sc-banner-chevron {
    flex: 0 0 20px;
    display: flex;
}

.sc-notice-link {
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 6px 4px;
    font: inherit;
    font-size: 16px;
    color: #444;
    cursor: pointer;
}

.sc-notice-link-text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- 보험금 청구 · 상담 ---------- */
.sc-claim-wrap {
    padding: 0 20px 40px;
    text-align: center;
}

.sc-claim-btn {
    display: block;
    width: 100%;
    padding: 17px 16px;
    border: none;
    border-radius: 14px;
    background: #F26B4B;
    color: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.12s ease-out, transform 0.12s ease-out;
}

.sc-claim-btn:active { background: #E4553A; transform: scale(0.99); }
/* 비활성(보험 미가입) — 흐린 주황은 '누를 수 있다'로 보여서 회색으로 (2026-09-23 대표 지시).
   보조 버튼(.sc-claim-btn-sub #f1f2f4)과 같은 톤. */
.sc-claim-btn:disabled { background: #E5E7EB; color: #7C8288; cursor: default; transform: none; }

.sc-claim-btn-sub {
    margin-top: 8px;
    background: #f1f2f4;
    color: #444;
}

.sc-claim-btn-sub:active { background: #e6e8eb; }

.sc-claim-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sc-claim-buttons .sc-claim-btn {
    min-width: 0;
    margin-top: 0;
    padding: 17px 8px;
    font-size: 16px;
    white-space: nowrap;
}

/* 바텀시트 본문 끝에 붙는 버튼 (무료 보험 이용 안내 → 약관 보기). 본문 글과 붙지 않게 띄운다 */
.sc-sheet-cta {
    margin-top: 22px;
    font-size: 16px;
    padding: 15px 16px;
}
/* 시트 끝 버튼이 둘 이상이면(약관 보기 → 서비스 보장안 보기) 사이는 주·보조 버튼 간격(8px)과 같게 */
.sc-sheet-cta + .sc-sheet-cta { margin-top: 8px; }

/* 버튼 위 한 줄 — 한 줄 유지가 요건이라 nowrap, 칸이 좁으면 글자를 줄인다.
   단위는 vw 가 아니라 cqw 다: .right-wrapper(container-type: inline-size)가 320~500px 이라
   넓은 화면에서도 칸은 320px 일 수 있다.
   실측(Noto Sans KR, 칸 320px → 글자 10.88px): 가장 긴 문구
   "보험적용기간(개통일로 2년): 2025.09.23 ~ 2027.09.23" 249px / 쓸 수 있는 폭 280px. */
.sc-claim-status {
    margin: 0 0 10px;
    font-size: min(12px, 3.4cqw);
    letter-spacing: -0.02em;
    white-space: nowrap;
    font-weight: 500;
    color: #555;
}

.sc-claim-status.is-off { color: #999; font-weight: 400; }

.sc-claim-desc {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #888;
    word-break: keep-all;
}

.sc-claim-actions { margin-top: 6px; }

.sc-claim-when {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
    color: #888;
}

/* ---------- 무료 보험 제공 요약 ----------
   2026-09-30 본부장 지시로 제목(.sc-summary-title)·'보장 개시'·'보험료' 행 제거 — 제목 규칙도 삭제.
   행 사이 구분선은 원래 없고(gap 만), 카드 위아래 안쪽 여백(22px)은 제목 없이도 대칭이라 그대로 둔다. */
.sc-summary-wrap {
    padding: 28px 20px 40px;
}

.sc-summary {
    background: #fff;
    border-radius: 18px;
    padding: 22px 20px;
}

.sc-summary-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sc-summary-row {
    display: flex;
    gap: 12px;
    font-size: 15px;
    line-height: 1.5;
}

.sc-summary-row dt {
    flex: 0 0 72px;
    color: #888;
}

.sc-summary-row dd {
    margin: 0;
    flex: 1;
    color: #222;
    font-weight: 500;
    word-break: keep-all;
}

.sc-summary-sub {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #888;
}

/* ---------- 바텀시트 ---------- */
.sc-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    visibility: hidden;
    pointer-events: none;
}

.sc-sheet.is-open {
    visibility: visible;
    pointer-events: auto;
}

.sc-sheet-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.sc-sheet.is-open .sc-sheet-dim {
    opacity: 1;
}

.sc-sheet-panel {
    position: absolute;
    left: 0;
    width: 100%;
    /* left / width 는 JS 로 .right-wrapper 위치에 맞춰 재설정 (activationApply 와 같은 방식) */
    bottom: 0;
    max-height: 80vh;
    max-height: 80dvh;
    /* 위로 화면의 20% 는 남긴다 — 실제 값은 JS 가 푸터 높이까지 빼서 다시 계산 */
    background: #fff;
    border-radius: 22px 22px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1);
    padding-bottom: env(safe-area-inset-bottom);
}

.sc-sheet.is-open .sc-sheet-panel {
    transform: translateY(0);
}

/* 아래에 더 있을 때 — 스크롤 영역 아래 끝을 흰색으로 흐려 "더 있음"을 알린다 (.has-more 는 JS 가 토글) */
.sc-sheet-panel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.sc-sheet-panel.has-more::after {
    opacity: 1;
}

.sc-sheet-handle {
    width: 56px;
    height: 5px;
    border-radius: 3px;
    background: #d9d9d9;
    margin: 10px auto 0;
    flex: 0 0 auto;
}

.sc-sheet-close {
    position: absolute;
    top: 22px;
    right: 18px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1;
}

.sc-sheet-body {
    /* 스크롤바는 프로젝트 공통 .hide-scrollbar(subpage.css)로 숨김 — 검정 시트에 기본 스크롤바가 튀어서 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 아래 여백 = 기본 36px + 푸터 높이(--sc-footer-gap, JS 가 시트 열 때 계산) — 푸터를 흰색으로 덮는 몫 */
    padding: 56px 22px calc(36px + var(--sc-footer-gap, 0px));
    font-family: 'Noto Sans KR', 'Inter', sans-serif;
    color: #111;
}

.sc-sheet-heading {
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 700;
    padding-right: 40px;
}

.sc-sheet-heading-lg {
    font-size: 24px;
}

/* 준법감시인 심의필 번호 — 글씨·색은 .sc-summary-sub(13px #888) 재사용.
   2026-10-06 2차: 탭하지 않아도 보이도록 바텀시트에서 '가입 시 알아두실 사항' 링크(.sc-notice-link) 바로 아래로 이동.
   버튼 밖(형제 요소)에 둔 이유: 버튼은 inline-flex 한 줄(텍스트+화살표 아이콘)로 짜여 있어, 버튼 안에 두 번째 줄을
   넣으면 화살표 아이콘이 버튼 높이 중앙으로 다시 정렬되며 어긋난다. 부모 섹션(.sc-hero)이 flex-column·
   align-items:center 라 버튼 밖에 둬도 같은 가운데 정렬을 자동으로 받는다. */
.sc-notice-compliance {
    margin: 4px 0 0;
    text-align: center;
}

/* 2026-10-13: 바텀시트 안 작은 글씨 2종 — 글씨·색은 .sc-summary-sub(13px #888) 재사용, 간격만 준다.
   · 상단 준법감시인 확인필(제목 바로 아래) · 하단 약관 문서번호(본문과 [약관 보기] 버튼 사이) */
.sc-sheet-compliance {
    margin: -8px 0 18px;
}
.sc-sheet-docno {
    margin: 4px 0 0;
}
.sc-sheet-docno + .sc-sheet-cta {
    margin-top: 12px;
}

.sc-sheet-desc,
.sc-sheet-para {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.6;
    color: #222;
    word-break: keep-all;
}

.sc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.45;
}

.sc-table th,
.sc-table td {
    border: 1px solid #e5e5e5;
    padding: 14px 10px;
    text-align: center;
    vertical-align: middle;
    word-break: keep-all;
}

.sc-table th {
    background: #f7f8fa;
    font-weight: 500;
    color: #555;
}

.sc-sheet-sub {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    word-break: keep-all;   /* 긴 항목 제목(7항)이 낱말 중간에서 끊기지 않게 */
}

.sc-sheet-list {
    margin: 0 0 12px;
    padding-left: 18px;
    font-size: 15px;
    line-height: 1.6;
    color: #222;
    word-break: keep-all;
}

.sc-sheet-list li + li {
    margin-top: 6px;
}

/* 번호로 시작하는 줄(1) 2) 3) …)은 번호 뒤에 글이 맞춰지게 내어쓰기 */
.sc-sheet-para-hang {
    padding-left: 1.3em;
    text-indent: -1.3em;
}

.sc-sheet-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 카드 창 약관 원문 (2026-09-29 심의 자료) — 문구는 원문 그대로, 제목·번호 들여쓰기만 정리.
   길어서 창 안(.sc-sheet-body)에서 스크롤된다. */
.sc-terms {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.sc-terms-name {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.sc-terms-art {
    margin: 18px 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.sc-terms-name + .sc-terms-art {
    margin-top: 0;
}

.sc-terms-p,
.sc-terms-term {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.65;
    color: #333;
}

.sc-terms-term {
    margin-top: 10px;
    margin-bottom: 2px;
    font-weight: 700;
    color: #111;
}

/* ①·1.·가. 로 시작하는 줄은 번호 뒤로 내어쓰기, 하위 항목은 한 단계 들여쓰기 */
.sc-terms-hang {
    padding-left: 1.3em;
    text-indent: -1.3em;
}

.sc-terms-lv2 {
    margin-left: 1.3em;
}

/* 원문의 회색 상자(용어풀이·산식·예시) — 2026-09-30 보장(안) PDF 반영. 라벨은 상자 첫 줄에 작게. */
.sc-terms-box {
    margin: 10px 0 14px;
    padding: 12px 14px 8px;
    border-radius: 10px;
    background: #f4f4f4;
}

.sc-terms-box-label {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: #666;
}

.sc-terms-box .sc-terms-term:first-of-type {
    margin-top: 0;
}

.sc-terms-note {
    font-size: 13px;
    color: #555;
}

/* 산식 한 줄 — 좁은 화면에서는 줄바꿈된다. 분수는 분자/분모를 위아래로 */
.sc-terms-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

.sc-terms-op {
    flex: 0 0 auto;
}

.sc-frac {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.sc-frac-num {
    padding: 0 4px 2px;
    border-bottom: 1px solid #555;
}

.sc-frac-den {
    padding: 2px 4px 0;
}

/* 화면에는 안 보이고 스크린리더만 읽는 글(분수의 ÷) */
.sc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 예금자보호 안내 박스 (2026-09-29 심의 반영) — 왼쪽 예금보험공사 로고, 오른쪽 문구.
   로고는 공식 배포본 비율(400x259) 그대로: 너비만 고정하고 height:auto. 테두리·그림자·배경은 로고에 주지 않는다(KDIC 사용금지규정). */
.sc-dpst {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 18px;
    padding: 16px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    background: #fff;
}

.sc-dpst-logo {
    flex: 0 0 auto;
    width: min(96px, 24cqw);
    height: auto;
    display: block;
}

.sc-dpst-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #222;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

body.sc-sheet-lock {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .sc-sheet-panel,
    .sc-sheet-dim,
    .sc-banner {
        transition: none;
    }
}

/* ---------- 동의 3종 (보험금 청구 시트) ----------
   별도 가입 절차가 없어 청구 시점에 받는다(2026-09-23 게시 원고 C). */
.sc-agree {
    margin: 0 0 18px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 6px 14px 12px;
}

.sc-agree-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    font-size: 15px;
    line-height: 1.45;
    color: #222;
    word-break: keep-all;
    cursor: pointer;
}

.sc-agree-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #F26B4B;
}

.sc-agree-row input[type="checkbox"]:focus-visible {
    outline: 2px solid #F26B4B;
    outline-offset: 2px;
}

.sc-agree-all {
    font-weight: 700;
    border-bottom: 1px solid #eee;
}

.sc-agree-note {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
}

.sc-agree-note a {
    color: #F26B4B;
    text-decoration: underline;
}

/* ---------- 학폭케어 문서 열람 (마이페이지) ----------
   전문은 약관 저장소(terms_document, category='schoolcare')에서 읽는다.
   공개 /schoolcare 에는 붙이지 않는다(2026-09-23 게시 원고 D). */
.sc-docs {
    margin: 16px 0 0;
    background: #fff;
    border: 1px solid #e9eaee;
    border-radius: 12px;
    padding: 16px 16px 14px;
    font-family: 'Noto Sans KR', 'Inter', sans-serif;
}

.sc-docs-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.sc-docs-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-docs-item + .sc-docs-item {
    border-top: 1px solid #f0f0f2;
}

.sc-docs-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: none;
    border: 0;
    padding: 13px 2px;
    font: inherit;
    font-size: 15px;
    color: #222;
    text-align: left;
    cursor: pointer;
}

.sc-docs-btn:focus-visible {
    outline: 2px solid #F26B4B;
    outline-offset: 2px;
    border-radius: 6px;
}

.sc-docs-state {
    flex: 0 0 auto;
    font-size: 13px;
    color: #F26B4B;
}

.sc-docs-btn[disabled] {
    cursor: default;
    color: #8b9096;
}

.sc-docs-btn[disabled] .sc-docs-state {
    color: #9aa0a6;
}

/* 2026-10-02: 높이 상한(max-height:60vh)과 안쪽 스크롤(overflow-y:auto)을 없앴다 — 본부장 실사용에서
   "보장안이 스크롤이 안 돼 끝까지 못 본다". 화면 높이 60% 상자 안에 6,600px 짜리 본문을 넣고 상자만 따로
   굴리는 구조였다(스크롤 막대도 모바일·웹뷰에서는 보이지 않음). 이제 전문을 페이지에 그대로 펼치고
   페이지 스크롤로 읽는다(공개 /schoolcare/coverage 와 같은 방식). 끝에 '접기' 버튼을 schoolcareDocs.js 가 붙인다. */
.sc-docs-panel {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #fafafb;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.65;
    color: #333;
    word-break: keep-all;
}

.sc-docs-panel table {
    width: 100%;
    border-collapse: collapse;
}

.sc-docs-panel th,
.sc-docs-panel td {
    border: 1px solid #e5e5e5;
    padding: 6px 8px;
}

/* 전문 끝의 '접기' — 길게 펼친 뒤 맨 위 버튼까지 되돌아가지 않아도 닫을 수 있게 */
.sc-docs-close {
    display: block;
    width: 100%;
    margin: 14px 0 0;
    padding: 11px 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    color: #F26B4B;
    cursor: pointer;
}

.sc-docs-close:focus-visible {
    outline: 2px solid #F26B4B;
    outline-offset: 2px;
}

.sc-docs-meta {
    margin: 0 0 10px;
    font-size: 12px;
    color: #777;
}

.sc-docs-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #777;
}