@charset "UTF-8";
/* CSS Document */
/* 今日の雑学｜ランダム雑学ジェネレーター */
/* みんなの知識 ちょっと便利帳 */
/* 2026/08/03 */

/* =========================================================
   zatsu- プレフィックスで完全スコープ。
   ========================================================= */

.zatsu-wrap{
    font-family: system-ui,-apple-system,"Segoe UI",sans-serif;
    background:#EFF4F1;
    margin: 10px auto;
    padding:0 10px;
    border: 2px solid #1F4E4C;
    border-radius:10px;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
    color:#1A2622;
    line-height:1.9;
    font-size:calc(18px * var(--zatsu-font-scale, 1));
    --zatsu-font-scale: 1;
}
.zatsu-wrap *{ box-sizing:border-box; }

.zatsu-container{
    max-width:700px;
    margin:auto;
    padding: 22px 0 32px;
}

.zatsu-header{
    text-align:center;
    padding: 6px 4px 4px;
}
.zatsu-header h1{
    font-family: "Yu Mincho","Hiragino Mincho ProN",serif;
    font-size: clamp(26px, 6vw, 34px);
    margin: 0 0 10px;
    letter-spacing: .04em;
    color:#1F4E4C;
    font-weight:700;
}
.zatsu-header p{
    margin:0;
    font-size:calc(17.5px * var(--zatsu-font-scale, 1));
    color:#2E453F;
}

.zatsu-textsize{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin:14px 0 0;
}
.zatsu-textsize-label{
    font-size:15px;
    font-weight:700;
    color:#1F4E4C;
}
.zatsu-textsize-btn{
    font-family:inherit!important;
    font-size:18px!important;
    font-weight:700!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    border-radius:50%!important;
    border:2px solid #1F4E4C!important;
    background:#FFFFFF!important;
    color:#1F4E4C!important;
    cursor:pointer!important;
    line-height:1!important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.zatsu-textsize-btn:hover{ background:#1F4E4C!important; color:#FFFFFF!important; }
.zatsu-textsize-btn:focus-visible{ outline:3px solid #B8860B!important; outline-offset:2px!important; }
.zatsu-textsize-btn:disabled{ opacity:.4!important; cursor:default!important; background:#FFFFFF!important; color:#1F4E4C!important; }
.zatsu-textsize-current{
    font-size:15px;
    font-weight:700;
    color:#3E534D;
    min-width:52px;
    text-align:center;
}

.zatsu-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:20px 0 8px;
}
.zatsu-btn{
    font-family:inherit!important;
    font-size:calc(17px * var(--zatsu-font-scale, 1))!important;
    font-weight:700!important;
    padding:12px 18px!important;
    min-height:48px!important;
    border-radius:24px!important;
    border:2px solid #1F4E4C!important;
    background:#1F4E4C!important;
    color:#FFFFFF!important;
    cursor:pointer!important;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background-color .12s ease!important;
    white-space:nowrap!important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.zatsu-btn:hover{ transform: translateY(-1px); box-shadow:0 3px 12px rgba(31,78,76,.3)!important; }
.zatsu-btn:active{ transform: translateY(0)!important; }
.zatsu-btn:focus-visible{ outline:3px solid #B8860B!important; outline-offset:2px!important; }
.zatsu-btn:disabled{ opacity:.55!important; cursor:default!important; transform:none!important; box-shadow:none!important; }
.zatsu-btn.zatsu-btn-ghost{
    background:#FFFFFF!important;
    color:#1F4E4C!important;
}
.zatsu-btn.zatsu-btn-fav.active{
    background:#D97706!important;
    border-color:#B45309!important;
    color:#FFFFFF!important;
}
.zatsu-btn.zatsu-btn-line{
    background:#06C755!important;
    border-color:#05A648!important;
    color:#FFFFFF!important;
}
.zatsu-btn.zatsu-btn-speak.active{
    background:#1F4E4C!important;
    color:#FFFFFF!important;
}

.zatsu-card{
    background:#fff;
    border: 2px solid #C7D8D4;
    border-radius:14px;
    padding:24px;
    margin:20px 0 18px 0;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
    min-height:140px;
}

.zatsu-card-inner{
    display:flex;
    gap:20px;
    align-items:flex-start;
    flex-wrap:wrap;
}
.zatsu-thumb{
    flex: 0 0 auto;
    width:130px;
    height:130px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid #C7D8D4;
}
.zatsu-card-body{
    flex:1;
    min-width:200px;
}
.zatsu-title{
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:calc(23px * var(--zatsu-font-scale, 1));
    font-weight:700;
    margin:0 0 12px;
    color:#16211D;
    line-height:1.6;
}
.zatsu-extract{
    font-size:calc(18px * var(--zatsu-font-scale, 1));
    color:#22332F;
    margin:0 0 16px;
    line-height:1.9;
}
.zatsu-card-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.zatsu-link{
    display:inline-block;
    font-size:calc(17px * var(--zatsu-font-scale, 1));
    font-weight:700;
    color:#0F3E3C;
    text-decoration:underline;
    white-space:nowrap;
    padding:4px 2px;
}
.zatsu-link:hover{ color:#1F4E4C; }

.zatsu-note{
    font-size:calc(14.5px * var(--zatsu-font-scale, 1));
    color:#3E534D;
    text-align:center;
    margin:8px 0 0;
    line-height:1.6;
}

.zatsu-state{
    text-align:center;
    padding: 36px 10px;
    color:#2E453F;
    font-size:calc(17.5px * var(--zatsu-font-scale, 1));
}
.zatsu-state.zatsu-error{ color:#8C2E22; font-weight:700; }
.zatsu-spinner{
    width:30px; height:30px;
    margin:0 auto 14px;
    border-radius:50%;
    border:4px solid #DCE7E4;
    border-top-color:#1F4E4C;
    animation: zatsu-spin .8s linear infinite;
}
@keyframes zatsu-spin{ to{ transform:rotate(360deg); } }

.zatsu-section{
    margin-top:22px;
}
.zatsu-section-title{
    font-size:calc(17px * var(--zatsu-font-scale, 1));
    font-weight:700;
    color:#1F4E4C;
    margin:0 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.zatsu-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.zatsu-item{
    font-size:calc(15.5px * var(--zatsu-font-scale, 1));
    font-weight:600;
    color:#22332F;
    background:#FFFFFF;
    border:1.5px solid #C7D8D4;
    border-radius:18px;
    padding:7px 14px;
    cursor:pointer;
    max-width:220px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition: background .12s ease, color .12s ease;
}
.zatsu-item:hover,
.zatsu-item:focus-visible{
    background:#1F4E4C;
    color:#FFFFFF;
}

.zatsu-toast{
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(31, 78, 76, 0.95);
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.zatsu-toast.show{ opacity: 1; }

.zatsu-footer{
    text-align:center;
    margin-top:24px;
    font-size:calc(15.5px * var(--zatsu-font-scale, 1));
    color:#3E534D;
    line-height:2;
}
.zatsu-footer a{ color:#0F3E3C; font-weight:700; text-decoration:underline; }
.zatsu-count-num{ font-weight:700; color:#1F4E4C; font-size:calc(18px * var(--zatsu-font-scale, 1)); }