/* ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- 공용 스타일, me_5how page.jsx · page_lysd.jsx · mdal.jsx 인라인 블록 8개 통합 */
/* 제외 : 사이트 전용 로고 마스크 · 광고 띠 · tom-select · 미리보기 오버레이. 클래스명 · 값 원본 유지 */

/* ---- ---- ---- ---- ---- ---- ---- ---- 기본 */
*    { scrollbar-width:            thin      ; }
body { font-family    : Noto Sans KR, sans-serif; }
:root { --bs-font-sans-serif: 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* BS5 변수 재정의, 임의 클래스 없음 */
a    { text-decoration:            none      ; }
::placeholder            { opacity         :      .5   !important; }
.modal-backdrop.show     { opacity         :       1             ; }
.modal-backdrop          { background-color: rgba( 0, 0, 0, .75 ); }
.popover                 { z-index: 1081; } /* 툴팁 1080 바로 위 */
.link-secondary:focus,
.link-secondary:hover    { fill: rgba( 86, 94, 100, var( --bs-link-opacity, 1 ) ) !important; }
.breadcrumb-item +
.breadcrumb-item::before { color: var( --bs-tertiary-color ); font-size: .875em; font-weight: normal; float: none; }
@media ( hover: none ) {  .A_sdit:hover        { background-color: transparent !important; }
                          .dropdown-item:hover { background-color: transparent !important; color: inherit !important; } }

/* ---- ---- ---- ---- ---- ---- ---- ---- 배지, 표 안 상태 · 배지형 액션 버튼 */
.table                                .badge                        { vertical-align  : 2px; }
a.badge                       , button.badge                        { background-color:                               var( --bs-body-bg )           ; }
a.badge.border-primary:hover  , button.badge.border-primary:hover   { background-color: var( --bs-primary   ); color: var( --bs-body-bg ) !important; }
a.badge.border-secondary:hover, button.badge.border-secondary:hover { background-color: var( --bs-secondary ); color: var( --bs-body-bg ) !important; }
a.badge.border-success:hover  , button.badge.border-success:hover   { background-color: var( --bs-success   ); color: var( --bs-body-bg ) !important; }
a.badge.border-danger:hover   , button.badge.border-danger:hover    { background-color: var( --bs-danger    ); color: var( --bs-body-bg ) !important; }
a.badge.border-warning:hover  , button.badge.border-warning:hover   { background-color: var( --bs-warning   ); color: var( --bs-body-bg ) !important; }
a.badge.border-info:hover     , button.badge.border-info:hover      { background-color: var( --bs-info      ); color: var( --bs-body-bg ) !important; }
.badge     { font-size: 13px; line-height: 1; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding-top: 1px; padding-bottom: 0; } /* 주의 * 정신 건강상 수정 금지 */
.badge .bi { font-size: 12px; line-height: 1; height: 12px; display: block      ; width: 12px; }
.badge:disabled, .badge.disabled { opacity: .65; pointer-events: none; } /* 배지형 액션 버튼 비활성 = .btn:disabled 동일값 */
.A_ddbd    { padding: 2px 4px 3px 4px; margin-left: 12px; float: right; font-size: 11px; line-height: 1; border-radius: var( --bs-border-radius ); } /* dropdown badge */ [lang="ko"] .A_ddbd { padding: 3px 4px 2px 4px; } /* 정신 건강 */

/* ---- ---- ---- ---- ---- ---- ---- ---- 유틸, 크기 · 간격 · 정렬 표시 */
.A_fpwa { top: 0; bottom: 0; left: 0; right: 0; padding-bottom: env( safe-area-inset-bottom ); } /* full pwa */
.A_link { opacity     :   .5; }   .A_tght   { width:  1px; white-space :         nowrap; } .A_link:hover { opacity: 1 !important; }  /* tight    */
.A_db12 { font-size   : 12px; line-height: 1; width: 12px; height: 12px; display: block; } .A_hopr:hover { background-color: var( --bs-primary-bg-subtle ); }
.A_db16 { font-size   : 16px; line-height: 1; width: 16px; height: 16px; display: block; }
.A_db20 { font-size   : 20px; line-height: 1; width: 20px; height: 20px; display: block; }
.A_db24 { font-size   : 24px; line-height: 1; width: 24px; height: 24px; display: block; }
.A_db28 { font-size   : 28px; line-height: 1; width: 28px; height: 28px; display: block; }
.A_db32 { font-size   : 32px; line-height: 1; width: 32px; height: 32px; display: block; }
.A_fs11 { font-size   : 11px; } .A_fs13 { font-size   : 13px; } .A_mnw0 { min-width    :    0;}
.A_fs12 { font-size   : 12px; } .A_lh16 { line-height : 16px; } .A_lh99 { line-height  :  .99; } /* 영한 폰트 오차 방지 */
.A_ms12 { margin-left : 12px; } .A_ms06 { margin-left :  6px; } .A_ps12 { padding-left : 12px; } .A_ps06 { padding-left :  6px; }
.A_me12 { margin-right: 12px; } .A_me06 { margin-right:  6px; } .A_pe12 { padding-right: 12px; } .A_pe06 { padding-right:  6px; }
.A_mtn1 { margin-top  : -1px; } .A_mtn2 { margin-top  : -2px; } .A_mtn3 { margin-top   : -3px; } .A_mbn1 { margin-bottom: -1px; } .A_mbn2 { margin-bottom: -2px; } .A_mbn3 { margin-bottom: -3px; }
.A_mt01 { margin-top  :  1px; } .A_mt02 { margin-top  :  2px; } .A_mt03 { margin-top   :  3px; } .A_mb01 { margin-bottom:  1px; } .A_mb02 { margin-bottom:  2px; } .A_mb03 { margin-bottom:  3px; }
.A_stac { text-decoration-line: underline; text-underline-offset: 6px; text-decoration-color: var( --bs-primary ); } /* sort descend */
.A_stdc { text-decoration-line:  overline; text-underline-offset: 7px; text-decoration-color: var( --bs-primary ); } /* sort  ascend */
.A_btsc:hover,
.A_btsc:focus   { color: var( --bs-body-color ); border: var( --bs-border-width ) var( --bs-border-style ) var( --bs-border-color ); background-color: var( --bs-tertiary-bg ); }
.A_btsc         { color: var( --bs-secondary  ); border: var( --bs-border-width ) var( --bs-border-style ) var( --bs-border-color ); } /* button secondary */
.A_hrsc { overscroll-behavior: contain; overflow-x: auto; scrollbar-color: var( --bs-border-color ) var( --bs-body-bg ); container-type: scroll-state; } /* 넘침 판정 = CSS scroll-state, Chrome · Edge 133+ · Safari 26+, Firefox 미지원 = pb 없이 퇴화 */
@container scroll-state( ( scrollable: right ) or ( scrollable: left ) ) { .A_hrsc_body { padding-bottom: .5rem; } } /* 스크롤바 있을 때만 내용 · 스크롤바 사이 .5rem, 바깥 mb-2 상시 = 아래 .5rem */ .A_hrsc .btn:not(.active) { border-color: var( --bs-border-color ); } /* 가로 스크롤 페이지네이션 */
.A_tbrs { margin-bottom: .5rem; } .A_tbrs > .table { margin-bottom: .5rem; } /* 테이블 스크롤 컨테이너 : 테이블 .5 스크롤바 .5 페이지네이션 pb-2 .5, BS table mb 1rem 상쇄 */
.A_sttp.sticky-top { z-index: 990; } /* BS 스티키 1020 → 드롭다운 1000 아래, 본문 위 */
.A_sttp::before { position: absolute; left: 0; right: 0; top   : -1rem; height: 1rem; background: var( --bs-body-bg ); content: ''; } /* sticky top       */
.A_stbt::after  { position: absolute; left: 0; right: 0; bottom: -1rem; height: 1rem; background: var( --bs-body-bg ); content: ''; } /* sticky bottom    */
main .A_sttp::before { top: -1.5rem; height: 1.5rem; } /* 유동 바디 p-md-4 틈 보정, 모달은 main 밖이라 제외, 모바일 초과분 overflow 클립 */

/* ---- ---- ---- ---- ---- ---- ---- ---- 폼, 체크 · 듀얼 레인지 */
.form-check-input.A_chck:checked[type="checkbox"] { background-color: var( --bs-secondary-bg-subtle ); border-color: var( --bs-secondary ); --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%236c757d%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27m6 10 3 3 6-6%27/%3e%3c/svg%3e"); } /* check secondary */
.A_rnge { height: 1.5rem; }                                                        /* range dual : 레인지 2 개 겹침, 썸만 조작 */
.A_rnge .form-range { pointer-events: none; background: transparent; }
.A_rnge .form-range::-webkit-slider-thumb          { pointer-events: auto; background-color: var( --bs-secondary ); }
.A_rnge .form-range::-moz-range-thumb              { pointer-events: auto; background-color: var( --bs-secondary ); }
.A_rnge .form-range::-webkit-slider-runnable-track { background: transparent; }    /* 기본 트랙 숨김, A_trak 전담 */
.A_rnge .form-range::-moz-range-track              { background: transparent; }
.A_trak   { position: absolute; top: 50%; left: 0; right: 0; height: .5rem; border-radius: 1rem; background: var( --bs-tertiary-bg ); transform: translateY( -50% ); } /* range track */
.A_trak i { position: absolute; top: 0; bottom: 0; border-radius: 1rem; background: var( --bs-secondary-bg-subtle ); }                                                /* range 선택 구간 */

/* ---- ---- ---- ---- ---- ---- ---- ---- 카드 그리드, 썸네일 · 코너 오버레이 · 점멸 */
.A_cdtn       { width: 100%; }
.A_cdtn img,
.A_cdtn video { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }                                                                 /* card thumbnail */
.A_cdtx       {                     overflow: hidden; font-size: 12px; padding: 8px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } /* card text      */
.A_card       { position: relative; overflow: hidden; flex-direction : column ;      display:  flex; border-radius: var( --bs-border-radius ); border: var( --bs-border-width ) var( --bs-border-style ) var( --bs-border-color ); }
.A_cdtl       { position: absolute; top   : 0; left : 0; margin:  0  ; padding: 8px; line-height: 1; border-radius: var( --bs-border-radius ); } /* 체크박스 주변 배경 없음, 클릭 영역 확대 */
.A_cdtr       { position: absolute; top   : 0; right: 0; margin:  0  ; padding: 8px; line-height: 1; border-radius: var( --bs-border-radius ); background-color: rgba( var( --bs-body-bg-rgb ), .5 ); } .A_cdtr:hover { background-color: rgba( var( --bs-body-bg-rgb ), 1 ) !important; }
.A_cdbl       { position: absolute; bottom: 0; left : 0; margin:  4px; padding: 4px; line-height: 1; border-radius: var( --bs-border-radius ); background-color: rgba( var( --bs-body-bg-rgb ), .5 ); } .A_cdbl:hover { background-color: rgba( var( --bs-body-bg-rgb ), 1 ) !important; }
.A_cdbr       { position: absolute; bottom: 0; right: 0; margin:  4px; padding: 4px; line-height: 1; border-radius: var( --bs-border-radius ); background-color: rgba( var( --bs-body-bg-rgb ), .5 ); } .A_cdbr:hover { background-color: rgba( var( --bs-body-bg-rgb ), 1 ) !important; }
@keyframes  A_blnk { 0% { --A_opct: 1; } 50% { --A_opct: 0; } 100% { --A_opct: 1; } }
@property --A_opct { syntax: "<number>"; inherits: false; initial-value: 1; }
.A_blwn { --A_opct: 1; background-color: rgba( var( --bs-info-rgb ), var( --A_opct ) ); animation: A_blnk .4s infinite; }

/* ---- ---- ---- ---- ---- ---- ---- ---- 보조 색, 핑크 · 라임. 팝오버 강조 */
:root {
  --pink: #F06; --pink-rgbc: 255,   0, 102; --pink-emph: #660029; --pink-bgst: #FFCCE0; --pink-bdst: #FF99C2; /* shade 60%: .4; tint  80%: 204 + .2; tint 60%: 153 + .4; */
  --lime: #3F3; --lime-rgbc:  51, 255,  51; --lime-emph: #146614; --lime-bgst: #D6FFD6; --lime-bdst: #ADFFAD; }
[data-bs-theme="dark"] {                    --pink-emph: #FF66A3; --pink-bgst: #330014; --pink-bdst: #99003D; /* shade 80%: .2; shade 40%:       .6; tint 40%: 102 + .6; */
                                            --lime-emph: #85FF85; --lime-bgst: #0A330A; --lime-bdst: #1F991F; }
.A_pink { color: var( --pink ); } .A_pkbg { background-color: var( --pink ); } .A_pkbg.popover { --bs-popover-bg: var( --pink ); --bs-popover-border-color: var( --pink ); --bs-popover-body-padding-x: .5rem; --bs-popover-body-padding-y: .5rem; --bs-popover-body-color: #FFF; }
.A_lime { color: var( --lime ); } .A_lmbg { background-color: var( --lime ); } .A_lmbg.popover { --bs-popover-bg: var( --lime ); --bs-popover-border-color: var( --lime ); }

/* ---- ---- ---- ---- ---- ---- ---- ---- 커스텀 아이콘, /asst/*.svg 마스크 = currentColor 착색. 원본 A_logo_* 방식 */
.A_logo_sekr::before { content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; background-color: currentColor; -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
.A_logo_sekr::before { -webkit-mask-image: url( /asst/logo_sekr.svg ); mask-image: url( /asst/logo_sekr.svg ); } /* 플랫폼 브랜드 전역 아이콘, pblc/asst */

/* ---- ---- ---- ---- ---- ---- ---- ---- 아사이드, 항목 · 접힘 레일 · 2뎁스 · 로고 호버 · 엣지 · 유저 */
.A_sdit {              height: 36px; display: flex; line-height    :      1; align-items: center; text-decoration: none; } /* aside item  */ .A_sdit:hover { background-color: rgba( var( --bs-secondary-bg-rgb ), var( --bs-bg-opacity ) ); border-radius: var( --bs-border-radius ); }
.A_sdic { width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; position:    relative; } /* aside icon  */ .A_sdic   .bi { width: 16px; height: 16px; display: block; }
.A_sddt { width:  8px; height:  8px; right  :  8px; bottom         :    8px; border-radius:  50%; position:    absolute; } /* aside dot   */
.A_sdtx {                                           font-size      :   14px;                                             } /* aside text  */
.A_sdbd {                            display: flex; margin-right   :    8px; align-items: center; margin-left    : auto; } /* aside badge */
.A_sdic { min-width: 36px; } .A_sdtx { min-width: 0; padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 리사이즈 최소 폭 96 = 아이콘 칸 축소 방지 · 항목명 말줄임, 패딩 2 = 줄박스 1 글리프 잘림 방지 · 세로 위치 불변 */
.A_lysc [data-lysc],
        .A_sddt    ,
.A_lysc .A_sdtx    , /* layout aside closed */
.A_lysc .A_sdbd { display: none  !important; }
.A_lysc .A_sddt { display: block !important; }
.lysd_chvr .bi { transition: transform .2s; } .lysd_chvr[aria-expanded="false"] .bi { transform: rotate( -90deg ); } /* 2뎁스 셰브론 접힘 = 우향, 도움말 동형 */
.lysd_chld { padding-left: 16px; } /* 2뎁스 들여쓰기 = 도움말 동일 16 */
.A_lysc .lysd_chvr { display: none !important; }                                                                           /* 접힘 레일 = 셰브론 숨김 */
.A_lysc .lysd_chld { padding-left: 0 !important; } .A_lysc .lysd_chld .A_sdic .bi { width: 12px; height: 12px; font-size: 12px; }      /* 접힘 레일 = 2뎁스 아이콘 축소 구분 */
.lysd_schd .bi { transition: transform .2s; } .lysd_schd[aria-expanded="false"] .bi { transform: rotate( -90deg ); } /* 섹션 셰브론 접힘 = 우향, 2뎁스 동형 */
.lysd_schd[aria-expanded="false"] + [id^="lysd_sctn_"] + .lysd_schd { margin-top: 0 !important; } .lysd_slid + .lysd_schd { transition: margin-top .2s ease; } /* 접힌 섹션 다음 헤더 = 상단 마진 없음, 전환 = F_slid 200 동기, 접힘 레일 동일 */
#lysd_allz { position: absolute; top: 53px; left: 0; z-index: 1; width: 16px; height: 16px; background-color: var( --bs-secondary-bg ); clip-path: polygon( 0 0, 100% 0, 0 100% ); cursor: s-resize; } #lysd_allz:hover { background-color: var( --bs-border-color ); } #lysd:has( .lysd_schd[aria-expanded="true"] ) #lysd_allz { cursor: n-resize; } /* 섹션 전체 토글, 직각 삼각형 16 = 메뉴 패딩 8 · 첫 항목 모서리 접점, 색 = bg-body-secondary · 호버 border-color, 커서 = 토글 방향 예고 = 펼친 섹션 있음 n 접힘 · 없음 s 펼침 */
.A_thlt         { display: flex  !important; } [data-bs-theme="dark"] .A_thlt { display: none !important; } /* theme light */
.A_thdk         { display: none  !important; } [data-bs-theme="dark"] .A_thdk { display: flex !important; } /* theme dark  */
#lysd_lgic       > .bi          { display: none;  }
#lysd_lgic:hover > .lysd_logo   { display: none;  }
#lysd:not(.A_lysc) #lysd_lgic:hover > .bi-layout-sidebar         { display: block; } /* 펼침 → 접기 힌트   */
#lysd.A_lysc       #lysd_lgic:hover > .bi-layout-sidebar-reverse { display: block; } /* 접힘 → 펼치기 힌트 */
#lysd_edge       { position: absolute; top: 0; bottom: 0; right: -7px; width: 7px; cursor: ew-resize; touch-action: none; }
#lysd_edge:hover { background-color: color-mix( in srgb, var( --bs-info ) 10%, transparent ); }
#lysd_usbt:hover .lysd_unam { --bs-link-opacity: .75; } /* BS 링크 공식이 읽는 변수만 주입 = 네이티브 연해짐, 발동만 영역 전체로 전파 */

/* ---- ---- ---- ---- ---- ---- ---- ---- 토스트 · 모달 */
#tost .toast { cursor: grab; } #tost .toast:active { cursor: grabbing; } /* 클릭 복사 커서, 다운 중 grabbing = CSS 만으로 */
.row-drag { cursor: grab; } .A_grab, .A_grab * { cursor: grabbing !important; } /* 행 드래그 핸들 호버 grab, 드래그 중 body A_grab = 전역 grabbing */
.modal-body > :last-child, .modal-body > form > :last-child, .modal-body > form > div > :last-child, .modal-body > form > .row > [class*="col"] > :last-child { margin-bottom: 0 !important; } /* 폼 말미 mb-3 과 모달 바디 p-3 중복 제거, row col 분할 폼 · 모드 래퍼 div 포함, 전역 */
#prvw { height: 100dvh; } /* 미리보기 = 동적 뷰포트, 모바일 하단 UI 제외 세로 중앙 */
.ts-wrapper.multi .ts-control > div.item.badge { padding: .35em .65em; margin: 0; background-color: var( --bs-body-bg ); cursor: pointer; } .ts-wrapper.multi .ts-control > div.item.badge:hover { background-color: var( --bs-secondary ); color: var( --bs-body-bg ) !important; } .ts-wrapper.form-select.multi.has-items .ts-control { padding: 6px .75rem 6px 6px; gap: .25rem; align-items: center; } .ts-wrapper.form-select.multi.has-items .ts-control > input { margin: 0 !important; line-height: 1 !important; } /* 다중 셀렉트 선택 알약 = 목록 액션 버튼 동형 = 호버 반전, 클릭 = 제거 = F_tmsl onItemSelect. 간격 = 마진 대신 flex gap .25rem = 행 수 무관 상하 6px · 좌 6px, 입력 줄높이 1 = 알약보다 낮아 행 높이 = 알약 */
.ts-wrapper .ts-dropdown { left: -1px; width: calc( 100% + 2px ); margin-top: 1px; } /* 톰셀렉트 BS5 테마 = 드롭다운 기준이 래퍼 테두리 안쪽 = 폭 양쪽 1px 부족 · 간격 3px → 바깥 테두리 기준 폭 일치 · 간격 0 = 박스 하단 테두리 바로 아래 밀착 · 겹침 없음, 포커스 링 위 */
.ts-wrapper .ts-dropdown .optgroup:before { display: none; } .ts-wrapper .ts-dropdown .optgroup-header { padding-top: .75rem; padding-bottom: .25rem; color: var( --bs-tertiary-color ); font-size: 12px; text-transform: uppercase; } /* 톰셀렉트 섹션 헤더 = 구분선 제거 · 좌메뉴 섹션 헤더 동형. 벤더 CSS 가 aaaa.css 뒤 로드 = 동일 명시도 패배 → .ts-wrapper 접두로 명시도 우위 */
.ts-wrapper .badge { vertical-align: top; } /* 톰셀렉트 안 배지 = 기준선 정렬이 줄박스 1px 팽창 = 옵션 31px · 상 4 하 3 → top 정렬 = 30px · 상하 3px 대칭, 실측. 렌더 경로 무관 자동 교정 */
.drop_over { border-color: var( --bs-info ) !important; background-color: color-mix( in srgb, var( --bs-info ) 10%, transparent ) !important; } /* 드롭존 드래그 진입 강조, A_upld_zone */