:root{
    --bg:#f3f6fb;
    --card:#fff;
    --text:#111827;
    --muted:#6b7280;
    --line:#e5e7eb;

    --primary:#1d5bff;
    --primary-600:#174ae0;
    --primary-100:#e9f0ff;

    --dark:#2f2f2f;
    --dark-2:#1f1f1f;

    --shadow:0 20px 55px rgba(17,24,39,.14);
    --radius:14px;
    --radius-sm:10px;
    --focus:0 0 0 4px rgba(29,91,255,.18);

    --btn-h:56px;
    --input-h:52px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
    color:var(--text);
    background: var(--bg);
}

#logo {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.page{
    min-height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:72px 16px;
    gap:22px;
}

/* ===== Brand ===== */
.brand{
    width:100px;
    display:flex;
    align-items:center;
    gap:10px;
    user-select:none;
}

/* ===== Card ===== */
.card{
    width:min(440px, 100%);
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    min-height: 520px;
}

/* ===== Tabs ===== */
.tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#f8fafc;
    border-bottom:1px solid var(--line);
}
.tab{
    border:0;
    background:transparent;
    height:56px;
    font-weight:900;
    font-size: 17px;
    cursor:pointer;
    color:var(--muted);
    transition:.15s ease;
}
/*.tab[aria-selected="true"]{*/
/*    background:var(--primary);*/
/*    color:#fff;*/
/*}*/
.tab:focus-visible{outline:none; box-shadow:var(--focus); position:relative; z-index:1;}

.content{
    padding:26px 26px 32px;   /* ✅ 세로 늘림 */
}

.theme-member .tab[data-tab="member"]{
    background:var(--primary);
    color:#fff;
}
.theme-member .tab[data-tab="pro"]{
    background:transparent;
    color:#6b7280;
}

.theme-pro .tab[data-tab="pro"]{
    background:var(--dark);
    color:#fff;
}
.theme-pro .tab[data-tab="member"]{
    background:#fff;
    color:#6b7280;
}

/* ===== Info Banner ===== */
.info{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border-radius:10px;
    background:#f3f4f6;
    font-size:15px;
    margin-bottom:18px;
    white-space:nowrap;
}
.info > div:last-child{
    overflow:hidden;        /* ✅ 길면 ... 처리 */
    text-overflow:ellipsis;
}

.info .badge{
    width:18px;height:14px;border-radius:6px;
    display:grid;place-items:center;
    background:#111827;color:#fff;font-weight:900;font-size:14px;
    flex:0 0 auto;
}

.info .text{
    flex:1;                 /* 남은 공간 사용 */
    white-space:nowrap;     /* ✅ 한 줄 */
    overflow:hidden;        /* 넘치면 */
    text-overflow:ellipsis; /* ... 처리 */
}

/* ===== Fields with clear ===== */
.field{ margin-top:10px; }
.control{
    position:relative;
}
.input{
    width:100%;
    height:var(--input-h);
    padding:0 44px 0 14px; /* clear 버튼 자리 */
    border:1px solid #d1d5db;
    border-radius:10px;
    font-size:16px;
    outline:none;
    transition:.15s ease;
    background:#fff;
}
.input::placeholder{color:#9ca3af}
.input:focus{ border-color:var(--primary); box-shadow:var(--focus); }

.clear-btn{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    width:28px;height:28px;
    border-radius:999px;
    border:0;
    background:#eef2f7;
    color:#64748b;
    display:none;
    align-items:center;
    justify-content:center;
    font-weight:900;
    cursor:pointer;
    line-height:1;
}
.clear-btn:hover{ filter:brightness(.98); }
.clear-btn:focus-visible{ outline:none; box-shadow:var(--focus); }

/* ===== Buttons ===== */
.btn{
    width:100%;
    height:var(--btn-h);
    border-radius:12px;
    border:0;
    font-weight:900;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.15s ease;
}

.btn-primary{
    background:var(--primary);
    color:#fff;
    margin-top:16px;
}
.btn-primary:hover{ background:var(--primary-600); }

.btn-secondary{
    background:var(--dark-2);
    color:#fff;
    margin-top:16px;
}
.btn-secondary:hover{ background:var(--dark-2); }

/*.btn-ghost{*/
/*    background:var(--primary-100);*/
/*    color:var(--primary);*/
/*    margin-top:12px;*/
/*}*/
/*.btn-ghost:hover{ filter:brightness(.985); }*/

/*.sub-actions{*/
/*    margin-top:10px;*/
/*    display:flex;*/
/*    justify-content:flex-end;*/
/*    gap:10px;*/
/*    font-size:12px;*/
/*}*/
.link{
    color:var(--muted);
    text-decoration:none;
    font-weight:900;
    cursor:pointer;
    background:none;
    border:0;
    padding:0;
}
.link:hover{ text-decoration:underline; }

/* ===== Divider ===== */
.divider{
    margin:22px 0 16px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#9ca3af;
    font-size:14px;
    font-weight:900;
}
.divider::before, .divider::after{
    content:"";
    height:1px;
    flex:1;
    background:var(--line);
}

/* ===== SNS ===== */
.sns{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}
.sns-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    position:relative;
    padding-top:28px;
}

