@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap');


:root {
    color-scheme: light dark;
}

body {
    margin: 0;
    background-color: #f4f4f4;
    color: #000000;
    font-size: 16px;

    /* ★フォント適用（custom/preset/google 全対応） */
    font-family: "Kosugi", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
}

body {
    background-color: light-dark(#f4f4f4, #f4f4f4);
    color: light-dark(#000000, #000000);
}

form input,
form textarea,
form select,
form button {
    color-scheme: light;

    /* ★フォーム類も同じフォントに */
    font-family: inherit;
}

a {
    color: #0000FF;
    color: light-dark(
        #0000FF,
        #0000FF    );
}
a:visited {
    color: #663399;
    color: light-dark(
        #663399,
        #663399    );
}
a:active {
    color: #FF0000;
    color: light-dark(
        #FF0000,
        #FF0000    );
}

.quote-text {
    color: #666666;
    color: light-dark(
        #666666,
        #666666    );
}

.comment-text {
    color: #333333;
    color: light-dark(
        #333333,
        #333333    );
}

.note-text {
    color: #333333;
    color: light-dark(
        #333333,
        #333333    );
}

.name {
    color: #007700;
    color: light-dark(
        #007700,
        #007700    );
}

.cap {
    color: #ff4500;
    color: light-dark(
        #ff4500,
        #ff4500    );
}

.deleted-message {
    color: #ff0000;
    color: light-dark(
        #ff0000,
        #ff0000    );
}

.error-message {
    color: #ff0000;
    color: light-dark(
        #ff0000,
        #ff0000    );
}

hr {
    border: none;
    border-top: 1px solid #cccccc;
    border-top-color: light-dark(
        #cccccc,
        #cccccc    );
}

.embed-post {
    background-color: #f4f4f4;
    color: #000000;
    background-color: light-dark(
        #f4f4f4,
        #f4f4f4    );
    color: light-dark(
        #000000,
        #000000    );
}

mark {
    background-color: transparent;
    color: inherit;
    margin: 0 5px;
}

/* パンくずリスト */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    list-style: none;
    padding-left: 0;
}

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

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding: 0 0.5rem;
    content: ">";
    vertical-align: middle;

    color: #000000;
    color: light-dark(
        #000000,
        #000000    );
}

/* 最後のパンくずリスト項目のリンクを無効にする */
.breadcrumb-item:last-child a {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
}

/* スマートフォン用スタイル */
@media (max-width: 640px) {
    .embed-contents {
        position: relative;
        width: 100%;
        max-height: 200px;
        overflow: hidden;
    }
    .embed-instagram {
        width: 100%;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-video iframe {
        width: 100%;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-youtube iframe {
        width: 100%;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-youtube {
        width: 100%;
        height: 360px !important;
        max-height: 360px !important;
    }

    .img-thumbnail, .embed-youtube-img, .embed-image, .video-thumbnail {
        max-width: 128px;
        max-height: auto;
    }
}

/* パソコン用スタイル */
@media (min-width: 641px) {
    .embed-contents {
        position: relative;
        width: 100%;
        max-height: 350px;
        overflow: hidden;
    }

    .embed-instagram {
        width: 600px;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-video iframe {
        width: 600px;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-youtube iframe {
        width: 600px;
        height: 360px !important;
        max-height: 360px !important;
    }

    .img-thumbnail, .embed-youtube-img, .embed-image, .video-thumbnail {
        max-width: 128px;
        max-height: auto;
        cursor: pointer;
    }
}

img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

img {
    max-height: 512px;
}

:root{
  --board-bg: var(--portal-bg, #efefef);
  --board-card: var(--portal-card-bg-strong, #ffffff);
  --board-soft: var(--portal-card-bg, #fafafa);
  --board-line: var(--portal-line, #dcdcdc);
  --board-line-soft: var(--portal-line-soft, #e4e4e4);
  --board-head: var(--portal-accent-soft, #f8ecee);
  --board-head-soft: var(--portal-accent-soft-2, #fff5f6);
  --board-head-grad: linear-gradient(180deg, var(--portal-accent-soft-2, #fff5f6) 0%, var(--portal-accent-soft, #f8ecee) 100%);
  --board-head-line: var(--portal-accent-line, #d8c7cb);
  --board-text: var(--portal-text, #1f2a35);
  --board-sub: var(--portal-muted-text, #7f7f7f);
  --board-pink: var(--portal-accent, #f08e98);
  --board-pink-deep: var(--portal-accent-deep, #e57f8a);
  --board-pink-soft: var(--portal-accent-soft, #fff3f5);
  --board-pink-soft-2: var(--portal-accent-soft-2, #fff5f6);
  --board-pink-line: var(--portal-accent-line, #e7bcc4);
  --board-pink-line-hover: var(--portal-accent-line-hover, #ee9faa);
  --board-pink-text: var(--portal-accent-text-strong, #d96a77);
  --board-note-bg: var(--portal-notice-grad, #fff7dc);
  --board-note-border: var(--portal-yellow-line, #ecd99d);
  --board-note-text: var(--portal-notice-text, #7a6032);
  --board-shadow: 0 1px 3px rgba(0,0,0,.04);
  --board-radius: 4px;
}

.cap {
color: orange;
}
nav.navbar {
  background-color: var(--board-soft) !important;
}

nav.navbar a.nav-link,
nav.navbar .navbar-brand {
  color: var(--board-text) !important;
}

nav.navbar a.nav-link:hover {
  color: var(--board-sub) !important;
}

.btn.vote-btn[data-vote-type="good"] {
  background-color: #00bbbb;
  color: var(--board-card);
}

.btn.vote-btn[data-vote-type="bad"] {
  background-color: #cc0000;
  color: var(--board-card);
}

.posts {
  position: relative;
  border: 1px solid var(--board-line);
  padding: 15px;
  border-radius: 5px;
  margin: 0 3px 15px;
  background-color: var(--board-soft);
  overflow: hidden;
}

.posts::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://cdn.hamster.land/1/admin/fd9c18010b.png") top left / 120px repeat;
  opacity: 0.33;
  pointer-events: none;
  z-index: 0;
}

.posts > * {
  z-index: 1;
  position: relative;
}

.embed-post .posts {
  border: none;
}

.post-card .report-link {
  display: inline-flex;
}

.post-card .report-link a,
.post-card .report-link button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--board-line);
  border-radius: 3px;
  background: var(--board-card);
  text-decoration: none;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.post-card .report-link a::before,
.post-card .report-link button::before {
  content: "👧";
  font-size: 21px;
  line-height: 1;
  color: var(--board-sub);
}

.post-card .reply-link {
  display: inline-flex;
}

.post-card .reply-link a,
.post-card .reply-link button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border-bottom: 2px solid var(--board-pink-line-hover);
  text-decoration: none;
  color: var(--board-pink) !important;
  font-size: 14px;
  font-weight: 700;
  background: transparent;
}

.post-card .reply-link a::before,
.post-card .reply-link button::before {
  content: "✎";
  margin-right: 5px;
  font-size: 14px;
}

.post-card .good-ui {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.post-card .good-ui:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--board-pink) 35%, transparent);
  outline-offset: 3px;
  border-radius: 14px;
}

.post-card .good-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  line-height: 1;
  color: var(--board-card);
  transform: translateY(-1px);
  transform-origin: center center;
  flex: 0 0 28px;
  transition: color .18s ease, transform .18s ease, filter .18s ease;
}

.post-card .good-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.post-card .good-icon svg path {
  fill: currentColor;
  stroke: var(--board-pink);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill markers;
  transition: stroke .18s ease, fill .18s ease;
}

.post-card .good-icon::after {
  content: "✦";
  position: absolute;
  right: -7px;
  top: -6px;
  font-size: 11px;
  line-height: 1;
  color: #ffb8c4;
  opacity: 0;
  transform: scale(.4) rotate(-20deg);
  pointer-events: none;
}

.post-card .good-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 33px;
  padding: 0 13px;
  border: 1px solid #8f8a8a;
  border-radius: 12px;
  background: var(--board-card);
  color: var(--board-sub);
  font-size: 14px;
  line-height: 1;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.post-card .good-bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -6px;
  width: 10px;
  height: 10px;
  background: var(--board-card);
  border-top: 1px solid #8f8a8a;
  border-left: 1px solid #8f8a8a;
  transform: translateY(-50%) rotate(-45deg);
  box-sizing: border-box;
  transition: background .18s ease, border-top-color .18s ease, border-left-color .18s ease;
}

.post-card .good-label {
  padding: 0 13px;
}

.post-card .good-count {
  min-width: 34px;
  padding: 0 10px;
}

.post-card .good-ui:hover .good-icon {
  filter: drop-shadow(0 2px 4px rgba(239, 143, 151, .18));
}

.post-card .good-ui:hover .good-bubble {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 6px rgba(239, 143, 151, .10);
}

.post-card .good-ui:active .good-bubble {
  transform: translateY(0) scale(.98);
}

.post-card .good-ui:active .good-icon {
  transform: translateY(-1px) scale(.94);
}

/* 初期表示で既に投票済み */
.post-card .good-ui.is-voted,
.post-card .good-ui.is-voted-1,
.post-card .good-ui[data-user-voted="1"],
.post-card .good-ui[aria-pressed="true"] {
  --good-voted: 1;
}

.post-card .good-ui.is-voted .good-icon,
.post-card .good-ui.is-voted-1 .good-icon,
.post-card .good-ui[data-user-voted="1"] .good-icon,
.post-card .good-ui[aria-pressed="true"] .good-icon {
  color: var(--board-pink);
  filter: drop-shadow(0 1px 2px rgba(239,143,151,.18));
}

.post-card .good-ui.is-voted .good-icon svg path,
.post-card .good-ui.is-voted-1 .good-icon svg path,
.post-card .good-ui[data-user-voted="1"] .good-icon svg path,
.post-card .good-ui[aria-pressed="true"] .good-icon svg path {
  stroke: var(--board-pink);
}

.post-card .good-ui.is-voted .good-label,
.post-card .good-ui.is-voted .good-count,
.post-card .good-ui.is-voted-1 .good-label,
.post-card .good-ui.is-voted-1 .good-count,
.post-card .good-ui[data-user-voted="1"] .good-label,
.post-card .good-ui[data-user-voted="1"] .good-count,
.post-card .good-ui[aria-pressed="true"] .good-label,
.post-card .good-ui[aria-pressed="true"] .good-count {
  background: var(--board-pink-soft);
  border-color: var(--board-pink-line);
  color: var(--board-pink-text);
}

.post-card .good-ui.is-voted .good-label::before,
.post-card .good-ui.is-voted .good-count::before,
.post-card .good-ui.is-voted-1 .good-label::before,
.post-card .good-ui.is-voted-1 .good-count::before,
.post-card .good-ui[data-user-voted="1"] .good-label::before,
.post-card .good-ui[data-user-voted="1"] .good-count::before,
.post-card .good-ui[aria-pressed="true"] .good-label::before,
.post-card .good-ui[aria-pressed="true"] .good-count::before {
  background: var(--board-pink-soft);
  border-top-color: var(--board-pink-line);
  border-left-color: var(--board-pink-line);
}

.post-card .good-ui.is-loading {
  opacity: .72;
  pointer-events: none;
}

/* 豪華アニメーション */
.post-card .good-ui.is-burst .good-icon {
  animation: goodPop .56s cubic-bezier(.22, 1.35, .36, 1);
}

.post-card .good-ui.is-burst .good-icon::after {
  animation: goodSparkle .62s ease-out;
}

.post-card .good-ui.is-burst .good-label,
.post-card .good-ui.is-burst .good-count {
  animation: goodBubbleFloat .52s ease;
}

.post-card .good-ui.is-burst .good-count {
  animation: goodCount .52s ease;
}

.post-card .good-ui.is-burst::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(239,143,151,.24);
  transform: translate(-50%, -50%) scale(.4);
  animation: goodPulse .52s ease;
  pointer-events: none;
}

.post-card .good-ui.is-burst::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(.35);
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 10%, rgba(255,204,214,.65) 18%, rgba(255,182,193,.30) 32%, rgba(255,182,193,0) 68%);
  opacity: 0;
  pointer-events: none;
  animation: goodFlash .56s ease-out;
}

@keyframes goodPop {
  0% {
    transform: translateY(-1px) scale(1) rotate(0deg);
  }
  18% {
    transform: translateY(-1px) scale(1.18) rotate(-9deg);
  }
  40% {
    transform: translateY(-1px) scale(1.34) rotate(7deg);
  }
  62% {
    transform: translateY(-1px) scale(.92) rotate(-4deg);
  }
  100% {
    transform: translateY(-1px) scale(1) rotate(0deg);
  }
}

@keyframes goodCount {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.16);
  }
  55% {
    transform: scale(.96);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes goodBubbleFloat {
  0% {
    transform: translateY(0);
  }
  32% {
    transform: translateY(-2px);
  }
  65% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes goodPulse {
  0% {
    opacity: .82;
    transform: translate(-50%, -50%) scale(.45);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.4);
  }
}

@keyframes goodFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.25);
  }
  18% {
    opacity: .85;
    transform: translate(-50%, -50%) scale(.9);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.7);
  }
}

@keyframes goodSparkle {
  0% {
    opacity: 0;
    transform: scale(.25) rotate(-30deg) translateY(4px);
  }
  30% {
    opacity: 1;
    transform: scale(1.15) rotate(8deg) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(.7) rotate(28deg) translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-card .good-ui,
  .post-card .good-icon,
  .post-card .good-bubble,
  .post-card .good-icon::after,
  .post-card .good-ui::before,
  .post-card .good-ui::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 700px) {
  .post-card .post-body {
    padding: 14px 14px 10px !important;
  }

  .post-card .post-message {
    font-size: 17px !important;
    line-height: 1.9 !important;
  }

  .post-card .post-foot {
    padding: 0 12px 14px !important;
    gap: 8px !important;
  }

  .post-card .report-link a,
  .post-card .report-link button {
    width: 38px;
    height: 38px;
  }

  .post-card .report-link a::before,
  .post-card .report-link button::before {
    font-size: 20px;
  }

  .post-card .good-ui {
    gap: 6px;
  }

  .post-card .good-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
  }

  .post-card .good-bubble {
    min-height: 31px;
    font-size: 13px;
  }

  .post-card .good-label {
    padding: 0 11px;
  }

  .post-card .good-count {
    min-width: 32px;
    padding: 0 9px;
  }

  .post-card .good-bubble::before {
    left: -5px;
    width: 9px;
    height: 9px;
  }
}

.thread-page-shell{
  width:min(100%, 1080px);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.thread-page-hero{
  position:relative;
  overflow:hidden;
  padding:16px 16px 14px;
  border:1px solid var(--portal-card-line-soft, #eadde0);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,247,248,.98) 0%, rgba(255,255,255,.98) 100%);
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.thread-page-hero::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg, var(--portal-accent, #ea9098) 0%, var(--portal-accent-deep, #df7f88) 100%);
}

.thread-page-kicker{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 9px;
  border:1px solid var(--portal-accent-line, #e7bcc4);
  border-radius:999px;
  background:var(--portal-accent-soft-2, #fff7f8);
  color:var(--portal-accent-text-strong, #d96a77);
  font-size:10px;
  font-weight:800;
}

.thread-page-title{
  margin:9px 0 0;
  color:var(--portal-heading-text, #1f2937);
  font-size:24px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:.01em;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.thread-page-sub{
  margin-top:7px;
  color:var(--portal-muted-text, #7b8190);
  font-size:12px;
  line-height:1.7;
}

.thread-page-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:13px;
}

.thread-page-actions a,
.thread-page-actions span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:37px;
  padding:0 14px;
  border:1px solid var(--portal-card-line, #eadde0);
  border-radius:999px;
  background:#fff;
  color:var(--portal-text, #374151);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
}

.thread-page-actions .thread-page-write a,
.thread-page-actions a.thread-page-write{
  background:linear-gradient(180deg, var(--portal-accent, #ea9098) 0%, var(--portal-accent-deep, #df7f88) 100%);
  color:#fff;
  border-color:transparent;
}

.thread-page-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 2px;
}

.thread-page-stat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:26px;
  padding:0 9px;
  border:1px solid var(--portal-card-line-soft, #eadde0);
  border-radius:999px;
  background:rgba(255,255,255,.8);
  color:var(--portal-muted-text, #7b8190);
  font-size:10px;
  line-height:1;
  box-shadow:0 1px 4px rgba(15,23,42,.03);
}

.thread-page-stat strong{
  color:var(--portal-heading-text, #374151);
  font-size:11px;
  font-weight:800;
}

.thread-page-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--portal-card-line-soft, #eadde0);
  border-radius:15px;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,251,252,.96) 100%);
  box-shadow:0 4px 12px rgba(15,23,42,.04);
}

.thread-page-nav-status{
  color:var(--portal-muted-text, #7b8190);
  font-size:11px;
  line-height:1.6;
}

.thread-page-nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.thread-page-nav-links a,
.thread-page-nav-links span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  min-width:40px;
  padding:0 11px;
  border:1px solid var(--portal-card-line, #eadde0);
  border-radius:999px;
  background:#fff;
  color:var(--portal-text, #374151);
  text-decoration:none;
  font-size:11px;
  font-weight:700;
}

.thread-page-note{
  padding:10px 12px;
  border:1px solid var(--portal-yellow-line, #ecd99d);
  border-radius:14px;
  background:linear-gradient(180deg, #fff9e9 0%, #fffdf6 100%);
  color:#7a6032;
  font-size:11px;
  line-height:1.7;
}

.thread-first-post-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.thread-post-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.post-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--portal-card-line, #eadde0);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,250,251,.96) 100%);
  box-shadow:0 6px 16px rgba(15,23,42,.04);
}

.post-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--portal-accent, #ea9098) 0%, var(--portal-accent-deep, #df7f88) 100%);
  opacity:.82;
}

.post-card.is-first::before{
  width:4px;
}

.post-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px 10px;
  background:linear-gradient(180deg, rgba(255,247,248,.9) 0%, rgba(255,255,255,.78) 100%);
  border-bottom:1px solid var(--portal-card-line-soft, #f0dfe3);
}

.post-card-head-main{
  min-width:0;
  flex:1;
}

.post-card-line1{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  color:var(--portal-accent-text-strong, #d96a77);
  font-size:12px;
  line-height:1.5;
  font-weight:700;
}

.post-card-no{
  display:inline-flex;
  align-items:center;
  min-height:23px;
  padding:0 9px;
  border:1px solid var(--portal-accent-line, #e7bcc4);
  border-radius:999px;
  background:var(--portal-accent-soft-2, #fff7f8);
  color:var(--portal-accent-text-strong, #d96a77);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

.post-card-name{
  margin-top:6px;
  color:var(--portal-heading-text, #1f2937);
  font-size:14px;
  line-height:1.6;
  font-weight:800;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.post-card-side{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.post-card-body{
  padding:15px 16px 12px;
}

.post-card-message{
  color:var(--portal-text, #243040);
  word-break:break-word;
  overflow-wrap:anywhere;
}

.post-card-files{
  margin-top:12px;
}

.post-card-foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  padding:0 14px 14px;
}

.post-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border:1px solid var(--portal-card-line, #eadde0);
  border-radius:999px;
  background:#fff;
  color:var(--portal-text, #374151);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}

.anchor-embed-card{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--portal-card-line-soft, #eadde0);
  border-radius:13px;
  background:linear-gradient(180deg, rgba(255,252,253,.96) 0%, rgba(255,247,248,.92) 100%);
  color:var(--portal-muted-text, #667085);
  font-size:12px;
  line-height:1.75;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.post-card.is-deleted{
  border-style:dashed;
  background:linear-gradient(180deg, #fff8f8 0%, #fffdfd 100%);
  opacity:.88;
}

.post-card.is-deleted .post-card-message{
  color:#b55;
}

/* 共感UI */
.good-ui{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.good-ui:focus-visible{
  outline:2px solid color-mix(in srgb, var(--portal-accent, #ea9098) 35%, transparent);
  outline-offset:3px;
  border-radius:14px;
}

.good-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  line-height:1;
  color:#fff;
  transform:translateY(-1px);
  transform-origin:center center;
  flex:0 0 28px;
  transition:color .18s ease, transform .18s ease, filter .18s ease;
}

.good-icon svg{
  display:block;
  width:100%;
  height:100%;
}

.good-icon svg path{
  fill:currentColor;
  stroke:var(--portal-accent, #ea9098);
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
  paint-order:stroke fill markers;
  transition:stroke .18s ease, fill .18s ease;
}

.good-icon::after{
  content:"✦";
  position:absolute;
  right:-7px;
  top:-6px;
  font-size:11px;
  line-height:1;
  color:#ffb8c4;
  opacity:0;
  transform:scale(.4) rotate(-20deg);
  pointer-events:none;
}

.good-bubble{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:33px;
  padding:0 13px;
  border:1px solid #8f8a8a;
  border-radius:12px;
  background:#fff;
  color:var(--portal-muted-text, #6b7280);
  font-size:14px;
  line-height:1;
  box-sizing:border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.good-bubble::before{
  content:"";
  position:absolute;
  top:50%;
  left:-6px;
  width:10px;
  height:10px;
  background:#fff;
  border-top:1px solid #8f8a8a;
  border-left:1px solid #8f8a8a;
  transform:translateY(-50%) rotate(-45deg);
  box-sizing:border-box;
  transition:background .18s ease, border-top-color .18s ease, border-left-color .18s ease;
}

.good-label{
  padding:0 13px;
}

.good-count{
  min-width:34px;
  padding:0 10px;
}

.good-ui:hover .good-icon{
  filter:drop-shadow(0 2px 4px rgba(239, 143, 151, .18));
}

.good-ui:hover .good-bubble{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 6px rgba(239, 143, 151, .10);
}

.good-ui:active .good-bubble{
  transform:translateY(0) scale(.98);
}

.good-ui:active .good-icon{
  transform:translateY(-1px) scale(.94);
}

.good-ui.is-voted,
.good-ui.is-voted-1,
.good-ui[data-user-voted="1"],
.good-ui[aria-pressed="true"]{
  --good-voted:1;
}

.good-ui.is-voted .good-icon,
.good-ui.is-voted-1 .good-icon,
.good-ui[data-user-voted="1"] .good-icon,
.good-ui[aria-pressed="true"] .good-icon{
  color:var(--portal-accent, #ea9098);
  filter:drop-shadow(0 1px 2px rgba(239,143,151,.18));
}

.good-ui.is-voted .good-icon svg path,
.good-ui.is-voted-1 .good-icon svg path,
.good-ui[data-user-voted="1"] .good-icon svg path,
.good-ui[aria-pressed="true"] .good-icon svg path{
  stroke:var(--portal-accent, #ea9098);
}

.good-ui.is-voted .good-label,
.good-ui.is-voted .good-count,
.good-ui.is-voted-1 .good-label,
.good-ui.is-voted-1 .good-count,
.good-ui[data-user-voted="1"] .good-label,
.good-ui[data-user-voted="1"] .good-count,
.good-ui[aria-pressed="true"] .good-label,
.good-ui[aria-pressed="true"] .good-count{
  background:var(--portal-accent-soft, #fff3f5);
  border-color:var(--portal-accent-line, #e7bcc4);
  color:var(--portal-accent-text-strong, #d96a77);
}

.good-ui.is-voted .good-label::before,
.good-ui.is-voted .good-count::before,
.good-ui.is-voted-1 .good-label::before,
.good-ui.is-voted-1 .good-count::before,
.good-ui[data-user-voted="1"] .good-label::before,
.good-ui[data-user-voted="1"] .good-count::before,
.good-ui[aria-pressed="true"] .good-label::before,
.good-ui[aria-pressed="true"] .good-count::before{
  background:var(--portal-accent-soft, #fff3f5);
  border-top-color:var(--portal-accent-line, #e7bcc4);
  border-left-color:var(--portal-accent-line, #e7bcc4);
}

.good-ui.is-loading{
  opacity:.72;
  pointer-events:none;
}

.good-ui.is-burst .good-icon{
  animation:goodPop .56s cubic-bezier(.22, 1.35, .36, 1);
}

.good-ui.is-burst .good-icon::after{
  animation:goodSparkle .62s ease-out;
}

.good-ui.is-burst .good-label,
.good-ui.is-burst .good-count{
  animation:goodBubbleFloat .52s ease;
}

.good-ui.is-burst .good-count{
  animation:goodCount .52s ease;
}

.good-ui.is-burst::after{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:12px;
  height:12px;
  border-radius:999px;
  background:rgba(239,143,151,.24);
  transform:translate(-50%, -50%) scale(.4);
  animation:goodPulse .52s ease;
  pointer-events:none;
}

.good-ui.is-burst::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:52px;
  height:52px;
  border-radius:999px;
  transform:translate(-50%, -50%) scale(.35);
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 10%, rgba(255,204,214,.65) 18%, rgba(255,182,193,.30) 32%, rgba(255,182,193,0) 68%);
  opacity:0;
  pointer-events:none;
  animation:goodFlash .56s ease-out;
}

@keyframes goodPop{
  0%{ transform:translateY(-1px) scale(1) rotate(0deg); }
  18%{ transform:translateY(-1px) scale(1.18) rotate(-9deg); }
  40%{ transform:translateY(-1px) scale(1.34) rotate(7deg); }
  62%{ transform:translateY(-1px) scale(.92) rotate(-4deg); }
  100%{ transform:translateY(-1px) scale(1) rotate(0deg); }
}

@keyframes goodCount{
  0%{ transform:scale(1); }
  30%{ transform:scale(1.16); }
  55%{ transform:scale(.96); }
  100%{ transform:scale(1); }
}

@keyframes goodBubbleFloat{
  0%{ transform:translateY(0); }
  32%{ transform:translateY(-2px); }
  65%{ transform:translateY(1px); }
  100%{ transform:translateY(0); }
}

@keyframes goodPulse{
  0%{
    opacity:.82;
    transform:translate(-50%, -50%) scale(.45);
  }
  100%{
    opacity:0;
    transform:translate(-50%, -50%) scale(3.4);
  }
}

@keyframes goodFlash{
  0%{
    opacity:0;
    transform:translate(-50%, -50%) scale(.25);
  }
  18%{
    opacity:.85;
    transform:translate(-50%, -50%) scale(.9);
  }
  100%{
    opacity:0;
    transform:translate(-50%, -50%) scale(1.7);
  }
}

@keyframes goodSparkle{
  0%{
    opacity:0;
    transform:scale(.25) rotate(-30deg) translateY(4px);
  }
  30%{
    opacity:1;
    transform:scale(1.15) rotate(8deg) translateY(0);
  }
  100%{
    opacity:0;
    transform:scale(.7) rotate(28deg) translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce){
  .good-ui,
  .good-icon,
  .good-bubble,
  .good-icon::after,
  .good-ui::before,
  .good-ui::after{
    animation:none !important;
    transition:none !important;
  }
}

@media (max-width: 760px){
  .good-ui{
    gap:6px;
  }

  .good-icon{
    width:25px;
    height:25px;
    flex:0 0 25px;
  }

  .good-bubble{
    min-height:31px;
    font-size:13px;
  }

  .good-label{
    padding:0 11px;
  }

  .good-count{
    min-width:32px;
    padding:0 9px;
  }

  .good-bubble::before{
    left:-5px;
    width:9px;
    height:9px;
  }
}

.good-ui{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  cursor:pointer;
  user-select:none;
  transition:transform .16s ease, opacity .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.good-ui.is-loading{
  opacity:.7;
  pointer-events:none;
}

.good-ui .good-icon{
  width:1.15rem;
  height:1.15rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease;
}

.good-ui .good-icon svg{
  width:100%;
  height:100%;
  display:block;
  fill:currentColor;
  transition:transform .18s ease, opacity .18s ease;
}

.good-ui .good-bubble{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.good-ui.is-voted-0{
  color:#6b7280;
}

.good-ui.is-voted-1,
.good-ui.is-voted{
  color:#ec4899;
}

.good-ui.is-voted-1 .good-icon,
.good-ui.is-voted .good-icon{
  transform:scale(1.06);
}

.good-ui.is-burst .good-icon{
  animation:goodBurst .62s ease;
}

.good-ui.is-burst .good-count{
  animation:goodCountPop .32s ease;
}

@keyframes goodBurst{
  0%   { transform:scale(1); }
  28%  { transform:scale(1.28); }
  55%  { transform:scale(.94); }
  100% { transform:scale(1.06); }
}

@keyframes goodCountPop{
  0%   { transform:scale(1); }
  50%  { transform:scale(1.16); }
  100% { transform:scale(1); }
}





/* 掲示板内のAタグだけ */
.post-card-message a,
.thread-post-list a,
.thread-first-post-wrap a,
.thread-page-shell a,
.thread-list a,
.posts a,
.thread-card a,
.board-thread-list a{
  color:var(--board-pink-text, #d96a77);
  text-decoration:none;
  font-weight:700;
  line-height:1.5;
  word-break:break-word;
  overflow-wrap:anywhere;
  border-bottom:1px solid rgba(217,106,119,.28);
  transition:
    color .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    opacity .15s ease;
}

.post-card-message a:hover,
.thread-post-list a:hover,
.thread-first-post-wrap a:hover,
.thread-page-shell a:hover,
.thread-list a:hover,
.posts a:hover,
.thread-card a:hover,
.board-thread-list a:hover{
  color:var(--board-pink-deep, #e57f8a);
  background:var(--board-pink-soft-2, #fff5f6);
  border-bottom-color:var(--board-pink-deep, #e57f8a);
  text-decoration:none;
}

.post-card-message a:focus-visible,
.thread-post-list a:focus-visible,
.thread-first-post-wrap a:focus-visible,
.thread-page-shell a:focus-visible,
.thread-list a:focus-visible,
.posts a:focus-visible,
.thread-card a:focus-visible,
.board-thread-list a:focus-visible{
  outline:2px solid rgba(234,144,152,.35);
  outline-offset:3px;
  border-radius:4px;
}

/* 画像リンクには下線や背景を付けない */
.post-card-message a:has(img),
.thread-post-list a:has(img),
.thread-first-post-wrap a:has(img),
.thread-page-shell a:has(img),
.thread-list a:has(img),
.posts a:has(img),
.thread-card a:has(img),
.board-thread-list a:has(img){
  border-bottom:none !important;
  background:transparent !important;
  text-decoration:none !important;
}

/* 投稿操作ボタン系は既存デザインを優先 */
.post-card-foot a,
.thread-page-actions a,
.thread-page-nav-links a,
.thread-page-return-link{
  border-bottom:none;
}


.anchor-post-card{
  margin:6px 0;
  padding:8px 9px;
  border:1px solid var(--board-line-soft, #e4e4e4);
  border-radius:6px;
  background:var(--board-card, #fff);
  color:var(--board-text, #1f2a35);
  font-size:12px;
  line-height:1.55;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}

.anchor-post-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:3px;
}

.anchor-post-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  color:var(--board-sub, #7f7f7f);
  font-size:10px;
  line-height:1.4;
}

.anchor-post-no{
  color:var(--board-pink-text, #d96a77);
  font-weight:800;
}

.anchor-post-time,
.anchor-post-user{
  font-weight:600;
}

.anchor-post-report{
  flex:0 0 auto;
  line-height:1;
}

.anchor-post-report a,
.anchor-post-report button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:24px;
  padding:0 7px;
  border:1px solid var(--board-line-soft, #e4e4e4);
  border-radius:999px;
  background:#fff;
  color:var(--board-sub, #7f7f7f);
  text-decoration:none;
  font-size:10px;
  font-weight:700;
  line-height:1;
}

.anchor-post-report a:hover,
.anchor-post-report button:hover{
  background:var(--board-pink-soft-2, #fff5f6);
  border-color:var(--board-pink-line, #e7bcc4);
  color:var(--board-pink-text, #d96a77);
}

.anchor-post-name{
  margin-bottom:4px;
  color:var(--board-text, #1f2a35);
  font-size:11px;
  font-weight:800;
  line-height:1.4;
}

.anchor-post-message{
  color:var(--board-text, #1f2a35);
  font-size:12px;
  line-height:1.6;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.anchor-post-message img,
.anchor-post-message video{
  max-width:100%;
  height:auto;
}

.anchor-post-message a{
  color:var(--board-pink-text, #d96a77);
  text-decoration:none;
  border-bottom:1px solid rgba(217,106,119,.28);
  font-weight:700;
}

.anchor-post-message a:hover{
  background:var(--board-pink-soft-2, #fff5f6);
  border-bottom-color:var(--board-pink-deep, #e57f8a);
}

.anchor-post-files{
  margin-top:5px;
  font-size:11px;
}

.anchor-post-files:empty{
  display:none;
}

.anchor-post-files img,
.anchor-post-files video{
  max-width:120px;
  max-height:120px;
  border-radius:5px;
}

.anchor-post-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:7px;
}

.anchor-post-chip{
  display:inline-flex;
  align-items:center;
}

.anchor-post-chip a,
.anchor-post-chip button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 8px;
  border:1px solid var(--board-pink-line, #e7bcc4);
  border-radius:999px;
  background:#fff;
  color:var(--board-pink-text, #d96a77);
  text-decoration:none;
  font-size:10px;
  font-weight:800;
  line-height:1;
}

.anchor-post-chip a:hover,
.anchor-post-chip button:hover{
  background:var(--board-pink-soft-2, #fff5f6);
  border-color:var(--board-pink-line-hover, #ee9faa);
}

/* アンカー内の共感ボタンを小さく */
.anchor-good-ui{
  display:inline-flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.anchor-good-icon{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  color:var(--board-card, #fff);
}

.anchor-good-icon svg{
  width:18px !important;
  height:18px !important;
  display:block;
}

.anchor-good-icon svg path{
  fill:currentColor;
  stroke:var(--board-pink, #f08e98);
  stroke-width:1.2;
}

.anchor-good-label,
.anchor-good-count{
  min-height:24px !important;
  padding:0 8px !important;
  border:1px solid var(--board-line-soft, #e4e4e4) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:var(--board-sub, #7f7f7f) !important;
  font-size:10px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:none !important;
}

.anchor-good-count{
  min-width:26px !important;
}

.anchor-good-ui.is-voted,
.anchor-good-ui.is-voted-1{
  color:var(--board-pink-text, #d96a77);
}

.anchor-good-ui.is-voted .anchor-good-icon,
.anchor-good-ui.is-voted-1 .anchor-good-icon{
  color:var(--board-pink, #f08e98);
}

.anchor-good-ui.is-voted .anchor-good-label,
.anchor-good-ui.is-voted .anchor-good-count,
.anchor-good-ui.is-voted-1 .anchor-good-label,
.anchor-good-ui.is-voted-1 .anchor-good-count{
  border-color:var(--board-pink-line, #e7bcc4) !important;
  background:var(--board-pink-soft-2, #fff5f6) !important;
  color:var(--board-pink-text, #d96a77) !important;
}