/* ============================================================
   トドケル デモ 固有スタイル（投稿カレンダー／型ラベル／プレビュー）
   共通部品は demo.css。ここは商品固有の追加のみ。
   ============================================================ */

/* ---------- レイアウト ---------- */
.tk-wrap { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.tk-stack { align-content: start; }
.tk-form { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 1.6fr) auto minmax(110px, .7fr) auto; gap: 14px; align-items: end; }
.tk-form .dm-field { margin-bottom: 0; }
.tk-form .dm-chips { min-height: 44px; align-items: center; }
.tk-form .dm-tabs { height: 44px; align-items: center; }
.tk-form .dm-btn { height: 44px; }

/* ---------- 投稿の型（商品色の濃淡・彩度控えめ） ---------- */
.t-howto  { --tc: #7d1a45; --tb: #f8dce8; }
.t-behind { --tc: #5a2f46; --tb: #efe4ea; }
.t-voice  { --tc: #8a2f3f; --tb: #fbe6e6; }
.t-item   { --tc: #ffffff; --tb: #8f2350; }
.t-news   { --tc: #ffffff; --tb: #3d2a35; }
.t-staff  { --tc: #6d2b58; --tb: #f2e2ee; }
.tk-lab { display: inline-block; font-size: 10.5px; font-weight: 900; line-height: 1.5; padding: 1px 7px; border-radius: 4px; color: var(--tc, var(--p-text)); background: var(--tb, var(--p-bg)); white-space: nowrap; vertical-align: middle; }
.tk-lab .short { display: none; }
.tk-legend { display: flex; gap: 6px 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.tk-legend .tk-lab { font-size: 11px; }
.tk-legend .n { font-size: 11.5px; font-weight: 700; color: var(--gray); margin-right: 6px; }

/* ---------- カレンダーグリッド（7列） ---------- */
.tk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.tk-cal__dow { text-align: center; font-size: 11.5px; font-weight: 900; color: var(--gray); padding: 2px 0 4px; }
.tk-cal__dow:nth-child(1) { color: var(--ng); }
.tk-cal__dow:nth-child(7) { color: var(--info); }
.tk-cal__dow .short { display: none; }
.tk-cell { min-height: 72px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 6px 7px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; width: 100%; min-width: 0; font-size: 12px; line-height: 1.4; position: relative; }
.tk-cell.is-blank { background: transparent; border: 1px dashed var(--hair); }
.tk-cell.is-off { background: #fafaf8; }
.tk-cell .d { font-family: var(--ff-num); font-size: 11.5px; font-weight: 700; color: var(--gray); line-height: 1; padding: 2px 0; }
.tk-cell.is-today .d { background: var(--ink); color: #fff; padding: 2px 6px; border-radius: 999px; }
.tk-cell.is-post { cursor: pointer; border-color: var(--line); transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; animation: tk-in .45s var(--ease) both; }
.tk-cell.is-post::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tb); }
.tk-cell.is-post:hover { border-color: var(--p); transform: translateY(-1px); box-shadow: var(--sh); }
.tk-cell.is-on { border-color: var(--p); box-shadow: 0 0 0 3px var(--p-weak); }
.tk-cell.is-post .tk-lab { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tk-cell .t { font-weight: 700; font-size: 11.5px; color: var(--ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.tk-cell .hm { font-family: var(--ff-num); font-size: 10.5px; font-weight: 700; color: var(--gray); margin-top: auto; }
@keyframes tk-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* ---------- 投稿案（プレビュー＋メタ） ---------- */
.tk-post { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; margin-bottom: 14px; align-items: start; }
.tk-pv { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.tk-pv__img { aspect-ratio: 1 / 1; background: var(--tb, var(--p-bg)); color: var(--tc, var(--p-text)); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 14px 26px; position: relative; transition: background .35s, aspect-ratio .35s; }
.tk-pv__img.is-x { aspect-ratio: 16 / 10; }
.tk-pv__lab { font-size: 10.5px; font-weight: 900; letter-spacing: .04em; }
.tk-pv__t { font-size: 14.5px; font-weight: 900; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tk-pv__co { position: absolute; left: 14px; bottom: 9px; font-size: 10px; font-weight: 700; }
.tk-pv__cap { padding: 8px 10px 9px; font-size: 11.5px; line-height: 1.6; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; border-top: 1px solid var(--hair); }
.tk-pv__cap b { margin-right: 5px; }
.tk-meta .h { font-size: 15px; font-weight: 900; line-height: 1.5; margin: 8px 0 4px; }
.tk-meta .a { font-size: 12.5px; color: var(--gray); font-weight: 700; line-height: 1.6; }
.tk-meta .w { display: flex; gap: 6px 10px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.tk-meta .w span { display: inline-flex; align-items: center; gap: 5px; }
.tk-meta .w svg { width: 15px; height: 15px; stroke: var(--p); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- テーマ配分 ---------- */
.tk-mix { display: grid; gap: 10px; }
.tk-mix__row { display: grid; grid-template-columns: 92px 40px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 12.5px; }
.tk-mix__row .num { font-weight: 700; text-align: right; color: var(--ink); }
.tk-mix__row .num small { font-family: var(--ff); font-size: 11px; color: var(--gray); font-weight: 700; }
.tk-mix__row .dm-prog i { background: var(--tb); }
.tk-mix__row.t-howto .dm-prog i, .tk-mix__row.t-behind .dm-prog i, .tk-mix__row.t-voice .dm-prog i, .tk-mix__row.t-staff .dm-prog i { background: var(--tc); }

/* ---------- 発信テーマ設計 ---------- */
.tk-pillar .dm-out { min-height: 210px; }
.tk-pillar .dm-out b { display: inline-block; margin-bottom: 2px; }

/* ---------- 振り返り ---------- */
.tk-rank { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--ff-num); font-weight: 700; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; }
.dm-list__item:first-child .tk-rank { background: var(--p); }
.tk-move { border: 1px solid var(--line); border-radius: var(--r-s); padding: 14px 16px; background: #fff; display: grid; gap: 6px; }
.tk-move b { font-size: 14px; line-height: 1.5; }
.tk-move span { font-size: 13px; color: var(--gray); font-weight: 700; line-height: 1.65; padding-left: 16px; position: relative; }
.tk-move span::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-right: 2px solid var(--p); border-bottom: 2px solid var(--p); transform: rotate(-45deg); }

/* ---------- 月次の進め方 ---------- */
.tk-owner { display: inline-block; font-size: 11px; font-weight: 900; padding: 1px 8px; border-radius: 999px; background: var(--p-bg); color: var(--p-text); margin-left: 6px; vertical-align: middle; }
.tk-owner--cl { background: var(--warn-bg); color: var(--warn); }
.tk-owner--both { background: var(--hair); color: var(--ink); }
[data-panel][hidden] { display: none !important; }
.tk-todo { display: grid; gap: 10px; }
.tk-todo li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.tk-todo li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--p); margin-top: 3px; background: linear-gradient(-45deg, transparent 0 40%, var(--p) 40% 60%, transparent 60%) no-repeat center / 8px 8px; }
.tk-todo li b { font-size: 13.5px; line-height: 1.5; }
.tk-todo li span { grid-column: 2; font-size: 12.5px; color: var(--gray); font-weight: 700; line-height: 1.6; }
.tk-todo--ink li::before { border-color: #fff; background-image: linear-gradient(-45deg, transparent 0 40%, #fff 40% 60%, transparent 60%); }
.tk-todo--ink li b { color: #fff; }
.tk-todo--ink li span { color: #d5d9e2; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1240px) {
  .tk-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-form .dm-btn { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .tk-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .tk-form { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tk-cal { gap: 3px; }
  .tk-cal__dow { font-size: 11px; }
  .tk-cal__dow .full { display: none; }
  .tk-cal__dow .short { display: inline; }
  .tk-cell { min-height: 58px; padding: 5px 4px 4px; gap: 3px; border-radius: 6px; }
  .tk-cell .d { font-size: 10.5px; }
  .tk-cell .t, .tk-cell .hm { display: none; }
  .tk-cell .tk-lab { font-size: 10px; padding: 1px 4px; }
  .tk-cell .tk-lab .full { display: none; }
  .tk-cell .tk-lab .short { display: inline; }
  .tk-post { grid-template-columns: 1fr; }
  .tk-pv { max-width: 230px; }
  .tk-mix__row { grid-template-columns: 84px 36px minmax(0, 1fr); }
}

/* 投稿イメージ（制作サンプル） */
.tk-pv__img.has-img { padding: 0; background: #ddd; }
.tk-pv__real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tk-pv__slides { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 3px; align-items: flex-end; background: rgba(21,24,30,.85); padding: 4px; border-radius: 6px; }
.tk-pv__slides img { width: 22px; height: 22px; object-fit: cover; border-radius: 3px; opacity: .6; }
.tk-pv__slides img.is-on { opacity: 1; outline: 1.5px solid #fff; }
.tk-pv__slides b { color: #fff; font-size: 9.5px; margin-left: 4px; }
.tk-gal { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; }
.tk-phone { border: 8px solid var(--ink); border-radius: 30px; overflow: hidden; background: #fff; max-width: 340px; margin: 0 auto; }
.tk-phone__head { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 10px; border-bottom: 1px solid var(--hair); }
.tk-phone__head b { font-family: var(--ff-num); font-size: 15px; }
.tk-phone__head span { font-size: 12px; color: var(--gray); font-weight: 700; }
.tk-ig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #fff; }
.tk-ig img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.tk-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tk-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tk-strip figure { margin: 0; }
.tk-strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.tk-strip figcaption { font-size: 12px; font-weight: 900; color: var(--gray); margin-top: 6px; text-align: center; }
@media (max-width: 960px) { .tk-gal { grid-template-columns: minmax(0, 1fr); } .tk-strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }