/* ======================================================
   Hancot / DeviceAct OTP & Login Page
   White card + high-visibility professional color system
   ====================================================== */

/* =========================
   Color guide
   =========================
   기본 배경      #ffffff
   기본 글자      #111827
   보조 글자      #6b7280
   기본 테두리    #e5e7eb
   메인 파랑      #2563eb
   메인 파랑 hover #1d4ed8
   성공 녹색      #059669
   경고 주황      #d97706
   오류 빨강      #dc2626
   안내 배경      #eff6ff
   중요 안내 배경 #fffbeb
   오류 배경      #fef2f2
*/

#guide {
    white-space: pre-line;
}


.device-safe-text {
    color: #198754;
    font-weight: 700;
}



/* =========================
   Page layout
   ========================= */

.otp-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:40px 16px;
    background:#ffffff;
}

/* 화면 폭 지정 */
.otp-wrap{
    width:100%;
    max-width:960px;
    background:#ffffff;
    border-radius:18px;
    padding:32px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    border:1px solid #e5e7eb;
}
.otp-subtitle{
    text-align:center;
    font-size:14px;
    color:#6b7280;
    margin-top:6px;
    margin-bottom:24px;
    line-height:1.6;
}
.otp-wrap h2{
    text-align:center;
    margin-bottom:8px;
    font-size:30px;
    font-weight:800;
    color:#111827;
}

.otp-desc{
    text-align:center;
    font-size:15px;
    color:#6b7280;
    margin-bottom:24px;
}

/* =========================
   Form fields
   ========================= */

.otp-wrap input,
.otp-wrap select{
    width:100%;
    padding:12px;
    border-radius:10px;
    border:1px solid #d1d5db;
    background:#ffffff;
    color:#111827;
    outline:none;
}

.otp-wrap input::placeholder{
    color:#9ca3af;
}

.otp-wrap input:focus,
.otp-wrap select:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 2px rgba(37,99,235,.15);
}

.otp-row{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.otp-row > input,
.otp-row > select{
    flex:1 1 220px;
    min-width:200px;
}

.otp-row .otp-send-btn,
.otp-row button{
    flex:0 0 auto;
    min-width:120px;
}

/* =========================
   Buttons
   ========================= */

.otp-wrap button{
    padding:12px 16px;
    border-radius:12px;
    border:none;
    background:#2563eb;
    color:#ffffff;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
    transition:background-color .2s ease, opacity .2s ease, transform .1s ease;
}

.otp-wrap button:hover{
    background:#1d4ed8;
}

.otp-wrap button:active{
    transform:translateY(1px);
}

.otp-send-btn{
    min-width:120px;
    white-space:nowrap;
}

button:disabled{
    opacity:.55;
    cursor:not-allowed;
}

input:disabled{
    opacity:.7;
    cursor:not-allowed;
}

/* =========================
   OTP sections
   ========================= */

.otp-section{
    border:1px solid #e5e7eb;
    border-left:5px solid #2563eb;
    border-radius:12px;
    padding:16px 18px;
    margin-top:18px;
    background:#ffffff;
}

.otp-section:hover{
    background:#eff6ff;
    border-color:#93c5fd;
    border-left-color:#2563eb;
}

.otp-section h3{
    margin:0 0 10px;
    font-size:17px;
    font-weight:800;
    color:#111827;
}

.otp-state{
    margin-top:8px;
    font-size:13px;
    color:#6b7280;
    min-height:18px;
}

.otp-state.warn{
    color:#d97706;
    font-weight:800;
}

.otp-state.danger{
    color:#dc2626;
    font-weight:800;
    text-shadow:none;
}

.otp-hint{
    margin-top:8px;
    font-size:13px;
    color:#6b7280;
    line-height:1.45;
}

.otp-hint strong{
    color:#1e3a8a;
}

/* =========================
   Message area
   ========================= */

#msg{
    margin-top:10px;
    font-size:14px;
    min-height:18px;
    font-weight:700;
}

/* =========================
   Notice boxes
   ========================= */

.device-notice{
    width:100%;
    max-width:900px;
    margin:20px auto;
    padding:24px;
    background:#fffbeb;
    border:1px solid #fbbf24;
    border-left:6px solid #d97706;
    border-radius:12px;
    text-align:left;
    line-height:1.8;
    color:#78350f;
    font-size:14px;
}

.device-notice h3{
    margin:0 0 12px;
    font-size:20px;
    font-weight:800;
    color:#92400e;
}

.device-notice p{
    margin-bottom:12px;
    font-size:15px;
    line-height:1.8;
    text-align:left;
}

