/* ============================================================
   한의원 탭 — 마켓플레이스 디자인 시스템 이식
   토큰/룩앤필은 public/pages/marketplace/marketplace.css 기준.
   전부 #tab-clinic-info 스코프 (다른 탭/페이지 영향 없음).
   코드셋 공유 관리(codeset-shares.html)도 같은 모양을 쓴다 — 그 페이지는 .cl-scope 로 연다.
   :is() 의 특정도는 가장 높은 인자(id)를 따르므로 마이페이지에서의 우선순위는 그대로다.
   ============================================================ */

:is(#tab-clinic-info, .cl-scope) {
    --cl-bg: #f8f9fa;
    --cl-surface: #ffffff;
    --cl-surface-2: #f3f4f6;
    --cl-border: #e6e7ea;
    --cl-border-2: #d3d5da;
    --cl-text: #1f2328;
    --cl-text-muted: #565b62;
    --cl-text-soft: #8a8f96;
    --cl-accent: #185fa5;
    --cl-accent-bg: #e6f1fb;
    --cl-ok: #0f6e56;
    --cl-ok-bg: #e1f5ee;
    --cl-warn: #92600c;
    --cl-warn-bg: #faeeda;
    --cl-danger: #a12b2b;
    --cl-danger-bg: #fae3e3;
}

