/* 마이페이지 개편 — 왼쪽 세로 메뉴 + 줄 목록 (원장 261009 미리보기 승인, PLAN 261008 §3.9).
 * 참조: Claude 설정 화면(왼쪽 메뉴, 카드 없이 구분선 줄). 색은 공용 --ui-* 토큰(ui-kit.css).
 * 일곱 메뉴 모두 줄 모양이다(어셋 화면 스크립트는 mypage-assets.js, 커뮤니티·위키·설정은 mypage-activity.js).
 * 이 파일은 마이페이지 시트 중 마지막에 읽는다 — 같은 무게의 선택자는 여기가 이긴다. */

/* ── 틀 ───────────────────────────────────────────────────────────────── */
.mypage-container {
    width: min(1260px, calc(100% - 56px));
    max-width: none;
    margin: 0 auto;
    padding: 2.5rem 0 4rem;
}
.mypage-container .mypage-hero { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 1.6rem; }
.mypage-container .mypage-hero h1 { font-size: 1.9rem; font-weight: 600; color: var(--ui-text); margin: 0; }
.mypage-layout { display: grid; grid-template-columns: 200px minmax(0, 760px); gap: 48px; align-items: start; }
.mypage-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 88px; }
.mypage-nav-link {
    display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--ui-muted);
    font: inherit; font-size: .9rem; padding: .5rem .75rem; border-radius: 8px; cursor: pointer; text-align: left;
}
.mypage-nav-link i { width: 16px; text-align: center; font-size: .85rem; }
.mypage-nav-link:hover { color: var(--ui-text); }
.mypage-nav-link[aria-current="page"] { background: var(--ui-surface-2); color: var(--ui-text); font-weight: 600; }
.mypage-nav-chev, .mypage-back { display: none; }
.mypage-container .tabs-content { padding: 0; margin: 0; background: none; border: 0; box-shadow: none; }

/* ── 카드 대신 줄 ──────────────────────────────────────────────────────── */
:is(#tab-personal-info, #tab-clinic-info, #tab-assets, #tab-classic-db, #tab-wiki, #tab-developer, #tab-settings) .mypage-section {
    background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 2.4rem; border-radius: 0;
}
:is(#tab-personal-info, #tab-clinic-info, #tab-assets, #tab-classic-db, #tab-wiki, #tab-developer, #tab-settings) .mypage-section > h2 {
    font-size: 1rem; font-weight: 600; color: var(--ui-text); margin: 0; padding: 0 0 .7rem;
    border-bottom: 1px solid var(--ui-border); display: block;
}
:is(#tab-personal-info, #tab-clinic-info, #tab-assets, #tab-classic-db, #tab-wiki, #tab-developer, #tab-settings) .mypage-section > h2 i { display: none; }

/* ── 프로필 ─────────────────────────────────────────────────────────────── */
#tab-personal-info .pi-section { display: block; }
#tab-personal-info .pi-fields { margin: 0; width: 100%; }
/* 줄: 첫 줄도 위아래 여백 같게(personal-info.css .pi-fields .pi-field:first-child 의 padding-top:0 을 이긴다) */
#tab-personal-info .pi-fields .pi-field,
#tab-personal-info .as-row {
    display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 0 12px;
    min-height: 56px; padding: 10px 0; margin: 0; border: 0; border-bottom: 1px solid var(--ui-border);
}
#tab-personal-info .pi-fields .pi-field { grid-template-columns: 140px minmax(0, 1fr) auto; }
#tab-personal-info .pi-fields .pi-photo-row { grid-template-columns: 140px minmax(0, 1fr); }
#tab-personal-info .pi-field-label,
#tab-personal-info .as-row-label { font-size: .85rem; color: var(--ui-muted); font-weight: 400; margin: 0; padding: 0; }
#tab-personal-info .pi-field-value,
#tab-personal-info .as-row-body,
#tab-personal-info .pi-editable { font-size: .9rem; color: var(--ui-text); margin-top: 0; margin-bottom: 0; }
#tab-personal-info .as-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#tab-personal-info .pi-photo { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--ui-surface-2); }

