/* join */

/* WP/Astra 전역 버튼 색 차단 — 로그인 화면은 school-kmc-main.css 를
   불러오지 않으므로 같은 리셋을 따로 둔다. */
:where(#school-kmc-body) :is(button, input:where([type="button"], [type="submit"], [type="reset"])),
:where(#school-kmc-body) :is(button, input:where([type="button"], [type="submit"], [type="reset"])):is(:hover, :focus, :focus-visible, :active){
  background-color:transparent;
  color:inherit;
  border-color:transparent;
  box-shadow:none;
  outline:none;
}

body{
    background-color: #eef3f9 !important;
}

#school-kmc-body {
    min-height: 100vh;   
    width: 100%;
    background-color: #eef3f9;
    display: flex;
    justify-content: center;   
    align-items: center;
}

#school-kmc-join-page {
    background: #fff;
    width: 100%;
    max-width: 440px;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.join-header {
    text-align: center;
    margin-bottom: 30px;
}

.icon-circle {
    background: #00b2a7;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.join-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #333;
}

.join-header p {
    font-size: 14px;
    color: #888;
    margin: 0;
}

#school-kmc-join-page .type-selector {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    margin-bottom: 30px;
    width: 100%;
}

#school-kmc-join-page .type-tab {
    flex: none;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #666;
    box-sizing: border-box;
}

.type-tab.active {
    border-color: #00b2a7;
    color: #00b2a7;
    background-color: #f0fdfc;
}

.type-tab .icon {
    font-size: 20px;
}

.input-group {
    margin-bottom: 18px;
}

.input-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

.full-input, .flex-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
    height: 50px;
}

.full-input:focus, .flex-input:focus {
    border-color: #00b2a7;
    outline: none;
}

.flex-row {
    display: flex;
    gap: 8px;
}

.flex-input {
    flex: 1;
}

.btn-check {
    background-color: #c4ccd4;
    color: white;
    border: none;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-submit {
    width: 100%;
    background-color: #00b2a7;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-submit:hover {
    background-color: #00968d;
}


.join-footer {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
    color: #888;
}

.join-footer a {
    color: #00b2a7;
    text-decoration: none;
    font-weight: 600;
    margin-left: 8px;
    text-decoration: none;
}

.join-footer a,
.join-footer a:hover,
.join-footer a:focus,
.join-footer a:active {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.input-group label.error {
    color: #d93025;
    font-weight: 700;
}

.input-group label.error::after {
    content: ' *';
}

.btn-submit:disabled {
  background-color: #cfd6dc;
  cursor: not-allowed;
}

/* ── '로그인 중…' 상태 ──
   로그인은 요청 세 번을 연달아 타서 버튼을 누른 뒤 1초 이상 화면이 그대로다.
   그동안 아무 표시가 없으면 안 눌린 줄 알고 다시 누른다. 색은 살려 두고(진행 중이지 실패가 아니다)
   왼쪽에 도는 표시를 붙인다. (md/PERFORMANCE.md) */
.btn-submit.is-busy:disabled {
  background-color: var(--kmc-primary, #EA5428);
  color: #fff;
  cursor: progress;
  opacity: .85;
}
.btn-submit.is-busy::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kmcBtnSpin .7s linear infinite;
}
@keyframes kmcBtnSpin { to { transform: rotate(360deg); } }

/* 움직임을 줄이도록 설정한 사용자에게는 돌리지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .btn-submit.is-busy::before { animation: none; }
}




/* login */

#school-kmc-body {
    background-color: #eef3f9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Pretendard', -apple-system, sans-serif;
    padding: 20px;
}

.kmc-card {
    background: #fff;
    width: 100%;
    max-width: 400px;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* 로그인 헤더 전용 */
.login-header {
    text-align: center;
    margin-bottom: 35px;
}

.logo-area {
    margin-bottom: 15px;
}

/* ⚠️ 로고 크기는 **아이디 선택자로 못 박는다.**
   엘리멘터가 `.elementor img { height: auto }` 를 갖고 있어 순서만 어긋나면 로고가
   원본 크기(수백 px)로 튄다. 로그인·가입 어느 화면에서나 같은 크기로 보이게 한다. */
#school-kmc-body .logo-area img,
#school-kmc-join-v2 .logo-area img {
    height: 46px;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.logo-area img {
    height: 46px;
    /* 부모의 text-align:center 로는 안 먹는다 — 실제 렌더에서 img 가 블록으로 잡혀
       왼쪽에 붙는다. 상속에 기대지 말고 마진으로 직접 가운데 정렬한다.
       (margin 을 통째로 지정해 테마 전역의 img{margin-bottom:1.5em} 도 같이 덮는다) */
    display: block;
    margin: 0 auto;
}

.logo-text-fallback {
    font-size: 24px;
    font-weight: bold;
    color: #4CAF50;
}

/* 로그인 화면은 '세이피안 키즈' h2 를 빼고 로고가 제목 역할을 한다.
   회원가입('회원가입')·재로그인 안내('이미 로그인되어 있습니다') 카드는
   제목이 따로 있으므로 위의 기본 크기(40px)를 그대로 쓴다.
   재로그인 안내 카드가 #school-kmc-login 을 같이 쓰므로 id 로는 못 가른다 — 전용 클래스로 건다. */
.login-header--brand .logo-area {
    margin-bottom: 10px;
}

.login-header--brand .logo-area img {
    height: 46px;
}

.login-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 10px 0 5px 0;
}

.login-header p {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
}

.full-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: #fff;
    transition: border-color 0.2s;
    height: 50px;
}

.full-input:focus {
    border-color: #00b2a7;
    outline: none;
}

.btn-submit {
    width: 100%;
    background-color: #00b2a7; 
    color: white;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

.btn-submit:hover {
    background-color: #00998f;
}

/* 이미 로그인된 상태로 로그인 화면에 왔을 때의 이동 버튼 (a 태그라 .btn-submit 대신 별도) */
.kmc-login-go,
.kmc-login-go:hover,
.kmc-login-go:focus,
.kmc-login-go:active {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background-color: #00b2a7;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    text-decoration: none;
    cursor: pointer;
}

.kmc-login-go:hover {
    background-color: #00998f;
}

/* 하단 링크 */
.login-footer {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
    color: #888;
}

.login-footer a {
    color: #00b2a7;
    text-decoration: none;
    font-weight: 600;
    margin-left: 8px;
}

.login-footer a:hover {
    text-decoration: none;
}

/* 마이페이지 */

/* ⚠️ 카드 폭·정렬·로그아웃 버튼은 여기 없다 — 파일 아래쪽 “마이페이지(2026-08-20 디자인)” 블록에 있다.
   옛 규칙(400px · align-items:flex-start · 청록 버튼)은 아래 블록이 전부 덮어써서 지웠다. */
#school-kmc-mypage .mp-back {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 16px 0;
    cursor: pointer;
    color: #00b2a7;
    font-size: 14px;
    font-weight: 600;
    border: none;
}
#school-kmc-mypage .mp-header {
    text-align: center;
    margin-bottom: 30px;
}
#school-kmc-mypage .mp-logo {
    margin-bottom: 15px;
}
#school-kmc-mypage .mp-logo img {
    height: 40px;
}
#school-kmc-mypage h2 {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 10px 0 5px 0;
}
#school-kmc-mypage .mp-sub {
    font-size: 14px;
    color: #999;
    margin: 0;
}
#school-kmc-mypage .mp-field {
    margin-bottom: 18px;
}
#school-kmc-mypage .mp-field label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
}
#school-kmc-mypage .mp-value {
    width: 100%;
    min-height: 50px;
    padding: 14px 16px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: #f7f9fb;
    color: #333;
    display: flex;
    align-items: center;
}

