/* =====================================
   全体
   ===================================== */

* {
  box-sizing: border-box;
}


html {
  background: #f4f6f8;
}


body {
  margin: 0;

  color: #252a2e;

  background: #f4f6f8;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;

  line-height: 1.5;
}


/* =====================================
   ヘッダー
   ===================================== */

.site-header {
  padding: 28px 20px 22px;

  text-align: center;

  background: #ffffff;

  border-bottom: 1px solid #e6e9ed;
}


.site-header h1 {
  margin: 0;

  color: #29323a;

  font-size: 1.45rem;

  font-weight: 700;

  letter-spacing: 0.02em;
}


.site-header p {
  margin: 5px 0 0;

  color: #9299a1;

  font-size: 0.78rem;
}


/* =====================================
   メイン
   ===================================== */

.container {
  width: min(900px, calc(100% - 32px));

  margin: 24px auto 50px;
}


/* =====================================
   読み込みステータス
   ===================================== */

.status {
  margin-bottom: 12px;

  color: #7b848d;

  font-size: 0.78rem;

  text-align: center;
}


/* =====================================
   検索パネル
   ===================================== */

.search-panel {
  padding: 18px 20px;

  margin-bottom: 16px;

  background: #ffffff;

  border: 1px solid #e3e7eb;

  border-radius: 10px;

  box-shadow:
    0 2px 8px rgba(30, 50, 70, 0.05);
}


.form-row {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 10px;
}


.form-row:last-child {
  margin-bottom: 0;
}


.form-row > label {
  flex: 0 0 100px;

  color: #59636d;

  font-size: 0.82rem;

  font-weight: 600;
}


input[type="search"],
input[type="date"],
input[type="number"],
select {
  min-height: 34px;

  padding: 5px 9px;

  border: 1px solid #d6dce2;

  border-radius: 6px;

  background: #ffffff;

  color: #333333;

  font-family: inherit;

  font-size: 0.85rem;

  outline: none;

  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}


input[type="search"] {
  flex: 1;

  min-width: 0;
}


input:focus,
select:focus {
  border-color: #7eadd0;

  box-shadow:
    0 0 0 3px rgba(64, 145, 201, 0.1);
}


.date-row {
  display: flex;

  gap: 10px;
}


.date-row > div {
  display: flex;

  align-items: center;

  gap: 7px;
}


.sub-label {
  flex: none !important;

  color: #888f96 !important;

  font-size: 0.75rem !important;

  font-weight: normal !important;
}


.button-row {
  margin-top: 4px;
}


button {
  font-family: inherit;
}


#clear-button,
#jump-button {
  padding: 6px 12px;

  border: 1px solid #d4dae0;

  border-radius: 6px;

  background: #f7f8f9;

  color: #5d6670;

  font-size: 0.8rem;

  cursor: pointer;
}


#clear-button:hover,
#jump-button:hover {
  background: #eef1f4;
}


/* =====================================
   検索結果ヘッダー
   ===================================== */

.result-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 9px;

  padding: 0 3px;
}


#result-count {
  color: #7b848d;

  font-size: 0.78rem;
}


.page-jump {
  display: flex;

  align-items: center;

  gap: 6px;

  color: #7b848d;

  font-size: 0.78rem;
}


.page-jump input {
  width: 55px;
}


/* =====================================
   投稿一覧
   ===================================== */

#posts {
  display: flex;

  flex-direction: column;

  gap: 8px;
}


/* =====================================
   投稿カード
   ===================================== */

.post {
  padding: 12px 16px 10px;

  margin: 0;

  background: #ffffff;

  border: 1px solid #e3e7eb;

  border-radius: 9px;

  box-shadow:
    0 2px 7px rgba(30, 50, 70, 0.045);

  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}


.post:hover {
  border-color: #d5dce2;

  box-shadow:
    0 3px 10px rgba(30, 50, 70, 0.075);
}


/* =====================================
   投稿ヘッダー
   ===================================== */

.post-header {
  display: flex;

  align-items: center;

  gap: 7px;

  min-height: 27px;

  margin: 0 0 4px;

  padding: 0;
}


/* =====================================
   アバター
   ===================================== */

.avatar {
  width: 27px;
  height: 27px;

  flex: 0 0 27px;

  border-radius: 50%;

  object-fit: cover;

  background: #edf0f2;

  border: 1px solid #e0e4e8;
}


/* =====================================
   ユーザーID
   ===================================== */

.post-user {
  color: #4c5660;

  font-size: 0.84rem;

  font-weight: 600;

  line-height: 1;

  white-space: nowrap;
}


/* =====================================
   キーワード
   ===================================== */

.post-keyword {
  appearance: none;

  margin: 0 0 0 5px;

  padding: 0;

  border: 0;

  background: transparent;

  color: #2878ad;

  font-family: inherit;

  font-size: 1.08rem;

  font-weight: 600;

  line-height: 1.3;

  cursor: pointer;

  text-decoration: none;

  transition:
    color 0.15s ease;
}


.post-keyword:hover {
  color: #145a87;

  text-decoration: underline;

  text-underline-offset: 2px;
}


.post-keyword:active {
  color: #0d4568;
}


/* =====================================
   本文
   ===================================== */

