/* 全体のレイアウト */
.tool-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

/* 📺 時計ステージ（OBSキャプチャ用） */
.clock-stage {
    background: #fff; /* 初期背景 */
    padding: 40px;
    border-radius: 4px;
    border: 1px solid #ddd;
    text-align: center;
    transition: background 0.2s;
    /* OBSでのキャプチャ用アスペクト比固定（任意） */
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* デジタル時計 */
.digital-clock {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 5rem;
    font-weight: bold;
    color: #333f47; /* 初期文字色 */
    margin-bottom: 30px;
    line-height: 1;
}
.digital-clock small { font-size: 0.6em; opacity: 0.8; }

/* アナログ時計 */
.analog-wrapper { display: flex; justify-content: center; }
.analog-clock {
    width: 220px; height: 220px;
    border: 6px solid #333f47;
    border-radius: 50%;
    position: relative;
    background: transparent; /* 背景はステージに任せる */
}
.hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom; background: #333f47; border-radius: 4px; }
.hour { width: 7px; height: 55px; margin-left: -3.5px; }
.minute { width: 5px; height: 85px; margin-left: -2.5px; }
.second { width: 2px; height: 95px; margin-left: -1px; background: #e74c3c !important; /* 秒針は赤固定 */ }
.center-dot { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; background: #333f47; border-radius: 50%; transform: translate(-50%, -50%); }

/* アナログ目盛り */
.mark { position: absolute; width: 4px; height: 10px; background: #333f47; left: 50%; margin-left: -2px; transform-origin: 50% 110px; }
.m12 { transform: rotate(0deg); height: 15px; width: 6px; margin-left: -3px; }
.m3 { transform: rotate(90deg); }
.m6 { transform: rotate(180deg); }
.m9 { transform: rotate(270deg); }

/* 🎛️ 操作パネル（枠外） */
.control-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
    background: #fdfdfd;
    border-radius: 4px;
    border: 1px solid #eee;
}

.panel-section h4 { margin: 0 0 10px 0; color: #555; font-size: 0.9rem; }

/* おしゃれボタン */
.btn-group { display: flex; gap: 10px; }
.btn-action {
    flex: 1;
    padding: 10px;
    background: #fff;
    color: #333f47;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}
.btn-action:hover { background: #f4f4f4; border-color: #ccc; }
.btn-action.active { background: #333f47; color: #fff; border-color: #333f47; }

/* カラーコントロール */
.color-controls { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.color-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #666; }
input[type="color"] {
    border: 1px solid #ddd; padding: 0; width: 30px; height: 30px; border-radius: 4px; cursor: pointer; background: none;
}
.btn-special {
    padding: 8px 15px;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .digital-clock { font-size: 3rem; }
    .analog-clock { width: 150px; height: 150px; }
    .mark { transform-origin: 50% 75px; }
}