/* ライトテーマ */
:root {
    --bg: #ffffff;
    --text: #5a4a5e;
    --panel: #fff0f7;

    --btn: #bde7ff;
    --btn-hover: #a6dcff;
    --btn-text: #3a5a6e;

    --del: #ffb6c9;
    --del-hover: #ff9fb8;
    --del-text: #7a1f3d;

    --accent: #ff8fb1;
    --border-dark: #666;

    --control-height: 32px;
    }

/* ダークテーマ */
body.dark {
    --bg: #2b2730;
    --text: #f2e9f1;
    --panel: #3a3440;
  
}
/* ダークテーマ：出力見出し文字色 */
body.dark .output-title,
body.dark .output-sub {
    color: #ffffff;
}

/* =========================
   全体
========================= */
* {
    box-sizing: border-box;
    font-family:
        "Noto Sans JP",
        "Zen Kaku Gothic New",
        "ヒラギノ丸ゴ ProN",
        "Hiragino Maru Gothic ProN",
        "游ゴシック",
        "Yu Gothic",
        "Meiryo",
        sans-serif;
}

body {
    background: var(--bg);
    color: var(--text);
    padding: 12px;
    margin: 0;
    line-height: 1.6;
}

/* =========================
   タイトルバー
========================= */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2px 0 1px;
    font-size: 0.8em;
    letter-spacing: -0.05em;
}

/* =========================
   行レイアウト
========================= */
.row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.num {
    width: 24px;
    text-align: right;
}

/* =========================
   入力欄
========================= */
input[type="text"],
input[type="text-table"],
textarea {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    padding: 0 8px;
    box-shadow: 0 1px 3px rgba(168, 229, 255, 0.35);

    &:hover {
        border-color: #ff7eb6;
        box-shadow:
            0 0 0 2px rgba(255, 126, 182, 0.25),
            0 2px 6px var(--shadow-input);
    }

    &:focus {
        outline: none;
        border-color: var(--btn);
        box-shadow: 0 2px 6px rgba(0, 120, 255, 0.35);
    }
}

input[type="text"],
input[type="text-table"] {
    height: var(--control-height);
}

/* 表名 */
input[type="text-table"] {
    width: 195px;
}

/* 行入力 */
.row textarea {
    width: 260px;
    min-height: var(--control-height);
    padding: 6px 8px;
    resize: none;
    overflow: hidden;
    line-height: 1.5;

    &:hover{
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
    }
}

input::placeholder {
    color: #999;
}

/* 表名未入力警告 */
#tableName:placeholder-shown {
    border-color: #ff9f9f;
    background: #fff2f2;
    box-shadow: 0 1px 3px rgba(255, 120, 120, 0.35);
}

/* =========================
   入力行情報
========================= */
.info-note {
    margin-bottom: 11px;
}

/* =========================
   ボタン
========================= */
.controls {
  margin: 16px 0;
  display: flex;
  gap: 8px;
  width: fit-content;
}


button.theme-toggle {
    white-space: nowrap;
}

button {
    cursor: pointer;
    border: none;
    white-space: nowrap;
    border-radius: 10px;
    height: var(--control-height);
    padding: 0 14px;
    background: var(--btn);
    color: var(--btn-text);
    box-shadow: 0 2px 4px rgba(0, 120, 255, 0.25);

    &:hover{
        background: var(--btn-hover);
        box-shadow: 0 3px 6px rgba(0, 120, 255, 0.35);
    }

    &:active  {
        transform: translateY(1px);
    }

}


/* 削除ボタン */
button.delete {
    background: var(--del);
    color: var(--del-text);
    box-shadow: 0 2px 4px rgba(255, 80, 80, 0.35);

    &:hover {
        background: var(--del-hover);
        box-shadow: 0 3px 6px rgba(255, 80, 80, 0.45);
    }

}

/* =========================
   リンク
========================= */
a {
    color: #0088dd;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

/* =========================
   行とタイトル未入力時生成不可制御
========================= */
body:has(#tableName:placeholder-shown) #generate,
body:not(:has(.row)) #generate {
    pointer-events: none;
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== 出力見出し ===== */
.output-caption {
    margin: 16px 0 6px;
}

.output-title {
    font-size: 1.5em;
    font-weight: bold;
    color: #5a3a1e; 
    line-height: 1.3;
}

.output-sub {
    display: block;
    font-size: 0.5em;
    font-weight: normal;
    color: #8a7a6a;
    margin-top: 2px;
}

/* ===== 出力カード ===== */
.output-card {
    width: 500px;
    background: var(--panel);
    border-radius: 14px;
    padding: 14px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ===== コピーボタン ===== */
.copy-button {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 12px;
    padding: 4px 10px;
}

.output-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}


/* 出力テキスト */
.output-card pre {
    margin: 0;
    padding-top: 28px;
    background: none;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;   /* ← 行間 */
    font-family: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;
    font-size: 0.9em;
}


/* 空表示 */
pre:empty::before {
    content: "ここにロール表が表示されます";
    color: #999;
}

/* ===== UPDATE ===== */
.info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2px 0 1px;
    font-size: 0.8em;
    letter-spacing: -0.05em;
    color: #5a3a1e; 
}

.credit {
    margin: 14px 0 18px;
    text-align: center;
    font-size: 0.9em;
    color: var(--text);
}



/* =========================
   スマホ閲覧時設定
========================= */
@media (max-width: 520px) {
    .row textarea {
        width: 100%;
    }

    .output-card {
        width: 100%;
    }

    .output-title {
        font-size: 15px;
    }
}