/* =========================================================
   Astra 전역 버튼 리셋(school-kmc-main.css) 이후 자기 색 복원
   base 규칙 특이도가 (0,1,1) 미만이라 리셋에 밀리는 버튼만 다시 선언한다.
========================================================= */
.btn-submit:hover,.btn-submit:focus{ color:white; }

/* =========================================================
   [2026-08-18 가입·권한 개편 / 클로드 B] 계정 찾기
   화면: school_kmc/school-kmc-login.php  school_kmc_find_account()
   로그인 카드(.kmc-card)를 그대로 쓰고 탭·단계 표시만 얹는다.
========================================================= */
#school-kmc-find .kmc-find-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

#school-kmc-find .kmc-find-tab {
    flex: 1;
    padding: 12px 0;
    border: 1px solid #e3e8ec;
    border-radius: 8px;
    background-color: #f7f9fb;
    color: #7a848c;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

#school-kmc-find .kmc-find-tab.active {
    border-color: #00b2a7;
    background-color: #e6f7f6;
    color: #00b2a7;
}

/* 인증번호 칸 옆 재전송 버튼. 대기 중에는 눌러도 서버가 거절하므로 눌리지 않게 보여 준다. */
#school-kmc-find .btn-check:disabled {
    background-color: #e3e8ec;
    color: #a9b2b9;
    cursor: default;
}

#school-kmc-find .btn-back {
    width: 100%;
    background-color: #fff;
    color: #7a848c;
    border: 1px solid #e3e8ec;
    padding: 14px;
    border-radius: 8px;
    font-size: 15px;
    margin-top: 8px;
    cursor: pointer;
}

#school-kmc-find .kmc-find-hint {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #8a939b;
}

/* 로그인 폼의 실패·안내 자리도 같은 모양을 쓴다 (#kmcLoginMsg — md/ALERT_CLEANUP.md ⑦⑧⑨) */
#school-kmc-login .kmc-find-msg,
#school-kmc-find .kmc-find-msg {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background-color: #fdecec;
    color: #d0342c;
    font-size: 13px;
    text-align: center;
}

/* 발송 안내처럼 실패가 아닌 메시지도 같은 자리에 뜬다 — 빨간 상자로 보이면 오해한다. */
#school-kmc-login .kmc-find-msg.is-ok,
#school-kmc-find .kmc-find-msg.is-ok {
    background-color: #e6f7f6;
    color: #00877f;
}

#school-kmc-find .kmc-find-result {
    padding: 20px 16px;
    border: 1px solid #e3e8ec;
    border-radius: 8px;
    background-color: #f7f9fb;
    text-align: center;
}

#school-kmc-find .kmc-find-result-title {
    font-size: 14px;
    color: #7a848c;
    margin-bottom: 10px;
}

#school-kmc-find .kmc-find-result-id {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

/* 결과 화면의 '로그인하러 가기' 는 a 태그다. .btn-submit 은 button 기준이라 정렬이 어긋난다. */
#school-kmc-find .kmc-find-go {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    margin-top: 16px;
}

#school-kmc-find .kmc-find-go:hover,
#school-kmc-find .kmc-find-go:focus {
    color: #fff;
}

.login-footer-sub {
    margin-top: 8px;
    font-size: 13px;
}

/* =========================================================
   [2026-08-18 가입·권한 개편 / 클로드 B] 새 회원가입 폼
   화면: school_kmc/school-kmc-login.php  school_kmc_join_v2()
   옛 폼(#school-kmc-join-page)은 그대로 두고 새 id 로 따로 쓴다 —
   A 의 마이그레이션 전까지 두 화면이 공존한다.
========================================================= */
#school-kmc-join-v2 {
    max-width: 900px;          /* 2열(B-10). 좁은 화면에서는 아래 미디어쿼리가 1열로 되접는다. */
    margin: 0 auto;
    padding: 30px 20px 40px;
    background-color: #fff;
}

/* 2열 배치 — 왼쪽 개인 정보 / 오른쪽 구분·소속 시설·원 정보·서류.
   한 줄로 쌓으면 스크롤이 너무 길어 한 화면에 안 들어온다. */
#school-kmc-join-v2 .join-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 36px;
    align-items: start;
}

#school-kmc-join-v2 .join-col > .join-section:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

@media (max-width: 860px) {
    #school-kmc-join-v2 {
        max-width: 460px;
    }
    #school-kmc-join-v2 .join-cols {
        grid-template-columns: 1fr;
        gap: 0;
    }
    /* 1열로 접히면 오른쪽 열 첫 구역에도 구분선이 있어야 한다. */
    #school-kmc-join-v2 .join-col + .join-col > .join-section:first-child {
        padding-top: 22px;
        margin-top: 22px;
        border-top: 1px solid #eef1f4;
    }
}

/* 마스터가 아는 값 — 입력이 아니라 확인용 표시다(설계 §4-2-1). */
#school-kmc-join-v2 .join-facts {
    padding: 14px 16px;
    border-radius: 8px;
    background-color: #f7f9fb;
    margin-bottom: 16px;
}

#school-kmc-join-v2 .join-fact {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.5;
}

#school-kmc-join-v2 .join-fact-key {
    flex: 0 0 auto;
    color: #8a939b;
}

#school-kmc-join-v2 .join-fact-val {
    flex: 1 1 auto;
    text-align: right;
    font-weight: 600;
    color: #222;
    word-break: break-all;
}

#school-kmc-join-v2 .join-facts-empty {
    font-size: 13px;
    color: #8a939b;
}

/* 한 화면 폼의 구역 (설계 §4-0). 단계가 아니라 **구역**이다 — 스크롤로 이어진다. */
#school-kmc-join-v2 .join-section {
    padding-top: 22px;
    margin-top: 22px;
    border-top: 1px solid #eef1f4;
}

#school-kmc-join-v2 .join-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

#school-kmc-join-v2 .join-section-title {
    font-size: 17px;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
}

/* 못 채운 칸 표시. 제출 시 이 칸으로 스크롤한다(§4-0-3). */
#school-kmc-join-v2 .input-group.is-error input,
#school-kmc-join-v2 .input-group.is-error select {
    border-color: #d0342c;
    background-color: #fffafa;
}

#school-kmc-join-v2 .input-group.is-error label {
    color: #d0342c;
}

#school-kmc-join-v2 .join-field-err {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #d0342c;
}

#school-kmc-join-v2 .btn-check:disabled {
    opacity: 0.55;
    cursor: default;
}

#school-kmc-join-v2 .btn-submit {
    margin-top: 24px;
}

/* 구분·등급 선택. 라디오 대신 버튼을 쓴다 — 모바일에서 누르는 자리가 넓어야 한다. */
#school-kmc-join-v2 .join-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#school-kmc-join-v2 .join-choice-item {
    flex: 1 1 30%;
    min-width: 110px;
    padding: 14px 10px;
    border: 1px solid #e3e8ec;
    border-radius: 8px;
    background-color: #fff;
    color: #4a545c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

#school-kmc-join-v2 .join-choice-item.is-on {
    border-color: #00b2a7;
    background-color: #e6f7f6;
    color: #00877f;
}