.sns-btn{
    width:54px;height:54px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.08);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:.15s ease;
    background:#fff;
}
.sns-btn:hover{ transform:translateY(-1px); }
.sns-btn:focus-visible{ outline:none; box-shadow:var(--focus); }
.sns-btn{
    position:relative;
    overflow: visible;
}

/* 중앙 위 정렬 */
.sns-btn .tooltip-wrap{
    position:absolute;
    bottom:100%;          /* 버튼 위 */
    left:50%;             /* 중앙 */
    transform:translateX(-50%);
    margin-bottom:12px;   /* 버튼과 간격 */
    pointer-events:none;
    width: max-content;
}
.sns-btn .tooltip{
    background:#fff;
    border:1px solid rgba(17,24,39,.12);
    box-shadow:0 10px 22px rgba(17,24,39,.12);
    border-radius:999px;
    padding:7px 12px;
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
    position:relative;

    transform-origin: 50% 100%;
    animation: floaty 1.15s ease-in-out infinite;
}
.kakao{ background:#FEE500; border-color:rgba(0,0,0,.06); }
.apple{ background:#111827; border-color:rgba(255,255,255,.06); }

/* Tooltip + bounce */
.tooltip-wrap{
    position:absolute;
    top:-34px;
    left:calc(50% - 35px); /* 카카오 버튼 위로 살짝 왼쪽 */
    transform:translateX(-50%);
    pointer-events:none;
}
.tooltip{
    background:#fff;
    border:1px solid rgba(17,24,39,.12);
    box-shadow:0 10px 22px rgba(17,24,39,.12);
    border-radius:999px;
    padding:7px 12px;
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
    position:relative;

    animation: floaty 1.15s ease-in-out infinite;
}
.tooltip::after{
    content:"";
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    bottom:-8px;
    width:0;height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid #fff;
    filter: drop-shadow(0 2px 0 rgba(17,24,39,.12));
}

@keyframes floaty{
    0%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-6px) scale(1.02)}
    100%{transform:translateY(0) scale(1)}
}
.sns-row:has(.sns-btn:hover) .tooltip,
.sns-row:has(.sns-btn:focus-visible) .tooltip{
    animation: floaty .9s ease-in-out infinite;
    border-color: rgba(29,91,255,.25);
    box-shadow:0 14px 30px rgba(17,24,39,.14);
}

.help{
    text-align:center;
    color:var(--muted);
    font-size:14px;
    line-height:1.55;
    margin-top:6px;
}