/* 배지: 고정 색 대신 공용 토큰(ui-kit .ui-tag 색 쌍) */
.mypage-container .status-badge.status-badge { border-color: transparent; font-weight: 600; }
.mypage-container .status-badge.status-badge.pending,
.mypage-container .status-badge.status-badge.role-director { background: var(--ui-warn-bg); color: var(--ui-warn); }
.mypage-container .status-badge.status-badge.approved { background: var(--ui-add-bg); color: var(--ui-add); }
.mypage-container .status-badge.status-badge.rejected { background: var(--ui-danger-bg); color: var(--ui-danger); }
.mypage-container .status-badge.status-badge.role-vice-director { background: var(--ui-info-bg); color: var(--ui-info); }
.mypage-container .status-badge.status-badge.role-staff { background: var(--ui-surface-2); color: var(--ui-muted); }

/* 수정: 줄 오른쪽 「수정」 글자 버튼. 줄 동작(인증 코드 발송·비밀번호 설정)도 같은 모양·같은 자리 */
#tab-personal-info .pi-editable.pi-editable { cursor: default; background: none; padding-left: 0; padding-right: 0; margin-left: 0; }
#tab-personal-info .pi-field:has(.pi-edit-row[style*="flex"]) .pi-edit-btn { display: none; }
#tab-personal-info .pi-field:has(.pi-edit-row[style*="flex"]) .pi-field-value { grid-column: 2 / 4; }
/* 단추는 공용 도구 줄 단추(.ui-tool-button) 규격 — 입력란과 같은 36px·9px 사각 */
#tab-personal-info .pi-edit-btn,
#tab-personal-info .as-btn.as-btn {
    box-sizing: border-box; font: inherit; font-size: .85rem; height: 36px; padding: 0 12px; border-radius: 9px;
    border: 1px solid var(--ui-border-2); background: var(--ui-surface); color: var(--ui-text); cursor: pointer; display: inline-flex; align-items: center;
    justify-content: center; box-shadow: none; font-weight: 600;
}
#tab-personal-info .pi-edit-btn:hover,
#tab-personal-info .as-btn.as-btn:hover { background: var(--ui-hover); }
#tab-personal-info .as-row-body:has(#as-pw-toggle-btn) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
#tab-personal-info #as-pw-toggle-btn { margin-left: auto; }
#tab-personal-info #as-pw-form {
    flex-basis: 100%; width: min(360px, 100%); max-width: none; margin: 0 auto 0 0;
    background: none; border: 0; padding: 4px 0; box-shadow: none;
}
#tab-personal-info .as-row:has(#as-pw-form[style*="flex"]) { align-items: start; }
#tab-personal-info .as-row:has(#as-pw-form[style*="flex"]) .as-row-label { padding-top: 6px; }
/* 첫 비밀번호 설정의 이메일 인증 코드(PLAN 260930-Y §5-2). 이메일 인증 행과 같은 6자리 입력 */
#tab-personal-info #as-setpw-code { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#tab-personal-info #as-setpw-code[style*="none"] { display: none; }
#tab-personal-info .as-setpw-note { font-size: .78rem; }
/* 패스키: GitHub 패스키 목록을 참조한 카드(원장 261016). 머리 행에 설명과 등록, 행마다 이름·동기화·등록일·이름 수정·삭제 */
#tab-personal-info .as-row:has(#as-pk-card) { align-items: start; }
#tab-personal-info .as-row:has(#as-pk-card) .as-row-label { padding-top: 14px; }
#tab-personal-info .as-pk-card { border: 1px solid var(--ui-border); border-radius: 12px; overflow: hidden; }
#tab-personal-info .as-pk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--ui-surface-2); border-bottom: 1px solid var(--ui-border); }
#tab-personal-info .as-pk-desc { font-size: .8rem; color: var(--ui-muted); }
#tab-personal-info .as-pk-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
#tab-personal-info .as-pk-item + .as-pk-item { border-top: 1px solid var(--ui-border); }
#tab-personal-info .as-pk-icon { width: 16px; color: var(--ui-muted); }
#tab-personal-info .as-pk-main { flex: 1; min-width: 0; }
#tab-personal-info .as-pk-name { display: flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
#tab-personal-info .as-pk-meta { margin-top: 2px; font-size: .76rem; color: var(--ui-muted); }
#tab-personal-info .as-pk-icon-btn.as-pk-icon-btn { width: 36px; padding: 0; justify-content: center; }
#tab-personal-info .as-pk-empty { padding: 16px 14px; font-size: .84rem; color: var(--ui-muted); }
/* 패스키 창: body 에 붙는다(#tab-personal-info 밖) */
.ui-modal .as-pk-modal { width: 460px; }
.ui-modal .as-pk-lead-note { margin: 0 0 12px; }
.ui-modal .as-pk-intro { display: flex; gap: 14px; align-items: flex-start; }
.ui-modal .as-pk-intro-icon { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px; }
.ui-modal .as-pk-done-lead { margin-bottom: 12px; }
/* 640px 이하는 하단 시트(원장 261016, 봉사일 서명 화면 확인 창과 같은 규칙). 위쪽 모서리 28px 는 Material 3 바텀 시트(Corner.ExtraLarge).
 * 닫기·취소 단추 없이 바깥을 눌러 닫고 주 단추는 너비를 채운다. 입력란 16px 는 아이폰 사파리가 16px 미만 입력란을 누르면 화면을 확대해서다 */
