/* 既存のスタイルはそのまま使用します */
body, html {
    font-family: "YakuHanJPs", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    margin: 10px;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
form {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* textareaの設定 */
textarea { 
    height: 200px;
    flex-grow: 1;  /* flex-growを増やして、より多くのスペースを確保 */
    margin: 0 0 10px 0;
    padding: 10px;
    overflow: auto; /* オーバーフロー時にスクロールバーを表示 */
}
input[type="submit"] {
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}
input[type="submit"]:hover {
    background-color: #45a049;
}
/* ボタンのスタイリング */
#copyButton, #fetchTextButton {
    max-width: 200px; /* ボタンの最大幅をウィンドウ幅に合わせる */
    margin: 10px 0; /* 上下に10ピクセルのマージンを設る */
    display: block; /* ブロックレベル要素として表示 */
}
/* プロンプトのテキストエリアのスタイリングを変更 */
#prompt {
    width: 100%; /* 横幅いっぱいに広がるように設定 */
    height: auto; /* 高さは自動調整 */
    overflow: auto; /* オーバーフロー時にスクロールバーを表示 */
    white-space: pre-wrap; /* 改行文字を尊重して表示 */
}

ul {
    list-style-type: none;
    padding: 0;
}
a {
    text-decoration: none;
    color: #333;
}
a:hover {
    color: #007bff;
}
.date {
    color: #666;
    font-size: 0.9em;
}
.button-link {
    display: inline-block;
    margin-left: 10px;
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    max-width: 200px; /* ボタンの最大幅を設定 */
    margin: 10px auto; /* 上下にマージンを設定し、左右は自動で中央揃え */
    display: block; /* ブロックレベル要素として表示 */
}
.button-link:hover {
    background-color: #0056b3;
}
.edit-link {
    background-color: #28a745;
}
.edit-link:hover {
    background-color: #218838;
}
.delete-link {
    background-color: #dc3545; /* 赤色 */
}
.delete-link:hover {
    background-color: #c82333; /* ホバー時の赤色を少し濃く */
}
.memo-content {
background-color: #f9f9f9; /* 薄い背景色 */
border: 1px solid #ddd; /* 枠線 */
padding: 10px; /* 内側の余白 */
margin-top: 10px; /* 上部の余白 */
}
.image-wrapper {
text-align: center; /* 画像を中央揃えにする */
margin: 5px 0; /* 上下のマージンを設定 */
}

.image-wrapper img {
    max-width: 100%; /* 画像の最大幅を設定（画像が大きすぎる場合に備えて） */
    height: auto; /* 画像の高さを自動調整 */
    border: 2px solid #ddd; /* 画像の枠線を設定 */
    border-radius: 10px; /* 画像の角を丸くする */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 画像に影を追加 */
}

.copy-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 9999;
}
.buttons-container {
    flex-direction: row; /* 子要素を横方向に並べる */
    justify-content: flex-start; /* 子要素をコンテナの左端から配置 */
    flex-wrap: wrap; /* 必要に応じて複数行に折り返し */
}
.button-link {
    display: inline-block; /* ボタンをインラインブロック要素として表示 */
}

.content {
  border: 1px solid gray; /* 灰色の枠を少し太くする */
  border-radius: 5px; /* 角を少し丸くする */
  padding: 10px; /* 内側の余白 */
}

/* postのスタイル */
#content,
#preview-content {
  font-family: "YakuHanJPs", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: var(--font-size-body-1);
  line-height: var(--line-height-body);
  color: var(--color-highEmphasis);
  word-break: break-all;
  overflow-wrap: break-word;
}

#content h1::before,
#content h2::before,
#content h3::before,
#content h4::before,
#content h5::before,
#content h6::before,
#preview-content h1::before,
#preview-content h2::before,
#preview-content h3::before,
#preview-content h4::before,
#preview-content h5::before,
#preview-content h6::before {
  content: "■";
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#preview-content h1,
#preview-content h2,
#preview-content h3,
#preview-content h4,
#preview-content h5,
#preview-content h6 {
  font-weight: bold;
  font-feature-settings: "palt";
  margin-top: 30px; /* 上のマージンを設定 */
}