#school-kmc-join-v2 .join-choice-sub {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 400;
    color: #8a939b;
}

/* 시설 검색 결과 — 3만 건이라 목록이 길어질 수 있어 높이를 묶고 스크롤을 준다. */
#school-kmc-join-v2 .join-facility-list {
    max-height: 240px;
    overflow-y: auto;
    margin-top: 8px;
}

#school-kmc-join-v2 .join-facility-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px;
    border: 1px solid #eef1f4;
    border-bottom: none;
    background-color: #fff;
    cursor: pointer;
}

#school-kmc-join-v2 .join-facility-item:last-child {
    border-bottom: 1px solid #eef1f4;
}

#school-kmc-join-v2 .join-facility-item:hover {
    background-color: #f7f9fb;
}

/* 고를 수 없는 시설도 목록에는 남긴다 — 안 보이면 "왜 검색이 안 되지" 가 된다. */
#school-kmc-join-v2 .join-facility-item.is-blocked {
    opacity: 0.55;
}

#school-kmc-join-v2 .join-facility-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

#school-kmc-join-v2 .join-facility-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #8a939b;
}

#school-kmc-join-v2 .join-facility-empty {
    padding: 14px 12px;
    font-size: 13px;
    color: #8a939b;
    background-color: #f7f9fb;
    border-radius: 8px;
}

#school-kmc-join-v2 .join-facility-picked {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background-color: #e6f7f6;
    color: #00877f;
    font-size: 13px;
    font-weight: 600;
}

#school-kmc-join-v2 select.full-input {
    height: 48px;
    background-color: #fff;
}

#school-kmc-join-v2 input[type="file"] {
    width: 100%;
    padding: 10px 0;
    font-size: 13px;
    color: #4a545c;
}

#school-kmc-join-v2 .kmc-find-msg {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background-color: #fdecec;
    color: #d0342c;
    font-size: 13px;
    text-align: center;
}

#school-kmc-join-v2 .kmc-find-msg.is-ok {
    background-color: #e6f7f6;
    color: #00877f;
}

#school-kmc-join-v2 .kmc-find-hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #8a939b;
}

#school-kmc-join-v2 .kmc-find-result {
    padding: 24px 16px;
    border-radius: 8px;
    background-color: #f7f9fb;
    text-align: center;
}

#school-kmc-join-v2 .kmc-find-go {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    margin-top: 16px;
}

#school-kmc-join-v2 .kmc-find-go:hover,
#school-kmc-join-v2 .kmc-find-go:focus {
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [2026-08-19] 로그인·회원가입 디자인 개편 — md/AUTH_DESIGN.md
   담당자가 클로드 디자인으로 그린 화면 규격이다. 초록 → **주황 #EA5428**.
   같은 파일 안에서 **뒤에 오는 규칙이 이기므로** 위쪽 옛 규칙을 지우지 않고 여기서 덮는다
   (옛 화면 school_kmc_join_legacy 가 아직 살아 있어 통째로 걷어내면 그쪽이 깨진다).
   ⚠️ 이 파일은 엘리멘터 **뒤에** 실린다(school-kmc-login.php 우선순위 100). 그 전제 위의 규칙들이다.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Primary — 브랜드 · 활성 내비 · 주요 CTA 에만. 상태 배지에는 절대 안 쓴다. */
  --kmc-primary:#EA5428;
  --kmc-primary-subtle:#FDEEE9;

  --kmc-bg:#FFFFFF;
  --kmc-bg2:#F9FAFB;
  --kmc-bg-alt:#F3F3F5;
  --kmc-line:#D9D9D9;
  --kmc-label-alt:#ADADAF;
  --kmc-label-neutral:#7F7F80;
  --kmc-label-normal:#364153;
  --kmc-label-strong:#0A0A0A;

  --kmc-pos-bg:#E8F7ED;  --kmc-pos-text:#00B83D;
  --kmc-pend-bg:#FFF4C2; --kmc-pend-text:#D57D3A;
  --kmc-neg-bg:#FFE1E2;  --kmc-neg-text:#E8192C;

  --kmc-s1:4px; --kmc-s2:8px; --kmc-s3:12px; --kmc-s4:16px;
  --kmc-s5:24px; --kmc-s6:32px; --kmc-s7:40px; --kmc-s8:48px;

  --kmc-r-xs:4px; --kmc-r-sm:8px; --kmc-r-md:12px; --kmc-r-lg:16px; --kmc-r-full:999px;

  --kmc-elev1:0 1px 3px rgba(10,10,10,.08);
  --kmc-elev2:0 4px 12px rgba(10,10,10,.10);
}

body:has(#school-kmc-body){ background-color:var(--kmc-bg2) !important; }

#school-kmc-body{
  background-color:var(--kmc-bg2);
  font-family:'SUIT Variable','SUIT',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  align-items:flex-start;
  padding:var(--kmc-s7) var(--kmc-s4);
}

#school-kmc-body *{ font-family:inherit; }

/* ── 커서 · 글자 선택 (2026-08-20 이사님 피드백) ──
   관리자 화면(css/school-kmc-main.css)과 같은 규칙. 누르는 화면에서 I빔 커서가 뜨거나
   끌었을 때 글자가 잡히지 않게 한다. 입력칸만 되돌린다. */
body:has(#school-kmc-body){
  cursor:default;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}