@keyframes asPkSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 640px) {
    #asPasskeyModal.ui-modal { padding: 0; align-items: flex-end; }
    #asPasskeyModal .as-pk-modal { width: 100%; max-width: 100vw; border-radius: 28px 28px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: asPkSheetUp .22s cubic-bezier(.2, .8, .2, 1); }
    #asPasskeyModal .as-pk-modal::before { content: ''; display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--ui-border-2); }
    #asPasskeyModal .ui-modal-close { display: none; }
    #asPasskeyModal .ui-modal-foot.ui-modal-foot { display: flex; width: auto; margin-left: 0; flex-direction: column; align-items: stretch; gap: 0; }
    #asPasskeyModal .ui-modal-foot .ui-modal-back { display: none; }
    #asPasskeyModal .ui-modal-foot .ui-modal-main { width: 100%; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
}
/* 빈 값: 청구에 걸리는 면허번호만 경고색, 생년월일은 흐린 글자 */
#tab-personal-info #userBirthDateText .status-badge.status-badge { background: none; color: var(--ui-soft); padding: 0; font-weight: 400; font-size: .9rem; }
/* 수정 중: 입력란은 검색 입력란 규격(36px·9px·토큰), 저장은 글자색 채움, 취소는 글자만 — 같은 높이·같은 최소 폭 */
#tab-personal-info .pi-input.pi-input,
#tab-personal-info .as-input.as-input,
#tab-personal-info .as-otp-box.as-otp-box {
    box-sizing: border-box; height: 36px; border: 1px solid var(--ui-border); padding: 0 .8rem;
    border-radius: 9px; background: var(--ui-surface); color: var(--ui-text); font-size: .9rem; box-shadow: none; outline: none;
}
#tab-personal-info .pi-input.pi-input:focus,
#tab-personal-info .as-input.as-input:focus,
#tab-personal-info .as-otp-box.as-otp-box:focus { border-color: var(--ui-border-2); box-shadow: 0 0 0 3px var(--ui-hover); }
#tab-personal-info .pi-input.pi-input::placeholder,
#tab-personal-info .as-input.as-input::placeholder { color: var(--ui-soft); }
#tab-personal-info .pi-edit-row { gap: 8px; align-items: center; }
#tab-personal-info .pi-save-btn,
#tab-personal-info .pi-cancel-btn,
#tab-personal-info #as-pw-submit-btn.as-btn,
#tab-personal-info #as-pw-cancel-btn.as-link-btn {
    box-sizing: border-box; font: inherit; font-size: .85rem; font-weight: 600; height: 36px; min-width: 64px; padding: 0 12px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none;
}
#tab-personal-info .pi-save-btn,
#tab-personal-info #as-pw-submit-btn.as-btn { background: var(--ui-text); border: 1px solid var(--ui-text); color: var(--ui-surface); }
#tab-personal-info .pi-save-btn:hover,
#tab-personal-info #as-pw-submit-btn.as-btn:hover { background: var(--ui-text); opacity: .88; }
#tab-personal-info .pi-cancel-btn,
#tab-personal-info #as-pw-cancel-btn.as-link-btn { background: transparent; border: 1px solid transparent; color: var(--ui-muted); text-decoration: none; font-weight: 500; }
#tab-personal-info .pi-cancel-btn:hover,
#tab-personal-info #as-pw-cancel-btn.as-link-btn:hover { background: var(--ui-hover); color: var(--ui-text); }
#tab-personal-info .pi-save-btn i,
#tab-personal-info .pi-cancel-btn i { display: none; }