/* ===== Modal ===== */
.backdrop{
    position:fixed;
    inset:0;
    background:rgba(17,24,39,.45);
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    z-index:50;
}
.backdrop[aria-hidden="false"]{ display:flex; }
.modal{
    width:min(420px, 100%);
    background:#fff;
    border-radius:16px;
    box-shadow:0 30px 70px rgba(17,24,39,.22);
    overflow:hidden;
}
.modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    border-bottom:1px solid var(--line);
}
.modal-title{ font-weight:900; }
.icon-btn{
    width:36px;height:36px;
    border-radius:10px;
    border:0;
    background:white;
    cursor:pointer;
    font-weight:900;
}
.icon-btn:focus-visible{ outline:none; box-shadow:var(--focus); }
.modal-body{ padding:16px; }
.modal-desc{
    margin:0 0 12px;
    color:var(--muted);
    font-size:15px;
    line-height:1.5;
}
.modal-actions{
    display:flex;
    gap:10px;
    padding:0 16px 16px;
}
.btn-mini{
    flex:1;
    height:46px;
    border-radius:12px;
    border:0;
    font-weight:900;
    cursor:pointer;
}
.btn-join{
    background:#e9efff;   /* ✅ 캡처 느낌 연블루 */
    color:#1d5bff;        /* ✅ 파란 글자 */
    margin-top:12px;
}
.btn-join:hover{
    filter:brightness(0.99);
}
.btn-mini.primary{ background:var(--primary); color:#fff; }
.btn-mini.ghost{ background:#f3f4f6; color:#111827; }

.pro-only{ display:none; }

.theme-pro .member-only{ display:none; }
.theme-pro .pro-only{ display:block; }

/* ✅ 중개전문가 화면에서 하단 링크 가운데 */
.pro-bottom{
    margin-top:18px;
    text-align:center;
}

@media (max-width: 420px){
    .content{ padding:22px 16px 28px; }
    .tooltip-wrap{ left:calc(50% - 30px); }
}

.theme-member .btn-login{
    background:var(--primary);
    color:#fff;
    margin-top:16px;
}
.theme-member .btn-login:hover{ background:var(--primary-600); }

.theme-pro .btn-login{
    background:var(--dark);
    color:#fff;
    margin-top:16px;
}
.theme-pro .btn-login:hover{ background:var(--dark-2); }

.error-msg{
    margin-top:6px;
    font-size:14px;
    color:#ff3b30;      /* iOS 느낌 빨강 */
    display:none;       /* 기본은 숨김 */
    font-weight:500;
}

.overlay_dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 99999;
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "alpha(opacity=50)";
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
}

overlay_dialog img {
    width: 160px;
    height: 160px;
}

.login_back_echo {
    position: absolute;
    top: 60%;
    left: -175px;
    transform: translate(0, -50%);
    width: 36px;
    height: 36px;
    background: url(https://accounts.valueupmap.com/images/ico-btn-back-gray.png) no-repeat;
    background-size: 36px;
    border: none;
    cursor: pointer;
}

header {
    margin: 0;
    position: relative;
    text-align: center;
}

/* ===== 다른 기기 로그인 팝업 (prefix: vum-device-login-) ===== */
.vum-device-login-overlay[hidden] { display: none !important; }

.vum-device-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999; /* 기존 레이어보다 위로 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.35);
}

.vum-device-login-modal {
    width: min(560px, 100%);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.18);
    padding: 34px 28px 22px;
    text-align: center;
}

.vum-device-login-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.vum-device-login-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111;
    margin-bottom: 10px;
}

.vum-device-login-desc {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: #555;
    margin-bottom: 22px;
}

.vum-device-login-actions {
    display: flex;
    gap: 12px;
}

.vum-device-login-btn {
    flex: 1;
    height: 52px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.vum-device-login-btn--ghost {
    background: #fff;
    border: 1px solid #D9D9D9;
    color: #111;
}

.vum-device-login-btn--primary {
    background: #1E63FF;
    border: 1px solid #1E63FF;
    color: #fff;
}

.vum-device-login-btn:active { transform: translateY(1px); }

@media (max-width: 420px) {
    .vum-device-login-modal { padding: 28px 18px 18px; }
    .vum-device-login-title { font-size: 20px; }
}

.banner-container {
    width: 100%;
}
.banner {
    width: 100%;
    height: 72px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}