body:has(#school-kmc-body) input,
body:has(#school-kmc-body) textarea,
body:has(#school-kmc-body) select,
body:has(#school-kmc-body) [contenteditable="true"]{
  -webkit-user-select:text;
  -moz-user-select:text;
  user-select:text;
}
body:has(#school-kmc-body) textarea,
body:has(#school-kmc-body) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]){
  cursor:text;
}
body:has(#school-kmc-body) select,
body:has(#school-kmc-body) input[type="checkbox"],
body:has(#school-kmc-body) input[type="radio"],
body:has(#school-kmc-body) input[type="file"]{
  cursor:pointer;
}

/* ── 카드 — 로그인 360 / 가입 760 ────────────────────────────────── */
#school-kmc-body #school-kmc-login,
#school-kmc-body #school-kmc-join-v2,
#school-kmc-body #school-kmc-find{
  background:var(--kmc-bg);
  border-radius:var(--kmc-r-md);
  box-shadow:var(--kmc-elev1);
  padding:var(--kmc-s6) var(--kmc-s6) var(--kmc-s7);
  margin:0 auto;
}
#school-kmc-body #school-kmc-login{ max-width:360px; width:100%; }
#school-kmc-body #school-kmc-find{ max-width:420px; width:100%; }
#school-kmc-body #school-kmc-join-v2{ max-width:760px; width:100%; }

#school-kmc-body .logo-area img{ height:30px; }
#school-kmc-join-v2 .logo-area img{ height:52px; }

#school-kmc-join-v2 .join-header h2,
#school-kmc-body .login-header h2{ font-size:24px; font-weight:700; color:var(--kmc-label-strong); }
#school-kmc-join-v2 .join-header p,
#school-kmc-body .login-header p{ font-size:14px; color:var(--kmc-label-neutral); }

/* ── 구역 ─────────────────────────────────────────────────────── */
#school-kmc-join-v2 .join-section{
  padding-top:var(--kmc-s5);
  margin-top:var(--kmc-s5);
  border-top:1px solid var(--kmc-bg-alt);
}
#school-kmc-join-v2 .join-section-title{
  font-size:16px; font-weight:700; color:var(--kmc-label-strong); margin-bottom:var(--kmc-s4);
}
#school-kmc-join-v2 .join-cols{ gap:0 var(--kmc-s6); }

/* ── 입력칸 ───────────────────────────────────────────────────── */
#school-kmc-body .input-group{ margin-bottom:var(--kmc-s4); }
#school-kmc-body .input-group > label{
  display:block; font-size:12px; font-weight:700; color:var(--kmc-label-neutral); margin-bottom:var(--kmc-s2);
}
#school-kmc-body .input-group.is-required > label::after{ content:' *'; color:var(--kmc-primary); }

#school-kmc-body .full-input,
#school-kmc-body .flex-input,
#school-kmc-body input[type="text"],
#school-kmc-body input[type="tel"],
#school-kmc-body input[type="email"],
#school-kmc-body input[type="password"],
#school-kmc-body select.full-input{
  height:44px; padding:0 var(--kmc-s4); font-size:14px;
  color:var(--kmc-label-strong); background:var(--kmc-bg);
  border:1px solid var(--kmc-line); border-radius:var(--kmc-r-sm); box-shadow:none;
}
#school-kmc-body .full-input:focus,
#school-kmc-body .flex-input:focus,
#school-kmc-body select.full-input:focus{
  border-color:var(--kmc-primary); outline:none;
  box-shadow:0 0 0 3px var(--kmc-primary-subtle);
}
#school-kmc-body input[readonly]{ background:var(--kmc-bg2); color:var(--kmc-label-normal); }

/* 브라우저 자동완성 배경 지우기 (2026-08-21 · 담당자 지적 "배경 민트색 빼줘").
   크롬은 자동완성한 칸에 `rgb(232,240,254)`(민트빛 하늘색)를 **UA 스타일**로 칠한다 —
   `background` 로는 못 이기고 **안쪽 그림자로 덮는 것**이 유일한 방법이다.
   `이름` 칸만 물들어 보였던 것은 크롬이 그 칸만 자동완성했기 때문이다. */
#school-kmc-body input:-webkit-autofill,
#school-kmc-body input:-webkit-autofill:hover,
#school-kmc-body input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px var(--kmc-bg) inset;
          box-shadow:0 0 0 1000px var(--kmc-bg) inset;
  -webkit-text-fill-color:var(--kmc-label-strong);
  caret-color:var(--kmc-label-strong);
  transition:background-color 600000s 0s, color 600000s 0s;
}
/* 포커스 링(3px)까지 같이 살린다 — 위 규칙만 두면 자동완성된 칸은 눌러도 링이 사라진다. */
#school-kmc-body input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 3px var(--kmc-primary-subtle), 0 0 0 1000px var(--kmc-bg) inset;
          box-shadow:0 0 0 3px var(--kmc-primary-subtle), 0 0 0 1000px var(--kmc-bg) inset;
  -webkit-text-fill-color:var(--kmc-label-strong);
}
/* 파이어폭스·표준 셀렉터. 크롬 것과 **같은 블록에 묶으면 안 된다** —
   한쪽을 모르는 브라우저가 규칙 전체를 버린다. */
#school-kmc-body input:autofill{
  background-color:var(--kmc-bg) !important;
  color:var(--kmc-label-strong);
  filter:none;
}

#school-kmc-body .kmc-find-hint{ font-size:12px; color:var(--kmc-label-alt); margin-top:var(--kmc-s2); }
#school-kmc-join-v2 .join-field-err{ font-size:12px; color:var(--kmc-neg-text); margin-top:var(--kmc-s2); }
#school-kmc-join-v2 .input-group.is-error input,
#school-kmc-join-v2 .input-group.is-error select{ border-color:var(--kmc-neg-text); background:var(--kmc-bg); }
#school-kmc-join-v2 .input-group.is-error > label{ color:var(--kmc-neg-text); }
/* 힌트와 오류는 **둘 중 하나만** 보인다(디자인 §2). */
#school-kmc-join-v2 .input-group.is-error .kmc-find-hint{ display:none; }

/* ── 버튼 ─────────────────────────────────────────────────────── */
#school-kmc-body .btn-submit{
  height:48px; border-radius:var(--kmc-r-sm);
  background:var(--kmc-primary) !important; color:#fff !important;
  font-size:16px; font-weight:700; border:none; width:100%;
}
#school-kmc-body .btn-submit:hover{ filter:brightness(.95); }
#school-kmc-body .btn-submit:disabled{ opacity:.55; }

#school-kmc-body .btn-check{
  height:44px; padding:0 var(--kmc-s4); white-space:nowrap;
  border-radius:var(--kmc-r-sm); font-size:13px; font-weight:700;
  background:var(--kmc-bg) !important; color:var(--kmc-primary) !important;
  box-shadow:inset 0 0 0 1px var(--kmc-primary) !important; border:none;
}
#school-kmc-body .btn-check:disabled{ color:var(--kmc-label-alt) !important; box-shadow:inset 0 0 0 1px var(--kmc-line) !important; }
#school-kmc-body .flex-row{ display:flex; gap:var(--kmc-s2); align-items:stretch; }

/* ── 선택 버튼 격자 (디자인 §3) ─────────────────────────────────
   border 가 아니라 inset box-shadow 를 쓴다 — 선택 시 1px→1.6px 로 굵어져도
   칸 크기가 흔들리지 않는다. */
#school-kmc-join-v2 .join-choice{ display:flex; flex-wrap:wrap; gap:6px; }
#school-kmc-join-v2 .join-choice-item{
  flex:1 1 30%; min-width:96px; min-height:44px; padding:var(--kmc-s2) var(--kmc-s3);
  border:none !important; border-radius:var(--kmc-r-sm);
  background:var(--kmc-bg) !important; color:var(--kmc-label-normal) !important;
  box-shadow:inset 0 0 0 1px var(--kmc-line) !important;
  font-size:13px; font-weight:700; line-height:1.4; cursor:pointer;
}
#school-kmc-join-v2 .join-choice-item.is-on{
  background:var(--kmc-primary-subtle) !important; color:var(--kmc-primary) !important;
  box-shadow:inset 0 0 0 1.6px var(--kmc-primary) !important;
}
#school-kmc-join-v2 .join-choice-item:disabled{ opacity:.55; cursor:default; }
#school-kmc-join-v2 .join-choice-sub{ display:block; margin-top:var(--kmc-s1); font-size:11px; font-weight:400; color:var(--kmc-label-alt); }
#school-kmc-join-v2 .join-choice-item.is-on .join-choice-sub{ color:var(--kmc-primary); }

/* ── 마스터 값 표시(읽기전용) ───────────────────────────────────── */
#school-kmc-join-v2 .join-facts{ background:var(--kmc-bg2); border-radius:var(--kmc-r-sm); padding:var(--kmc-s3) var(--kmc-s4); }
#school-kmc-join-v2 .join-fact{ font-size:13px; padding:var(--kmc-s1) 0; }
#school-kmc-join-v2 .join-fact-key{ color:var(--kmc-label-neutral); }
#school-kmc-join-v2 .join-fact-val{ color:var(--kmc-label-strong); font-weight:600; }

