/* =========================================================
  style.css  ―  全ページ共通スタイル
  =========================================================
  構成：
    01. CSS Variables（テーマカラー・共通値）
    02. Base / Reset
    03. Layout（ページ骨格・sticky footer）
    04. Header
    05. Footer
    06. X リンク
    07. Menu ボタン（トップ・マイページ）
    08. Item Cards（作品一覧カード）
    09. Button Group（submit ボタン群）
    10. Forms（入力フォーム・バリデーション表示）
    11. Rating（星評価 共通）
    12. Icons / MyPage（ユーザーアイコン・マイページ）
    13. Review History（レビュー履歴カード）
    14. Withdraw（退会関連 ― mypage / account_delete_confirm 共通）
    15. Responsive（@media はここに集約）

  移動済み：
    - .box / .reply / .meta / .error / textarea 幅 → item_detail.css
    - .item-detail-wrap 以降の作品詳細レイアウト  → item_detail.css
  ========================================================= */


/* =========================================================
  01. CSS Variables（テーマ）
========================================================= */
:root {
  --bg:           #f4f4f4;
  --text:         #2e2e2e;
  --muted:        #777;
  --primary:      #4a4a4a;
  --primary-dark: #2f2f2f;
  --accent:       #888;
  --card:         #ffffff;
  --border:       rgba(0, 0, 0, 0.1);
}


/* =========================================================
  02. Base / Reset（全体共通）
  - sticky footer のために html/body をフルハイト化
  - body を縦 Flex にして main が余白を吸収
========================================================= */
html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden; /* 横はみ出し防止（全デバイス共通） */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  padding: 0;
  background-color: #dbedf0;
  color: var(--text);
  line-height: 1.6;
}

ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}


/* =========================================================
  03. Layout（ページ骨格）
  - main を伸縮領域にして footer を最下部へ
========================================================= */
main {
  flex: 1;

  /* スマホはほぼ全幅、PCは最大幅 1100px で制限 */
  width: min(1100px, calc(100% - 48px)); /* 左右 24px ずつの余白 */
  margin: 18px auto;
  padding: 32px;

  background: #fafafa;
  border-radius: 18px;
  border: 1px solid rgba(0, 60, 80, 0.12);
  box-shadow:
    0 18px 40px rgba(0, 60, 80, 0.18),
    0 2px 0 rgba(255, 255, 255, 0.9) inset;
}


/* =========================================================
  04. Header
========================================================= */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;

  background: linear-gradient(90deg, #0078d7, #005a9e);
  border-bottom: 1px solid var(--border);

  position: sticky;
  top: 0;
  z-index: 10;
}

header h1 {
  font-size: 1.7rem;
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
  margin: 0;
  font-weight: 700;
  color: #fff;
}

header nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

header nav span {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 500;
}

header nav a {
  background-color: #fff;
  color: #0078d7;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid var(--border);
  transition: background 0.2s ease, color 0.2s ease;
}

header nav a:hover {
  background-color: #cce0ff;
  color: #003e7e;
}


/* =========================================================
  05. Footer
  - main が flex:1 で伸びるため、コンテンツが少なくても下に貼り付く
========================================================= */
footer {
  font-size: 0.8rem;
  margin-top: 40px;
  padding: 20px 30px;

  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
}

.footer-inner {
  width: 80%;
  padding: 0 24px;
  text-align: left;
}

.footer-name {
  font-weight: 400;
  margin: 0 0 3px;
}


/* =========================================================
  06. X リンク専用スタイル
========================================================= */
.x-link {
  color: #1DA1F2;
  text-decoration: none;
  font-weight: bold;
}

.x-link:hover {
  text-decoration: underline;
}

/* =========================================================
  06-a. Qiitaリンク専用のスタイル
========================================================= */
.qiita-link {
    color: #55c500;
    text-decoration: none;
    font-weight: bold;
}

.qiita-link:hover {
    text-decoration: underline;
}

/* =========================================================
  07. Menu（マイページ等のメニューボタン）
========================================================= */
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
  align-items: center;
}

.menu-btn {
  display: block;
  width: 260px;
  background-color: #e0e0e0;
  color: #333;
  text-align: center;
  padding: 16px 24px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.menu-btn:hover {
  background-color: #d0d0d0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}


/* =========================================================
  08. Item Cards（作品一覧カード）
========================================================= */
.item-list {
  padding: 20px;
  background: rgba(0, 0, 0, 0.035);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.item-card {
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fa 100%);
  border-radius: 14px;
  padding: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.item-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);
}

.item-row {
  display: flex;
  align-items: center;
}

.item-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  margin-right: 16px;
}

.item-content {
  flex: 1;
  min-width: 0;
}

.item-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-title:hover {
  text-decoration: underline;
}

.item-rating {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #f39c12;
}

.rating-label {
  font-size: 13px;
  color: #666;
}


/* =========================================================
  09. Button Group（submit ボタン群）
========================================================= */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.button-group input[type="submit"] {
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border);
  background-color: #e0e0e0;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.button-group input[type="submit"]:hover {
  background-color: #d0d0d0;
}


/* =========================================================
  10. Forms（入力フォーム・バリデーション表示）
========================================================= */
.form {
  display: inline-block;
  width: 130px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 200px;
}

input[type="file"] {
  width: 100%;
  max-width: 420px;
}

