/* =============================================
   나루컬쳐 회원 페이지 전용 CSS
   파일: /member/css/member.css
   ※ 기존 공통 CSS와 충돌 방지를 위해
      .naru-login- / .naru-form- / .naru-btn- 
      네임스페이스로 스코핑
============================================= */

/* --- 레이아웃 래퍼 --- */
.naru-login-wrap {
    max-width: 960px;
    margin: 60px auto 80px;
    padding: 0 16px;
}

/* --- 페이지 헤더 --- */
.naru-login-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 2px solid #0057b8;
}

.naru-login-title {
    font-size: 28px;
    font-weight: 700;
    color: #0057b8;
    margin: 0 0 8px;
}

.naru-login-desc {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* --- 바디 (2단 레이아웃) --- */
.naru-login-body {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

/* --- 일반 로그인 박스 --- */
.naru-login-form-box {
    flex: 1;
    padding-right: 40px;
}

/* --- 구분선 --- */
.naru-login-divider {
    width: 1px;
    align-self: stretch;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.naru-login-divider span {
    background: #fff;
    padding: 8px 0;
    font-size: 13px;
    color: #aaa;
    position: absolute;
    writing-mode: vertical-lr;
    letter-spacing: 2px;
}

/* --- SNS / 기관 박스 --- */
.naru-login-side {
    flex: 1;
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* --- 소제목 --- */
.naru-login-box-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* --- 폼 그룹 --- */
.naru-form-group {
    margin-bottom: 14px;
}

.naru-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.naru-form-group input[type="text"],
.naru-form-group input[type="password"] {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.naru-form-group input:focus {
    border-color: #0057b8;
}

/* --- 옵션 (아이디 저장 / 찾기 링크) --- */
.naru-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.naru-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}

.naru-checkbox input[type="checkbox"] {
    accent-color: #0057b8;
    width: 15px;
    height: 15px;
}

.naru-form-links {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.naru-form-links a {
    color: #555;
    text-decoration: none;
}

.naru-form-links a:hover {
    color: #0057b8;
    text-decoration: underline;
}

.naru-divider {
    color: #ccc;
}

/* --- 로그인 버튼 --- */
.naru-btn-login {
    width: 100%;
    height: 48px;
    background: #0057b8;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.naru-btn-login:hover {
    background: #004099;
}

/* --- 회원가입 유도 --- */
.naru-login-register {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    color: #666;
}

.naru-btn-join {
    padding: 8px 20px;
    border: 1px solid #0057b8;
    border-radius: 4px;
    color: #0057b8;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.naru-btn-join:hover {
    background: #0057b8;
    color: #fff;
}

/* --- SNS 설명 텍스트 --- */
.naru-sns-desc {
    font-size: 13px;
    color: #666;
    margin: 0 0 14px;
}

/* --- SNS 버튼 --- */
.naru-sns-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.naru-btn-sns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s;
}

.naru-btn-sns:hover {
    opacity: 0.88;
}

.naru-btn-naver {
    background: #03c75a;
    color: #fff;
}

.naru-btn-kakao {
    background: #fee500;
    color: #3c1e1e;
}

.naru-sns-icon {
    font-size: 16px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 4px;
}

.naru-sns-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* --- 기관/단체 버튼 --- */
.naru-btn-org {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    background: #1a2e5a;
    color: #fff;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
}

.naru-btn-org:hover {
    background: #0f1f40;
}

/* --- 반응형 --- */
@media (max-width: 768px) {
    .naru-login-body {
        flex-direction: column;
    }

    .naru-login-form-box {
        padding-right: 0;
        width: 100%;
    }

    .naru-login-divider {
        width: 100%;
        height: 1px;
        margin: 32px 0;
    }

    .naru-login-divider span {
        writing-mode: horizontal-tb;
        padding: 0 12px;
    }

    .naru-login-side {
        padding-left: 0;
        width: 100%;
    }
}
/* =============================================
   나루컬쳐 회원가입 전용 CSS
   기존 member.css 하단에 추가
============================================= */

/* --- 공통 유틸 --- */
.naru-hidden { display: none !important; }
.naru-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}

/* --- 가입 래퍼 --- */
.naru-join-wrap {
    max-width: 100%;
    margin: auto;
    padding: 0 16px;
    width: 100%;
}

/* --- 페이지 타이틀 --- */
.naru-join-header {
    text-align: center;
    padding: 32px 0 20px;
    background: #eef2fb;
    margin: 0 -16px 40px;
    width: 100%;
}

.naru-join-title {
    font-size: 32px;
    font-weight: 800;
    color: #0057b8;
    margin: 0;
}

/* --- 스텝 바 --- */
.naru-step-bar {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 48px;
    position: relative;
}

.naru-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    max-width: 160px;
}

.naru-step-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #ccc;
    transition: border-color 0.3s, color 0.3s, background 0.3s;
    z-index: 1;
}

.naru-step-icon svg {
    width: 32px;
    height: 32px;
}

.naru-step-label {
    font-size: 13px;
    color: #aaa;
    margin-top: 8px;
    font-weight: 600;
    transition: color 0.3s;
    white-space: nowrap;
}

/* 연결선 */
.naru-step-bar-line {
    position: absolute;
    top: 32px;
    left: calc(50% + 32px);
    width: calc(100% - 32px);
    height: 2px;
    background: #ddd;
    transition: background 0.3s;
    z-index: 0;
}

/* active */
.naru-step.active .naru-step-icon {
    border-color: #0057b8;
    color: #0057b8;
    background: #e8f0fb;
}
.naru-step.active .naru-step-label { color: #0057b8; }

/* done */
.naru-step.done .naru-step-icon {
    border-color: #0057b8;
    background: #0057b8;
    color: #fff;
}
.naru-step.done .naru-step-label { color: #0057b8; }
.naru-step.done .naru-step-bar-line { background: #0057b8; }

/* --- 가입 안내문 --- */
.naru-join-intro {
    font-size: 14px;
    color: #555;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

/* --- 전체동의 --- */
.naru-agree-all {
    background: #eef2fb;
    border: 1px solid #c2d4ef;
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.naru-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.naru-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #0057b8;
    cursor: pointer;
}

/* --- 약관 섹션 --- */
.naru-agree-section {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 16px;
    overflow: hidden;
}

.naru-agree-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #f8f9fc;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: #222;
}

.naru-agree-radios {
    display: flex;
    gap: 16px;
    font-size: 13px;
    font-weight: 400;
    color: #444;
}

.naru-agree-radios label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.naru-agree-radios input[type="radio"] {
    accent-color: #0057b8;
    width: 15px;
    height: 15px;
}

.naru-agree-scroll {
    height: 140px;
    overflow-y: auto;
    padding: 16px 18px;
    font-size: 13px;
    color: #555;
    line-height: 1.8;
    background: #fff;
}

.naru-agree-scroll--sm { height: 80px; }

.naru-agree-scroll p { margin: 0 0 12px; }

.naru-required { color: #e53e3e; font-style: normal; margin-left: 2px; }
.naru-optional { color: #888; font-style: normal; margin-left: 2px; }

/* --- 회원유형 탭 --- */
.naru-member-type-tabs {
    display: flex;
    border-bottom: 2px solid #0057b8;
    margin-bottom: 32px;
    gap: 0;
}

.naru-type-tab {
    flex: 1;
    padding: 14px;
    background: #f4f6fb;
    border: 1px solid #ddd;
    border-bottom: none;
    font-size: 15px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.naru-type-tab:first-child { border-radius: 4px 0 0 0; }
.naru-type-tab:last-child  { border-radius: 0 4px 0 0; }

.naru-type-tab.active {
    background: #0057b8;
    color: #fff;
    border-color: #0057b8;
}

/* --- 폼 필드 --- */
.naru-member-form { }

.naru-field-row {
    display: flex;
    gap: 20px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.naru-field-group {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.naru-field-full { flex: 100% !important; min-width: 100%; }

.naru-field-group label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.naru-field-group input[type="text"],
.naru-field-group input[type="password"],
.naru-field-group input[type="email"],
.naru-field-group input[type="tel"],
.naru-field-group select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

.naru-field-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.naru-field-group input:focus,
.naru-field-group select:focus {
    border-color: #0057b8;
}

/* 라디오 그룹 */
.naru-radio-group {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 44px;
}

.naru-radio-group label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 400;
    color: #444;
    cursor: pointer;
}

.naru-radio-group input[type="radio"] {
    accent-color: #0057b8;
    width: 16px;
    height: 16px;
}

/* 입력 + 버튼 조합 */
.naru-input-with-btn {
    display: flex;
    gap: 8px;
}

.naru-input-with-btn input {
    flex: 1;
}

.naru-btn-check {
    padding: 0 14px;
    height: 44px;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #0057b8;
    border-radius: 4px;
    color: #0057b8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.naru-btn-check:hover {
    background: #0057b8;
    color: #fff;
}

/* --- 버튼 그룹 --- */
.naru-join-btn-group {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.naru-join-btn-center { justify-content: center; }

.naru-btn-primary {
    padding: 0 40px;
    height: 50px;
    background: #0057b8;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.naru-btn-primary:hover { background: #004099; }

.naru-btn-secondary {
    padding: 0 40px;
    height: 50px;
    background: #fff;
    color: #555;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s;
}

.naru-btn-secondary:hover { border-color: #0057b8; color: #0057b8; }

/* --- 가입완료 --- */
.naru-join-complete {
    text-align: center;
    padding: 60px 20px;
}

.naru-join-complete-icon svg {
    width: 80px;
    height: 80px;
}

.naru-join-complete-title {
    font-size: 22px;
    font-weight: 700;
    color: #0057b8;
    margin: 20px 0 10px;
}

.naru-join-complete-msg {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 36px;
}

/* =============================================
   반응형 — 태블릿 (768px 이하)
============================================= */
@media (max-width: 768px) {

    .naru-join-title { font-size: 24px; }

    .naru-step-icon { width: 52px; height: 52px; }
    .naru-step-icon svg { width: 26px; height: 26px; }
    .naru-step-bar-line { top: 26px; left: calc(50% + 26px); width: calc(100% - 26px); }
    .naru-step-label { font-size: 11px; }

    .naru-field-row { flex-direction: column; gap: 14px; }
    .naru-field-group { min-width: 100%; }
    .naru-field-full { flex: 1 !important; min-width: 100%; }

    .naru-agree-section-title { flex-direction: column; align-items: flex-start; }

    .naru-type-tab { font-size: 13px; padding: 12px 8px; }
}

/* =============================================
   반응형 — 모바일 (480px 이하)
============================================= */
@media (max-width: 480px) {

    .naru-join-wrap {margin: auto;padding: 0;}
    .naru-join-header {padding: 24px 0 16px;margin: 0 auto 40px;}
    .naru-join-title { font-size: 20px; }

    .naru-step-bar { gap: 0; }
    .naru-step { max-width: none; }
    .naru-step-icon { width: 44px; height: 44px; }
    .naru-step-icon svg { width: 22px; height: 22px; }
    .naru-step-bar-line { top: 22px; left: calc(50% + 22px); width: calc(100% - 22px); }
    .naru-step-label { font-size: 10px; }

    .naru-input-with-btn { flex-direction: column; }
    .naru-btn-check { width: 100%; height: 40px; }

    .naru-btn-primary,
    .naru-btn-secondary {
        width: 100%;
        padding: 0 20px;
    }

    .naru-agree-scroll { height: 110px; }

    .naru-member-type-tabs { flex-direction: column; border-bottom: none; }
    .naru-type-tab { border-radius: 0; border: 1px solid #ddd; }
    .naru-type-tab:first-child { border-radius: 4px 4px 0 0; }
    .naru-type-tab:last-child  { border-radius: 0 0 4px 4px; border-top: none; }
}

/* ================================================
   join_form.css — jf- prefix
   container는 외부에 있음, 내부 width:100% 기준
================================================ */

.jf-hide { display: none !important; }

/* 타이틀 */
.jf-title-bar {
    text-align: center;
    padding: 28px 0 22px;
    background: #eef2fb;
    margin-bottom: 36px;
}
.jf-title-bar h2 {
    font-size: 28px;
    font-weight: 800;
    color: #0d2260;
    margin: 0;
    letter-spacing: -0.5px;
}

/* 스텝바 */
.jf-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 32px;
    padding: 0;
}
.jf-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 160px;
}
.jf-step-ico {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #cdd5e2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #cdd5e2;
    position: relative;
    z-index: 1;
}
.jf-step-ico svg { width: 26px; height: 26px; }
.jf-step > span {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #b0bac8;
    white-space: nowrap;
}
.jf-step-line {
    position: absolute;
    top: 29px;
    left: calc(50% + 31px);
    width: calc(100% - 31px);
    height: 2px;
    background: #cdd5e2;
    z-index: 0;
}
.jf-step.done .jf-step-ico  { border-color: #0057b8; background: #0057b8; color: #fff; }
.jf-step.done > span         { color: #0057b8; }
.jf-step.done .jf-step-line  { background: #0057b8; }
.jf-step.active .jf-step-ico { border: 2.5px solid #0057b8; background: #fff; color: #0057b8; }
.jf-step.active > span       { color: #0057b8; font-weight: 700; }

/* 탭 */
.jf-tabs {
    display: flex;
    flex-direction: row;
    border-bottom: 3px solid #0057b8;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}
.jf-tab {
    flex: 1;
    height: 50px;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: -0.3px;
    cursor: pointer;
    border: 1px solid #dde3ef;
    border-bottom: none;
    background: #f2f4f9;
    color: #aab2c2;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    box-sizing: border-box;
}
.jf-tab:first-child { border-radius: 5px 0 0 0; }
.jf-tab:last-child  { border-radius: 0 5px 0 0; border-left: none; }
.jf-tab.active      { background: #0057b8; color: #fff; border-color: #0057b8; }
.jf-tab:not(.active):hover { background: #dce6f5; color: #0057b8; }

/* form 초기화 */
.jf-form {
    border: none !important;
    margin: 0;
    padding: 0;
    background: none;
}

/* 테이블 */
.jf-tbl {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #0057b8;
    margin-bottom: 40px;
    table-layout: fixed;
}
.jf-tbl colgroup col:first-child { width: 170px; }

.jf-tbl th {
    padding: 15px 20px;
    background: #f5f7fb;
    border-bottom: 1px solid #dde3ef;
    font-size: 14px;
    font-weight: 700;
    color: #1a2a50;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
}
.jf-tbl th em {
    color: #e53e3e;
    font-style: normal;
    margin-left: 2px;
}
.jf-tbl td {
    padding: 11px 20px;
    border-bottom: 1px solid #dde3ef;
    vertical-align: middle;
}

/* input 공통 */
.jf-tbl input[type="text"],
.jf-tbl input[type="password"],
.jf-tbl input[type="tel"] {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid #c8cfe0;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    color: #222;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}
.jf-tbl input[type="text"]:focus,
.jf-tbl input[type="password"]:focus,
.jf-tbl input[type="tel"]:focus {
    border-color: #0057b8;
    background: #f5f9ff;
}

/* select 공통 */
.jf-tbl select {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 34px 0 13px;
    border: 1px solid #c8cfe0;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    color: #222;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}
.jf-tbl select:focus { border-color: #0057b8; }

/* input + 중복확인 버튼 */
.jf-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.jf-input-row input { flex: 1; min-width: 0; }
.jf-btn-dup {
    flex-shrink: 0;
    height: 44px;
    padding: 0 18px;
    background: #0057b8;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.jf-btn-dup:hover { background: #004299; }

/* 전화번호 */
.jf-phone {
    display: flex;
    align-items: center;
    gap: 6px;
}
.jf-phone select {
    display: inline-block;
    width: 88px;
    flex-shrink: 0;
}
.jf-phone input {
    display: inline-block !important;
    width: 88px !important;
    flex-shrink: 0;
    text-align: center;
}
.jf-phone > span {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    color: #aaa;
    line-height: 44px;
}

/* 이메일 */
.jf-email {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.jf-email input {
    display: inline-block !important;
    flex: 1;
    min-width: 80px;
}
.jf-email select {
    display: inline-block;
    width: 140px;
    flex-shrink: 0;
}
.jf-email > span {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    color: #555;
    line-height: 44px;
}

/* 라디오 */
.jf-radios {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 44px;
}
.jf-radios label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #333;
    cursor: pointer;
}
.jf-radios input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #0057b8;
    cursor: pointer;
}

/* 힌트/메시지 */
.jf-hint {
    display: block;
    font-size: 12px;
    color: #0057b8;
    margin: 5px 0 0;
    line-height: 1.6;
}
.jf-msg {
    display: block;
    font-size: 12px;
    margin: 3px 0 0;
    min-height: 14px;
}
.jf-msg.ok  { color: #1e7e40; }
.jf-msg.err { color: #e53e3e; }

/* 하단 버튼 */
.jf-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 8px;
    flex-wrap: wrap;
}
.jf-btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 52px;
    background: #fff;
    color: #666;
    border: 1.5px solid #c0c8d8;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
    box-sizing: border-box;
}
.jf-btn-cancel:hover { border-color: #0057b8; color: #0057b8; }
.jf-btn-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 52px;
    background: #0057b8;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
    box-sizing: border-box;
}
.jf-btn-ok:hover { background: #004299; }

/* 가입완료 */
.jf-complete-wrap {
    text-align: center;
    padding: 60px 20px 80px;
}
.jf-complete-ico { margin: 0 auto 28px; width: 90px; height: 90px; }
.jf-complete-ico svg { width: 90px; height: 90px; }
.jf-complete-title {
    font-size: 26px;
    font-weight: 800;
    color: #0d2260;
    margin: 0 0 16px;
}
.jf-complete-msg {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin: 0 0 40px;
}
.jf-complete-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ============================================
   반응형 768px
============================================ */
@media (max-width: 768px) {
    .jf-step { flex: 0 0 120px; }
    .jf-step-ico { width: 52px; height: 52px; }
    .jf-step-ico svg { width: 22px; height: 22px; }
    .jf-step-line { top: 25px; left: calc(50% + 27px); width: calc(100% - 27px); }
    .jf-step > span { font-size: 12px; }
    .jf-tbl colgroup col:first-child { width: 130px; }
    .jf-tbl th { padding: 13px 14px; font-size: 13px; }
    .jf-tbl td { padding: 10px 14px; }
    .jf-tab { font-size: 14px; height: 46px; }
}

@media (max-width: 600px) {

    .jf-title-bar { padding: 20px 0 16px; margin-bottom: 24px; }
    .jf-title-bar h2 { font-size: 22px; }

    /* 스텝 */
    .jf-step { flex: 1; }
    .jf-step-ico { width: 46px; height: 46px; }
    .jf-step-ico svg { width: 20px; height: 20px; }
    .jf-step-line { top: 22px; left: calc(50% + 24px); width: calc(100% - 24px); }
    .jf-step > span { font-size: 10px; margin-top: 6px; }

    /* 탭 — 절대 세로로 쌓으면 안 됨, 가로 유지 */
    .jf-tabs {
        flex-direction: row !important;
        border-bottom: 3px solid #0057b8;
    }
    .jf-tab {
        flex: 1;
        height: 44px;
        font-size: 13px !important;
        padding: 0 4px;
        border-radius: 0 !important;
        border: 1px solid #dde3ef;
        border-bottom: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .jf-tab:first-child { border-radius: 5px 0 0 0 !important; }
    .jf-tab:last-child  { border-radius: 0 5px 0 0 !important; border-left: none; }
    .jf-tab.active { border-color: #0057b8; }

    /* 테이블 → 블록 */
    .jf-tbl,
    .jf-tbl tbody,
    .jf-tbl tr,
    .jf-tbl th,
    .jf-tbl td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .jf-tbl colgroup { display: none; }
    .jf-tbl tr { border-bottom: 1px solid #dde3ef; }
    .jf-tbl tr:last-child { border-bottom: none; }
    .jf-tbl th {
        padding: 12px 14px 4px;
        border-bottom: none;
        background: #f5f7fb;
        white-space: normal;
    }
    .jf-tbl td {
        padding: 6px 14px 14px;
        border-bottom: none;
        background: #fff;
    }

    /* input 100% */
    .jf-tbl input[type="text"],
    .jf-tbl input[type="password"],
    .jf-tbl input[type="tel"] {
        width: 100% !important;
    }

    /* input + 버튼: 버튼은 우측 고정, 절대 아래로 안 떨어짐 */
    .jf-input-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
    }
    .jf-input-row input { flex: 1; min-width: 0; }
    .jf-btn-dup {
        flex-shrink: 0;
        width: auto;
        padding: 0 14px;
        font-size: 13px;
    }

    /* 600px 이하 — 전화번호 */
.jf-phone {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.jf-phone select {
    width: 72px;
    flex-shrink: 0;
    min-width: 0;
    font-size: 13px;
}
.jf-phone input {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: center;
    font-size: 14px;
}
.jf-phone > span {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 44px;
    color: #aaa;
}


    /* 이메일 select 전체폭 */
    .jf-email { gap: 5px; }
    .jf-email select { width: 100%; flex: 0 0 100%; margin-top: 4px; }

    /* 하단 버튼 */
    .jf-btns { flex-direction: column; align-items: stretch; gap: 10px; }
    .jf-btn-cancel, .jf-btn-ok { width: 100%; }

    /* 가입완료 */
    .jf-complete-wrap { padding: 40px 16px 60px; }
    .jf-complete-title { font-size: 20px; }
    .jf-complete-msg { font-size: 14px; }
    .jf-complete-btns { flex-direction: column; align-items: center; gap: 10px; }
    .jf-complete-btns .jf-btn-cancel,
    .jf-complete-btns .jf-btn-ok { width: 100%; }
}

/* ==============================================
   가입완료 (join_complete)
   클래스 prefix: jf-complete-
============================================== */

.jf-complete-wrap {
    text-align: center;
    padding: 60px 20px 80px;
}

.jf-complete-ico {
    margin: 0 auto 28px;
    width: 90px;
    height: 90px;
}

.jf-complete-ico svg {
    width: 90px;
    height: 90px;
}

.jf-complete-title {
    font-size: 26px;
    font-weight: 800;
    color: #0d2260;
    margin: 0 0 16px;
    letter-spacing: -.5px;
}

.jf-complete-msg {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin: 0 0 40px;
}

.jf-complete-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* 반응형 */
@media (max-width: 480px) {
    .jf-complete-wrap { padding: 40px 16px 60px; }
    .jf-complete-title { font-size: 20px; }
    .jf-complete-msg { font-size: 14px; }
    .jf-complete-btns { flex-direction: column; align-items: center; }
    .jf-complete-btns .jf-btn-cancel,
    .jf-complete-btns .jf-btn-ok { width: 100%; }
}
/* ================================================
   아이디 찾기 fi-
================================================ */

.fi-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 0 80px;
}

.fi-guide {
    margin: 0 0 32px;
    padding: 20px 24px;
    background: #f5f7fb;
    border-left: 3px solid #0057b8;
    border-radius: 0 4px 4px 0;
    list-style: disc;
    list-style-position: inside;
}
.fi-guide li {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
}

.fi-form { display: flex; flex-direction: column; gap: 18px; }

.fi-field { display: flex; flex-direction: column; gap: 7px; }
.fi-field label {
    font-size: 14px;
    font-weight: 700;
    color: #1a2a50;
}
.fi-field input,
.fi-field select {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid #c8cfe0;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    color: #222;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}
.fi-field select {
    padding-right: 36px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.fi-field input:focus,
.fi-field select:focus { border-color: #0057b8; background: #f5f9ff; }

.fi-btn {
    width: 100%;
    height: 54px;
    margin-top: 6px;
    background: #0057b8;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}
.fi-btn:hover { background: #004299; }

/* 결과 영역 */
.fi-result {
    display: none;
    margin-top: 40px;
    border-top: 2px solid #eee;
    padding-top: 40px;
    text-align: center;
}

.fi-result-ico {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
}
.fi-result-ico svg { width: 56px; height: 56px; }

.fi-result-label {
    font-size: 15px;
    color: #666;
    margin: 0 0 6px;
}
.fi-result-id {
    font-size: 28px;
    font-weight: 800;
    color: #0057b8;
    letter-spacing: 1px;
    margin: 0 0 6px;
}
.fi-result-id--fail {
    font-size: 22px;
    color: #e53e3e;
}
.fi-result-sub {
    font-size: 14px;
    color: #999;
    margin: 0 0 28px;
}

.fi-result-btns {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fi-btn-login,
.fi-btn-findpw {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
    box-sizing: border-box;
}
.fi-btn-login {
    background: #0057b8;
    color: #fff;
    border: none;
}
.fi-btn-login:hover { background: #004299; }
.fi-btn-findpw {
    background: #fff;
    color: #555;
    border: 1.5px solid #c0c8d8;
}
.fi-btn-findpw:hover { border-color: #0057b8; color: #0057b8; }

/* 반응형 */
@media (max-width: 600px) {
    .fi-wrap { padding: 0 0 60px; }
    .fi-guide { padding: 16px 18px; }
    .fi-guide li { font-size: 13px; }
    .fi-result-id { font-size: 22px; }
    .fi-btn-login,
    .fi-btn-findpw { width: 100%; }
}
/* 비밀번호 찾기 추가 */
.fi-field-hint { display: block; font-size: 12px; color: #0057b8; margin-top: 5px; line-height: 1.6; }
.fi-pw-msg     { display: block; font-size: 13px; margin-top: 5px; min-height: 16px; }
.fi-pw-ok      { color: #1e7e40; font-weight: 600; }
.fi-pw-err     { color: #e53e3e; font-weight: 600; }
/* rv- 예매내역 */
.rv-head {padding: 32px 0 6px;text-align: center;}
.rv-head-sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #0057b8;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.rv-head-title {
    font-size: 28px;
    font-weight: 800;
    color: #0d2260;
    letter-spacing: -0.5px;
}

.rv-notice {
    margin: 18px 0 24px;
    font-size: 13px;
    color: #555;
    line-height: 2;
}
.rv-notice strong { color: #0057b8; font-weight: 700; }

.rv-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rv-tbl {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
    border-top: 2px solid #0057b8;
    font-size: 14px;
}
.rv-tbl thead th {
    background: #f5f7fb;
    padding: 13px 10px;
    text-align: center;
    font-weight: 700;
    color: #1a2a50;
    border-bottom: 1px solid #dde3ef;
    white-space: nowrap;
}
.rv-tbl tbody td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid #eef0f5;
    color: #333;
    vertical-align: middle;
}
.rv-tbl tbody tr:hover { background: #f9fafc; }

.rv-num {
    color: #0057b8;
    font-weight: 700;
    text-decoration: underline;
}
.rv-num:hover { color: #003d8a; }

.rv-title {
    text-align: left !important;
    max-width: 280px;
    word-break: keep-all;
    line-height: 1.5;
}

.rv-date { color: #0057b8; white-space: nowrap; }

.rv-seat {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    color: #fff;
    background: #555;
    padding: 1px 6px;
    border-radius: 3px;
    text-decoration: none;
    vertical-align: middle;
}
.rv-seat:hover { background: #0057b8; }

.rv-btn-cancel {
    height: 30px;
    padding: 0 12px;
    background: #fff;
    color: #e53e3e;
    border: 1px solid #e53e3e;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.rv-btn-cancel:hover { background: #e53e3e; color: #fff; }
.rv-btn-canceled {
    color: #aaa !important;
    border-color: #ddd !important;
    background: #f9f9f9 !important;
    cursor: default !important;
}

.rv-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.rv-status.done     { background: #e8f0fb; color: #0057b8; }
.rv-status.wait     { background: #fff8e1; color: #d08000; }
.rv-status.canceled { background: #f5f5f5; color: #aaa; }

.rv-paging {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 28px 0 60px;
    flex-wrap: wrap;
}
.rv-pg-arrow {
    width: 32px;
    height: 32px;
    border: 1px solid #dde3ef;
    border-radius: 4px;
    background: #fff;
    font-size: 20px;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: border-color 0.2s;
}
.rv-pg-arrow:hover { border-color: #0057b8; color: #0057b8; }
.rv-pg-nums { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.rv-pg-num {
    width: 32px;
    height: 32px;
    border: 1px solid #dde3ef;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.rv-pg-num:hover { background: #eef2fb; color: #0057b8; }
.rv-pg-num.active { background: #0057b8; color: #fff; border-color: #0057b8; font-weight: 700; }
.rv-pg-info {
    font-size: 13px;
    color: #999;
    margin-left: 10px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .rv-head-title { font-size: 22px; }
    .rv-tbl { font-size: 13px; }
    .rv-title { max-width: 180px; }
    .rv-pg-info { width: 100%; text-align: center; margin: 6px 0 0; }
}
/* 모달 반응형 */
.rv-modal-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.rv-modal-bg.active { display: flex; }

.rv-modal {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    box-sizing: border-box;
}
.rv-modal--ticket { max-width: 540px; }

.rv-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 2px solid #0057b8;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}
.rv-modal-head--ticket { border-bottom: 3px solid #00bcd4; }

.rv-modal-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a2a50;
    line-height: 1.5;
    word-break: keep-all;
}
.rv-modal-ticket-title {
    font-size: 20px;
    font-weight: 800;
    color: #0d2260;
}
.rv-modal-close {
    font-size: 18px;
    color: #888;
    flex-shrink: 0;
    margin-left: 12px;
    cursor: pointer;
}
.rv-modal-close:hover { color: #333; }

.rv-modal-body { padding: 22px; }

.rv-modal-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rv-modal-tbl {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: 13px;
    border-top: 1px solid #dde3ef;
}
.rv-modal-tbl thead th {
    background: #f5f7fb;
    padding: 10px 8px;
    text-align: center;
    font-weight: 700;
    color: #1a2a50;
    border-bottom: 1px solid #dde3ef;
    white-space: nowrap;
}
.rv-modal-tbl tbody td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid #eef0f5;
    color: #333;
    white-space: nowrap;
}

.rv-modal-total {
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: #0057b8;
    margin: 14px 0 0;
}

.rv-modal-perf-name {
    font-size: 14px;
    font-weight: 700;
    color: #0057b8;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
    margin-bottom: 14px;
    word-break: keep-all;
    line-height: 1.6;
}

.rv-modal-info-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border-top: 1px solid #dde3ef;
}
.rv-modal-info-tbl--mt { margin-top: 14px; border-top: 1px solid #dde3ef; }
.rv-modal-info-tbl th {
    padding: 10px;
    width: 155px;
    text-align: left;
    color: #555;
    font-weight: 500;
    border-bottom: 1px solid #eef0f5;
    white-space: nowrap;
    vertical-align: top;
}
.rv-modal-info-tbl td {
    padding: 10px;
    color: #222;
    border-bottom: 1px solid #eef0f5;
    line-height: 1.6;
    word-break: keep-all;
}
.rv-total-price { color: #e53e3e; font-weight: 800; font-size: 15px; }
.rv-price-red   { color: #0057b8; font-weight: 700; }

.rv-modal-btns {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}
.rv-modal-btn-ok {
    height: 44px;
    padding: 0 40px;
    background: #0057b8;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}
.rv-modal-btn-ok:hover { background: #004299; }
.rv-modal-btn-print {
    height: 44px;
    padding: 0 22px;
    background: #0057b8;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}
.rv-modal-btn-print:hover { background: #004299; }
.rv-modal-btn-close {
    height: 44px;
    padding: 0 22px;
    background: #fff;
    color: #555;
    border: 1.5px solid #c0c8d8;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.rv-modal-btn-close:hover { border-color: #0057b8; color: #0057b8; }

/* 태블릿 */
@media (max-width: 1024px) {
    .rv-modal { max-width: 90vw; }
}

/* 모바일 */
@media (max-width: 600px) {
    .rv-modal-bg { padding: 12px; }
    .rv-modal { max-width: 100%; border-radius: 6px; }
    .rv-modal-head { padding: 14px 16px; }
    .rv-modal-ticket-title { font-size: 17px; }
    .rv-modal-body { padding: 14px; }
    .rv-modal-info-tbl th {
        width: 115px;
        font-size: 12px;
        padding: 9px 8px;
    }
    .rv-modal-info-tbl td {
        font-size: 12px;
        padding: 9px 8px;
    }
    .rv-modal-btn-ok,
    .rv-modal-btn-print,
    .rv-modal-btn-close {
        flex: 1;
        padding: 0 10px;
        font-size: 13px;
    }
}
/* mp- 마이페이지 */
.mp-profile {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 24px;
    background: #f5f7fb;
    border-radius: 8px;
    margin: 24px 0;
    border-left: 4px solid #0057b8;
}
.mp-avatar {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}
.mp-avatar svg { width: 60px; height: 60px; border-radius: 50%; }
.mp-username {
    font-size: 18px;
    font-weight: 800;
    color: #0d2260;
    margin-bottom: 5px;
}
.mp-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    background: #0057b8;
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
}
.mp-email { font-size: 13px; color: #777; }

.mp-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 36px;
}
.mp-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 10px;
    background: #fff;
    border: 1px solid #dde3ef;
    border-radius: 8px;
    text-decoration: none;
    color: #1a2a50;
    font-size: 13px;
    font-weight: 700;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.mp-quick-item:hover {
    border-color: #0057b8;
    box-shadow: 0 4px 14px rgba(0,87,184,0.1);
    color: #0057b8;
}
.mp-quick-ico { width: 40px; height: 40px; }
.mp-quick-ico svg { width: 40px; height: 40px; }

.mp-section { margin-bottom: 50px; }
.mp-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #0057b8;
    padding-bottom: 10px;
    margin-bottom: 16px;
}
.mp-sec-title {
    font-size: 17px;
    font-weight: 800;
    color: #0d2260;
}
.mp-sec-more {
    font-size: 13px;
    color: #0057b8;
    text-decoration: none;
    font-weight: 600;
}
.mp-sec-more:hover { text-decoration: underline; }

.jf-readonly {
    background: #f5f5f5 !important;
    color: #999 !important;
    cursor: not-allowed !important;
}

@media (max-width: 768px) {
    .mp-quick { grid-template-columns: repeat(2, 1fr); }
    .mp-profile { padding: 18px 16px; }
    .mp-username { font-size: 16px; }
}
@media (max-width: 480px) {
    .mp-quick { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .mp-quick-item { padding: 18px 6px; font-size: 12px; }
}