/* ── 소속 급식센터 (디자인 §4) ─────────────────────────────────── */
#school-kmc-join-v2 .kmc-center-card{
  background:var(--kmc-primary-subtle); border-radius:var(--kmc-r-sm);
  box-shadow:inset 0 0 0 1.6px var(--kmc-primary);
  padding:var(--kmc-s3) var(--kmc-s4); display:flex; align-items:center; gap:var(--kmc-s3);
}
#school-kmc-join-v2 .kmc-center-card-name{ font-size:14px; font-weight:700; color:var(--kmc-label-strong); }
#school-kmc-join-v2 .kmc-center-card-sub{ font-size:12px; color:var(--kmc-label-neutral); }
#school-kmc-join-v2 .kmc-center-card-body{ flex:1 1 auto; }
#school-kmc-join-v2 .kmc-center-none{ background:var(--kmc-bg2); border-radius:var(--kmc-r-sm); padding:var(--kmc-s4); }
#school-kmc-join-v2 .kmc-center-none p{ font-size:13px; color:var(--kmc-label-normal); margin:0 0 var(--kmc-s3); line-height:1.6; }
#school-kmc-join-v2 .kmc-center-none .kmc-center-actions{ display:flex; gap:var(--kmc-s2); flex-wrap:wrap; }
#school-kmc-join-v2 .kmc-badge{
  display:inline-block; margin-top:var(--kmc-s2); padding:4px 12px; border-radius:var(--kmc-r-full);
  font-size:12px; font-weight:700; background:var(--kmc-pos-bg); color:var(--kmc-pos-text);
}

/* ── 모달 (디자인 §6) ──────────────────────────────────────────── */
#school-kmc-join-v2 .kmc-modal{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:var(--kmc-s4); background:rgba(10,10,10,.45); }
#school-kmc-join-v2 .kmc-modal[hidden]{ display:none; }
#school-kmc-join-v2 .kmc-modal-card{ background:var(--kmc-bg); border-radius:var(--kmc-r-lg); box-shadow:var(--kmc-elev2); width:100%; max-width:440px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden;
  font-family:'SUIT Variable','SUIT',-apple-system,sans-serif; }
#school-kmc-join-v2 .kmc-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--kmc-s4) var(--kmc-s5); border-bottom:1px solid var(--kmc-bg-alt); }
#school-kmc-join-v2 .kmc-modal-title{ font-size:16px; font-weight:700; color:var(--kmc-label-strong); }
#school-kmc-join-v2 .kmc-modal-close{ background:none; border:none; font-size:20px; line-height:1; color:var(--kmc-label-neutral); cursor:pointer; padding:4px 8px; }
#school-kmc-join-v2 .kmc-modal-body{ padding:var(--kmc-s4) var(--kmc-s5) var(--kmc-s5); overflow-y:auto; flex:1 1 auto; min-height:0; }
#school-kmc-join-v2 .kmc-modal-body .full-input{ width:100%; box-sizing:border-box; }
#school-kmc-join-v2 .kmc-modal-list{ margin-top:var(--kmc-s3); }
#school-kmc-join-v2 .kmc-modal-row{ display:block; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--kmc-bg-alt); padding:var(--kmc-s3) 0; cursor:pointer; }
#school-kmc-join-v2 .kmc-modal-row:hover{ background:var(--kmc-bg2); }
#school-kmc-join-v2 .kmc-modal-row.is-blocked{ opacity:.5; }
#school-kmc-join-v2 .kmc-modal-row-name{ display:block; font-size:14px; font-weight:600; color:var(--kmc-label-strong); }
#school-kmc-join-v2 .kmc-modal-row-sub{ display:block; margin-top:2px; font-size:12px; color:var(--kmc-label-neutral); }
#school-kmc-join-v2 .kmc-modal-empty{ padding:var(--kmc-s5) 0; font-size:13px; color:var(--kmc-label-alt); text-align:center; line-height:1.6; }
#school-kmc-join-v2 .kmc-zip{ display:inline-block; margin-right:var(--kmc-s2); padding:2px 8px; border-radius:var(--kmc-r-xs); background:var(--kmc-primary-subtle); color:var(--kmc-primary); font-size:12px; font-weight:700; }
#school-kmc-join-v2 .kmc-modal-note{ margin-top:var(--kmc-s4); padding-top:var(--kmc-s4); border-top:1px solid var(--kmc-bg-alt); font-size:12px; color:var(--kmc-label-alt); line-height:1.6; }

/* ── 파일 첨부 (디자인 §6) ─────────────────────────────────────── */
#school-kmc-join-v2 .kmc-drop{
  border:1.5px dashed var(--kmc-line); border-radius:var(--kmc-r-sm);
  padding:var(--kmc-s5) var(--kmc-s4); text-align:center; cursor:pointer; background:var(--kmc-bg);
}
#school-kmc-join-v2 .kmc-drop.is-over{ border-color:var(--kmc-primary); background:var(--kmc-primary-subtle); }
#school-kmc-join-v2 .kmc-drop-title{ font-size:13px; font-weight:600; color:var(--kmc-label-normal); }
#school-kmc-join-v2 .kmc-drop-sub{ font-size:12px; color:var(--kmc-label-alt); margin-top:var(--kmc-s1); }
#school-kmc-join-v2 .kmc-file-row{ display:flex; align-items:center; gap:var(--kmc-s3); padding:var(--kmc-s3); border-radius:var(--kmc-r-sm); background:var(--kmc-bg2); margin-top:var(--kmc-s2); }
#school-kmc-join-v2 .kmc-file-name{ flex:1 1 auto; font-size:13px; color:var(--kmc-label-strong); word-break:break-all; }
#school-kmc-join-v2 .kmc-file-size{ font-size:12px; color:var(--kmc-label-alt); }
#school-kmc-join-v2 .kmc-file-del{ background:none !important; border:none; color:var(--kmc-neg-text) !important; font-size:12px; font-weight:700; cursor:pointer; }

/* ── 안내·오류 메시지 ─────────────────────────────────────────── */
#school-kmc-join-v2 .kmc-find-msg{ background:var(--kmc-neg-bg); color:var(--kmc-neg-text); border-radius:var(--kmc-r-sm); font-size:13px; }
#school-kmc-join-v2 .kmc-find-msg.is-ok{ background:var(--kmc-pos-bg); color:var(--kmc-pos-text); }

#school-kmc-body .join-footer,
#school-kmc-body .login-footer{ font-size:13px; color:var(--kmc-label-neutral); }
#school-kmc-body .join-footer a,
#school-kmc-body .login-footer a{ color:var(--kmc-primary); font-weight:700; }

@media (max-width:860px){
  #school-kmc-body #school-kmc-join-v2{ max-width:460px; }
  #school-kmc-body{ padding:var(--kmc-s4); }
}

/* ── 카드를 상하로도 가운데 (AUTH_DESIGN §2-1) ─────────────────────
   ⚠️ `align-items:center` 로 하면 **폼이 화면보다 길어지는 순간 위쪽이 잘리고
      스크롤로도 못 올라간다** — 가운데 정렬된 항목이 스크롤 원점 위로 넘어가기 때문이다.
      flex 항목에 `margin:auto` 를 주면 남는 공간이 있을 때만 가운데로 밀고,
      모자라면 margin 이 0 이 되어 위에서부터 흐른다. */
#school-kmc-body{
  min-height:100vh;
  align-items:normal;
  overflow-y:auto;
  padding:var(--kmc-s8) var(--kmc-s5);
}
#school-kmc-body #school-kmc-login,
#school-kmc-body #school-kmc-join-v2,
#school-kmc-body #school-kmc-find,
#school-kmc-body #school-kmc-join-page{ margin:auto; }