/* ── 한의원: 카드 대신 줄. mypage.clinic.css 가 :is(#tab-clinic-info, .cl-scope) 로 묶여 있어 같은 ID 로 덮는다 ── */
#tab-clinic-info .cl-section-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-bottom: 1px solid var(--ui-border); padding-bottom: .5rem;
}
#tab-clinic-info .cl-section-head h2 { font-size: 1rem; font-weight: 600; color: var(--ui-text); margin: 0; padding: 0; border: 0; }
#tab-clinic-info .cl-section-head h2 i { display: none; }
#tab-clinic-info .cl-join-btn.cl-join-btn,
#tab-clinic-info .cl-dash-cta,
#tab-clinic-info .cl-action,
#tab-clinic-info .cl-status-btn {
    position: static; box-sizing: border-box; height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--ui-border-2);
    background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center;
    gap: 6px; cursor: pointer; text-decoration: none; opacity: 1; white-space: nowrap;
}
#tab-clinic-info .cl-join-btn.cl-join-btn:hover,
#tab-clinic-info .cl-dash-cta:hover,
#tab-clinic-info .cl-action:hover,
#tab-clinic-info .cl-status-btn:hover { background: var(--ui-hover); border-color: var(--ui-border-2); }
#tab-clinic-info .cl-dash-cta i,
#tab-clinic-info .cl-status-btn i { font-size: .75rem; }
/* 소속 추가 = 제목 줄의 주 동작 → 글자색 채움(.ui-tool-button.is-filled). 신청 취소 = 되돌리는 동작 → 호버만 빨간 계열(.is-danger) */
#tab-clinic-info .cl-join-btn.cl-join-btn { background: var(--ui-text); border-color: var(--ui-text); color: var(--ui-surface); }
#tab-clinic-info .cl-join-btn.cl-join-btn:hover { background: var(--ui-text); border-color: var(--ui-text); color: var(--ui-surface); opacity: .88; }
#tab-clinic-info .cl-status-btn.cl-status-btn:hover { background: var(--ui-danger-bg); border-color: color-mix(in srgb, var(--ui-danger) 40%, transparent); color: var(--ui-danger); }
/* 예전 검색 신청 대기 건이 없으면 절째 숨는다 */
#tab-clinic-info #staffApplicationSection:not(:has(#staffApplicationStatus > *)) { display: none; }
#tab-clinic-info .cl-dash-list { gap: 0; }
#tab-clinic-info .cl-dash-item { background: none; border: 0; border-bottom: 1px solid var(--ui-border); border-radius: 0; padding: 12px 0; min-height: 64px; box-sizing: border-box; }
#tab-clinic-info .cl-dash-title strong { font-size: .9rem; color: var(--ui-text); }
#tab-clinic-info .cl-dash-info p { font-size: .8rem; color: var(--ui-soft); }
#tab-clinic-info .cl-note { margin: 10px 0 0; font-size: .8rem; line-height: 1.6; color: var(--ui-soft); }

/* 원장 권한 신청: 설명 왼쪽 · 테두리 버튼 오른쪽, 신청 상태는 아래 줄 */
#tab-clinic-info #directorApplicationSection { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
#tab-clinic-info #directorApplicationSection > h2 { grid-column: 1 / -1; grid-row: 1; }
#tab-clinic-info #directorApplicationSection .cl-subtitle {
    grid-column: 1; grid-row: 2; margin: 0; padding: 12px 0; font-size: .85rem; line-height: 1.6; color: var(--ui-muted); max-width: none;
}
#tab-clinic-info #clDirectorOpenBtn { grid-column: 2; grid-row: 2; justify-self: end; }
#tab-clinic-info #applicationStatus { grid-column: 1 / -1; grid-row: 3; }
#tab-clinic-info #directorApplicationSection:has(#applicationStatus > *) .cl-subtitle { grid-column: 1 / -1; }
#tab-clinic-info #applicationStatus:not(:empty) { padding-bottom: 12px; }
#tab-clinic-info .cl-status { border-radius: 9px; align-items: center; }
#tab-clinic-info #directorApplicationSection::after { content: ""; grid-column: 1 / -1; grid-row: 4; border-bottom: 1px solid var(--ui-border); }