/* エラー表示 */
.error-message {
  color: red;
  font-size: 16px;
  text-align: center;
}

.input-error {
  border: 2px solid red;
}

/* 成功表示 */
.success-message {
  color: #005a9e;
  font-size: 16px;
  text-align: center;
}

/* 補足注意書き（例：1人1レビューの説明） */
.note {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 8px;
}


/* =========================================================
  11. Rating（星評価表示 共通）
========================================================= */
.star-rating {
  position: relative;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}

.star-bg {
  color: #ccc;
}

.star-fg {
  color: #f0a500;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
}

.rating-value {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.no-rating {
  color: #888;
  font-size: 14px;
}


/* =========================================================
  12. Icons / MyPage（ユーザーアイコン・マイページ）
========================================================= */
.user-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
}

.mypage-user {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 15px 0;
}

.mypage-user img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
}

.mypage-username {
  font-size: 1.2em;
  font-weight: bold;
}


/* =========================================================
  13. Review History（レビュー履歴カード）
  - item_list のカードUIを流用し、差分のみ追加
========================================================= */
.history-row {
  align-items: flex-start;
  gap: 16px;
}

.history-card-check {
  flex: 0 0 44px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.history-card-check input[type="checkbox"] {
  transform: scale(1.1);
}

.history-content {
  min-width: 0;
}

.history-card-body {
  white-space: normal;
  overflow-wrap: anywhere;
}

.history-card-meta {
  margin-top: 8px;
  font-size: 0.9em;
  color: var(--muted);
}

.history-card-actions {
  justify-content: flex-end;
}


/* =========================================================
  14. Withdraw（退会関連）
  - mypage.php の退会ボタン枠と
    account_delete_confirm.php の確認ボタンで共有
========================================================= */

/* ---- mypage：退会ボタン枠 ---- */
.form-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
}

.form-right {
  margin-left: auto;
}

.form-right input[type="submit"] {
  background: none;
  border: 1px solid #aaa;
  color: #666;
  font-size: 0.9rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

.form-right input[type="submit"]:hover {
  border-color: #c00;
  color: #c00;
}

/* ---- account_delete_confirm：確認画面 ---- */
.delete-confirm-actions {
  margin-top: 1.5rem;
}

.delete-confirm-actions .button-group {
  justify-content: flex-end;
  gap: 20px;
}

.delete-confirm-actions .button-group button,
.delete-confirm-actions .button-group input[type="submit"] {
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
}

/* キャンセル：控えめ（アウトライン） */
.delete-confirm-actions .btn-cancel {
  background: none;
  color: #555;
  border-color: #aaa;
  text-decoration: none;
  display: inline-block;
}

.delete-confirm-actions .btn-cancel:hover {
  border-color: #777;
  color: #333;
}

/* 退会実行：危険色（confirmでは明示） */
/* 修正：旧 style.css では .btn-danger が2箇所に重複定義されていたため1箇所に統合 */
.btn-danger {
  background: #b00020;
  border-color: #b00020;
  color: #fff;
  opacity: 0.9;
}

.btn-danger:hover {
  filter: brightness(0.95);
  opacity: 1;
}


/* =========================================================
  15. Responsive（@media はここに集約）
  修正：旧 style.css では @media (max-width: 600px) が 11 回に分散していたため
        このセクションにまとめ、重複プロパティを統合した。
========================================================= */
@media (max-width: 600px) {

  /* ---- Base ---- */
  body {
    font-size: 13px;
  }

  /* ---- Layout（main） ---- */
  main {
    width: calc(100% - 24px); /* 左右 12px */
    margin: 12px auto;
    padding: 16px;
    font-size: 1rem;
  }

  /* ---- 汎用テキスト ---- */
  p,
  li,
  label {
    font-size: 1rem;
  }

  /* ---- フォーム ---- */
  input,
  textarea,
  select {
    font-size: 1rem;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  input[type="file"] {
    max-width: 100%;
  }

  /* ---- Header ---- */
  header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }

  header h1 {
    font-size: 1.2rem;
    line-height: 1.2;
    white-space: normal;
  }

  header nav {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  header nav span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  header nav a {
    padding: 6px 10px;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  /* ---- Footer ---- */
  footer {
    font-size: 0.75rem;
  }

  .footer-inner {
    width: 100%;
    padding: 0;
  }

  /* ---- Menu ---- */
  .menu-buttons {
    width: 100%;
    align-items: stretch;
  }

  .menu-btn {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    text-align: center;
    white-space: normal;
    font-size: 0.95rem;
    line-height: 1.3;
    padding: 14px 16px;
  }

  /* ---- Item Cards ---- */
  .item-card {
    padding: 14px;
  }

  .item-row {
    flex-direction: column; /* 縦積み */
    align-items: stretch;
    gap: 10px;
  }

  .item-thumb {
    width: 100%;
    height: auto;
    max-height: 180px;
    margin-right: 0;
  }

  .item-content {
    min-width: 0;
  }

  .item-title {
    font-size: 0.95rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* ---- Rating ---- */
  .item-rating {
    font-size: 0.8rem;
    flex-wrap: wrap;
    row-gap: 4px;
    max-width: 100%;
  }

  .rating-label {
    font-size: 0.8rem;
    white-space: normal;
  }

  .star-rating {
    font-size: 16px;
  }

  .rating-value,
  .no-rating {
    font-size: 12px;
  }
}