* {
    box-sizing: border-box;
}


body {

    font-family:
    "Noto Sans JP",
    "Yu Gothic",
    sans-serif;

    background:#1b1e24;

    color:#eee;

    margin:0;

    padding:30px;

}



/* タイトル */

h1 {

    text-align:center;

    font-size:28px;

    margin-bottom:30px;

    color:#ffd86b;

}



/* 検索エリア */

.search-box {

    background:#252a34;

    padding:20px;

    border-radius:12px;

    max-width:700px;

    margin:0 auto 30px;

    display:flex;

    gap:10px;

}



/* 検索入力 */

input {

    flex:1;

    background:#11151b;

    border:1px solid #444;

    color:white;

    padding:12px 15px;

    border-radius:8px;

    font-size:16px;

}


input:focus {

    outline:none;

    border-color:#ffd86b;

}



/* ボタン共通 */

button {

    background:#ffd86b;

    color:#222;

    border:none;

    border-radius:8px;

    padding:10px 18px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}


button:hover {

    transform:translateY(-2px);

    background:#ffe89a;

}



/* テーブル */

table {

    width:100%;

    border-collapse:separate;

    border-spacing:0 15px;

}



/* ヘッダー */

thead th {

    color:#aaa;

    font-size:14px;

    text-align:left;

    padding:10px;

}



/* レシピカード */

tbody tr {

    background:#252a34;

    border-radius:12px;

}



/* セル */

td {

    padding:20px;

    vertical-align:top;

    height:100%;

}



/* アイテム名 */

td:first-child {

    width:20%;

    font-size:18px;

    font-weight:bold;

    color:#ffd86b;

}



/* ツリー・レシピ表示 */

pre {

    background:#11151b;

    border:1px solid #3b4252;

    padding:15px;

    border-radius:8px;

    white-space:pre-wrap;

    color:#b8e994;

    line-height:1.6;

    min-height:150px;

}



/* ツリー・レシピ枠 */

.recipe-box {

    position:relative;

    padding-bottom:65px;

}



/* コピー位置固定 */

.recipe-box .copy {

    position:absolute;

    bottom:20px;

    left:20px;

}



/* コピー按钮 */

.copy {

    background:#4caf50;

    color:white;

    padding:8px 14px;

    font-size:13px;

}


.copy:hover {

    background:#66bb6a;

}



/* スマホ対応 */

@media(max-width:800px){


    body {

        padding:15px;

    }



    table,
    tbody,
    tr,
    td {

        display:block;

        width:100%;

    }



    thead {

        display:none;

    }



    tbody tr {

        margin-bottom:20px;

    }



    td:first-child {

        width:auto;

    }



    .recipe-box {

        padding-bottom:70px;

    }


}

.no-result {

    text-align:center;

    padding:40px;

    color:#aaa;

    font-size:18px;

}

/* バージョン表示 */

.version {

    font-size:14px;

    color:#aaa;

    margin-left:10px;

}



/* 履歴リンク */

.history-link {

    display:inline;

    color:#ffd86b;

    text-decoration:none;

}

.history-link:hover {

    text-decoration:underline;

}