#content h1,
#preview-content h1 {
  font-size: 2em;
  border-bottom: solid;
  margin-top: 50px; /* 上のマージンを設定 */
  margin-bottom: 20px; /* 下のマージンを設定 */
}

#content h2,
#preview-content h2 {
  font-size: 1.5em;
}

#content h3,
#preview-content h3 {
  font-size: 1.25em;
}

#content h4,
#preview-content h4 {
  font-size: 1.2em;
}

#content h5,
#preview-content h5 {
  font-size: 1.1em;
}

#content h6,
#preview-content h6 {
  font-size: 1.0em;
}


#content p,
#preview-content p {
  margin: 16px 0;
}

#content li p,
#preview-content li p {
  margin: 0;
}


#content pre,
#preview-content pre {
  padding: 16px;
  display: block;
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  overflow-x: auto;
  border: 1px solid #d3d3d3; /* 灰色の枠 */
}

#content pre code,
#preview-content pre code {
  background-color: #1c1b1b;
  color: #f8f8f2;
  padding: 16px;
  display: block;
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  overflow-x: auto;
}

#content pre:has(> code),
#preview-content pre:has(> code) {
  padding: 0; /* pre内にcodeがある場合のpaddingを0に設定 */
}

#content strong,
#preview-content strong {
  font-weight: bold;
}

#content em,
#preview-content em {
  font-style: italic;
}

#content del,
#preview-content del {
  text-decoration: line-through;
}


#content blockquote,
#preview-content blockquote {
  color: var(--color-mediumEmphasis);
  padding: 8px 16px;
  position: relative;
  margin: 24px 0;
}

blockquote {
    color: #666666;
    margin: 0;
    padding-left: 10px;
    border-left: 0.5em #eee solid;
  }

#content ul,
#content ol,
#preview-content ul,
#preview-content ol {
  padding-left: 1.5em;
  margin: 2px 0;
}

#content ul,
#preview-content ul {
  list-style-type: disc;
}

#content ol,
#preview-content ol {
  list-style-type: decimal;
}

#content img,
#preview-content img {
  background-color: var(--color-gray0);
  border: 2px solid #d3d3d3; /* 薄いグレーの枠を追加 */
  max-width: 100%;
}

/* サムネイル画像（リンク内の画像）のサイズ制限 */
.main-content a img,
#content a img,
#preview-content a img {
  max-width: 500px;
  max-height: 500px;
  width: auto;
  height: auto;
  object-fit: contain; /* アスペクト比を維持 */
}

#content table,
#preview-content table {
    width: auto;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

#content th,
#preview-content th {
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    min-width: 120px;  /* 最小幅を設定 */
}

#content td,
#preview-content td {
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    min-width: 120px;  /* 最小幅を設定 */
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    table {
        font-size: 14px;
    }
    
    th, td {
        padding: 0.5rem;
    }
    
    /* 総合評価列は改行を許可 */
    td:last-child {
        white-space: normal;
        min-width: 200px;
    }
}

#content hr,
#preview-content hr {
  height: 2px;
}

p code {
  background-color: #f5f5f5; /* 灰色の背景色 */
  border-radius: 3px; /* 角を少し丸くする */
  padding: 0.2em 0.4em; /* 内側の余白 */
  font-family: 'Courier New', Courier, monospace; /* プログラムコードっぽいフォント */
  font-size: 0.95em; /* 文字サイズを少し小さくする */
}

/* GitHub風のテーブルスタイル */
table {
  border-collapse: collapse;
  margin-bottom: 1em;
}

table, th, td {
  border: 1px solid #333; /* 境界線を太くして色を濃くする */
}

th, td {
  padding: 8px;
  text-align: left;
}

th {
  background-color: #d3d3d3; /* タイトル行の背景色をライトグレーに変更 */
  font-weight: bold; /* タイトル行のフォントを太字に */
  text-align: center; /* タイトル行のテキストを中央揃えに */
}

tr:nth-child(even) {
  background-color: #f6f8fa;
}

