/*
Template Name: Dactorapp - Doctor Appointment Booking Mobile Template
Author: Askbootstrap
Author URI: https://themeforest.net/user/askbootstrap
Version: 0.1
*/

/*
- Body
- Scroll Bar
- Custom
- Index
- Landing Page
- Country
- Welcome
- Footer Nav
- Home
- Favorte Doctor
- Select Area
- Doctor Profile
- Book Appointment
- Request Appointment
- notification
- Video
- Doctor Profile Two
- Visit Info / Chekout
- Message
- Call
- Call Doctor
- History
- Profile
- My Appointment
- Play Recording
*/

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:wght@200;300;400;500;600;700;800&display=swap');

:root {
    --dark: #1b1e42;
    --primary: #296F99;
    --light-primary: #3D8AB5;
    --lighter-primary: #6BAAC8;
    --lighter-primary-opacity: #E0EFF5;
    --secondary: #595f73;
    --light: #f5f5f5;
    --success: #3dae14;
    --light-success: #93cf88;
    --warning: #fdbe00;
    --light-warning: #fbf2d9;
    --orange: #FF8811;
    --light-orange: #f8efea;
}

/* Body */
body {
    font-family: 'Karla', sans-serif;
    color: var(--dark);
    font-size: 13px;
}

/* Scroll Bar */
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid transparent;
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    background-color: rgba(0, 0, 0, .15);
    -webkit-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, .05), inset 1px 1px 0 rgba(0, 0, 0, .05);
    box-shadow: inset -1px -1px 0 rgba(0, 0, 0, .05), inset 1px 1px 0 rgba(0, 0, 0, .05);
}

::-webkit-scrollbar {
    width: 4px;
    background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
    height: 50px;
    background: hsla(0, 0%, 53.3%, 0.4);
}

.landing-slider.slick-initialized,
.top-doctors.slick-initialized,
.available-doctor.slick-initialized,
.recent-doctors.slick-initialized {
    visibility: visible;
    opacity: 1;
}