.device-notice label{
    cursor:pointer;
}

.device-check{
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid #fbbf24;
    display:flex;
    align-items:flex-start;
    gap:10px;
    text-align:left;
}

.device-check input[type="checkbox"]{
    margin-top:4px;
    width:18px;
    height:18px;
    flex-shrink:0;
}

.device-label{
    margin:0;
    font-size:15px;
    font-weight:700;
    color:#111827;
    cursor:pointer;
    line-height:1.6;
}

/* =========================
   Social login area
   ========================= */

.social-login-wrap{
    width:100%;
    margin-top:30px;
}

.social-title{
    text-align:center;
    margin-bottom:20px;
    color:#111827;
    font-weight:800;
}

.social-login-wrap,
.social-login-wrap a{
    width:100%;
}

.social-btn{
    width:100%;
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:12px;
    text-decoration:none;
    margin-bottom:12px;
    overflow:hidden;
    font-weight:700;
}

.naver-btn img,
.google-btn img{
    width:22px;
    height:22px;
}

.naver-btn{
    background:#03C75A;
    color:#ffffff;
}

.google-btn{
    background:#ffffff;
    color:#111827;
    border:1px solid #e5e7eb;
    display:flex !important;
    width:100% !important;
}

.kakao-btn{
    width:100%;
    height:56px;
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding-left:20px;
    background:#FEE500;
    border-radius:12px;
    text-decoration:none;
}

.kakao-full-img{
    width:22px !important;
    height:22px !important;
    object-fit:contain !important;
    margin-right:0;
}

.kakao-btn span{
    font-size:16px;
    font-weight:700;
    color:#191919;
}

/* Google material button */

.gsi-material-button {
    display:flex !important;
    width:100% !important;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    -webkit-appearance:none;
    background-color:#ffffff;
    background-image:none;
    border:1px solid #e5e7eb;
    border-radius:12px;
    box-sizing:border-box;
    color:#111827;
    cursor:pointer;
    font-family:'Roboto', arial, sans-serif;
    font-size:14px;
    letter-spacing:.25px;
    outline:none;
    overflow:hidden;
    padding:0 12px;
    position:relative;
    text-align:center;
    transition:background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align:middle;
    white-space:nowrap;
    max-width:100% !important;
    height:56px;
    min-width:100%;
}

.gsi-material-button .gsi-material-button-icon {
    height:20px;
    margin-right:10px;
    min-width:20px;
    width:20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
    align-items:center;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    height:100%;
    justify-content:center;
    gap:12px;
    position:relative;
    width:100%;
}

.gsi-material-button .gsi-material-button-contents {
    flex-grow:0;
    font-family:'Roboto', arial, sans-serif;
    font-weight:500;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align:top;
}

.gsi-material-button .gsi-material-button-state {
    transition:opacity .218s;
    bottom:0;
    left:0;
    opacity:0;
    position:absolute;
    right:0;
    top:0;
}

.gsi-material-button:disabled {
    cursor:default;
    background-color:#f3f4f6;
    border-color:#e5e7eb;
}

.gsi-material-button:disabled .gsi-material-button-contents,
.gsi-material-button:disabled .gsi-material-button-icon {
    opacity:38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color:#2563eb;
    opacity:12%;
}

.gsi-material-button:not(:disabled):hover {
    border-color:#93c5fd;
    box-shadow:0 1px 2px 0 rgba(60,64,67,.20), 0 1px 3px 1px rgba(60,64,67,.10);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color:#2563eb;
    opacity:8%;
}

/* =========================
   Terms row
   ========================= */

.terms-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 0;
}

.terms-left{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    cursor:pointer;
}

.terms-left input[type="checkbox"]{
    width:18px;
    height:18px;
    margin:0;
    flex:0 0 auto;
    vertical-align:middle;
}

.terms-text{
    display:inline-block;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.terms-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:70px;
    height:36px;

    font-size:13px;
    font-weight:700;

    background:#2563eb !important;
    color:#ffffff !important;

    border:1px solid #2563eb;
    border-radius:10px;

    cursor:pointer;
}

.terms-btn:hover{
    background:#1d4ed8 !important;
    border-color:#1d4ed8;
}

/* =========================
   Terms modal
   ========================= */

.terms-modal{
    position:fixed;
    inset:0;
    z-index:9999;
}

.terms-modal.d-none{
    display:none;
}

.terms-backdrop{
    position:absolute;
    inset:0;
    background:rgba(17,24,39,.45);
}