/* 대표병원: 테두리 「대표로」 단추 대신 줄 맨 앞 별표 하나(채운 별 = 대표). 안내 상자는 목록 아래 흐린 한 줄 */
#tab-clinic-info #hospitalDashboardLinks { display: flex; flex-direction: column; }
#tab-clinic-info .cl-dash-list { order: 1; }
#tab-clinic-info .cl-hint { order: 2; display: block; background: none; border: 0; padding: 0; margin: 10px 0 0; font-size: .8rem; line-height: 1.6; color: var(--ui-soft); }
#tab-clinic-info .cl-hint i { color: var(--ui-warn); font-size: .72rem; margin-right: 4px; }
#tab-clinic-info .cl-hint strong { color: var(--ui-muted); }
#tab-clinic-info .cl-primary-toggle.cl-primary-toggle {
    order: -1; width: 32px; height: 32px; padding: 0; margin: 0 -4px 0 -8px; justify-content: center;
    border: 0; border-radius: 8px; background: transparent; color: var(--ui-soft); font-size: .95rem;
}
#tab-clinic-info .cl-primary-toggle span { display: none; }
#tab-clinic-info .cl-primary-toggle.cl-primary-toggle:hover { background: var(--ui-hover); color: var(--ui-text); }
#tab-clinic-info .cl-primary-toggle.cl-primary-toggle.is-primary { color: var(--ui-warn); background: transparent; }
#tab-clinic-info .cl-primary-toggle.cl-primary-toggle.is-primary:hover { background: var(--ui-hover); }

