/*
CSS 優先順位
  セレクタ            強さ
  #id                 100
  .class	           10
  タグ （a,button 等）	 1
  ex： div .btn → 1 + 10 = 11
  ex： div .btn #login → 1 + 10 + 100 = 111 ←こっちが優先される
  同じ強さの時は、最後のやつが勝つ
*/

/*
全体設定
*/
header {
    margin-bottom: 50px;
}
body {
    color: white;
    background-color: black;
    font-size: 10px;
    text-align: center;
}
main {
    margin-bottom: 100px;
}

/*
大きな要素の中央寄せ
*/
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px; /* ネクストスペース */
    
}

/*
横並び
*/
.spcW {
    display: flex;
    align-items: center;
    gap: 5px;
}

/*
縦並び
*/
.spcH {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.btnBase {                     /* ボタンの基本クラス */
    display: flex;             /* ボタン内レイアウトを「flexbox」にする */
    justify-content: center;   /* flex（横方向）の中央寄せ */
    align-items: center;       /* flex（縦方向）の中央寄せ */
    padding: 0;                /* 高さ固定ならpaddingは0でもOK */
    box-sizing: border-box;    /* paddingを含めて幅計算 */
    border: 1px solid white; /* 境界線 */
    border-radius: 5px;        /* 軽く角を丸くする */
    background: black;       /* 背景色 */
    cursor: pointer;           /* ホバー時のポインター */
    color: white;            /* 文字色 */
    justify-content: center;   /* テキスト中央 */
    align-items: center;       /* テキスト中央 */
    transition: 0.2s;          /* ホバーアニメ用 */
}
.btnBase:hover {               /* ボタンパターン０１のホバー時 */
    background: white;       /* 背景色 */
    color: black;            /* 文字色 */
}

.dbBtn {                    /* ボタンパターン０２オーバーライド */
    width: 100px;               /* 幅調整 */
    height: 25px;              /* 高さも固定 */
    border-radius: 10%;        /* 完全な円形 */
}

.btnPtn03 {                    /* ボタンパターン０３オーバーライド */
    width: 70px;               /* 幅調整 */
    height: 18px;              /* 高さも固定 */
    border-radius: 2px;        /* 軽く角を丸くする */
}

.btnPtn04 {                    /* ボタンパターン０４オーバーライド */
    width: 40px;               /* 幅調整 */
    height: 40px;              /* 高さも固定 */
}

.btnPtn04:hover {              /* ボタンパターン０３のホバー時オーバーライド */
    background: rgb(7, 107, 179);       /* 背景色 */
    color: white;            /* 文字色 */
}


/*
横並び(ボタンスペース)
*/
.btnSpc01 {
    display: flex;
    align-items: center;
    gap: 100px;
    margin-bottom: 10px;
}

/*
ネクストスペース
*/
.next {
    margin-bottom: 20px;
}

/* 
グリッド２✕２　斜め
*/
.btnGrd02 {
    display: grid;                     /* この要素をCSS Gridにする */
    grid-template-columns: 1fr 1fr;    /* 列を2つ作る。幅は均等に */
    grid-template-rows: 1fr 1fr;       /* 行を2つ作る。高さは均等に */
    gap: 5px;                          /* 行と列の間隔を0px */
    grid-template-areas: 
    "_get _post"
    "_put _del";
}
.btnGrd03 ._1 { grid-area: _get; }      /* GET */
.btnGrd03 ._2 { grid-area: _post; }      /* POST */
.btnGrd03 ._3 { grid-area: _put; }      /* PUT */
.btnGrd03 ._4 { grid-area: _del; }      /* DELETE */

/* 
グリッド３✕４　十字
*/
.btnGrd03 {
    display: grid;                            /* この要素をCSS Gridにする */
    grid-template-columns: repeat(3, 1fr);    /* 列を3つ作る。幅は均等に */
    grid-template-rows: repeat(4, 1fr);       /* 行を4つ作る。高さは均等に */
    gap: 5px;                                 /* 行と列の間隔を0px */
    grid-template-areas: 
        "_1 _2 _3"
        "_4 _5 _6"
        "_7 _8 _9"
        ". _0 _back";
}
.btnGrd03 ._1 { grid-area: _1; }      /* 1 */
.btnGrd03 ._2 { grid-area: _2; }      /* 2 */
.btnGrd03 ._3 { grid-area: _3; }      /* 3 */
.btnGrd03 ._4 { grid-area: _4; }      /* 4 */
.btnGrd03 ._5 { grid-area: _5; }      /* 5 */
.btnGrd03 ._6 { grid-area: _6; }      /* 6 */
.btnGrd03 ._7 { grid-area: _7; }      /* 7 */
.btnGrd03 ._8 { grid-area: _8; }      /* 8 */
.btnGrd03 ._9 { grid-area: _9; }      /* 9 */
.btnGrd03 ._0 { grid-area: _0; }      /* 0 */
.btnGrd03 ._back { grid-area: _back; }      /* back */

/* 
テキストスペース０１
*/
.txtSpc01 {
    width: 300px;
}
/*
SPAN RED
*/
.fontCst {
    color: rgb(219, 68, 68);
}