@charset "UTF-8";

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  margin: 0;
  line-height: 1.7;
  color: #111;
}

.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
}

.actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  text-align: center;
  max-width: 720px;
  /*  margin: 0 auto; */
  padding: 8px 12px;
}

.actions2 {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  text-align: center;
  max-width: 720px;
  /*  margin: 0 auto; */
  padding: 8px 12px;
}

.actions form {
  display: inline-block;
  margin: 0 10px;
}

button {
  padding: .6rem .9rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

h1.post-title {
  font-size: 26px;
  margin: 8px 0 4px;
}

.post-meta {
  color: #666;
  font-size: 14px;
  margin-bottom: 12px;
}

.btn {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer
}

.btn-primary {
  background: #2563eb;
  color: #fff
}

.btn-secondary {
  background: #e5e7eb
}

.btn-like {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  text-decoration: none;
  font-size: 90%;
  color: #222;
}

.btn-like:hover,
.btn-like:visited,
.btn-like:link {
  background: #fff;
  color: #000;
}

/*#photosPicker {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}*/

article p {
  margin: 10px 0;
}

.post-photos {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.post-photo {
  margin: 0;
}

.post-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.post-photo figcaption {
  font-size: .95rem;
  color: #555;
  margin-top: 4px;
}

label {
  display: block;
  margin: .5rem 0 .25rem;
  font-weight: 600;
}

input[type="text"],
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font: inherit
}

textarea {
  min-height: 120px;
}

input[type="date"] {
  width: auto;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font: inherit
}

input[type="file"] {
  width: auto;
  padding: 12px;
  border: 0px solid #ccc;
  border-radius: 8px;
  font: inherit;
}

.files {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.file-item {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 8px;
}

.files .file-item img {
  max-width: 160px;
  height: auto;
  display: block;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 4px;
}

.file-item .thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  display: block
}

.file-item .meta {
  flex: 1
}

.file-item .meta .name {
  font-size: .95rem
}

.file-item .meta .size {
  font-size: .8rem;
  color: #666
}

.file-item .meta .cap {
  width: 100%;
  padding: 6px;
  margin-top: 6px
}

.note {
  font-size: .9rem;
  color: #555
}

.smaho-headbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  background: #f0f0f0;
  border-radius: 0px;
  border: 0px solid #e6e6e6;
  width: 100%;
}

.smaho-headbar img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 0px;
  margin: 0;
}

.smaho-headbar .title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: #006622;
}

.smaho-headbar .sub {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  margin-top: 2px;
}

@media (min-width:768px) {
  .smaho-headbar {
    min-height: 60px;
    padding: 12px 14px;
  }

  .smaho-headbar .title {
    font-size: 24px;
  }
}

.smaho-article {
  max-width: 720px;
  margin: 0 auto;
  margin-bottom: 16px;
  padding: 8px 12px;
}

.smaho-article-head .smaho-title {
  font-size: 1.25rem;
  margin: 0 0 .25rem;
}

.smaho-article-head .smaho-meta {
  font-size: .9rem;
  color: #666;
  margin: 0 0 .75rem;
}

.smaho-image {
  margin: 0 0 .75rem;
}

.smaho-image img {
  display: block;
  width: 100%;
  height: auto;
}

.smaho-caption {
  font-size: .85rem;
  color: #555;
  margin-top: .25rem;
}

.smaho-body {
  line-height: 1.8;
}

/* ★スマホ最適化（$2264760px）：画像の下にキャプション／ファイル名を隠す */
@media (max-width: 760px) {

  /* A) 事前プレビュー（サーバ側出力: .photo-card） */
  .photo-card {
    display: block !important;
    grid-template-columns: none !important;
    gap: 12px !important;
  }

  .photo-card>div:first-child {
    margin-bottom: 8px;
  }

  /* 画像ブロックの下に余白 */
  .photo-card img {
    width: 100% !important;
    height: auto !important;
  }

  .photo-card .file-name {
    display: none;
  }

  /* スマホではファイル名を非表示 */
  .photo-card textarea[name="captions[]"] {
    width: 100%;
    min-height: 6em;
    /* キャプション欄を広く */
  }

  /* B) 画像選択直後のプレビュー（JS生成: .file-item） */
  .file-item {
    display: block;
  }

  /* 横並び→縦積み（画像→キャプション→操作） */
  .file-item .shot img {
    width: 100%;
    height: auto;
  }

  .file-item .name,
  .file-item .size {
    display: none;
  }

  /* スマホではファイル名とサイズを非表示 */
  .file-item .meta {
    margin-top: 8px;
  }

  /* 画像の下にキャプション欄 */
  .file-item textarea[name="captions[]"] {
    width: 100%;
    min-height: 6em;
    /* rows="2"でも十分な高さに */
  }

  /* C) 投稿→キャンセルで復帰したときの保持画像 (.photo-card) 修正 */
  .photo-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .photo-card img {
    width: 100%;
    height: auto;
    /*    max-width: 520px;
    margin: 0 auto;
    display: block; */
  }

  .photo-card .buttons {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
  }

  /* 2回目表示だけに出る “ファイル名” と “キャプション” 見出しを隠す */
  .photo-card .file-name,
  .photo-card img+a,
  .photo-card .cap-label {
    display: none !important;
  }

  /* 「キャプション」見出しを非表示 */
  .photo-card .name,
  .photo-card .size {
    display: none;
  }

  /* ファイル名非表示 */
  .photo-card textarea[name="captions[]"] {
    width: 100%;
    min-height: 6em;
  }

}

.smaho-result {
  margin: 10px 0px;
}

.smaho-preview {
  margin: 0 20px;
}

. '.smaho-body, .smaho-image, .smaho-figure, .smaho-caption{margin-left:0;margin-right:0;}'
. '.smaho-figure{margin:0;}'
. '


/* == uniform side paddings for edit/preview screens == */
.smaho-edit,
.smaho-preview,
.smaho-form,
.smaho-wrap,
.post-editor,
.post-preview {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

@media (min-width: 760px) {

  .smaho-edit,
  .smaho-preview,
  .smaho-form,
  .smaho-wrap,
  .post-editor,
  .post-preview {
    padding-left: 24px;
    padding-right: 24px;
  }
}