/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
h2{
  font-size: 18px;
  font-weight: 800;
  margin-left: 1em;
}

p {
  line-height: 1.8;
  margin-left: 1em;
}

ul {
  list-style-type: none;
}

ul.center {
  text-align: center;
  margin: 2em 0;
}

.odai.title{
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.login.title, .signup.title, .forget.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

h3.forget, h3.signup, h3.odai {
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
}

h4.forget_memo, h4.signup_memo {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
}

.login.container, .signup.container, .forget.container {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  input[type="text"],
  input[type="email"],
  input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #437bf3;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  input[type="submit"]:hover{
    background-color: #3571f1;
  }
}

/*短冊の縦書き*/

/* 一覧全体：横スクロールのコンテナ */
ul.tanzaku-list {
  list-style: none;
  display: flex;
  flex-direction: row; /* DOM順＝視覚順 */
  overflow-x: auto;
  overflow-y: hidden;
  gap: 0.6em;
  padding: 1em;
  margin: 2em 0;
  scroll-behavior: smooth; /* なくてもOK */
}

ul.tanzaku-list--center {
  justify-content: center;
}

/* post/show */
ul.tanzaku-list--single {
  overflow-x: visible;
  overflow-y: visible; 
  justify-content: center;

  /* showページでは短冊を左（＝右始まり縦書き的には“端”）に寄せるjustify-content: flex-start;  */
  /* showは1枚だけなので、右端に寄せる これで「右の余白」はかなり減る*/
  /* justify-content: flex-end; */
}

ul.tanzaku-list--single > li.tanzaku {
  /* max-inline-size: 85vw; */
  /* 好みで 70–85vw */
  /* margin-inline-start: auto;
  margin-inline-end: 1.2em; */
  inline-size: clamp(18em, 80vw, 52em); /* ←幅の本丸 */
  /* review が横に長くなると、短冊幅は clamp で止まるので、中身がはみ出す可能性がある（見切れ） */
}

/* 上記の見切れを長い英数字やURLのはみ出しだけ防ぎたい場合 */
li.tanzaku .review {
  overflow-wrap: anywhere;
}

li.tanzaku .label {
  font-weight: 800;
}

li.tanzaku .review p {
  margin: 0;
}

/* 短冊（1投稿） */
li.tanzaku {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 2em;
  letter-spacing: 1.2px;
  flex: 0 0 auto; /* 横に並ぶ */
  padding: 1em 0.8em;
  border-radius: 6px;
  background-color: rgba(96, 145, 211, 0.15);
  min-inline-size: 18em; /* 好みで調整 */
}

/* ホバーで少し濃く（任意） */
li.tanzaku:hover:not(.tanzaku--top) {
  background-color: rgba(96, 145, 211, 0.22);
}

/* お題 */
li.tanzaku .word {
  font-weight: 800;
  font-size: 1.05em;
  margin-block-end: 0.4em;
}

li.tanzaku .word .author {
  display: block;
  font-weight: 700;
  font-size: 0.95em;
  opacity: 0.9;
  margin-block-end: 0.4em;
}

/* 川柳本文 */
li.tanzaku .senryu {
  font-weight: 900;
  font-size: 1.15em;
  line-height: 2.1em;
  /* 既存2emなら不要 */
  margin-block: 0.8em;
}

/* 日付 */
li.tanzaku .date {
  font-size: 0.9em;
  opacity: 0.75;
  padding-block-end: 0.6em;
  border-block-end: 1px solid rgba(0, 0, 0, 0.12);
  margin-block-end: 0.8em;}

/* “トップ短冊”の強調（任意） */
li.tanzaku--top .name {
  font-size: 1.6em;
  font-weight: 800;
}

li.tanzaku--top .word {
  font-weight: 800;
}

/* 生成AIレビュー（短冊内でスクロールさせる） */

/*縦スクロールはいらない（横だけ欲しい）*/
li.tanzaku .review {
  /* 本文の向きは mixed が無難 */
  text-orientation: mixed;
  max-inline-size: 60vw;
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: 1em;
  margin-block-start: 1em;
  padding-block-start: 0.6em;
  border-block-start: 1px solid rgba(0, 0, 0, 0.12);}