/* テーブルのタイトル行のスタイル */
table thead tr {
  background-color: #87ceeb; /* スカイブルー */
  color: black; /* タイトル行の文字色 */
  font-weight: bold; /* タイトル行のフォントを太字に */
  text-align: center; /* タイトル行のテキストを中央揃えに */
}

code {
    font-size: .875em;
    color: #000000;
    word-wrap: break-word;
}

/* Qiita風のテーブルヘッダースタイル */
table thead th {
  background-color: #55c500;
  color: white;
  padding: 10px;
  border: 1px solid #e1e4e8;
  font-weight: normal;
  text-align: center; /* 中央揃えを追加 */
}
/* ============================================
   ページ切り替えモーダル（post.html用）
   ============================================ */

/* オーバーレイ */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2500;
    justify-content: center;
    align-items: center;
}

/* ダイアログ */
.overlay .dialog {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.overlay .dialog h5 {
    margin: 0 0 15px 0;
}

/* ページリスト */
.page-list {
    max-height: 60vh;
    overflow-y: auto;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 15px;
}

.page-item {
    padding: 12px 16px;
    border-bottom: 1px solid #dee2e6;
    cursor: pointer;
    transition: background-color 0.2s;
    background-color: white;
}

.page-item:last-child {
    border-bottom: none;
}

.page-item:hover {
    background-color: #f8f9fa;
}

.page-item.selected {
    background-color: #0d6efd;
    color: white;
}

.page-item.selected .page-date,
.page-item.selected .page-filename {
    color: rgba(255, 255, 255, 0.8);
}

.page-date {
    font-size: 0.8em;
    color: #6c757d;
    margin-bottom: 2px;
}

.page-title {
    font-weight: 500;
    margin-bottom: 2px;
}

.page-filename {
    font-size: 0.75em;
    color: #999;
    font-family: monospace;
}

/* ============================================
   レスポンシブ対応（スマホ・タブレット）
   ============================================ */

/* 閲覧ページ専用：ページ全体スクロール */
body.permalink-page {
    height: auto;
    display: block;
    overflow-x: hidden;
}

body.permalink-page .content {
    overflow-y: visible; /* 縦スクロールは親に任せる */
}

/* コンテンツ全体のオーバーフロー制御 */
.content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* テーブルの横スクロール対応 */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.table-wrapper table {
    margin-bottom: 0;
    border: none;
}

/* スマホ・タブレット用スタイル */
@media screen and (max-width: 768px) {
    /* ページ全体スクロールを有効にする */
    body, html {
        height: auto;
        display: block;
        overflow-x: hidden;
    }

    /* コンテンツのパディング調整 */
    .content {
        padding: 8px;
        overflow-x: auto;
        overflow-y: visible; /* 縦スクロールは親に任せる */
    }

    /* 見出しのサイズ調整 */
    #content h1,
    #preview-content h1 {
        font-size: 1.5em;
        margin-top: 30px;
    }

    #content h2,
    #preview-content h2 {
        font-size: 1.25em;
    }

    #content h3,
    #preview-content h3 {
        font-size: 1.1em;
    }

    /* 画像をスマホ画面幅に収める */
    #content img,
    #preview-content img {
        max-width: 100%;
        height: auto;
    }

    /* サムネイル画像もスマホでは画面幅に収める */
    #content a img,
    #preview-content a img {
        max-width: 100%;
        max-height: none;
    }

    /* テーブルセルの最小幅を解除 */
    #content th,
    #content td,
    #preview-content th,
    #preview-content td {
        min-width: auto;
        padding: 0.5rem;
        font-size: 0.9em;
    }

    /* preタグのオーバーフロー */
    #content pre,
    #preview-content pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* さらに小さい画面用 */
@media screen and (max-width: 480px) {
    body, html {
        margin: 5px;
    }

    .content {
        padding: 5px;
    }

    #content h1,
    #preview-content h1 {
        font-size: 1.3em;
    }

    #content h2,
    #preview-content h2 {
        font-size: 1.15em;
    }

    #content h3,
    #preview-content h3 {
        font-size: 1.05em;
    }

    /* ボタンのサイズ調整 */
    .button-link {
        padding: 4px 8px;
        font-size: 0.9em;
        margin: 5px;
    }
}