/* ── 구분 밴드 (AUTH_DESIGN 개정 §2) ─────────────────────────────
   카드 맨 위 전체폭. 이 두 선택이 아래 오른쪽 열을 통째로 가른다. */
#school-kmc-join-v2 .join-band{
  background:var(--kmc-bg2); border-radius:var(--kmc-r-md);
  padding:var(--kmc-s5); margin-bottom:var(--kmc-s5);
}
#school-kmc-join-v2 .join-band-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--kmc-s5);
}
#school-kmc-join-v2 .join-band .input-group{ margin-bottom:0; }
#school-kmc-join-v2 .join-band .join-choice-item{ background:var(--kmc-bg) !important; }
#school-kmc-join-v2 .join-choice--2 .join-choice-item{ flex:1 1 46%; }

/* 안내 박스 — 일반 관리자에게 '왜 안 묻는지' 를 알려 준다. */
#school-kmc-join-v2 .kmc-note{
  background:var(--kmc-bg2); border-radius:var(--kmc-r-sm);
  padding:var(--kmc-s3) var(--kmc-s4); margin-bottom:var(--kmc-s4);
  font-size:13px; line-height:1.6; color:var(--kmc-label-normal);
}
#school-kmc-join-v2 .kmc-note strong{ color:var(--kmc-label-strong); }

@media (max-width:860px){
  #school-kmc-join-v2 .join-band-cols{ grid-template-columns:1fr; gap:var(--kmc-s4); }
}

/* ── 로그인 화면 (AUTH_DESIGN §5-2) ──────────────────────────────── */
#school-kmc-body .kmc-auth-col{ width:100%; max-width:360px; margin:auto; }
#school-kmc-body .kmc-auth-col #school-kmc-login{ max-width:none; margin:0; }
#school-kmc-body .kmc-auth-under{
  margin-top:var(--kmc-s4); text-align:center;
  font-size:13px; color:var(--kmc-label-neutral);
}
#school-kmc-body .kmc-auth-under a{ color:var(--kmc-primary); font-weight:700; }

#school-kmc-login .login-header h2{ font-size:20px; font-weight:700; margin:var(--kmc-s3) 0 var(--kmc-s1); }
#school-kmc-login .login-header p{ font-size:12px; color:var(--kmc-label-neutral); }

/* 체크박스와 링크가 한 줄 (디자인 §5-2) */
#school-kmc-login .login-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--kmc-s2);
  margin:var(--kmc-s3) 0 var(--kmc-s2); flex-wrap:wrap;
}
#school-kmc-login .kmc-check{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--kmc-label-normal); cursor:pointer; margin:0; }
#school-kmc-login .kmc-check input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0; cursor:pointer;
  border:1px solid var(--kmc-line); border-radius:var(--kmc-r-xs); background:var(--kmc-bg);
}
#school-kmc-login .kmc-check input[type="checkbox"]:checked{
  background:var(--kmc-primary); border-color:var(--kmc-primary);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size:14px 14px; background-position:center; background-repeat:no-repeat;
}
#school-kmc-login .login-links{ display:inline-flex; align-items:center; gap:var(--kmc-s2); }
#school-kmc-login .login-links a{ font-size:13px; font-weight:600; color:var(--kmc-label-neutral); text-decoration:none; }
#school-kmc-login .login-links a:hover{ color:var(--kmc-primary); }
#school-kmc-login .login-links-sep{ display:inline-block; width:1px; height:11px; background:var(--kmc-line); }

/* ── 계정 찾기 (AUTH_DESIGN §5-3) ───────────────────────────────── */
#school-kmc-body #school-kmc-find{ max-width:none; margin:0; }
#school-kmc-find .kmc-back{
  display:inline-block; margin-bottom:var(--kmc-s3);
  font-size:13px; font-weight:700; color:var(--kmc-primary); text-decoration:none;
}
#school-kmc-find .login-header h2{ font-size:20px; font-weight:700; margin:var(--kmc-s3) 0 var(--kmc-s1); }
#school-kmc-find .login-header p{ font-size:12px; color:var(--kmc-label-neutral); }

#school-kmc-find .kmc-sent-note{
  background:var(--kmc-bg2); border-radius:var(--kmc-r-sm); padding:var(--kmc-s3) var(--kmc-s4);
  margin-bottom:var(--kmc-s4); font-size:13px; color:var(--kmc-label-normal); line-height:1.6;
}
#school-kmc-find .kmc-sent-note strong{ color:var(--kmc-label-strong); }

/* 남은 시간을 칸 **안쪽**에 겹친다 — 별도 줄로 빼면 눈이 한 번 더 움직인다. */
#school-kmc-find .kmc-code-wrap{ position:relative; flex:1 1 auto; }
#school-kmc-find .kmc-code-wrap .full-input{ width:100%; box-sizing:border-box; padding-right:64px; }
#school-kmc-find .kmc-code-count{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:13px; font-weight:700; color:var(--kmc-primary); pointer-events:none;
}

/* 찾은 아이디 — 주황 박스에 크게 */
#school-kmc-find .kmc-id-box{
  background:var(--kmc-primary-subtle); border-radius:var(--kmc-r-sm);
  padding:var(--kmc-s5); text-align:center;
}
#school-kmc-find .kmc-id-box-label{ font-size:12px; font-weight:700; color:var(--kmc-label-neutral); }
#school-kmc-find .kmc-id-box-value{ font-size:24px; font-weight:700; color:var(--kmc-primary); margin-top:var(--kmc-s2); word-break:break-all; }
#school-kmc-find .kmc-id-box-date{ font-size:12px; color:var(--kmc-label-neutral); margin-top:var(--kmc-s2); }

#school-kmc-find .kmc-done-circle{
  width:52px; height:52px; margin:0 auto var(--kmc-s3);
  border-radius:var(--kmc-r-full); background:var(--kmc-pos-bg); color:var(--kmc-pos-text);
  font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
#school-kmc-body .kmc-support-line{ margin-top:var(--kmc-s2); font-size:12px; color:var(--kmc-label-alt); }

/* 고른 탭·안내 문구의 **민트 배경을 뺀다**(2026-08-21 담당자 지시).
   민트(`#e6f7f6`)는 옛 팔레트 잔재다 — 지금 주색은 주황(`--kmc-primary`)이라 화면에 두 계열이 섞여 보였다.
   고른 탭은 **테두리·글자색만으로** 구분하고(카드 흰색이 그대로 비친다),
   안내 문구도 상자를 없애고 글자만 남긴다. ⚠️ **실패(빨간 상자)는 그대로 둔다** — 그건 눈에 띄어야 한다. */
#school-kmc-find .kmc-find-tab.active{
  color:var(--kmc-primary); border-color:var(--kmc-primary); background:transparent;
}
#school-kmc-login .kmc-find-msg.is-ok,
#school-kmc-find .kmc-find-msg.is-ok{
  background:transparent; color:var(--kmc-label-normal); padding:var(--kmc-s2) 0;
}

/* 테스트 모드 배너 — 켜져 있는 걸 눈으로 알 수 있게. 끄면 이 줄 자체가 안 나온다. */
#school-kmc-join-v2 .kmc-testmode{
  background:var(--kmc-pend-bg); color:var(--kmc-pend-text);
  border-radius:var(--kmc-r-sm); padding:var(--kmc-s3) var(--kmc-s4);
  margin-bottom:var(--kmc-s4); font-size:13px; font-weight:600; line-height:1.5;
}

