/* こまりの姿（character/）の並べ方。部品そのものの見た目は parts-theme.css の K1、幅ごとの指定は site-responsive.css の K1 */

.figure-section { padding-bottom: calc(var(--section-space) * .7); }

.figure-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

/* いまの衣装の札（右の欄） */
.costume-panel {
  position: sticky;
  top: 6rem;
  margin-top: 3.6rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgb(59 32 56 / .5), rgb(26 14 20 / .88));
  box-shadow: 0 1rem 2rem rgb(0 0 0 / .12);
}
.costume-panel-kicker { margin: 0; color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .2em; }
.costume-panel-name { margin: .5rem 0 0; font-family: var(--mincho); font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1.4; letter-spacing: .03em; }
.costume-panel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: .9rem 0 0; }
.costume-debut { color: var(--muted); font-size: .84rem; letter-spacing: .04em; }
.costume-panel-note { margin: 1rem 0 0; color: var(--muted); font-size: .92rem; }

.pose-list { margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.pose-list-button {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  padding: .85rem 1.6rem .85rem .1rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  background: none;
  text-align: left;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.pose-list-button:hover { padding-left: .4rem; color: var(--gold); }
.pose-list-no { flex: none; color: var(--gold); font-family: var(--mincho); font-size: .8rem; letter-spacing: .1em; }
.pose-list-name { font-size: .95rem; }
.pose-list-button[aria-current="true"] { color: var(--gold); }
/* 選んでいるポーズに小さな狐火 */
.pose-list-button[aria-current="true"]::after {
  position: absolute;
  top: 50%;
  right: .4rem;
  width: .45rem;
  height: .58rem;
  border-radius: 58% 42% 58% 42% / 68% 68% 32% 32%;
  background: radial-gradient(ellipse at 48% 64%, #effaff 0 14%, var(--kitsunebi) 34%, #4d8dff 76%);
  box-shadow: 0 0 .7rem var(--kitsunebi);
  content: "";
  transform: translateY(-50%) rotate(12deg);
}

/* 表情 */
.expression-section { padding-top: calc(var(--section-space) * .7); border-top: 1px solid var(--line); }
.section-note { margin: 1.25rem 0 0; color: var(--muted); font-size: .84rem; }

/* 衣装一覧 */
.costume-section { border-top: 1px solid var(--line); }
.costume-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.costume-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgb(59 32 56 / .5), rgb(26 14 20 / .9));
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.costume-card:hover { border-color: rgb(245 195 75 / .5); box-shadow: 0 1rem 2.4rem rgb(0 0 0 / .25); transform: translateY(-.2rem); }
.costume-card-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 5 / 4;
  padding: 1.1rem 1rem 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 50% 44% at 50% 46%, rgb(255 178 94 / .18), transparent 72%),
    linear-gradient(180deg, #1f1020 0%, #150b14 70%, #0b0712 100%);
}
.costume-card-visual img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}
.costume-card-visual img[data-placeholder] {
  height: 94%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: var(--focus, 50% 40%);
  border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
  outline: 1px solid rgb(245 195 75 / .5);
  outline-offset: -6px;
}
.costume-card-visual .costume-card-teaser { height: 94%; padding-top: 0; border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; box-shadow: none; }
.costume-card-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 1.3rem 1.35rem 1.5rem; }
.costume-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0; }
.costume-card-meta time { color: var(--muted); font-size: .8rem; letter-spacing: .04em; }
.costume-card h3 { margin: .8rem 0 0; font-family: var(--mincho); font-size: 1.3rem; line-height: 1.45; }
.costume-card-note { margin: .55rem 0 0; color: var(--muted); font-size: .88rem; }
.costume-card-preview { margin: .9rem 0 0; padding-left: .85rem; border-left: 1px solid var(--gold); font-family: var(--mincho); font-size: .92rem; line-height: 1.85; }
.costume-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 220px;
  min-height: 2.75rem;
  margin-top: auto;
  padding: .55rem 1rem;
  border: 1px solid rgb(245 195 75 / .6);
  color: var(--paper);
  background: rgb(245 195 75 / .08);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.costume-card-note,
.costume-card-preview { margin-bottom: 1.4rem; }
.costume-card-note:has(+ .costume-card-preview) { margin-bottom: 0; }
.costume-card-link::after { content: "↑"; }
.costume-card-link:hover { border-color: var(--gold); background: rgb(245 195 75 / .2); }
.costume-actions { margin-top: 2.75rem; }

.part-figure-slider__frame:has(img[data-soon]) .part-figure-slider__img,
.part-figure-slider__thumb.is-soon img { filter: brightness(0) drop-shadow(0 0 .7rem rgb(143 216 255 / .55)); }
.figure-soon-badge, .figure-thumb-soon { position: absolute; z-index: 2; left: 50%; padding: .3rem .6rem; border: 1px solid rgb(143 216 255 / .65); color: var(--kitsunebi); background: rgb(11 7 18 / .82); font-size: .64rem; font-weight: 700; letter-spacing: .12em; transform: translateX(-50%); }
.figure-soon-badge { bottom: 14%; }
.figure-thumb-soon { display: none; }
.part-figure-slider__thumb.is-soon { overflow: hidden; }
.expression-secret-mark { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid rgb(143 216 255 / .45); border-radius: inherit; color: var(--kitsunebi); background: radial-gradient(circle, rgb(143 216 255 / .14), rgb(11 7 18 / .9) 68%); font-family: var(--mincho); font-size: clamp(2rem, 7vw, 4rem); }
.expression-secret-mark small { margin-top: -.5rem; font-family: var(--gothic); font-size: .6rem; font-weight: 700; letter-spacing: .16em; }
.part-expression-grid__cell.is-secret { position: relative; overflow: hidden; }
.part-expression-grid__cell .expression-secret-mark { position: absolute; inset: 0; font-size: 1.6rem; }
.part-expression-grid__cell .expression-secret-mark small { font-size: .42rem; }