/* レビュー見出し */
li.tanzaku .review .label,
li.tanzaku .review__title {
  font-weight: 800;
  font-size: 0.95em;
  opacity: 0.9;
  margin-block-end: 0.4em;
  text-orientation: upright;
}

/* レビュー本文 */
li.tanzaku .review.normal,
li.tanzaku .review p {
  font-weight: 300;
  font-size: 0.95em;
  margin: 0;
}

/* 「続きを読む」リンク */
li.tanzaku a.readmore {
  font-weight: 800;
  font-size: small;
}

/* 編集・削除 */
li.tanzaku .signed {
  margin-block-start: 0.8em;
  font-size: 0.9em;
  opacity: 0.9;
}

/* 投稿フォームを入れる */
/* 「ulでもliでも」短冊領域内にある .post を拾う */
.tanzaku .post {
  padding-left: 1.2em;
  padding-right: 1.2em;
}

/* submit ボタン（短冊内なら共通） */
.tanzaku input[type="submit"] {
  width: 100%;
  padding: 4px;
  background-color: #437bf3;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tanzaku input[type="submit"]:hover {
  background-color: #3571f1;
}

/* カテゴリ名（短冊の見出し） */
li.tanzaku .tanzaku__label {
  font-weight: 800;
  font-size: smaller;
  margin-bottom: 0.8em;
}

/* 単語群（縦書きのまま、1語ずつ積む） */
li.tanzaku .tanzaku__words .word {
  margin-bottom: 0.6em;
}

/* 単語リンク（好みで） */
li.tanzaku .tanzaku__words a {
  font-weight: 700;
  text-decoration: none;
  /* 任意 */
}

li.tanzaku .senryu {
  font-weight: 800;
}

li.tanzaku .name {
  font-size: 0.95em;
  font-weight: 700;
  margin-block-start: 0.8em; /* 縦書き・横書き両対応 */
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form__keyword {
  font-weight: 800;
  margin-bottom: 0.6em;
}

/* 最近の川柳 */
li.tanzaku .recent-item {
  padding: 0.6em 0.6em;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
  margin-block: 0.8em; /* セット間の区切り */
}

li.tanzaku .recent-item__label {
  font-size: smaller;
  font-weight: 400;
  opacity: 0.8;
}

li.tanzaku .recent-item__keyword {
  font-size: smaller;
  font-weight: 800;
  margin-block-end: 0.4em;
}

li.tanzaku .recent-item__verse {
  font-weight: 700;
}

li.tanzaku .recent-item__keyword {
  font-size: smaller;
  font-weight: 800;
  margin-block-end: 0.4em;
}

li.tanzaku .recent-item__verse {
  font-weight: 700;
}

/* 画面全体は「普通に縦スクロール」 */
.pick-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}

/* 縦書きに見せたい文字だけ縦書きにする */
.v {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 1.2px;
  line-height: 2em;
}

/* 見出し周り */
.pick-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 1rem;
}

.pick-note {
  opacity: 0.75;
  font-size: 0.95rem;
}

/* セクション */
.pick-main {
  display: grid;
  gap: 1.2rem;
}

.pick-section {
  background: rgba(96, 145, 211, 0.10);
  border-radius: 8px;
  padding: 0.8rem;
}

.pick-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0 0;
  display: flex;
  flex-wrap: wrap;
  /* 多段組は作らない。折り返しだけ */
  gap: 0.6rem;
}

/* 1つのお題（クリック・Tabの対象） */
.pick-link {
  display: inline-block;
  padding: 0.6rem 0.5rem;
  border-radius: 8px;
  background: rgba(96, 145, 211, 0.15);
  text-decoration: none;
  font-weight: 800;
}

/* hoverは必要なら（操作ページでも入れるなら） */
.pick-link:hover {
  background: rgba(96, 145, 211, 0.22);
}

/* フォーカスは強く（PC-Talker / キーボードで必須） */
.pick-link:focus-visible {
  outline: 3px solid #437bf3;
  outline-offset: 3px;
}

/* スキップリンク（キーボードで便利） */
.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  background: #fff;
  padding: 0.5rem;
  border: 1px solid #ccc;
}