/* 칸 아래 성공 표시 — 힌트·성공·오류가 같은 자리를 번갈아 쓴다(AUTH_DESIGN §5-5) */
#school-kmc-join-v2 .join-field-ok{
  margin-top:5px; font-size:12px; line-height:1.5; color:var(--kmc-pos-text); font-weight:600;
}
#school-kmc-join-v2 .input-group.is-ok .kmc-find-hint{ display:none; }
#school-kmc-join-v2 .input-group.is-ok input{ border-color:var(--kmc-pos-text); }

/* ── 마이페이지 (AUTH_DESIGN §5-4) ──────────────────────────────── */
/* ⚠️ `align-items:center` 를 쓰지 않는다(AUTH_DESIGN §2-1) — 내용이 화면보다 길어지면
   **위쪽이 잘려 스크롤로도 못 본다.** flex 항목에 `margin:auto` 를 주면 남는 공간이 있을 때만
   가운데로 밀고, 모자라면 위에서부터 흐른다. 로그인·가입도 같은 방식이다. */
#school-kmc-mypage-body{ background:var(--kmc-bg2); min-height:100vh; display:flex; align-items:normal; overflow-y:auto; padding:var(--kmc-s8) var(--kmc-s5); }
#school-kmc-mypage{
  width:100%; max-width:760px; margin:auto;      /* 가입 폼과 같은 폭 · 상하 가운데 */
  background:var(--kmc-bg); border-radius:var(--kmc-r-md); box-shadow:var(--kmc-elev1);
  padding:var(--kmc-s6) var(--kmc-s6) var(--kmc-s7);
  font-family:'SUIT Variable','SUIT',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
}
#school-kmc-mypage .mp-back{
  background:none !important; border:none; padding:0; cursor:pointer;
  font-size:13px; font-weight:700; color:var(--kmc-primary) !important;
}
#school-kmc-mypage .mp-header{ margin:var(--kmc-s4) 0 var(--kmc-s5); }
#school-kmc-mypage .mp-header h2{ font-size:20px; font-weight:700; color:var(--kmc-label-strong); margin:0 0 var(--kmc-s1); }
#school-kmc-mypage .mp-sub{ font-size:12px; color:var(--kmc-label-neutral); margin:0; }

#school-kmc-mypage .mp-field{ margin-bottom:var(--kmc-s3); }
#school-kmc-mypage .mp-field label{ display:block; font-size:12px; font-weight:700; color:var(--kmc-label-neutral); margin-bottom:var(--kmc-s2); }
#school-kmc-mypage .mp-value{
  min-height:44px; display:flex; align-items:center; padding:0 var(--kmc-s4);
  background:var(--kmc-bg2); border:1px solid var(--kmc-line); border-radius:var(--kmc-r-sm);
  font-size:14px; color:var(--kmc-label-strong); word-break:break-all;
}
#school-kmc-mypage .mp-divider{ border-top:1px solid var(--kmc-bg-alt); margin-top:var(--kmc-s4); padding-top:var(--kmc-s4); }
#school-kmc-mypage .mp-pw-toggle{
  background:none !important; border:none; padding:0; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--kmc-label-neutral) !important; text-decoration:underline;
}
#school-kmc-mypage .mp-pw-form{ margin-top:var(--kmc-s3); }
#school-kmc-mypage .input-group{ margin-bottom:var(--kmc-s3); }
#school-kmc-mypage .input-group label{ display:block; font-size:12px; font-weight:700; color:var(--kmc-label-neutral); margin-bottom:var(--kmc-s2); }
#school-kmc-mypage .full-input{
  width:100%; box-sizing:border-box; height:44px; padding:0 var(--kmc-s4); font-size:14px;
  border:1px solid var(--kmc-line); border-radius:var(--kmc-r-sm); background:var(--kmc-bg); color:var(--kmc-label-strong);
}
#school-kmc-mypage .full-input:focus{ border-color:var(--kmc-primary); outline:none; box-shadow:0 0 0 3px var(--kmc-primary-subtle); }
#school-kmc-mypage .kmc-find-hint{ margin-top:var(--kmc-s2); font-size:12px; color:var(--kmc-label-alt); line-height:1.5; }
#school-kmc-mypage .mp-pw-actions{ display:flex; gap:var(--kmc-s2); margin-top:var(--kmc-s3); }
#school-kmc-mypage .mp-pw-actions button{ flex:1 1 0; height:44px; border-radius:var(--kmc-r-sm); font-size:14px; font-weight:700; cursor:pointer; border:none; }
#school-kmc-mypage .mp-btn-ghost{ background:var(--kmc-bg) !important; color:var(--kmc-label-neutral) !important; box-shadow:inset 0 0 0 1px var(--kmc-line); }
#school-kmc-mypage .mp-btn-primary{ background:var(--kmc-primary) !important; color:#fff !important; }
#school-kmc-mypage .mp-msg{ margin-top:var(--kmc-s3); padding:var(--kmc-s3); border-radius:var(--kmc-r-sm); font-size:13px; background:var(--kmc-neg-bg); color:var(--kmc-neg-text); }
#school-kmc-mypage .mp-msg.is-ok{ background:var(--kmc-pos-bg); color:var(--kmc-pos-text); }
#school-kmc-mypage .mp-logout{
  display:block; margin-top:var(--kmc-s5); height:48px; line-height:48px; text-align:center;
  background:var(--kmc-primary); color:#fff !important; border-radius:var(--kmc-r-sm);
  font-size:16px; font-weight:700; text-decoration:none;
}

/* ── 시설 정보 요약 한 줄 (설계 §4-2-2) ─────────────────────────── */
#school-kmc-join-v2 .kmc-facility-summary{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--kmc-s3);
  min-height:44px; padding:var(--kmc-s2) var(--kmc-s4);
  background:var(--kmc-bg) !important; border:none !important; border-radius:var(--kmc-r-sm);
  box-shadow:inset 0 0 0 1px var(--kmc-line) !important; cursor:pointer; text-align:left;
}
#school-kmc-join-v2 .kmc-facility-summary-name{ font-size:14px; font-weight:600; color:var(--kmc-label-strong); word-break:break-all; }
#school-kmc-join-v2 .kmc-facility-summary-name.is-empty{ font-weight:400; color:var(--kmc-label-alt); }
#school-kmc-join-v2 .kmc-facility-summary-edit{ flex:0 0 auto; font-size:13px; font-weight:700; color:var(--kmc-primary); }
#school-kmc-join-v2 .kmc-modal-card--wide{ max-width:520px; }

/* 동의 */
#school-kmc-join-v2 .kmc-check{ display:flex; align-items:center; gap:var(--kmc-s2); margin:0 0 var(--kmc-s2); font-size:13px; color:var(--kmc-label-normal); cursor:pointer; }
#school-kmc-join-v2 .kmc-check--all{ padding-bottom:var(--kmc-s2); margin-bottom:var(--kmc-s3); border-bottom:1px solid var(--kmc-bg-alt); font-weight:700; color:var(--kmc-label-strong); }
#school-kmc-join-v2 .kmc-check input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0; cursor:pointer; flex:0 0 auto;
  border:1px solid var(--kmc-line); border-radius:var(--kmc-r-xs); background:var(--kmc-bg);
}
#school-kmc-join-v2 .kmc-check input[type="checkbox"]:checked{
  background:var(--kmc-primary); border-color:var(--kmc-primary);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size:14px 14px; background-position:center; background-repeat:no-repeat;
}
#school-kmc-body .join-legal{ margin-top:var(--kmc-s2); font-size:12px; color:var(--kmc-label-alt); }
#school-kmc-body .join-legal a{ color:var(--kmc-label-neutral); font-weight:600; }