.post-body {
  margin: 0 0 0 34px;

  padding: 0;

  color: #272d32;

  font-size: 0.94rem;

  line-height: 1.48;

  /*
   * haiku_text 内の改行を維持
   */

  white-space: pre-wrap;

  overflow-wrap: anywhere;
}


/* =====================================
   本文内URL
   ===================================== */

.post-body a {
  color: #2778ae;

  text-decoration: none;
}


.post-body a:hover {
  color: #16577e;

  text-decoration: underline;
}


/* =====================================
   本文内画像
   ===================================== */

.post-image {
  display: block;

  max-width: min(100%, 560px);

  max-height: 380px;

  width: auto;
  height: auto;

  margin: 7px 0 3px;

  border: 1px solid #e0e5e9;

  border-radius: 7px;

  background: #f5f6f7;

  box-shadow:
    0 2px 7px rgba(30, 50, 70, 0.08);
}


/* =====================================
   フッター・日時
   ===================================== */

.post-footer {
  margin: 5px 0 0 34px;

  padding: 0;

  color: #a0a7ae;

  font-size: 0.7rem;

  line-height: 1.2;
}


/* =====================================
   キーワード検索解除
   ===================================== */

#clear-keyword {
  margin-left: 8px;

  padding: 3px 9px;

  border: 1px solid #d5dde4;

  border-radius: 5px;

  background: #ffffff;

  color: #63717c;

  font-family: inherit;

  font-size: 0.75rem;

  cursor: pointer;

  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}


#clear-keyword:hover {
  background: #f3f7fa;

  border-color: #b9cbd8;

  color: #2878ad;
}


#clear-keyword[hidden] {
  display: none;
}


/* =====================================
   検索結果なし
   ===================================== */

.empty {
  padding: 45px 20px;

  background: #ffffff;

  border: 1px solid #e3e7eb;

  border-radius: 9px;

  color: #858d95;

  text-align: center;

  box-shadow:
    0 2px 7px rgba(30, 50, 70, 0.045);
}


.empty pre {
  margin-top: 15px;

  color: #b23a3a;

  text-align: left;

  white-space: pre-wrap;

  overflow-wrap: anywhere;
}


/* =====================================
   ページネーション
   ===================================== */

.pagination {
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 15px;

  margin-top: 18px;
}


.pagination button {
  padding: 7px 14px;

  border: 1px solid #d4dae0;

  border-radius: 7px;

  background: #ffffff;

  color: #59636d;

  font-family: inherit;

  font-size: 0.8rem;

  cursor: pointer;

  box-shadow:
    0 1px 3px rgba(30, 50, 70, 0.04);
}


.pagination button:hover:not(:disabled) {
  background: #f4f8fb;

  border-color: #b9cbd8;
}


.pagination button:disabled {
  opacity: 0.4;

  cursor: default;
}


#pagination-info {
  min-width: 60px;

  color: #7b848d;

  font-size: 0.78rem;

  text-align: center;
}


/* =====================================
   スマートフォン
   ===================================== */

@media (max-width: 700px) {

  .container {
    width: calc(100% - 16px);

    margin-top: 12px;
  }


  .site-header {
    padding: 20px 15px 16px;
  }


  .site-header h1 {
    font-size: 1.2rem;
  }


  .search-panel {
    padding: 14px;

    border-radius: 8px;
  }


  .form-row {
    display: block;

    margin-bottom: 10px;
  }


  .form-row > label {
    display: block;

    margin-bottom: 4px;
  }


  input[type="search"],
  input[type="date"],
  select {
    width: 100%;
  }


  .date-row {
    display: flex;
  }


  .date-row > div {
    flex: 1;

    display: block;
  }


  .result-header {
    align-items: flex-start;

    flex-direction: column;

    gap: 5px;
  }


  #posts {
    gap: 5px;
  }


  .post {
    padding: 9px 11px 8px;

    border-radius: 7px;
  }


  .post-header {
    gap: 6px;

    margin-bottom: 3px;
  }


  .avatar {
    width: 25px;
    height: 25px;

    flex-basis: 25px;
  }


  .post-user {
    font-size: 0.8rem;
  }


  .post-keyword {
    font-size: 1rem;
  }


  .post-body {
    margin-left: 31px;

    font-size: 0.9rem;

    line-height: 1.45;
  }


  .post-footer {
    margin-left: 31px;

    margin-top: 4px;

    font-size: 0.67rem;
  }


  .post-image {
    max-height: 300px;
  }


  .pagination {
    gap: 8px;
  }

}

/* =======================================
 * 日付ページナビゲーション
 * ======================================= */

.date-navigation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 280px;
}


.date-nav-side {
  color: #8a94a6;
  font-size: 0.82rem;
  white-space: nowrap;
}


.date-current {
  color: #2f3b4c;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}


/* 投稿日時 */

.post-date {
  margin-left: auto;
  color: #8a94a6;
  font-size: 0.75rem;
  white-space: nowrap;
  text-decoration: none;
}


.post-date:hover {
  color: #4f7cac;
  text-decoration: underline;
}


@media (max-width: 600px) {

  .date-navigation {
    gap: 10px;
    min-width: auto;
  }


  .date-nav-side {
    font-size: 0.72rem;
  }


  .date-current {
    font-size: 0.85rem;
  }

}