/* ── 어셋: 한의원 어셋 화면(asset-hub.css 패널·칩) + 마이페이지 안 상세 ───────────── */
#tab-assets .ma-top { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
#tab-assets .ma-search { flex: 1; min-width: 0; margin: 0; }
#tab-assets .ma-top .ui-segment { flex-shrink: 0; }
/* 검색창과 같은 36px — 버튼 34 + 틀 안쪽 1px 위아래 */
#tab-assets .ma-top .ui-segment > button { padding: 7px 12px; }
#tab-assets .ah-bar { margin-bottom: 16px; }
#tab-assets .ah-grid.is-single { grid-template-columns: minmax(0, 1fr); }
#tab-assets .ma-load-error { margin: 0 0 12px; font-size: .85rem; color: var(--ui-danger); }
/* 줄은 단추(상세를 연다). 둘째 줄은 이름 아래 — 한의원 이름이 길면 한 줄에서 버전까지 잘린다 */
#tab-assets button.ui-row.ma-row { width: 100%; background: none; border-width: 1px 0 0; border-style: solid; border-color: var(--ui-border); font: inherit; color: inherit; text-align: left; cursor: pointer; }
#tab-assets .ma-row .ui-row-name { white-space: normal; }
#tab-assets .ma-row .ui-row-desc { display: flex; gap: 6px; margin: 2px 0 0; min-width: 0; }
/* 상세 */
#tab-assets .ma-back { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 0; margin: 0 0 16px; color: var(--ui-muted); font: inherit; font-size: .85rem; cursor: pointer; }
#tab-assets .ma-back:hover { color: var(--ui-text); }
#tab-assets .ma-head { display: flex; align-items: center; gap: 12px; margin: 0 0 2rem; }
#tab-assets .ma-head h2 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 600; color: var(--ui-text); }
#tab-assets .ma-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#tab-assets .ma-head-action { margin-left: auto; align-self: center; text-decoration: none; }
/* 코드셋 정보 수정 창(§3.10 E1) — 안내 문구가 남은 폭을 쓰고 버튼 글자는 한 줄 */
#ma-modal .ma-cs-card { width: min(520px, calc(100vw - 32px)); }
#ma-modal .ma-cs-card .ole-foot-note { flex: 1 1 auto; }
#ma-modal .ma-cs-card .ui-modal-foot button { white-space: nowrap; }
#ma-modal .ma-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* 내 번들 구성 편집(§3.10 E2) — 구성 머리에 휴지통·추가(한의원 번들 화면과 같은 .ui-tool-button), 줄 끝 수정·휴지통 아이콘 */
#tab-assets .ma-comp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#tab-assets .ma-comp-head h2 { margin: 0; margin-right: auto; }
#tab-assets .ma-comp-note { margin: 6px 0 0; font-size: 12.5px; color: var(--ui-muted); }
#tab-assets .ma-comp td.ma-comp-acts { white-space: nowrap; text-align: right; width: 1%; }
#tab-assets .ma-comp-act { width: 30px; height: 28px; padding: 0; border: 1px solid var(--ui-border); border-radius: 7px; background: none; color: var(--ui-muted); font-size: 12px; cursor: pointer; }
#tab-assets .ma-comp-act + .ma-comp-act { margin-left: 6px; }
#tab-assets .ma-comp-act:hover { background: var(--ui-hover); color: var(--ui-text); }
#tab-assets .ma-comp-act.is-danger:hover { background: var(--ui-danger-bg); color: var(--ui-danger); border-color: color-mix(in srgb, var(--ui-danger) 40%, transparent); }
#tab-assets .ma-trash-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 0; border: 0; background: none; color: var(--ui-muted); font: inherit; font-size: 13px; cursor: pointer; }
#tab-assets .ma-trash { margin-top: 12px; }
#tab-assets .ma-use-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 0; border-bottom: 1px solid var(--ui-border); box-sizing: border-box; }
#tab-assets .ma-use-title { font-size: .9rem; color: var(--ui-text); }
#tab-assets .ma-meta { font-size: .8rem; font-weight: 400; color: var(--ui-soft); margin-top: 2px; }
#tab-assets .ma-use-btns { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
#tab-assets .ma-empty { margin: 0; padding: 16px 0; font-size: .85rem; color: var(--ui-soft); border-bottom: 1px solid var(--ui-border); }
/* 구성 — 한의원 번들 화면(formula-management·acupuncture-management /bundle/:id)의 검색·표와 같은 모양. 구비 열은 한의원 단위라 뺀다 */
#tab-assets .ma-comp-search { position: relative; margin: 14px 0 12px; }
#tab-assets .ma-comp-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ui-soft); font-size: .85rem; }
#tab-assets .ma-comp-search input { box-sizing: border-box; width: 100%; height: 36px; padding: 0 12px 0 38px; border-radius: 9px; background: var(--ui-surface); border: 1px solid var(--ui-border); color: var(--ui-text); font: inherit; font-size: .88rem; outline: none; }
#tab-assets .ma-comp-search input::placeholder { color: var(--ui-soft); }
#tab-assets .ma-comp-wrap { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; overflow-x: auto; }
#tab-assets .ma-comp { width: 100%; min-width: 680px; border-collapse: collapse; }
#tab-assets .ma-comp th { background: var(--ui-surface-2); padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 500; color: var(--ui-soft); border-bottom: 1px solid var(--ui-border); white-space: nowrap; }
#tab-assets .ma-comp td { padding: 10px 14px; font-size: 13px; vertical-align: middle; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); }
#tab-assets .ma-comp tr:last-child td { border-bottom: 0; }
#tab-assets .ma-comp td:first-child, #tab-assets .ma-comp td:nth-child(2) .ma-comp-book { white-space: nowrap; }
#tab-assets .ma-comp .ma-comp-name { font-size: 14px; font-weight: 500; color: var(--ui-text); }
#tab-assets .ma-comp .ma-comp-book { font-size: 12.5px; color: var(--ui-muted); }
#tab-assets .ma-comp .ma-comp-empty { text-align: center; color: var(--ui-soft); padding: 18px; }
/* 제형·약재 수 이름표 — 한의원 번들 화면의 .td-form-type·.td-herb-count 색(formula-management.html, clinical-catalog.dark.css) */
#tab-assets .ma-comp .ma-comp-form { margin-left: 6px; font-size: 11.2px; font-weight: 600; border-radius: 4px; padding: 1px 6px; background: #ede9fe; color: #4c1d95; }
#tab-assets .ma-comp .ma-comp-count { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 600; background: #dcfce7; color: #166534; white-space: nowrap; }
body[data-theme="dark"] #tab-assets .ma-comp .ma-comp-form { background: rgb(42, 33, 64); color: rgb(201, 182, 245); }
body[data-theme="dark"] #tab-assets .ma-comp .ma-comp-count { background: rgb(22, 48, 31); color: rgb(143, 214, 168); }
/* 받은 플러그인 — 머리 단추 둘(미리보기·주 단추), 받는 중 막대, 웹 안내, 구성 줄 아이콘, 라이선스·설치 상태 글자(원장 261009 미리보기 승인, S6) */
#tab-assets .ma-head-btns { margin-left: auto; align-self: center; display: flex; align-items: center; gap: 8px; }
#tab-assets .ma-head-btns .ui-tool-button { gap: 6px; text-decoration: none; }
#tab-assets .ma-head-btns .ui-tool-button i { font-size: .75rem; }
#tab-assets .ma-progress { width: 200px; margin: 0; }
#tab-assets .ma-progress .ui-progress-label { display: flex; justify-content: space-between; text-align: left; }
#tab-assets .ma-note { display: flex; align-items: center; gap: 8px; margin: -1.2rem 0 2rem; padding: 10px 12px; border-radius: 9px; background: var(--ui-surface-2); color: var(--ui-muted); font-size: .85rem; }
#tab-assets .ma-note i { color: var(--ui-soft); }
#tab-assets .ma-has .ma-use-title { display: flex; align-items: center; gap: 10px; }
#tab-assets .ma-has .ma-use-title i { width: 16px; text-align: center; color: var(--ui-soft); font-size: .85rem; }
#tab-assets .ma-license .ma-use-title { font-size: .85rem; color: var(--ui-muted); }
#tab-assets .ma-state { font-size: .85rem; color: var(--ui-muted); }