body[data-theme="dark"] :is(#tab-clinic-info, .cl-scope),
html[data-theme="dark"] :is(#tab-clinic-info, .cl-scope) {
    --cl-bg: #10100f;
    --cl-surface: #171717;
    --cl-surface-2: #1d1d1d;
    --cl-border: #2a2a2a;
    --cl-border-2: #3a3a3a;
    --cl-text: #edf0f3;
    --cl-text-muted: #aeb6c1;
    --cl-text-soft: #7c828c;
    --cl-accent: #60a5fa;
    --cl-accent-bg: #15263e;
    --cl-ok: #5dcaa5;
    --cl-ok-bg: #0e3528;
    --cl-warn: #efb45a;
    --cl-warn-bg: #34290f;
    --cl-danger: #f08a8a;
    --cl-danger-bg: #341414;
}

/* 섹션 카드 컨테이너 */
:is(#tab-clinic-info, .cl-scope) .mypage-section {
    background: var(--cl-surface);
    border: 1px solid var(--cl-border);
    border-radius: 14px;
}

/* 섹션 제목은 개인정보 탭과 같아야 한다 — mypage.module.css 의 `.mypage-section h2`
   (1.15rem / --mp-primary-dark / 밑줄) 를 그대로 쓴다. 여기서 덮으면 탭마다 제목이 달라진다.
   아이콘 색도 덮지 않는다 — 제목 색을 그대로 물려받아 다른 탭 아이콘과 톤이 맞는다. */

/* 섹션 서브타이틀 (마켓 .mk-head p — 아이콘 박스 대신 muted 한 줄) */
:is(#tab-clinic-info, .cl-scope) .cl-subtitle {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--cl-text-muted);
    margin: -0.25rem 0 1.1rem;
    max-width: 60ch;
}

/* 대표병원 안내 — 소속이 둘 이상일 때만 렌더된다 (PLAN 260802) */
:is(#tab-clinic-info, .cl-scope) .cl-hint {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--cl-text-muted);
    background: var(--cl-surface-2);
    border: 1px solid var(--cl-border);
    border-radius: 9px;
    padding: 0.6rem 0.8rem;
    margin: 0 0 0.75rem;
}
:is(#tab-clinic-info, .cl-scope) .cl-hint i { color: var(--cl-warn); }
:is(#tab-clinic-info, .cl-scope) .cl-hint strong { color: var(--cl-text); font-weight: 600; }

/* 액션 버튼 (마켓 .mk-action — ghost/secondary 기본, filled primary 금지) */
:is(#tab-clinic-info, .cl-scope) .cl-action {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--cl-surface-2);
    color: var(--cl-text);
    border: 1px solid var(--cl-border-2);
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

:is(#tab-clinic-info, .cl-scope) .cl-action:hover { background: var(--cl-border); border-color: var(--cl-text-soft); }
:is(#tab-clinic-info, .cl-scope) .cl-action.full { width: 100%; }
:is(#tab-clinic-info, .cl-scope) .cl-action:disabled { opacity: 0.55; cursor: default; }

/* 원장 권한 신청 필드 */
:is(#tab-clinic-info, .cl-scope) .cl-field {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

:is(#tab-clinic-info, .cl-scope) .cl-field input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.72rem 0.9rem;
    background: var(--cl-surface);
    border: 1px solid var(--cl-border);
    border-radius: 10px;
    color: var(--cl-text);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s ease;
}
:is(#tab-clinic-info, .cl-scope) .cl-field input::placeholder { color: var(--cl-text-soft); }
:is(#tab-clinic-info, .cl-scope) .cl-field input:focus { border-color: var(--cl-border-2); }

/* 상태 배너 (마켓 톤 — pending/rejected만 사용; approved는 제거됨) */
:is(#tab-clinic-info, .cl-scope) .cl-status {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.6rem 0.85rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--cl-border);
    background: var(--cl-surface-2);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--cl-text-muted);
    margin-bottom: 0.9rem;
}

:is(#tab-clinic-info, .cl-scope) .cl-status i { margin-top: 0.12rem; flex-shrink: 0; }
:is(#tab-clinic-info, .cl-scope) .cl-status .cl-status-label {
    display: block;
    font-weight: 600;
    color: var(--cl-text);
    margin-bottom: 0.1rem;
}
:is(#tab-clinic-info, .cl-scope) .cl-status strong { color: var(--cl-text); font-weight: 600; }

:is(#tab-clinic-info, .cl-scope) .cl-status.pending { background: var(--cl-warn-bg); border-color: transparent; color: var(--cl-warn); }
:is(#tab-clinic-info, .cl-scope) .cl-status.pending .cl-status-label,
:is(#tab-clinic-info, .cl-scope) .cl-status.pending strong { color: var(--cl-warn); }
:is(#tab-clinic-info, .cl-scope) .cl-status.rejected { background: var(--cl-danger-bg); border-color: transparent; color: var(--cl-danger); }
:is(#tab-clinic-info, .cl-scope) .cl-status.rejected .cl-status-label,
:is(#tab-clinic-info, .cl-scope) .cl-status.rejected strong { color: var(--cl-danger); }

:is(#tab-clinic-info, .cl-scope) .cl-status-body { flex: 1 1 240px; min-width: 0; }
/* A′: 좌측 멘트 / 우측 끝 버튼, 멀티라인 높이에 세로 중앙. 좁으면 아래로 wrap */
:is(#tab-clinic-info, .cl-scope) .cl-status-actions {
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
}

/* 상태배너 내 액션 (취소 등) — 배너색 위에서 읽히도록 currentColor 외곽선 */
:is(#tab-clinic-info, .cl-scope) .cl-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
:is(#tab-clinic-info, .cl-scope) .cl-status-btn:hover { opacity: 1; background: rgba(0, 0, 0, 0.04); }
body[data-theme="dark"] :is(#tab-clinic-info, .cl-scope) .cl-status-btn:hover { background: rgba(255, 255, 255, 0.07); }

/* 빈 상태 */
:is(#tab-clinic-info, .cl-scope) .cl-empty {
    text-align: center;
    color: var(--cl-text-soft);
    font-size: 0.9rem;
    padding: 1.75rem 0;
}

/* 소속 병원 대시보드 항목 */
:is(#tab-clinic-info, .cl-scope) .cl-dash-list { display: flex; flex-direction: column; gap: 0.6rem; }

:is(#tab-clinic-info, .cl-scope) .cl-dash-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--cl-surface);
    border: 1px solid var(--cl-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    transition: border-color 0.15s ease;
}
:is(#tab-clinic-info, .cl-scope) .cl-dash-item:hover { border-color: var(--cl-border-2); }

:is(#tab-clinic-info, .cl-scope) .cl-dash-info { flex: 1; min-width: 0; }
/* 줄바꿈이 없으면 병원명 <strong> 이 min-content 까지 눌려 한 글자씩 세로로 쪼개지고,
   배지가 자기 폭 아래로 줄어들어 서로 겹친다 (260804-2 사용자 보고, 모바일에서 재현). */
:is(#tab-clinic-info, .cl-scope) .cl-dash-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.2rem;
}
:is(#tab-clinic-info, .cl-scope) .cl-dash-title strong {
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--cl-text);
    word-break: keep-all;
}
:is(#tab-clinic-info, .cl-scope) .cl-dash-title .cl-type-badge,
:is(#tab-clinic-info, .cl-scope) .cl-dash-title .cl-role-badge { flex-shrink: 0; }
:is(#tab-clinic-info, .cl-scope) .cl-dash-info p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--cl-text-soft);
}

:is(#tab-clinic-info, .cl-scope) .cl-role-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 99px;
    background: var(--cl-surface-2);
    color: var(--cl-text-soft);
}
:is(#tab-clinic-info, .cl-scope) .cl-role-badge.role-director { background: var(--cl-accent-bg); color: var(--cl-accent); }
:is(#tab-clinic-info, .cl-scope) .cl-role-badge.role-vice-director { background: var(--cl-ok-bg); color: var(--cl-ok); }

/* 기관 종별 — 한의원/봉사소 둘 다 표기한다 (PLAN 260802). 직책 배지와 나란히 서므로
   테두리형으로 두어 채움 배지인 직책과 한눈에 구분되게 한다. */
:is(#tab-clinic-info, .cl-scope) .cl-type-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.13rem 0.5rem;
    border-radius: 99px;
    border: 1px solid var(--cl-border-2);
    color: var(--cl-text-soft);
    white-space: nowrap;
}
:is(#tab-clinic-info, .cl-scope) .cl-type-badge.type-volunteer { border-color: var(--cl-warn); color: var(--cl-warn); }

/* 대표병원 토글 — 소속이 둘 이상일 때만 렌더된다. */
:is(#tab-clinic-info, .cl-scope) .cl-primary-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--cl-text-soft);
    background: transparent;
    border: 1px solid var(--cl-border-2);
    border-radius: 9px;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
:is(#tab-clinic-info, .cl-scope) .cl-primary-toggle:hover { color: var(--cl-text); border-color: var(--cl-text-soft); }
:is(#tab-clinic-info, .cl-scope) .cl-primary-toggle.is-primary {
    background: var(--cl-warn-bg);
    border-color: var(--cl-warn);
    color: var(--cl-warn);
}

:is(#tab-clinic-info, .cl-scope) .cl-dash-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cl-text);
    text-decoration: none;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--cl-border-2);
    border-radius: 9px;
    background: var(--cl-surface-2);
    transition: all 0.15s ease;
}
:is(#tab-clinic-info, .cl-scope) .cl-dash-cta:hover { background: var(--cl-border); border-color: var(--cl-text-soft); }

/* 관리자 섹션 링크 */
:is(#tab-clinic-info, .cl-scope) .section-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--cl-text);
    background: var(--cl-surface-2);
    border: 1px solid var(--cl-border-2);
    border-radius: 9px;
    padding: 0.6rem 1rem;
    text-decoration: none;
    transition: all 0.15s ease;
}
:is(#tab-clinic-info, .cl-scope) .section-link-cta:hover { background: var(--cl-border); border-color: var(--cl-text-soft); }

/* 토스트 (alert 대체) */
#clClinicToast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    max-width: min(90vw, 420px);
    padding: 0.8rem 1.1rem;
    border-radius: 11px;
    background: var(--cl-surface, #fff);
    border: 1px solid var(--cl-border, #e6e7ea);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
    color: var(--cl-text, #1f2328);
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#clClinicToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#clClinicToast i { font-size: 1rem; }
#clClinicToast.ok i { color: var(--cl-ok, #0f6e56); }
#clClinicToast.error i { color: var(--cl-danger, #a12b2b); }
#clClinicToast.info i { color: var(--cl-accent, #185fa5); }

/* 최외곽 카드 제거는 mypage.module.css 의 ≤768px 규칙이 하지만, 여기 47행의
   `:is(#tab-clinic-info, .cl-scope) .mypage-section` 이 특이도(1,1,0)로 그것을 이긴다 — 같은 스코프에서 한 번 더 걷는다. */
@media (max-width: 768px) {
    :is(#tab-clinic-info, .cl-scope) .mypage-section {
        border: 0;
        border-radius: 0;
        background: transparent;
    }
}

@media (max-width: 640px) {
    /* 병원 정보는 한 줄을 다 쓰고, 버튼 둘은 아래 줄 오른쪽에 모아 세운다.
       flex-wrap 만으로는 정보 옆에 버튼이 끼어 병원명이 다시 눌린다 (260804-2). */
    :is(#tab-clinic-info, .cl-scope) .cl-dash-item { flex-wrap: wrap; gap: 0.6rem 0.5rem; }
    :is(#tab-clinic-info, .cl-scope) .cl-dash-info { flex: 1 1 100%; }
    :is(#tab-clinic-info, .cl-scope) .cl-primary-toggle { margin-left: auto; }
}

/* ── 소속 추가 (초대 코드, 261002) ──────────────────────────────
   단계 흐름·하단 버튼은 docs/30_Architecture 「모달 단계 흐름과 하단 버튼」과 같은 값이다.
   버튼 클래스를 두 번 적는 것은 theme.dark.css 의 전역 button 색 규칙을 특이도로 이기기 위해서다. */
:is(#tab-clinic-info, .cl-scope) .cl-section-head { position: relative; }
/* 제목 줄(h2 밑줄 포함)은 그대로 두고 단추만 그 줄 오른쪽에 얹는다 */
:is(#tab-clinic-info, .cl-scope) .cl-join-btn.cl-join-btn {
    position: absolute;
    top: -0.35rem;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--cl-border-2);
    border-radius: 9px;
    background: transparent;
    color: var(--cl-text);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}
:is(#tab-clinic-info, .cl-scope) .cl-join-btn.cl-join-btn:hover { background: var(--cl-surface-2); }

:is(#tab-clinic-info, .cl-scope) .cl-howto {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--cl-text-muted);
    font-size: 0.88rem;
    line-height: 1.8;
}
:is(#tab-clinic-info, .cl-scope) .cl-howto strong { color: var(--cl-text); font-weight: 600; }
:is(#tab-clinic-info, .cl-scope) #staffApplicationStatus:not(:empty) { margin-bottom: 0.9rem; }

:is(#tab-clinic-info, .cl-scope) .cl-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.55);
    transition: opacity 0.22s ease;
}
:is(#tab-clinic-info, .cl-scope) .cl-modal[hidden] { display: none; }
:is(#tab-clinic-info, .cl-scope) .cl-modal-box {
    width: 100%;
    max-width: 460px;
    max-height: 86vh;
    box-sizing: border-box;
    padding: 18px 20px 16px;
    border: 1px solid var(--cl-border);
    border-radius: 14px;
    background: var(--cl-surface);
    color: var(--cl-text);
    transition: transform 0.22s ease, opacity 0.22s ease;
}
/* 닫힐 때 흐려지며 살짝 내려간다(0.22초) */
:is(#tab-clinic-info, .cl-scope) .cl-modal.is-closing { opacity: 0; }
:is(#tab-clinic-info, .cl-scope) .cl-modal.is-closing .cl-modal-box { transform: translateY(8px); opacity: 0; }
:is(#tab-clinic-info, .cl-scope) .cl-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
:is(#tab-clinic-info, .cl-scope) .cl-modal-head h3 { margin: 0; font-size: 1.05rem; color: var(--cl-text); }
:is(#tab-clinic-info, .cl-scope) .cl-modal-x.cl-modal-x {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--cl-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
}
:is(#tab-clinic-info, .cl-scope) .cl-modal-x.cl-modal-x:hover { background: var(--cl-surface-2); }

/* 단계 표시 — 차트 StepIndicator.module.css 와 같은 값 */
:is(#tab-clinic-info, .cl-scope) .cl-steps { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; font-size: 12px; }
:is(#tab-clinic-info, .cl-scope) .cl-step { display: inline-flex; align-items: center; gap: 5px; color: var(--cl-text); }
/* 지금 단계는 탭 강조색. 다크의 --primary-color(#3a6fae)는 모달 바탕 대비 3.5 남짓이라 어둡다(원장 261002) */
:is(#tab-clinic-info, .cl-scope) .cl-step.is-current { color: var(--cl-accent); font-weight: 700; }
:is(#tab-clinic-info, .cl-scope) .cl-step.is-upcoming { opacity: 0.45; }
:is(#tab-clinic-info, .cl-scope) .cl-step-sep { opacity: 0.35; }
:is(#tab-clinic-info, .cl-scope) .cl-step-num {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
:is(#tab-clinic-info, .cl-scope) .cl-step-check { width: 18px; height: 18px; flex: 0 0 18px; }
:is(#tab-clinic-info, .cl-scope) .cl-step-check circle { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 51; transform: rotate(-90deg); transform-origin: 50% 50%; }
:is(#tab-clinic-info, .cl-scope) .cl-step-check path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; }
:is(#tab-clinic-info, .cl-scope) .cl-step-check.is-play circle { animation: clStepCircle 0.25s ease-out both; }
:is(#tab-clinic-info, .cl-scope) .cl-step-check.is-play path { animation: clStepTick 0.15s ease-out 0.25s both; }
@keyframes clStepCircle { from { stroke-dashoffset: 51; } to { stroke-dashoffset: 0; } }
@keyframes clStepTick { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }

:is(#tab-clinic-info, .cl-scope) .cl-steps-viewport { overflow: hidden; transition: height 0.28s ease; }
:is(#tab-clinic-info, .cl-scope) .cl-steps-track { display: flex; align-items: flex-start; transition: transform 0.28s ease; }
:is(#tab-clinic-info, .cl-scope) .cl-steps-pane { flex: 0 0 100%; min-width: 0; box-sizing: border-box; padding: 2px; }
:is(#tab-clinic-info, .cl-scope) .cl-modal-lead { margin: 0 0 12px; font-size: 0.88rem; line-height: 1.6; color: var(--cl-text-muted); }
:is(#tab-clinic-info, .cl-scope) .cl-code-input {
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    padding-left: 0.5em;
    border: 1px solid var(--cl-border-2);
    border-radius: 10px;
    background: var(--cl-surface-2);
    color: var(--cl-text);
    font: 600 1.6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.5em;
    text-align: center;
    text-transform: uppercase;
}
:is(#tab-clinic-info, .cl-scope) .cl-code-input:focus { outline: 2px solid var(--cl-accent); outline-offset: -1px; }
:is(#tab-clinic-info, .cl-scope) .cl-invite-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--cl-border);
    border-radius: 10px;
    background: var(--cl-surface-2);
}
:is(#tab-clinic-info, .cl-scope) .cl-invite-summary strong { color: var(--cl-text); }
:is(#tab-clinic-info, .cl-scope) .cl-invite-summary span { font-size: 0.8rem; color: var(--cl-text-muted); }
:is(#tab-clinic-info, .cl-scope) .cl-modal-label { display: block; margin: 12px 0 6px; font-size: 0.82rem; color: var(--cl-text-muted); }
/* 직책 세그먼트. 운영 설정의 직책 선택과 같은 모양, 선택 바탕(thumb)은 0.28초 미끄러진다(모달 단계 이동과 같은 시간) */
:is(#tab-clinic-info, .cl-scope) .cl-seg { position: relative; display: flex; padding: 3px; border-radius: 10px; background: var(--cl-surface-2); }
:is(#tab-clinic-info, .cl-scope) .cl-seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 8px; background: var(--cl-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.13); transform: translateX(calc(var(--i) * 100%)); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
:is(#tab-clinic-info, .cl-scope) .cl-seg .cl-seg-btn.cl-seg-btn { position: relative; z-index: 1; flex: 1; padding: 9px 0; border: none; border-radius: 8px; background: transparent; color: var(--cl-text-muted); font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: color 0.28s; }
:is(#tab-clinic-info, .cl-scope) .cl-seg .cl-seg-btn.cl-seg-btn.is-active { color: var(--cl-text); }
/* 다크: 모달 바탕과 같은 surface 로는 선택 칸이 보이지 않아, 홈은 더 어둡게·선택 칸은 더 밝게 */
body[data-theme="dark"] :is(#tab-clinic-info, .cl-scope) .cl-seg,
html[data-theme="dark"] :is(#tab-clinic-info, .cl-scope) .cl-seg { background: var(--cl-bg); }
body[data-theme="dark"] :is(#tab-clinic-info, .cl-scope) .cl-seg-thumb,
html[data-theme="dark"] :is(#tab-clinic-info, .cl-scope) .cl-seg-thumb { background: var(--cl-border-2); box-shadow: none; }
:is(#tab-clinic-info, .cl-scope) .cl-modal-error { margin: 12px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--cl-danger); }

/* 하단 버튼 — 차트 ModalActions.module.css 와 같은 값. 메인은 채움, 함께 나오는 것은 글자만 */
:is(#tab-clinic-info, .cl-scope) .cl-modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; }
:is(#tab-clinic-info, .cl-scope) .cl-modal-primary.cl-modal-primary,
:is(#tab-clinic-info, .cl-scope) .cl-modal-secondary.cl-modal-secondary {
    flex: 0 0 auto;
    padding: 7px 18px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.13s ease, color 0.13s ease;
}
:is(#tab-clinic-info, .cl-scope) .cl-modal-primary.cl-modal-primary { background: var(--color-primary); color: #fff; }
:is(#tab-clinic-info, .cl-scope) .cl-modal-primary.cl-modal-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
:is(#tab-clinic-info, .cl-scope) .cl-modal-secondary.cl-modal-secondary { background: transparent; color: color-mix(in srgb, var(--cl-text) 70%, transparent); }
:is(#tab-clinic-info, .cl-scope) .cl-modal-secondary.cl-modal-secondary:hover:not(:disabled) { color: var(--cl-text); }
:is(#tab-clinic-info, .cl-scope) .cl-modal-primary.cl-modal-primary:disabled,
:is(#tab-clinic-info, .cl-scope) .cl-modal-secondary.cl-modal-secondary:disabled { cursor: default; opacity: 0.6; }

/* 원장 권한 신청 모달 (261002). 단계 설명은 그 단계의 제목: 본문색 14px 굵게, 칸 이름(12px 흐린 색)과 층을 가른다 */
:is(#tab-clinic-info, .cl-scope) .cl-director-modal .cl-modal-box { max-width: 520px; }
:is(#tab-clinic-info, .cl-scope) .cl-director-modal .cl-steps { margin-bottom: 22px; }
:is(#tab-clinic-info, .cl-scope) .cl-step-lead { margin: 0 0 16px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--cl-text); }
/* 고르는 카드 — 모달 단계 규칙 §7: 이름 14px 굵게 + 설명 12px 65%, 고르면 테두리 + 옅은 면 */
:is(#tab-clinic-info, .cl-scope) .cl-dtypes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:is(#tab-clinic-info, .cl-scope) .cl-dtype.cl-dtype {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 14px; border: 1px solid var(--cl-border); border-radius: 12px;
    background: transparent; color: var(--cl-text); text-align: left; font: inherit; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
:is(#tab-clinic-info, .cl-scope) .cl-dtype.cl-dtype:hover { background: var(--cl-surface-2); }
:is(#tab-clinic-info, .cl-scope) .cl-dtype.cl-dtype.is-active { border-color: var(--cl-accent); background: color-mix(in srgb, var(--cl-accent) 12%, var(--cl-surface)); }
:is(#tab-clinic-info, .cl-scope) .cl-dtype i { font-size: 18px; color: var(--cl-accent); }
:is(#tab-clinic-info, .cl-scope) .cl-dtype b { font-size: 14px; }
:is(#tab-clinic-info, .cl-scope) .cl-dtype span { font-size: 12px; line-height: 1.5; word-break: keep-all; color: color-mix(in srgb, var(--cl-text) 65%, transparent); }
:is(#tab-clinic-info, .cl-scope) .cl-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
:is(#tab-clinic-info, .cl-scope) .cl-dgrid-gap { margin-top: 10px; }
:is(#tab-clinic-info, .cl-scope) .cl-df-wide { grid-column: 1 / -1; }
:is(#tab-clinic-info, .cl-scope) .cl-df label { display: block; margin: 0 0 5px; font-size: 12px; color: var(--cl-text-muted); }
:is(#tab-clinic-info, .cl-scope) .cl-df label em { font-style: normal; opacity: 0.75; }
:is(#tab-clinic-info, .cl-scope) .cl-req { margin-left: 2px; color: var(--cl-danger); }
:is(#tab-clinic-info, .cl-scope) .cl-df input {
    width: 100%; box-sizing: border-box; padding: 8px 10px;
    border: 1px solid var(--cl-border); border-radius: 8px;
    background: var(--cl-bg); color: var(--cl-text); font: inherit; font-size: 0.9rem;
}
:is(#tab-clinic-info, .cl-scope) .cl-df input:focus { outline: 2px solid var(--cl-accent); outline-offset: -1px; }
:is(#tab-clinic-info, .cl-scope) .cl-df input[readonly] { opacity: 0.75; }
:is(#tab-clinic-info, .cl-scope) .cl-daddr { display: flex; gap: 8px; margin-bottom: 8px; }
:is(#tab-clinic-info, .cl-scope) .cl-daddr input { flex: 0 0 110px; }
:is(#tab-clinic-info, .cl-scope) .cl-daddr-btn.cl-daddr-btn {
    padding: 0 12px; border: 1px solid var(--cl-border); border-radius: 8px;
    background: transparent; color: var(--cl-text); font: inherit; font-size: 0.85rem; cursor: pointer;
}
:is(#tab-clinic-info, .cl-scope) .cl-daddr-btn.cl-daddr-btn:hover { background: var(--cl-surface-2); }
:is(#tab-clinic-info, .cl-scope) .cl-dhint { margin: 6px 0 0; font-size: 12px; color: var(--cl-text-muted); }
:is(#tab-clinic-info, .cl-scope) .cl-dhint strong { color: var(--cl-text); font-weight: 600; }
:is(#tab-clinic-info, .cl-scope) .cl-dsum { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 7px 12px; font-size: 0.88rem; }
:is(#tab-clinic-info, .cl-scope) .cl-dsum dt { color: var(--cl-text-muted); }
:is(#tab-clinic-info, .cl-scope) .cl-dsum dd { margin: 0; color: var(--cl-text); word-break: break-all; }
:is(#tab-clinic-info, .cl-scope) .cl-dsum dd.is-empty { color: var(--cl-text-muted); }
@media (max-width: 480px) {
    :is(#tab-clinic-info, .cl-scope) .cl-dtypes,
    :is(#tab-clinic-info, .cl-scope) .cl-dgrid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    :is(#tab-clinic-info, .cl-scope) .cl-steps-track,
    :is(#tab-clinic-info, .cl-scope) .cl-steps-viewport,
    :is(#tab-clinic-info, .cl-scope) .cl-modal,
    :is(#tab-clinic-info, .cl-scope) .cl-modal-box { transition: none; }
    :is(#tab-clinic-info, .cl-scope) .cl-step-check.is-play circle,
    :is(#tab-clinic-info, .cl-scope) .cl-step-check.is-play path { animation: none; }
}