/* ベースの優しい空間作り（全デバイス共通） */
.zukan-gk-wrap * { box-sizing: border-box; } /* 余白計算のバグを防ぐ魔法 */

.zukan-gk-wrap {
    display: flex; justify-content: center; align-items: center;
    min-height: 80vh; background-color: #faf9f5; 
    padding: 20px;
}

/* スマホ用（基本）のスタイル：縦に並べる */
.zukan-gk-box {
    background: #fff; padding: 40px 30px; border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); width: 100%; max-width: 400px; /* スマホでは幅いっぱいにしない */
    display: flex; flex-direction: column; gap: 0;
    animation: floatUp 0.6s ease forwards;
    margin: 0 auto; /* 中央に配置 */
}
@keyframes floatUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.gk-left-col, .gk-right-col {
    text-align: center;
    width: 100%;
}

/* 門番キャラクター */
.gk-character-img {
    width: 100px; height: 100px; margin: 0 auto 20px;
    background-color: #f4eee6; border-radius: 50%;
    background-size: contain; background-position: center; background-repeat: no-repeat;
}

.gk-title {
    font-size: 18px; color: #5c544e; line-height: 1.6; margin-bottom: 30px; font-weight: bold;
    font-family: inherit;
}

/* 入力欄全体の設定 */
.gk-input-group { margin-bottom: 25px; text-align: left; max-width: 280px; margin-left: auto; margin-right: auto; }
.gk-input-group label { display: block; font-size: 13px; color: #8c8279; margin-bottom: 8px; font-weight: bold; }

/* 入力フィールド単体の干渉突破 */
.gk-input-text, .gk-input-pin {
    width: 100%; padding: 15px; border: 2px solid #e6e1d8; border-radius: 10px;
    font-size: 18px; color: #5c544e; text-align: center; outline: none; background: #faf9f5;
    font-family: inherit; margin: 0;
}
.gk-input-pin { letter-spacing: 10px; font-size: 24px; }

/* PINパッド（スマホ） */
.gk-pin-pad {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;
    margin-bottom: 30px; max-width: 280px; margin-left: auto; margin-right: auto;
}

/* PINボタンの干渉突破（ここを大幅強化） */
.pin-btn {
    appearance: none; -webkit-appearance: none; /* SWELLのデフォルトスタイルを完全に消す */
    background: #fff; border: 1px solid #f0ebe1; border-radius: 50%;
    width: 100%; aspect-ratio: 1; /* 正方形にする */
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #5c544e; cursor: pointer; transition: 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    padding: 0; margin: 0; line-height: 1; font-family: inherit;
}
.pin-btn:hover { background: #fffbf5; border-color: #d8c8b8; }
.pin-btn:active { background: #f4eee6; transform: scale(0.95); }
.pin-clear, .pin-del { font-size: 16px; color: #a39a92; font-weight: bold; }

/* アンロックボタン */
.gk-btn-unlock {
    appearance: none; -webkit-appearance: none; width: 100%; max-width: 280px;
    padding: 18px; background: #8c8279; color: #fff; border: none;
    border-radius: 30px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.3s;
    box-shadow: 0 4px 15px rgba(140, 130, 121, 0.3);
    margin: 0 auto; display: block; font-family: inherit;
}
.gk-btn-unlock:hover { background: #5c544e; }
.gk-error-msg { color: #d98c8c; font-size: 13px; margin-top: 15px; font-weight: bold; min-height: 20px; text-align: center; }

/* =========================================
   ★レスポンス（PC用：幅768px以上）
   間延びさせず、2列に美しく固定する魔法
========================================= */
@media (min-width: 768px) {
    .zukan-gk-box {
        max-width: 720px; /* PCでは幅を広げるが、引き伸ばしすぎない */
        flex-direction: row; /* 横並びにする */
        align-items: center;
        gap: 0;
        padding: 50px;
    }
    
    .gk-left-col {
        flex: 1; /* 左半分を使う */
        border-right: 2px dashed #f0ebe1; /* 真ん中に優しい点線を引く */
        padding-right: 40px;
        padding-top: 0; padding-bottom: 0;
    }
    
    .gk-right-col {
        flex: 1; /* 右半分を使う */
        padding-left: 40px;
        padding-top: 0; padding-bottom: 0;
    }

    /* PCでは各要素を中央に配置 */
    .gk-title { margin-bottom: 40px; }
    .gk-input-group { max-width: 100%; } /* カラム幅いっぱいに */
    .gk-input-text, .gk-input-pin { max-width: 260px; margin: 0 auto; display: block; } /* フィールド自体は中央に */
    
    /* PCでのPINパッドのサイズ固定 */
    .gk-pin-pad {
        gap: 12px;
        max-width: 240px; /* PINパッド全体の最大幅 */
        margin: 0 auto 30px; /* PINパッドを中央に寄せる */
    }
    
    .gk-btn-unlock { max-width: 240px; }
}