@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* メンバーカラー */
.p.r-iz::before { background: #ff7f7f; }
.p.r-kw::before { background: #ffff7f; }
.p.r-gn::before { background: #ff7fff; }
.p.r-tr::before { background: #ffbf7f; }
.p.r-sg::before { background: #7f7fff; }
.p.r-fk::before { background: #7fffbf; }
.p.r-mn::before { background: #7fffff; }
.p.r-ym::before { background: #bf7fff; }

/* メンバーカラー枠w */
.p.r-iz { border: 2px solid #ff7f7f; }
.p.r-kw { border: 2px solid #ffff7f; }
.p.r-gn { border: 2px solid #ff7fff; }
.p.r-tr { border: 2px solid #ffbf7f; }
.p.r-sg { border: 2px solid #7f7fff; }
.p.r-fk { border: 2px solid #7fffbf; }
.p.r-mn { border: 2px solid #7fffff; }
.p.r-ym { border: 2px solid #bf7fff; }


iz, kw, gn, t-r, sg, fk, m-n, ym {
  line-height: 1.4;
  padding: 0.1em 0.2em 0 0.2em;
  margin: 0.2em 0 0.2em 0;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* マーカー */
iz { background: #ff7f7f; color: #222;}
kw { background: #ffff7f; color: #222;}
gn { background: #ff7fff; color: #222;}
t-r { background: #ffbf7f; color: #222;}
sg { background: #7f7fff; color: #222;}
fk { background: #7fffbf; color: #222;}
m-n { background: #7fffff; color: #222;}
ym { background: #bf7fff; color: #222;}

/* 乱入用 */
izr { color: #ff7f7f; }
kwr { color: #ffff7f; }
gnr { color: #ff7fff; }
trr { color: #ffbf7f; }
sgr { color: #7f7fff; }
fkr { color: #7fffbf; }
mnr { color: #7fffff; }
ymr { color: #bf7fff; }

iz, kw, gn, t-r, sg, fk, m-n, ym,
izr, kwr, gnr, trr, sgr, fkr, mnr, ymr {
  display: inline;
  vertical-align: baseline;
}

/* 共通フォント */
* {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 背景 */
body {
  background: linear-gradient(180deg, #ffecd2, #fcb69f, #483d8b);
  background-attachment: fixed;
  color: #2b1a2d;
  padding: 20px;
}

.center-text {
    text-align: center; /* 水平方向に中央揃え */
}

/* 投稿カード（本文込み） */
.p {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 24px auto;
  padding: 36px 18px 18px 18px; /* 上部にリボン用余白 */
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: rgba(112, 106, 141, 0.7);
  box-shadow: 0 6px 20px rgba(18, 18, 30, 0.08);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  font-size: 12px;
  line-height: 1.75;
  color: #e7e7e7;
  white-space: normal;
}

.p br + br{
  display:block;
  margin-top: .7em;       /* 段落間だけ確保 */
}

/* リボン共通（文字あり・なし対応） */
.p::before {
  content: attr(d-r); /* 文字を表示したい場合は d-r 属性 */
  position: absolute;
  top: -12px;
  left: 14px;
  display: inline-block;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  transform: rotate(-6deg);
  box-shadow: 0 6px 14px rgba(18,18,30,0.12);
  line-height: 24px;
  height: 24px;
  background: #ff7f7f; /* デフォルト色 */
  text-align: center;
  white-space: nowrap;
  z-index: 2;
}

/* 改行の余白を調整 */
.p br {
  margin: 0.4em 0;
}

/* 文字なしの場合の幅固定 */
.p[d-r=""]::before {
  width: 60px; /* 空リボンの幅 */
  content: "";   /* 完全に空にする */
}

/* スマホ対応 */
@media (max-width:480px){
  .p {
    padding: 30px 16px 16px 16px;
    font-size: 12px;
  }
  .p::before {
    top: -10px;
    left: 10px;
    transform: rotate(-4deg);
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
    font-size: 14px;
  }
  a.info-link::before,
  a.temp-link::before {
    font-size: 24px;
    text-shadow:
      0 0 4px rgba(0,0,0,.45),
      0 0 12px rgba(255,255,255,.9);
  }
    tw {
    padding: 16px 18px;
  }
  tw::before {
    font-size: 12px;
  }
}

/* 記事削除 */
a[href*="/delete?post="]::before {
  content: "\00a0\f2ed\00a0"; /* alt ごみ箱アイコン */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
a[href*="/delete?post="] { font-size: 0; }
a[href*="/delete?post="]::before { font-size: 14px; }

/* 編集 */
a[href*="/edit?post="]::before {
  content: "\00a0\f304\00a0"; /* 鉛筆アイコン */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
a[href*="/edit?post="] { font-size: 0; }
a[href*="/edit?post="]::before { font-size: 14px; }

/* 管理 */
a[href*="/thread-setting"]::before {
  content: "\00a0\f013\00a0"; /* ギアアイコン */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
a[href*="/thread-setting"] { font-size: 0; }
a[href*="/thread-setting"]::before { font-size: 14px; }

/* 戻る */
a[href$="https://nanos.jp/starry0eyed/"]::before {
  content: "\00a0\f015\00a0"; /* ホームアイコン */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
a[href$="https://nanos.jp/starry0eyed/"] { font-size: 0; }
a[href$="https://nanos.jp/starry0eyed/"]::before { font-size: 14px; }


/* タイトル共通 */
.title{
  position: relative;
  display: inline-block;
  margin: 2.8rem auto 2rem;
  padding: .4em 1.2em;
  color: #fff;                /* 白基調。背景が明るい時は下で上書きしてね */
  font-size: clamp(1rem, 3.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
  text-shadow: 0 0 7px rgba(255,255,255,0.8);
}

/* 画面中央寄せ（周りのレイアウトに合わせて必要なら） */
.title{ left: 50%; transform: translateX(-50%); }

.title.stars{
  color:#fff;
  padding:.3em 1.2em;
  position:relative;
  background:none;
}

/* 左の星 */
.title.stars::before {
  content:"✦";
  position:absolute;
  left:-1.2em;
  top:50%;
  transform:translateY(-50%);
  opacity:.85;
  font-size:0.9em;
}

/* 右の星 */
.title.stars::after {
  content:"✦";
  position:absolute;
  right:-1.2em;
  top:50%;
  transform:translateY(-50%);
  opacity:.85;
  font-size:0.9em;
}

/* ===== タイトル共通 ===== */
.title {
  position: relative;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 20px);
  letter-spacing: .05em;
  text-shadow: 0 0 8px rgba(255,255,255,.55);
  margin: 2.2rem auto 1.8rem;
}

/* ===== 左：太陽 / 右：月 ===== */
.title.deco-lr::before,
.title.deco-lr::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9em;   /* ← サイズ調整 */
  color: #fff;        /* ← 色変更したければここ */
  opacity: .9;
}

/* 左：太陽 */
.title.deco-lr::before {
  content: "\f185";   /* fa-sun */
  left: -1.4em;
}

/* 右：月*/
.title.deco-lr::after {
  content: "\f186";   /* fa-moon */
  right: -1.4em;
}

/* 共通（元の文字を消す） */
a.info-link,
a.temp-link {
  font-size: 0;
  text-decoration: none;
}

/* 元の文字は消す */
a.info-link,
a.temp-link {
  font-size: 0;
  text-decoration: none;
}

/* Info */
a[href$="/37/2"] { /* 必要なら固定パターンに変更 */
  font-size: 0;
}
a[href$="/37/2"]::before {
  content: "\00a0\f005\00a0"; /* star */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 16px;                       /* ← 大きめに！ */
  color: #fff;                        /* ← はっきり黄色 */
  text-shadow:
    0 0 4px rgba(0,0,0,.35),
    0 0 10px rgba(255,255,255,.8);
  opacity: 1;                            /* ← 完全表示 */
}

/* Temp */
a[href$="/37/3"] {
  font-size: 0;
}
a[href$="/37/3"]::before {
  content: "\00a0\f249\00a0"; /* note-sticky */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  text-shadow:
    0 0 4px rgba(0,0,0,.35),
    0 0 10px rgba(255,255,255,.8);
  opacity: 1;
}

a.info-link::before,
a.temp-link::before {
  animation: softTwinkle 3.6s ease-in-out infinite;
}

/* ===== SNS風投稿 =====*/
/* 上段（ID + 時刻） */
tw::before {
  font-family: "Inter", sans-serif;
  content: attr(n) "   " attr(t);
  display: block;
  font-size: 11px;     /* ← 文字小さく */
  font-weight: 600;
  color: #656565;
  padding-left: 2.4em; /* ← アイコン分余白 */
  padding-bottom: 1.6em; /* ← アイコン分余白 */
  margin-bottom: 0.6em; /* ← 余白を少し広く */
  line-height: 1;      /* ← 高さ揃えのキー */
  position: relative;
}

/* 左丸アイコン */
tw::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 18px;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  color: #fefefe;
  background: #fefefe;

  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  transform: translateY(-50%);
}

/* カラーバリエーション */
tw[type="sun"]::after {
  color:#fe9864;
  content:"\f185"; /* sun */
  top: 1.35em;
  left: 19px;
}

tw[type="moon"]::after {
  color:#c6b7ff;
  content:"\f186"; /* moon */
  top: 1.37em;
  left: 17px;
}

tw[type="star"]::after {
  color:#ffe27f;
  content:"\f005"; /* star */
  top: 1.31em;
  left: 19px;
}

/* 本文 */
tw {
  font-family: "Inter", sans-serif;
  color: #222;
  display: block;
  max-width: 700px;
  margin: 1.4em auto;
  background: #fefefe;                 /* ← 真っ白 */
  border: 1px solid #d0d0d0;           /* ← 薄いグレー枠 */

  padding: 18px 26px;
  white-space: pre-wrap;
  position: relative;
  font-size: 12px;                     /* 少し大きくもOK */
  line-height: 1.65;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);   /* ← 超薄い影 */
}

/* ===== 追記（details/summary） ===== */

/* ベース：枠なし・p内に馴染む */
.p details {
  margin: 0.8em 0 0.4em;
  padding: 0.2em 0;
  border: none;
}

/* summary（開閉ボタン） */
.p summary {
  cursor: pointer;
  font-weight: 400;
  color: #e7e7e7;
  list-style: none;
  position: relative;
  padding-left: 1.2em;
  margin-bottom: .4em;
}

/* ▽ / △ 自動付与 → Font Awesome */
.p summary::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f13a"; /* ▼(chevron-down) */
  position: absolute;
  left: 0;
  top: 0;
}

/* 開いた時（△） */
.p details[open] summary::before {
  content: "\f139"; /* ▲(chevron-up) */
}

/* 追記部分の本文。p と統一 */
.p details > *:not(summary) {
  font-size: 12px;
  color: inherit;
  padding-left: 0.2em;
}

/* detailsマーカー */
.p details iz { background: #ff7f7f; }
.p details kw { background: #ffff7f; }
.p details gn { background: #ff7fff; }
.p details t-r { background: #ffbf7f; }
.p details sg { background: #7f7fff; }
.p details fk { background: #7fffbf; }
.p details m-n { background: #7fffff; }
.p details ym { background: #bf7fff; }

/* details乱入用 */
.p details izr { color: #ff7f7f; }
.p details kwr { color: #ffff7f; }
.p details gnr { color: #ff7fff; }
.p details trr { color: #ffbf7f; }
.p details sgr { color: #7f7fff; }
.p details fkr { color: #7fffbf; }
.p details mnr { color: #7fffff; }
.p details ymr { color: #bf7fff; }


a.show-more {
  display: none !important;
}
span[id^="hidden-content-"] {
  display: inline !important;
}

/* ===== MUSIC PLAYER mini ===== */
.mp{position:relative;width:260px;max-width:88vw;padding:6px 8px 8px;margin:16px auto 0;color:#fff;text-align:center;
    font:700 15px/1.13 system-ui;background:rgba(0,0,0,.32);border-radius:12px}
.mp-t{font-weight:800;font-size:14px}
.mp-t small{display:block;margin-top:2px;font:600 10px/1.1 system-ui;opacity:.92}
.mp-g{margin:5px 0 3px;}
.mp-g b{display:block;position:relative;height:5px;background:rgba(255,255,255,.45);border-radius:999px}
.mp-g b:before{content:"";position:absolute;inset:0;width:22%;background:#fff;border-radius:999px}
.mp-g b:after{content:"";position:absolute;top:50%;left:22%;transform:translate(-50%,-50%);width:8px;height:8px;background:#fff;border-radius:50%}
.mp-c{display:flex;justify-content:center;gap:12px;margin-top:3px}
.mp-c span{position:relative;width:22px;height:22px;display:inline-block}
.mp-pr:before{content:"";position:absolute;left:2px;top:3px;bottom:3px;width:2px;background:#fff;border-radius:1px}
.mp-pr:after{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:11px solid #fff}
.mp-pl:after{content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:11px solid #fff}
.mp-nx:after{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid #fff}
.mp-nx:before{content:"";position:absolute;right:2px;top:3px;bottom:3px;width:2px;background:#fff;border-radius:1px}