.landing-slider,
.top-doctors,
.available-doctor,
.recent-doctors {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

/* Custom */
.osahan-card-body {
    padding: 12px !important;
}

.osahan-card-footer {
    padding-left: 12px;
    padding-right: 12px;
}

.osahan-user-profile img {
    height: 50px;
}

.nav-wrapper.nav-wrapper-0 .nav-content h2 {
    display: none;
}

li.nav-parent.level-open h2 {
    display: block !important;
}

.border-bottom {
    border-color: #eee !important;
}

.text-dark {
    color: var(--dark) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-orange {
    color: var(--orange);
}

.text-info {
    color: var(--light-primary);
}

.bg-light {
    background-color: var(--light) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.light-bg-primary {
    background-color: var(--light-primary);
}

.lighter-bg-primary {
    background-color: var(--lighter-primary);
}

.lighter-bg-primary-opacity {
    background-color: var(--lighter-primary-opacity);
}

.light-bg-warning {
    background-color: var(--light-warning);
}

.light-bg-success {
    background-color: var(--light-success);
}

.light-bg-orange {
    background-color: var(--light-orange);
}

/* 틸/스틸블루 커스텀 버튼 – 캡처 이미지 기준 색상 R:41 G:111 B:153 (#296F99) */
.btn-teal {
    background-color: #3e7ca3 !important;
    border-color: #3e7ca3 !important;
    color: #ffffff !important;
}

.btn-teal:hover,
.btn-teal:focus,
.btn-teal:active {
    background-color: #4786ab !important;
    border-color: #4786ab !important;
    color: #ffffff !important;
}

.btn-teal:disabled {
    background-color: #6BAAC8 !important;
    border-color: #6BAAC8 !important;
    color: #ffffff !important;
    opacity: 0.65;
}

/* 아웃라인 버전 */
.btn-outline-teal {
    background-color: #ffffff !important;
    border-color: #296F99 !important;
    color: #296F99 !important;
}

.btn-outline-teal:hover,
.btn-outline-teal:focus,
.btn-outline-teal:active {
    background-color: #296F99 !important;
    border-color: #296F99 !important;
    color: #ffffff !important;
}

.btn-secondary,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
}

.btn-outline-secondary {
    background-color: #ffffff !important;
    border-color: var(--orange) !important;
    color: var(--orange) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: #ffffff !important;
}

.btn-info,
.btn-outline-info:hover,
.btn-outline-info:focus {
    background: var(--light-primary) !important;
    border-color: var(--light-primary) !important;
    color: #ffffff !important;
}

.btn-outline-info {
    background-color: #ffffff !important;
    border-color: var(--light-primary) !important;
    color: var(--light-primary) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    color: #ffffff !important;
}

.bg-info {
    background: var(--light-primary) !important;
}

.btn-white {
    background-color: #ffffff !important;
}

.text-muted {
    color: var(--secondary) !important;
}

.text-bg-success {
    background-color: var(--success) !important;
    font-weight: 400;
}

.fw-light {
    font-weight: 200;
}

a {
    text-decoration: none;
}

.form-control {
    box-shadow: none !important;
}

.form-select {
    box-shadow: none !important;
}

.rounded-4,
.form-control {
    border-radius: 10px !important;
}

.btn {
    font-size: 13px;
    padding: 13px 15px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

.btn-lg {
    font-size: 16px;
    padding: 15px 20px !important;
    letter-spacing: 0.2px;
}

.btn-sm {
    padding: 7px 12px !important;
}

.rounded-top-4 {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.rounded-bottom-4 {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.chat-rounded-left {
    border-radius: 19px;
    padding: 10px 15px !important;
    font-size: 13px;
}

.chat-rounded-right {
    border-radius: 19px;
    padding: 10px 15px !important;
    font-size: 13px;
}

.small-sm {
    font-size: 12px;
}

.fs-14 {
    font-size: 14px;
}

.border-primary-dotted {
    border: 1px dashed var(--primary);
}

.border-dotted-bottom {
    border-bottom: 1px dashed var(--secondary);
}

.border-dotted-top {
    border-top: 1px dashed var(--secondary);
}

.border-dashed-muted {
    border: 1px dashed var(--secondary);
}

.border-dashed-primary {
    border: 1px dashed var(--primary);
}

.badge-success {
    background-color: var(--light-success);
    color: var(--success);
}

.fix-osahan-footer {
    /* viewport 하단에 고정: home(vh-100) + position:absolute 조합으로 인해
       콘텐츠가 길어질 때 페이지 중간에 박혀 보이던 문제 해결 */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.shadow {
    box-shadow: rgb(0 0 0 / 7%) 0px 6px 24px 0px, rgb(0 0 0 / 4%) 0px 0px 0px 1px !important;
}

/* Index */
.logo {
    width: 100px;
}

.top-doctor-item,
.recent-doctor-item,
.available-doctor-item {
    margin: 4px 5px;
}

/* Landing Page */
.landing ul.slick-dots {
    bottom: auto;
    margin: auto;
    text-align: center;
}

.landing ul.slick-dots li {
    margin: 0px;
    padding: 0px;
    width: auto !important;
    height: auto !important;
}

.landing ul.slick-dots li button {
    margin: 3px;
    padding: 0px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50px;
    border: 1px solid #ffffff;
    box-shadow: 0px 0px 1px #6e6e6e;
}

.landing ul.slick-dots li button:before {
    display: none;
}

.landing ul.slick-dots li.slick-active button {
    background: var(--primary);
    border-color: var(--primary);
}

.landing-slider-item img {
    height: 230px;
    object-fit: contain;
    margin: auto;
}

/* Country */
.flag-img {
    width: 35px;
}

/* Welcome */
.blue-logo {
    width: 110px;
}

/* Footer Nav */
.body-fix-osahan-footer {
    padding-bottom: 82px;
}

.footer-bottom-nav {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #989898;
    padding: 5px 0 9px 0;
    position: relative;
}

.footer-bottom-nav span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.footer-bottom-nav i {
    font-size: 20px;
}

.footer-bottom-nav.active {
    color: #296F99;
}

.footer-bottom-nav.active:after {
    content: "";
    width: 40px;
    height: 10px;
    background: #296F99;
    border-radius: 50px;
    position: absolute;
    bottom: -7px;
}

.bottom-nav-main {
    background: #fff;
}

/* Home */
.icon {
    min-width: 35px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-lg {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.doctor-book-back {
    position: relative;
    overflow: hidden;
}

.doctor-book-back-title {
    font-family: 'Sofia Sans Extra Condensed', sans-serif;
    padding-right: 77px;
    letter-spacing: 0.8px;
    line-height: 28px !important;
}

.doctor-book-img {
    position: absolute;
    bottom: 0;
    width: 140px;
    right: 0;
}

.btn-book {
    font-weight: 500 !important;
    padding: 6px 11px !important;
    font-size: 11px;
    z-index: 99 !important;
    border-radius: 50px !important;
    letter-spacing: 0.4px;
}

.btn-book i {
    margin-left: 6px;
}

/* Favorte Doctor */
.favorite-img {
    width: 50px;
}

.cf-btn a.btn {
    border-radius: 0px !important;
}

/* Doctor Profile */
.appointment-doctor-img {
    width: 90px;
}

/* Book Appointment */
.appointment-banner {
    background: url(../img/background-blob.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Request Appointment */
.custom-check-day .btn {
    border: none;
    border-radius: 0;
    border-top-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background: #ffffff;
    color: var(--dark);
}

.custom-check .btn {
    background: #ffffff;
    font-size: 13px;
    color: var(--secondary);
    padding: 7px 9px !important;
    width: 100%;
    line-height: 20px;
    border-color: #d9d9d9;
}

.custom-check .btn span.fs-5 {
    font-size: 19px !important;
    font-weight: 600;
}

.custom-check .btn-check:checked+.btn,
.custom-check .btn.active,
.custom-check .btn.show,
.custom-check .btn:first-child:active,
:not(.btn-check)+.btn:active {
    background: #16bef0 !important;
    border-color: #16bef0 !important;
    color: #fff !important;
}

.fee-icon {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Notification */
.notification-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

/* Video */
.video-tabs button {
    border: none;
    background-color: #ffffff;
    color: var(--dark) !important;
    font-size: 15px;
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
    padding: 12px 10px;
}

.video-tabs button.active {
    color: #14BEF0 !important;
    border-bottom: 3px solid;
    font-weight: 500;
    background: #eefbff;
    border-top: 3px solid #eefbff;
}

/* Doctor Profile Two */
.doctor-profile-tabs button {
    border: none;
    background-color: #ffffff;
    color: var(--dark) !important;
    font-size: 15px;
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
    padding: 12px 10px;
}

.doctor-profile-tabs button.active {
    color: #14BEF0 !important;
    border-bottom: 3px solid;
    font-weight: 500;
    background: #eefbff;
    border-top: 3px solid #eefbff;
}

.review-profile {
    width: 35px;
}

.offcanvas {
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}

.offcanvas-footer {
    padding: 1rem 1rem;
}

/* Visit Info / Chekout */
.upload-file {
    position: relative;
    overflow: hidden;
    z-index: -1;
}

.upload-file-icon {
    position: absolute;
    top: -34px;
    right: -32px;
    height: 100px;
    width: 100px;
    border-bottom-left-radius: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Message */
.plus-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.message-profile {
    width: 40px;
}

/* Call */
.call-img {
    width: 150px;
}

.call-display {
    height: calc(100vh - 87px);
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.call-icons a {
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
}

/* Call Doctor */
.call-doctor {
    height: calc(100vh - 87px);
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    background: url(../img/favorite/favorite-4.jpg);
    background-position: center;
    background-size: cover;
}

.patient-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* History */
.voice-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

/* Profile */
.edit-profile-back {
    position: relative;
}

.edit-profile-icon {
    position: absolute;
    top: -30px;
    right: -25px;
    height: 100px;
    width: 100px;
    border-bottom-left-radius: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* My Appointment */
.btn-rounded {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Play Recording */
.play-recording-background {
    background: url(../img/favorite/favorite-4.jpg);
    background-position: center;
    background-size: cover;
    height: calc(100vh - 87px);
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

/* ============================================================
   View Page Styles
   (consolidated from inline <style> blocks of each view file)
   각 뷰는 최상위 wrap 에 .page-{slug} 클래스가 부여됨.
   여기에 모인 규칙은 그 wrap 안에서만 효력을 갖도록 prefix.
   ============================================================ */

/* === Shared: Pagination (purchase/lists, coin/lists, withdraw/lists, bonus/convert_list) === */
.page-purchase-lists .pagination,
.page-coin-lists .pagination,
.page-withdraw-lists .pagination,
.page-bonus-convert-list .pagination {
    display: flex; gap: 6px; padding: 0; margin: 0;
    list-style: none; flex-wrap: wrap; justify-content: center;
}
.page-purchase-lists .pagination .page-item .page-link,
.page-coin-lists .pagination .page-item .page-link,
.page-withdraw-lists .pagination .page-item .page-link,
.page-bonus-convert-list .pagination .page-item .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1px solid #e6ecf3 !important; border-radius: 8px !important;
    background: #fff !important; color: #333 !important;
    font-size: 13px; font-weight: 600; text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.page-purchase-lists .pagination .page-item .page-link:hover,
.page-coin-lists .pagination .page-item .page-link:hover,
.page-withdraw-lists .pagination .page-item .page-link:hover,
.page-bonus-convert-list .pagination .page-item .page-link:hover {
    background: #f1f6ff !important; border-color: #1f7ae0 !important; color: #1f7ae0 !important;
}
.page-purchase-lists .pagination .page-item.active .page-link,
.page-coin-lists .pagination .page-item.active .page-link,
.page-withdraw-lists .pagination .page-item.active .page-link,
.page-bonus-convert-list .pagination .page-item.active .page-link {
    background: #1f7ae0 !important; border-color: #1f7ae0 !important; color: #fff !important;
    box-shadow: 0 4px 10px rgba(31,122,224,0.25) !important;
}
.page-purchase-lists .pagination .page-item.disabled .page-link,
.page-coin-lists .pagination .page-item.disabled .page-link,
.page-withdraw-lists .pagination .page-item.disabled .page-link,
.page-bonus-convert-list .pagination .page-item.disabled .page-link {
    background: #f7f9fc !important; color: #bbb !important; border-color: #eef2f7 !important;
    box-shadow: none !important;
}
.page-purchase-lists .pagination .fa-angle-left::before,
.page-coin-lists .pagination .fa-angle-left::before,
.page-withdraw-lists .pagination .fa-angle-left::before,
.page-bonus-convert-list .pagination .fa-angle-left::before {
    content: "\2039"; font-family: inherit; font-size: 18px; line-height: 1;
}
.page-purchase-lists .pagination .fa-angle-right::before,
.page-coin-lists .pagination .fa-angle-right::before,
.page-withdraw-lists .pagination .fa-angle-right::before,
.page-bonus-convert-list .pagination .fa-angle-right::before {
    content: "\203A"; font-family: inherit; font-size: 18px; line-height: 1;
}

/* === Shared: 하단 플로팅 메뉴/바로가기 숨김 (seller 페이지 전용) ===
   페이지 wrap 외부에 있는 layout/footer 의 .fix-osahan-footer, #floatButtons 를
   숨기기 위해 body.seller-fullpage 클래스를 JS 한 줄로 부여하는 방식 사용. */
body.seller-fullpage .fix-osahan-footer,
body.seller-fullpage #floatButtons { display: none !important; }

/* === board/editor + board/writer (CKEditor 편집 영역 높이) === */
.page-board-editor .ck-editor__editable_inline,
.page-board-writer .ck-editor__editable_inline { min-height: 180px; }

/* === board/skin/latest/basic (1줄/2줄 말줄임) === */
.page-board-basic .nb-ellipsis-1 {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-board-basic .nb-ellipsis-2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* === office/linePlan, office/lineSp (트리 리스트 - 작은 버전) === */
.page-office-line-plan ul.tree, .page-office-line-plan ul.tree ul,
.page-office-line-sp ul.tree,   .page-office-line-sp ul.tree ul {
    list-style-type: none; padding-left: 20px;
}
.page-office-line-plan ul.tree li,
.page-office-line-sp ul.tree li { position: relative; margin: 4px 0; }
.page-office-line-plan ul.tree li i.toggle-icon,
.page-office-line-sp ul.tree li i.toggle-icon {
    cursor: pointer; margin-right: 5px; color: #ccc;
}
.page-office-line-plan ul.tree li span.node-label,
.page-office-line-sp ul.tree li span.node-label { cursor: pointer; }

/* === office/lineRe (트리 리스트 - 큰 버전, hover 효과 포함) === */
.page-office-line-re ul.tree, .page-office-line-re ul.tree ul {
    list-style-type: none; padding-left: 24px;
}
.page-office-line-re ul.tree { padding-left: 0; }
.page-office-line-re ul.tree li { position: relative; margin: 6px 0; }
.page-office-line-re ul.tree li i.toggle-icon { cursor: pointer; margin-right: 5px; color: #ccc; }
.page-office-line-re ul.tree li span.node-label {
    cursor: pointer; display: inline-block; padding: 6px 12px;
    border-radius: 8px; transition: all 0.2s ease; border: 1px solid transparent;
}
.page-office-line-re ul.tree li span.node-label:hover {
    background-color: #f4f6f9; border-color: #e0e0e0;
}

/* === office/matrixPlan, matrixRe, matrixSp (다이어그램 영역) === */
.page-office-matrix-plan #myDiagramDiv,
.page-office-matrix-re   #myDiagramDiv,
.page-office-matrix-sp   #myDiagramDiv { overflow: auto !important; }
.page-office-matrix-plan #appCapsule,
.page-office-matrix-re   #appCapsule,
.page-office-matrix-sp   #appCapsule { overflow: auto !important; }
.page-office-matrix-plan #myDiagramDiv canvas,
.page-office-matrix-re   #myDiagramDiv canvas,
.page-office-matrix-sp   #myDiagramDiv canvas { padding-bottom: 50px !important; }

/* === office/start (대시보드 위젯 편집 모드 + 팝업) === */
.page-office-start .widget-item { position: relative; transition: opacity .2s; }
.page-office-start .widget-item.widget-hidden { opacity: 0.4; }
.page-office-start .widget-item.ui-sortable-helper { opacity: 0.85; }
.page-office-start .widget-item.ui-sortable-placeholder {
    visibility: visible !important; background: rgba(0,123,255,0.08);
    border: 2px dashed #007bff; border-radius: 12px;
}
body.dashboard-edit-mode .page-office-start .widget-item {
    outline: 2px dashed rgba(0,123,255,0.25); outline-offset: -4px; border-radius: 12px;
}
body.dashboard-edit-mode .page-office-start .widget-edit-overlay {
    display: flex !important; position: absolute; top: 4px; left: 8px;
    z-index: 20; gap: 6px; align-items: center;
}
.page-office-start .widget-edit-overlay .btn {
    background: rgba(0,0,0,0.55); color: #fff; padding: 4px 8px; border: none;
}
.page-office-start .widget-edit-overlay .widget-drag-handle {
    background: rgba(0,0,0,0.65); color: #fff; padding: 4px 10px;
    border-radius: 4px; font-size: 12px; cursor: move; user-select: none;
}
/* 팝업 (office/start 두번째 <style> 블록) */
.page-office-start .popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; box-sizing: border-box;
}
.page-office-start .popup-pos-top_left     { align-items: flex-start; justify-content: flex-start; }
.page-office-start .popup-pos-top_center   { align-items: flex-start; justify-content: center; }
.page-office-start .popup-pos-top_right    { align-items: flex-start; justify-content: flex-end; }
.page-office-start .popup-pos-middle_left  { align-items: center; justify-content: flex-start; }
.page-office-start .popup-pos-middle_center{ align-items: center; justify-content: center; }
.page-office-start .popup-pos-middle_right { align-items: center; justify-content: flex-end; }
.page-office-start .popup-pos-bottom_left  { align-items: flex-end; justify-content: flex-start; }
.page-office-start .popup-pos-bottom_center{ align-items: flex-end; justify-content: center; }
.page-office-start .popup-pos-bottom_right { align-items: flex-end; justify-content: flex-end; }
.page-office-start .popup-container {
    position: relative; background: #fff; color: black; border-radius: 12px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3); overflow: hidden;
    min-width: 320px; max-width: 90vw; max-height: 90vh;
    display: flex; flex-direction: column;
}
.page-office-start .popup-container p { color: black; }
.page-office-start .popup-header {
    background: #002f87; color: white; padding: 15px 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.page-office-start .popup-header h2 { font-size: 18px; margin: 0; }
.page-office-start .popup-close {
    background: transparent; border: none; font-size: 24px; color: white; cursor: pointer;
}
.page-office-start .popup-content {
    padding: 20px; overflow-y: auto; flex-grow: 1; font-size: 15px; line-height: 1.5;
}
.page-office-start .popup-footer { padding: 15px 20px; text-align: right; background: #f5f5f5; }
.page-office-start .popup-btn {
    background-color: #007bff; color: white; border: none;
    padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer;
}
.page-office-start .popup-btn:hover { background-color: #0056b3; }

/* === page/platform (PDF.js 페이지) === */
.page-platform .pdf-page { border: 1px solid #ccc; margin: 20px 0; width: 100%; }

/* === coin/send (datepick z-index) === */
.page-coin-send .datepick-popup { z-index: 1500; }

/* === purchase/apply (매출신청 패키지 리스트) === */
.page-purchase-apply .purchase-list-wrap { max-width: 720px; margin: 0 auto; padding: 12px 14px 80px; }
.page-purchase-apply .purchase-list-title {
    font-size: 16px; font-weight: 700; margin: 4px 0 14px; color: #222;
}
.page-purchase-apply .purchase-card {
    display: flex; align-items: stretch; background: #fff; border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 12px; overflow: hidden;
}
.page-purchase-apply .purchase-card .pc-bar { width: 8px; flex-shrink: 0; }
.page-purchase-apply .purchase-card .pc-body { flex: 1 1 auto; padding: 14px 14px 14px 16px; min-width: 0; }
.page-purchase-apply .purchase-card .pc-step {
    font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: #777; margin-bottom: 4px;
}
.page-purchase-apply .purchase-card .pc-price {
    font-size: 22px; font-weight: 800; color: #222; line-height: 1.1; margin-bottom: 6px;
}
.page-purchase-apply .purchase-card .pc-meta {
    font-size: 12px; color: #666; display: flex; flex-wrap: wrap; gap: 10px;
}
.page-purchase-apply .purchase-card .pc-meta b { color: #333; font-weight: 600; }
.page-purchase-apply .purchase-card .pc-action {
    display: flex; align-items: center; padding: 10px 14px; flex-shrink: 0;
}
.page-purchase-apply .purchase-card .pc-btn {
    display: inline-block; padding: 10px 16px; border-radius: 8px;
    color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none;
    white-space: nowrap; transition: opacity 0.15s;
}
.page-purchase-apply .purchase-card .pc-btn:active { opacity: 0.85; }
@media (max-width: 420px) {
    .page-purchase-apply .purchase-card { flex-wrap: wrap; }
    .page-purchase-apply .purchase-card .pc-bar { width: 100%; height: 6px; }
    .page-purchase-apply .purchase-card .pc-action { width: 100%; padding: 0 14px 14px; }
    .page-purchase-apply .purchase-card .pc-btn { display: block; width: 100%; text-align: center; }
}

/* === purchase/lists (환불 모달) === */
.page-purchase-lists .refund-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.55); z-index: 9999; align-items: center; justify-content: center;
}
.page-purchase-lists .refund-overlay.show { display: flex; }
.page-purchase-lists .refund-modal {
    background: #fff; border-radius: 12px; width: 92%; max-width: 420px; padding: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.page-purchase-lists .refund-modal h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.page-purchase-lists .refund-modal .row-info {
    display: flex; justify-content: space-between; padding: 6px 0;
    border-bottom: 1px dashed #eee; font-size: 13px;
}
.page-purchase-lists .refund-modal .row-info span:last-child { font-weight: 700; }
.page-purchase-lists .refund-modal input[type="text"] {
    width: 100%; padding: 10px; margin-top: 8px; border: 1px solid #ccc;
    border-radius: 6px; font-size: 15px; box-sizing: border-box;
}
.page-purchase-lists .refund-modal .btn-row { display: flex; gap: 8px; margin-top: 14px; }
.page-purchase-lists .refund-modal .btn-row button {
    flex: 1; padding: 10px; border: none; border-radius: 6px; font-weight: 700; cursor: pointer;
}
.page-purchase-lists .refund-modal .btn-cancel { background: #888; color: #fff; }
.page-purchase-lists .refund-modal .btn-confirm { background: #dc3545; color: #fff; }
.page-purchase-lists .refund-modal .notice {
    margin-top: 10px; padding: 8px 10px; border-radius: 6px; font-size: 12px;
    background: #fff7e6; color: #a86200; border: 1px solid #ffe1a8;
}

/* === purchase/send (매출신청 폼) === */
.page-purchase-send .send-wrap { max-width: 720px; margin: 0 auto; padding: 12px 14px 100px; }
.page-purchase-send .send-card {
    background: #fff; border-radius: 14px; padding: 18px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-bottom: 14px;
}
.page-purchase-send .send-title { font-size: 20px; font-weight: 800; color: #1a1a1a; margin: 0 0 12px; }
.page-purchase-send .send-alert {
    background: #e8f5ee; border-left: 4px solid #2e9d6a;
    color: #1f6f47; font-size: 13px; padding: 10px 12px;
    border-radius: 8px; margin-bottom: 16px; position: relative;
}
.page-purchase-send .send-alert .close {
    position: absolute; right: 8px; top: 6px; background: none; border: 0;
    color: #666; font-size: 18px; cursor: pointer; padding: 2px 6px;
}
.page-purchase-send .send-form .form-label,
.page-purchase-send .send-form label.form-label {
    display: block; font-size: 13px; font-weight: 600; color: #555; margin: 12px 0 6px;
}
.page-purchase-send .send-form .input-style { margin-bottom: 6px; }
.page-purchase-send .send-form input[type="text"],
.page-purchase-send .send-form input[type="number"],
.page-purchase-send .send-form select {
    width: 100%; box-sizing: border-box; padding: 11px 12px; font-size: 14px;
    border: 1px solid #d8dde3; border-radius: 8px; background: #fff; color: #222;
    -webkit-appearance: none; appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.page-purchase-send .send-form input[type="text"]:focus,
.page-purchase-send .send-form select:focus {
    outline: 0; border-color: #1f7ae0; box-shadow: 0 0 0 3px rgba(31,122,224,0.15);
}
.page-purchase-send .send-form input[readonly] { background: #f5f7fa; color: #444; }
.page-purchase-send .send-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23666'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    background-size: 10px 7px; padding-right: 32px;
}
.page-purchase-send .send-form .input-style em,
.page-purchase-send .send-form .input-style i.fa-times,
.page-purchase-send .send-form .input-style i.fa-check,
.page-purchase-send .send-form .input-style i.fa-chevron-down,
.page-purchase-send .send-form .input-style span > i.fa-chevron-down { display: none; }
.page-purchase-send .send-form .input-style label.color-highlight { display: none; }
.page-purchase-send .send-submit {
    display: block; width: 100%; padding: 14px 0;
    background: #1f7ae0; color: #fff !important; border: 0; border-radius: 10px;
    font-size: 15px; font-weight: 800; letter-spacing: 0.5px;
    margin-top: 8px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(31,122,224,0.25);
    transition: opacity 0.15s, transform 0.05s;
}
.page-purchase-send .send-submit:active { opacity: 0.9; transform: translateY(1px); }
.page-purchase-send .send-submit:disabled { background: #b6c4d6; cursor: not-allowed; box-shadow: none; }
.page-purchase-send .wallet-card {
    background: #fff; border-radius: 14px; padding: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-bottom: 14px;
}
.page-purchase-send .wallet-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: #222; }
.page-purchase-send .wallet-card p { font-size: 13px; color: #666; margin: 0 0 12px; }
.page-purchase-send .wallet-card .wallet-box {
    border: 1px solid #e04c4c33; background: #fff8f8; border-radius: 10px;
    padding: 12px 14px; margin-bottom: 10px; position: relative;
}
.page-purchase-send .wallet-card .wallet-label {
    font-size: 13px; font-weight: 700; color: #333; margin-bottom: 6px;
}
.page-purchase-send .wallet-card .wallet-value {
    font-size: 13px; line-height: 1.55; word-break: break-all; color: #222;
}
.page-purchase-send .copy-btn {
    display: block; width: 100%; padding: 12px 14px;
    background: #e04c4c; color: #fff !important;
    border: 0; border-radius: 8px; text-align: left;
    font-size: 13px; font-weight: 700; text-decoration: none;
    box-shadow: 0 2px 6px rgba(224,76,76,0.2);
}
.page-purchase-send .copy-btn.bep { background: #e07a3a; box-shadow: 0 2px 6px rgba(224,122,58,0.2); }
.page-purchase-send .copy-btn.bank { background: #1f7ae0; box-shadow: 0 2px 6px rgba(31,122,224,0.2); }
.page-purchase-send .copy-btn.pay { background: #2e9d6a; box-shadow: 0 2px 6px rgba(46,157,106,0.2); }
.page-purchase-send .copy-btn .fa { margin-right: 6px; }
.page-purchase-send #submit_msg { font-size: 13px; color: #666; text-align: center; margin: 8px 0; }
.page-purchase-send .send-form hr { border: 0; border-top: 1px solid #eee; margin: 18px 0; }
/* 입금정보 카드 */
.page-purchase-send .deposit-card {
    background: #fff; border-radius: 14px; padding: 18px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-bottom: 14px;
}
.page-purchase-send .deposit-card .deposit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.page-purchase-send .deposit-card .deposit-head .mdi { font-size: 22px; color: #1f7ae0; }
.page-purchase-send .deposit-card .deposit-title { font-size: 16px; font-weight: 800; color: #1a1a1a; margin: 0; }
.page-purchase-send .deposit-card .deposit-desc { font-size: 12.5px; color: #888; margin: 0 0 14px; }
.page-purchase-send .deposit-box {
    position: relative; background: #f7f9fc; border: 1px solid #e6ecf3;
    border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
}
.page-purchase-send .deposit-box .label {
    font-size: 12px; font-weight: 700; color: #5a6473; margin-bottom: 4px;
    display: flex; align-items: center; gap: 6px;
}
.page-purchase-send .deposit-box .label .mdi { color: #1f7ae0; font-size: 16px; }
.page-purchase-send .deposit-box .value { font-size: 13px; line-height: 1.55; color: #1a1a1a; word-break: break-all; }
.page-purchase-send .deposit-box .online-badge {
    position: absolute; top: 10px; right: 10px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; color: #2e9d6a;
    background: #e8f5ee; padding: 2px 8px; border-radius: 20px;
}
.page-purchase-send .deposit-box .online-badge .mdi { font-size: 12px; }
.page-purchase-send .deposit-box .info-line {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; font-size: 13px;
}
.page-purchase-send .deposit-box .info-line:not(:last-child) { border-bottom: 1px dashed #e0e6ed; }
.page-purchase-send .deposit-box .info-line .k { color: #7a8597; font-weight: 600; }
.page-purchase-send .deposit-box .info-line .v { color: #1a1a1a; font-weight: 700; }
.page-purchase-send .deposit-qr {
    display: flex; flex-direction: column; align-items: center;
    background: #fff; border: 1px dashed #d8dde3; border-radius: 12px;
    padding: 14px; margin-bottom: 14px;
}
.page-purchase-send .deposit-qr img { width: 160px; height: 160px; object-fit: contain; }
.page-purchase-send .deposit-qr .qr-hint { font-size: 11px; color: #888; margin-top: 8px; }
.page-purchase-send .deposit-copy {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 13px 0; border-radius: 10px;
    color: #fff !important; font-weight: 800; font-size: 14px;
    text-decoration: none; border: 0; letter-spacing: 0.3px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: opacity 0.15s, transform 0.05s;
}
.page-purchase-send .deposit-copy:active { opacity: 0.9; transform: translateY(1px); }
.page-purchase-send .deposit-copy.bank { background: #1f7ae0; }
.page-purchase-send .deposit-copy.bep  { background: #e07a3a; }
.page-purchase-send .deposit-copy.trc  { background: #e04c4c; }
.page-purchase-send .deposit-copy.usdt { background: #2e9d6a; }
.page-purchase-send .deposit-copy.hdx  { background: #16a4a4; }
.page-purchase-send .deposit-copy.pay  { background: #5f6af5; }
.page-purchase-send .deposit-copy .mdi { font-size: 18px; }

/* === user/components/register_field (비밀번호 보안수준 컴포넌트) ===
   컴포넌트는 다양한 부모 페이지에 include 되므로 prefix 없이 자체 unique 클래스(.pw-*)만 사용 */
.pw-strength-list { display: none; margin: 8px 0 0 0; padding: 0; }
.pw-strength-list.active { display: block; }
.pw-rule {
    display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
    font-size: 13px; color: #adb5bd; transition: color 0.3s ease;
}
.pw-rule.passed { color: #333; }
.pw-check {
    font-size: 12px; width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1.5px solid #dee2e6;
    flex-shrink: 0; transition: all 0.3s ease;
}
.pw-rule.passed .pw-check { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.08); }
.pw-match-msg { margin-top: 6px; font-size: 12px; min-height: 18px; }
.pw-match-msg.match { color: #22c55e; }
.pw-match-msg.mismatch { color: #ef4444; }

/* === user/deposit + user/deposit_edit (커스텀 UI 유틸리티) === */
.page-user-deposit .transition-all,
.page-user-deposit-edit .transition-all { transition: all 0.25s ease-in-out; }
.page-user-deposit .hover-opacity-50:hover,
.page-user-deposit-edit .hover-opacity-50:hover { opacity: 0.5; }
.page-user-deposit .transform-hover-up:hover,
.page-user-deposit-edit .transform-hover-up:hover { transform: translateY(-4px); }
.page-user-deposit .active-scale:active,
.page-user-deposit-edit .active-scale:active { transform: scale(0.98); }
.page-user-deposit .form-control:focus,
.page-user-deposit-edit .form-control:focus {
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.1) !important;
    border: 1px solid #3b82f6 !important;
}
.page-user-deposit .form-control:read-only,
.page-user-deposit-edit .form-control:read-only {
    background-color: #f1f5f9 !important; opacity: 0.7; cursor: not-allowed;
}
.page-user-deposit .input-group-text,
.page-user-deposit-edit .input-group-text { border-right: 0 !important; }
.page-user-deposit .form-control,
.page-user-deposit-edit .form-control { border-left: 0 !important; }

/* === user/seller_edit (결제플랫폼 이용 신청서 폼) === */
.page-user-seller-edit .seller-form-wrap { max-width: 720px; margin: 0 auto; padding: 0 10px; }
.page-user-seller-edit .seller-form-title {
    text-align: center; font-size: 22px; font-weight: 800; color: #1a3c6e;
    letter-spacing: 2px; margin: 20px 0 18px; padding-bottom: 10px;
    border-bottom: 3px double #1a3c6e;
}
.page-user-seller-edit .sf-section-title {
    font-size: 15px; font-weight: 700; color: #222;
    margin: 22px 0 10px; padding-left: 2px;
}
.page-user-seller-edit .sf-table {
    width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px;
}
.page-user-seller-edit .sf-table th,
.page-user-seller-edit .sf-table td {
    border: 1px solid #bbb; padding: 8px 10px; vertical-align: middle;
}
.page-user-seller-edit .sf-table th {
    background: #e8f0fe; color: #1a3c6e; font-weight: 700;
    white-space: nowrap; text-align: center; width: 110px;
}
.page-user-seller-edit .sf-table td { background: #fff; }
.page-user-seller-edit .sf-table .th-group {
    background: #d4e3fc; text-align: center; font-weight: 700; width: 80px;
}
.page-user-seller-edit .sf-table input[type="text"],
.page-user-seller-edit .sf-table input[type="email"],
.page-user-seller-edit .sf-table input[type="number"],
.page-user-seller-edit .sf-table input[type="date"],
.page-user-seller-edit .sf-table select {
    width: 100%; border: 1px solid #ccc; border-radius: 4px;
    padding: 6px 8px; font-size: 13px; background: #fafbff;
    box-sizing: border-box; transition: border-color 0.2s;
}
.page-user-seller-edit .sf-table input:focus,
.page-user-seller-edit .sf-table select:focus {
    border-color: #4a7fdb; outline: none; background: #fff;
}
.page-user-seller-edit .sf-service-table {
    width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px;
}
.page-user-seller-edit .sf-service-table th,
.page-user-seller-edit .sf-service-table td {
    border: 1px solid #bbb; padding: 8px 10px; vertical-align: middle;
}
.page-user-seller-edit .sf-service-table thead th {
    background: #e8f0fe; color: #1a3c6e; font-weight: 700; text-align: center;
}
.page-user-seller-edit .sf-service-table tbody th {
    background: #f5f7fa; font-weight: 600; text-align: center; white-space: nowrap;
}
.page-user-seller-edit .sf-service-table tbody td { background: #fff; }
.page-user-seller-edit .sf-check-inline {
    display: inline-flex; align-items: center; gap: 4px;
    margin-right: 16px; font-size: 13px; cursor: pointer;
}
.page-user-seller-edit .sf-check-inline input[type="checkbox"],
.page-user-seller-edit .sf-check-inline input[type="radio"] {
    width: 16px; height: 16px; accent-color: #1a3c6e; cursor: pointer;
}
.page-user-seller-edit .sf-notice-box {
    border: 2px solid #c9a400; background: #fffef5; border-radius: 6px;
    padding: 14px 16px; margin: 18px 0; font-size: 12.5px; line-height: 1.7;
}
.page-user-seller-edit .sf-notice-box .notice-title {
    font-weight: 800; color: #b8860b; font-size: 13px; margin-bottom: 6px;
    background: yellow; display: inline-block;
}
.page-user-seller-edit .sf-notice-box ol { margin: 6px 0 0 0; padding-left: 18px; }
.page-user-seller-edit .sf-integrity-box {
    border: 2px solid #1a3c6e; border-radius: 6px; padding: 16px;
    margin: 18px 0; text-align: center; font-size: 12.5px; line-height: 1.8; background: #f8faff;
}
.page-user-seller-edit .sf-integrity-box .integrity-title {
    display: inline-block; background: yellow; font-weight: 800;
    font-size: 15px; padding: 2px 14px; margin-bottom: 10px; letter-spacing: 2px;
}
.page-user-seller-edit .sf-integrity-box .integrity-desc {
    text-align: left; margin-top: 8px; color: #333; font-weight: 600;
}
.page-user-seller-edit .sf-sign-area { margin: 20px 0; }
.page-user-seller-edit .sf-sign-row {
    display: flex; align-items: center; justify-content: center;
    gap: 20px; flex-wrap: wrap; margin: 14px 0;
}
.page-user-seller-edit .sf-sign-row label { font-weight: 600; font-size: 14px; white-space: nowrap; }
.page-user-seller-edit .sf-sign-row input[type="text"],
.page-user-seller-edit .sf-sign-row input[type="date"] {
    border: none; border-bottom: 1px solid #666; font-size: 14px;
    padding: 4px 8px; width: 140px; background: transparent; text-align: center;
}
.page-user-seller-edit .sf-sign-row input:focus { border-bottom-color: #1a3c6e; outline: none; }
.page-user-seller-edit .sf-sign-canvas-wrap {
    border: 1px solid #ccc; border-radius: 6px; overflow: hidden;
    background: #fff; margin-top: 8px;
}
.page-user-seller-edit .sf-sign-canvas-wrap canvas {
    width: 100%; height: 160px; touch-action: none; display: block;
}
.page-user-seller-edit .sf-company-name {
    text-align: center; font-size: 20px; font-weight: 800; color: #000;
    margin: 30px 0 10px; letter-spacing: 2px;
}
.page-user-seller-edit .sf-submit-btn {
    display: block; width: 100%; padding: 14px; font-size: 16px; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, #1a3c6e, #2d6fd6);
    border: none; border-radius: 8px; cursor: pointer;
    margin: 16px 0 30px; transition: opacity 0.2s;
}
.page-user-seller-edit .sf-submit-btn:hover { opacity: 0.9; }
.page-user-seller-edit .sf-sign-btns { display: flex; gap: 8px; margin-top: 8px; }
.page-user-seller-edit .sf-sign-btns button {
    padding: 6px 16px; border-radius: 4px; border: none;
    font-size: 12px; font-weight: 600; cursor: pointer;
}
.page-user-seller-edit .sf-sign-btns .btn-clear { background: #888; color: #fff; }
.page-user-seller-edit .sf-sign-btns .btn-save { background: #1a3c6e; color: #fff; }
/* 모바일/PC 할부개월 한 줄 유지 */
.page-user-seller-edit .sf-installment-wrap {
    display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 20px;
}
.page-user-seller-edit .sf-installment-wrap .sf-check-inline {
    margin-right: 0; white-space: nowrap; cursor: pointer;
}
/* 모바일/Safari 등에서 라디오/체크박스 안 보이는 문제 보정 (페이지 내부 스코프) */
.page-user-seller-edit input[type="radio"],
.page-user-seller-edit input[type="radio"]:hover,
.page-user-seller-edit input[type="radio"]:focus {
    opacity: 1 !important; visibility: visible !important;
    appearance: radio !important; -webkit-appearance: radio !important; -moz-appearance: radio !important;
    display: inline-block !important; width: 15px !important; height: 15px !important;
    pointer-events: auto !important; margin-right: 4px !important; vertical-align: middle !important;
}
.page-user-seller-edit input[type="checkbox"],
.page-user-seller-edit input[type="checkbox"]:hover,
.page-user-seller-edit input[type="checkbox"]:focus {
    opacity: 1 !important; visibility: visible !important;
    appearance: checkbox !important; -webkit-appearance: checkbox !important; -moz-appearance: checkbox !important;
    display: inline-block !important; width: 16px !important; height: 16px !important;
    pointer-events: auto !important; margin-right: 4px !important; vertical-align: middle !important;
}
@media (max-width: 576px) {
    .page-user-seller-edit .sf-table th { width: 80px; font-size: 12px; padding: 6px 5px; }
    .page-user-seller-edit .sf-table td { font-size: 12px; padding: 6px 5px; }
    .page-user-seller-edit .sf-table .th-group { width: 55px; font-size: 11px; }
    .page-user-seller-edit .sf-service-table th,
    .page-user-seller-edit .sf-service-table td { font-size: 11px; padding: 5px 4px; }
    .page-user-seller-edit .seller-form-title { font-size: 18px; }
    .page-user-seller-edit .sf-sign-row { flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
    .page-user-seller-edit .sf-installment-wrap { gap: 10px; }
    .page-user-seller-edit .sf-installment-wrap .sf-check-inline { font-size: 12px; }
}