/* 직접 입력(설계 §4-2-2 · 2026-08-20). 마스터에 행을 만들지 않는다 — 이름만 신청서에 담긴다. */
#school-kmc-join-v2 .kmc-modal-manual{ margin-top:var(--kmc-s4); padding-top:var(--kmc-s4); border-top:1px solid var(--kmc-bg-alt); }
#school-kmc-join-v2 .kmc-manual-toggle {
  background:none !important; border:none; padding:0; cursor:pointer;
  font-size:13px; font-weight:700; color:var(--kmc-primary) !important;
}

/* 시설 정보를 덜 채우고 닫았을 때 — 요약 줄이 그걸 드러낸다(취소는 허용하되 눈에 보이게). */
#school-kmc-join-v2 .kmc-facility-summary-name.is-warn{ color:var(--kmc-pend-text); font-weight:600; }

/* ── 마이페이지 구역 (담당자 2026-08-20 · 내 정보 / 이메일 / 소속 / 비밀번호) ───── */
#school-kmc-mypage .mp-section{ padding-top:var(--kmc-s4); margin-top:var(--kmc-s4); border-top:1px solid var(--kmc-bg-alt); }
#school-kmc-mypage .mp-section:first-of-type{ padding-top:0; margin-top:var(--kmc-s3); border-top:none; }
#school-kmc-mypage .mp-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--kmc-s3); }
#school-kmc-mypage .mp-section-title{ font-size:14px; font-weight:700; color:var(--kmc-label-strong); }
#school-kmc-mypage .mp-link{
  background:none !important; border:none; padding:0; cursor:pointer;
  font-size:13px; font-weight:700; color:var(--kmc-primary) !important;
}
/* 못 고치는 값은 그렇게 보이게 한다 — 눌러도 되는 줄 알면 그게 더 나쁘다. */
#school-kmc-mypage .mp-value.is-locked{ color:var(--kmc-label-neutral); background:var(--kmc-bg-alt); }
#school-kmc-mypage .mp-actions{ display:flex; gap:var(--kmc-s2); margin-top:var(--kmc-s3); }
#school-kmc-mypage .mp-actions button{ flex:1 1 0; height:44px; border-radius:var(--kmc-r-sm); font-size:14px; font-weight:700; cursor:pointer; border:none; }
#school-kmc-mypage .flex-row{ display:flex; gap:var(--kmc-s2); align-items:stretch; }
#school-kmc-mypage .flex-input{ flex:1 1 auto; min-width:0; }
#school-kmc-mypage .btn-check{
  height:44px; padding:0 var(--kmc-s4); white-space:nowrap; border:none; cursor:pointer;
  border-radius:var(--kmc-r-sm); font-size:13px; font-weight:700;
  background:var(--kmc-bg) !important; color:var(--kmc-primary) !important;
  box-shadow:inset 0 0 0 1px var(--kmc-primary) !important;
}
#school-kmc-mypage .btn-check:disabled{ color:var(--kmc-label-alt) !important; box-shadow:inset 0 0 0 1px var(--kmc-line) !important; }
#school-kmc-mypage .mp-btn-primary:disabled{ opacity:.5; cursor:default; }
#school-kmc-mypage .join-field-err{ margin-top:5px; font-size:12px; color:var(--kmc-neg-text); }
#school-kmc-mypage .join-field-ok{ margin-top:5px; font-size:12px; font-weight:600; color:var(--kmc-pos-text); }
#school-kmc-mypage .input-group.is-error input{ border-color:var(--kmc-neg-text); }
#school-kmc-mypage .input-group.is-ok input{ border-color:var(--kmc-pos-text); }
#school-kmc-mypage .input-group.is-error .kmc-find-hint,
#school-kmc-mypage .input-group.is-ok .kmc-find-hint{ display:none; }

/* 마이페이지 주소 검색 결과 */
#school-kmc-mypage .mp-addr-list{ margin-top:var(--kmc-s2); }
#school-kmc-mypage .mp-addr-row{
  display:block; width:100%; text-align:left; background:none !important; border:none;
  border-bottom:1px solid var(--kmc-bg-alt); padding:var(--kmc-s3) 0; cursor:pointer;
  font-size:13px; color:var(--kmc-label-strong);
}
#school-kmc-mypage .mp-addr-row:hover{ background:var(--kmc-bg2) !important; }
#school-kmc-mypage .mp-zip{
  display:inline-block; margin-right:var(--kmc-s2); padding:2px 8px; border-radius:var(--kmc-r-xs);
  background:var(--kmc-primary-subtle); color:var(--kmc-primary); font-size:12px; font-weight:700;
}
#school-kmc-mypage .mp-addr-empty{ padding:var(--kmc-s3) 0; font-size:12px; color:var(--kmc-label-alt); }


/* ── 마이페이지 2단 (담당자 2026-08-20 · 가입 폼과 같은 폭·되접기) ─────────── */
#school-kmc-mypage.is-wide{ max-width:760px; }
/* 일반 관리자는 시설 정보 구역이 없어 오른쪽이 빈다 — 그때는 좁은 1단으로 간다. */
#school-kmc-mypage.is-narrow{ max-width:460px; }

#school-kmc-mypage .mp-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:0 var(--kmc-s6); align-items:start;
}
#school-kmc-mypage.is-narrow .mp-cols{ grid-template-columns:1fr; }
/* 각 단의 첫 구역은 위 구분선을 지운다 — 안 그러면 오른쪽 단 머리에 선이 뜬다. */
#school-kmc-mypage .mp-col > .mp-section:first-child{ padding-top:0; margin-top:var(--kmc-s3); border-top:none; }

/* 로그아웃 — 두 단을 가로지르는 자리에, 가로·세로 다 가운데 */
#school-kmc-mypage .mp-foot{ display:flex; justify-content:center; margin-top:var(--kmc-s6); }
#school-kmc-mypage .mp-logout{
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box; width:auto; min-width:240px; height:48px; padding:0 var(--kmc-s5);
  line-height:1; margin-top:0; border:none; cursor:pointer;
  background:var(--kmc-primary); color:#fff !important; border-radius:var(--kmc-r-sm);
  font-size:16px; font-weight:700; text-decoration:none;
}

/* 다른 주황 버튼과 같은 방식 — 색을 새로 만들지 않는다(디자인 §3-2). */
#school-kmc-mypage .mp-logout:hover{ filter:brightness(.95); }

@media (max-width:860px){
  #school-kmc-mypage.is-wide{ max-width:460px; }
  #school-kmc-mypage .mp-cols{ grid-template-columns:1fr; }
  #school-kmc-mypage .mp-col + .mp-col > .mp-section:first-child{
    padding-top:var(--kmc-s4); margin-top:var(--kmc-s4); border-top:1px solid var(--kmc-bg-alt);
  }
  #school-kmc-mypage .mp-logout{ width:100%; min-width:0; }
}