/* ── 커뮤니티·위키: 분할 선택 + 줄 목록(어셋 줄과 같은 .ui-row) ─────────── */
:is(#tab-classic-db, #tab-wiki) .ac-top { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; }
:is(#tab-classic-db, #tab-wiki) .ac-top .ui-segment > button { padding: 7px 12px; }
:is(#tab-classic-db, #tab-wiki) .ac-top .ui-segment b { font-weight: 400; color: var(--ui-soft); margin-left: 4px; font-variant-numeric: tabular-nums; }
:is(#tab-classic-db, #tab-wiki) .ac-top-action { margin-left: auto; text-decoration: none; gap: 6px; }
:is(#tab-classic-db, #tab-wiki) .ui-rows { margin-top: 0; }
:is(#tab-classic-db, #tab-wiki) .ui-rows .ui-row,
:is(#tab-classic-db, #tab-wiki) .ui-rows .ui-row-more { border-top: 0; border-bottom: 1px solid var(--ui-border); min-height: 60px; box-sizing: border-box; }
:is(#tab-classic-db, #tab-wiki) .ui-row .ui-row-name { font-size: .9rem; white-space: normal; }
:is(#tab-classic-db, #tab-wiki) .ui-row .ac-cc { color: var(--ui-soft); font-weight: 400; margin-left: 4px; }
:is(#tab-classic-db, #tab-wiki) .ui-row .ui-row-desc { display: block; margin: 2px 0 0; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#tab-classic-db, #tab-wiki) .ui-row .ui-tag { flex-shrink: 0; }
:is(#tab-classic-db, #tab-wiki) .ac-empty { margin: 0; padding: 16px 0; font-size: .85rem; color: var(--ui-soft); border-bottom: 1px solid var(--ui-border); }

/* ── 개발자: 프로필 계정 줄과 같은 140px 이름 칸 + 오른쪽 단추 ─────────── */
#tab-developer .as-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 0 12px;
    min-height: 56px; padding: 10px 0; margin: 0; border: 0; border-bottom: 1px solid var(--ui-border); }
#tab-developer .as-row-label { font-size: .85rem; color: var(--ui-muted); font-weight: 400; margin: 0; padding: 0; }
#tab-developer .as-row-body { font-size: .9rem; color: var(--ui-text); margin: 0; }
#tab-developer .as-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#tab-developer .as-muted { color: var(--ui-text); font-size: .9rem; }
#tab-developer .as-btn.as-btn {
    box-sizing: border-box; font: inherit; font-size: .85rem; height: 36px; padding: 0 12px; border-radius: 9px;
    border: 1px solid var(--ui-border-2); background: var(--ui-surface); color: var(--ui-text); display: inline-flex; align-items: center;
    justify-content: center; box-shadow: none; font-weight: 600; text-decoration: none; flex-shrink: 0;
}
#tab-developer .as-btn.as-btn:hover { background: var(--ui-hover); }

/* ── 설정: 줄마다 이름 · 설명 · 조작 ───────────────────────────────────── */
#tab-settings .st-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: 0 12px;
    min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--ui-border); }
#tab-settings .st-row[hidden] { display: none; }
#tab-settings .st-label { font-size: .85rem; color: var(--ui-muted); }
#tab-settings .st-desc { font-size: .85rem; color: var(--ui-soft); }
#tab-settings .st-row .ui-segment > button { padding: 7px 12px; }
#tab-settings .st-row .ui-tool-button { text-decoration: none; }

/* ── 768px 이하: 메뉴 목록 → 들어가기 ──────────────────────────────────── */
@media (max-width: 768px) {
    body.mypage-body { padding-left: 0; padding-right: 0; }
    .mypage-container { width: calc(100% - 32px); padding-top: 1.5rem; }
    .mypage-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .mypage-nav { position: static; gap: 0; border-top: 1px solid var(--ui-border); }
    .mypage-nav-link { border-radius: 0; padding: 16px 4px; font-size: .95rem; color: var(--ui-text); border-bottom: 1px solid var(--ui-border); }
    .mypage-nav-link[aria-current="page"] { background: transparent; font-weight: 400; }
    .mypage-nav-chev { display: inline-block; margin-left: auto; font-size: .75rem; color: var(--ui-soft); }
    .mypage-layout:not(.is-in) .tabs-content { display: none; }
    .mypage-layout.is-in .mypage-nav,
    .mypage-container:has(.mypage-layout.is-in) .mypage-hero { display: none; }
    .mypage-layout.is-in .mypage-back {
        display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--ui-text); font: inherit;
        font-size: 1.05rem; font-weight: 600; padding: 0 0 1.2rem; cursor: pointer;
    }
    #tab-personal-info .as-row,
    #tab-personal-info .pi-fields .pi-photo-row { grid-template-columns: 96px minmax(0, 1fr); }
    #tab-personal-info .pi-fields .pi-field { grid-template-columns: 96px minmax(0, 1fr) auto; }
    #tab-personal-info .pi-edit-row { flex-wrap: wrap; }
    #tab-personal-info .as-status-row { flex-wrap: wrap; }
    #tab-clinic-info #directorApplicationSection { grid-template-columns: minmax(0, 1fr); }
    #tab-clinic-info #clDirectorOpenBtn { grid-column: 1; grid-row: 3; justify-self: start; margin-bottom: 12px; }
    #tab-clinic-info #applicationStatus { grid-row: 4; }
    #tab-clinic-info #directorApplicationSection::after { grid-row: 5; }
    :is(#tab-classic-db, #tab-wiki) .ac-top { flex-wrap: wrap; }
    :is(#tab-classic-db, #tab-wiki) .ac-top .ui-segment { width: 100%; }
    :is(#tab-classic-db, #tab-wiki) .ac-top .ui-segment > button { flex: 1; padding: 7px 6px; }
    :is(#tab-classic-db, #tab-wiki) .ac-top-action { margin-left: 0; width: 100%; justify-content: center; }
    :is(#tab-classic-db, #tab-wiki) .ui-row .ui-tag { display: none; }
    #tab-developer .as-row { grid-template-columns: 96px minmax(0, 1fr); }
    #tab-settings .st-row { grid-template-columns: 96px minmax(0, 1fr) auto; }
    #tab-settings .st-desc { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
    #tab-settings .st-row > :last-child { grid-column: 2 / -1; grid-row: 1; justify-self: end; }
    #tab-assets .ma-head:has(.ma-head-btns) { flex-wrap: wrap; }
    #tab-assets .ma-head-btns { margin-left: 0; width: 100%; }
    #tab-assets .ma-head-btns > * { flex: 1; justify-content: center; }
    #tab-assets .ma-progress { width: auto; }
    #tab-assets .ma-note { margin-top: -1rem; }
    /* 한 절뿐인 메뉴는 「‹ 메뉴명」이 제목이라 같은 말을 되풀이하는 절 제목을 감춘다 */
    :is(#tab-classic-db, #tab-wiki, #tab-developer, #tab-settings) .mypage-section > h2 { display: none; }
    :is(#tab-classic-db, #tab-wiki) .ac-top { margin-top: 0; }
    /* 어셋 상세: 메뉴 목록으로 가는 바깥 「‹ 어셋」은 감추고 어셋 목록으로 가는 상세의 「‹ 어셋」만 둔다 */
    .mypage-layout.is-in:has(#tab-assets.active #ma-detail:not([hidden])) .mypage-back { display: none; }
}
/* 내 어셋 머리 ⋮ 「삭제」(PLAN 261008 §4.2, 원장 261010 미리보기 승인) — 아이콘만인 정사각 단추 */
#tab-assets .ma-head-btns .ma-more { width: 36px; padding: 0; justify-content: center; }
@media (max-width: 768px) {
    #tab-assets .ma-head-btns > .ui-menu-wrap { flex: 0 0 auto; }
}