.terms-box{
    position:relative;
    width:min(980px, 96vw);
    height:92vh;
    margin:4vh auto 0;
    background:#ffffff;
    border-radius:16px;
    overflow:hidden;
    border:1px solid #e5e7eb;
    display:flex;
    flex-direction:column;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.terms-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-bottom:1px solid #e5e7eb;
    background:#ffffff;
}

.terms-frame{
    flex:1;
    width:100%;
    border:0;
    background:#ffffff;
}

.terms-close{
    background:#f3f4f6;
    color:#111827;
    padding:8px 12px;
    border-radius:10px;
    border:1px solid #d1d5db;
    cursor:pointer;
    font-weight:800;
}

.terms-close:hover{
    background:#e5e7eb;
}

.terms-agree{
    background:#2563eb;
    color:#ffffff;
    padding:8px 12px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    font-weight:900;
}

.terms-agree:hover{
    background:#1d4ed8;
}

/* =========================
   서버/개인단말 저장 정보
   ========================= */

.save-info-box{
    margin:16px 0;
    padding:18px 20px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-left:5px solid #2563eb;
    border-radius:12px;
    text-align:left;
}

.save-info-box h4{
    margin:0 0 12px 0;
    font-size:18px;
    font-weight:800;
    color:#1e3a8a;
}

.save-info-box ul{
    margin:0;
    padding-left:22px;
}

.save-info-box li{
    margin-bottom:8px;
    font-size:15px;
    line-height:1.7;
    color:#374151;
}

.save-info-box li:last-child{
    margin-bottom:0;
}

/* =========================
   Success / warning / error utility boxes
   ========================= */

.success-box{
    background:#ecfdf5;
    border:1px solid #10b981;
    border-left:5px solid #059669;
    color:#065f46;
    border-radius:12px;
    padding:14px 16px;
    font-weight:700;
    line-height:1.7;
}

.info-box{
    background:#eff6ff;
    border:1px solid #93c5fd;
    border-left:5px solid #2563eb;
    color:#1e3a8a;
    border-radius:12px;
    padding:14px 16px;
    font-weight:700;
    line-height:1.7;
}

.recovery-warning,
.warning-box{
    margin-top:16px;
    padding:14px 16px;
    background:#fef2f2;
    border:1px solid #fecaca;
    border-left:5px solid #dc2626;
    border-radius:12px;
    color:#991b1b;
    font-weight:700;
    line-height:1.7;
}

/* =========================
   Mobile
   ========================= */

@media (max-width:768px){

    .otp-page{
        padding:24px 12px;
    }

    .otp-wrap{
        padding:24px 18px;
        border-radius:14px;
    }

    .otp-wrap h2{
        font-size:26px;
    }

    #emailSendBtn,
    #emailVerifyBtn,
    #smsSendBtn,
    #smsVerifyBtn{
        width:100%;
        min-width:100%;
        height:56px;
        font-size:16px;
        font-weight:700;
    }

    .save-info-box{
        padding:16px;
    }

    .save-info-box h4{
        font-size:17px;
    }

    .save-info-box li{
        font-size:14px;
    }

    .recovery-warning,
    .warning-box{
        font-size:14px;
    }
}

@media (max-width:520px){
    .otp-wrap{
        padding:22px 18px;
    }
}


/* 저장정보 제목 + 라디오 */
.save-info-box h4{
    display:flex;
    align-items:center;
    gap:10px;

    margin:0 0 12px 0;
    font-size:18px;
    font-weight:800;
    color:#1e3a8a;
}

.save-info-box h4 input[type="radio"]{
    width:20px;
    height:20px;
    margin:0;
    flex-shrink:0;
}


.save-info-box:has(input[type="radio"]:checked){
    border-left:5px solid #16a34a;
    background:#f0fdf4;
}
.storage-section {
    margin-bottom: 24px;
}

.storage-desc {
    color: #64748b;
    margin-bottom: 16px;
}

.storage-select-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 3개에서 2개로 줄였음 */
    gap: 14px;
}

.storage-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    cursor: pointer;
    background: #ffffff;
    min-height: 120px;
}

.storage-card:hover {
    border-color: #2563eb;
    background: #f8fafc;
}

.storage-card input {
    width: 20px;
    height: 20px;
    margin-top: 4px;
}

.storage-card b {
    display: block;
    font-size: 17px;
    margin-bottom: 8px;
}

.storage-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.storage-card.recommend {
    border-color: #16a34a;
}

.storage-guide{
    font-weight:400;
}

.guide-title{
    display:block;
    font-weight:800;
    margin-bottom:8px;
}

@media (max-width: 768px) {
    .storage-select-wrap {
        grid-template-columns: 1fr;
    }
}