/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}


:root {

  --page-bg: #edfaff;

  --theme-main: #b8dfec;
  --theme-dark: #5e9fb7;

  --theme-pale: #f5fcfe;
  --theme-border: #ccebf5;

  --text: #40525a;
  --sub: #7d9ca7;

}


[hidden] {
  display: none !important;
}


html,
body {

  margin: 0;

  min-height: 100%;

}


button,
input,
select {

  font-family: inherit;

}


/* =========================================================
   BODY
========================================================= */

body {

  min-height: 100vh;

  padding: 28px;

  background:
    linear-gradient(
      145deg,
      var(--theme-pale),
      var(--page-bg)
    );

  color:
    var(--text);

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    sans-serif;

}


/* =========================================================
   PAGE
========================================================= */

.mypage {

  width:
    min(
      1240px,
      100%
    );

  margin:
    18px auto 70px;

}


/* =========================================================
   HEADER
========================================================= */

.mypage-header {

  margin-bottom:
    26px;

}


.header-main {

  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    22px;

}


.header-title {

  min-width: 0;

}


.eyebrow {

  color:
    var(--theme-dark);

  font-size:
    10px;

  font-weight:
    bold;

  letter-spacing:
    0.16em;

}


h1 {

  margin:
    5px 0;

  color:
    var(--theme-dark);

  font-size:
    38px;

  line-height:
    1.2;

}


.header-title p {

  margin: 0;

  color:
    var(--sub);

  font-size:
    12px;

}


/* =========================================================
   HEADER CONTROLS
========================================================= */

.header-controls {

  display: flex;

  align-items:
    stretch;

  gap:
    9px;

}


/* =========================================================
   COMMON CONTROL BOX
========================================================= */

.sort-editor,
.edit-mode-box,
.theme-editor {

  border:
    1px solid
    var(--theme-border);

  border-radius:
    13px;

  background:
    rgba(
      255,
      255,
      255,
      0.92
    );

}


.control-title {

  display: block;

  margin-bottom:
    5px;

  color:
    var(--theme-dark);

  font-size:
    7px;

  font-weight:
    bold;

  letter-spacing:
    0.12em;

}


/* =========================================================
   SORT
========================================================= */

.sort-editor {

  min-width:
    132px;

  padding:
    8px 10px;

}


.sort-select {

  width: 100%;

  height:
    29px;

  padding:
    0 27px
    0 9px;

  border:
    1px solid
    var(--theme-border);

  border-radius:
    8px;

  outline: none;

  background:
    white;

  color:
    var(--text);

  font-size:
    9px;

  cursor:
    pointer;

}


.sort-select:hover {

  border-color:
    var(--theme-main);

}


.sort-select:focus {

  border-color:
    var(--theme-dark);

  box-shadow:
    0 0 0 2px
    var(--theme-pale);

}


/* =========================================================
   EDIT MODE
========================================================= */

.edit-mode-box {

  display: flex;

  align-items:
    center;

  gap:
    7px;

  min-height:
    54px;

  padding:
    10px 14px;

  color:
    var(--sub);

  cursor:
    pointer;

}


.edit-mode-box input {

  width:
    17px;

  height:
    17px;

  margin: 0;

  accent-color:
    var(--theme-dark);

  cursor:
    pointer;

}


.edit-mode-box span {

  font-size:
    9px;

  font-weight:
    bold;

  letter-spacing:
    0.1em;

}


body.edit-mode
.edit-mode-box {

  border-color:
    var(--theme-main);

  color:
    var(--theme-dark);

}


/* =========================================================
   THEME
========================================================= */

.theme-editor {

  padding:
    8px 11px;

}


.theme-controls {

  display: flex;

  align-items:
    center;

  gap:
    6px;

}


#mypageBackgroundColor {

  width:
    29px;

  height:
    29px;

  padding:
    2px;

  border:
    1px solid
    var(--theme-border);

  border-radius:
    8px;

  background:
    white;

  cursor:
    pointer;

}


.theme-preset {

  width:
    19px;

  height:
    19px;

  padding: 0;

  border:
    2px solid
    white;

  border-radius:
    50%;

  box-shadow:
    0 0 0 1px
    rgba(
      70,
      90,
      100,
      0.15
    );

  cursor:
    pointer;

}


.theme-preset[data-color="#edfaff"] {
  background: #edfaff;
}


.theme-preset[data-color="#fff0f5"] {
  background: #fff0f5;
}


.theme-preset[data-color="#f2efff"] {
  background: #f2efff;
}


.theme-preset[data-color="#f5f4ef"] {
  background: #f5f4ef;
}


/* =========================================================
   EDIT TOOLBAR
========================================================= */

.edit-toolbar {

  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  margin-top:
    20px;

  padding:
    10px 13px;

  border:
    1px solid
    var(--theme-border);

  border-radius:
    12px;

  background:
    rgba(
      255,
      255,
      255,
      0.9
    );

}


.selection-area {

  display: flex;

  align-items:
    center;

  gap:
    14px;

}


.select-all {

  display: flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(--text);

  font-size:
    10px;

  cursor:
    pointer;

}


.select-all input,
.explorer-checkbox {

  width:
    16px;

  height:
    16px;

  margin: 0;

  accent-color:
    var(--theme-dark);

  cursor:
    pointer;

}


.selected-count {

  color:
    var(--sub);

  font-size:
    9px;

}


.delete-button {

  min-height:
    31px;

  padding:
    5px 12px;

  border:
    1px solid
    #e6b5c0;

  border-radius:
    8px;

  background:
    white;

  color:
    #c26377;

  font-size:
    9px;

  font-weight:
    bold;

  cursor:
    pointer;

}


.delete-button:hover:not(:disabled) {

  background:
    #fff5f7;

}


.delete-button:disabled {

  opacity:
    0.4;

  cursor:
    default;

}


/* =========================================================
   GRID
========================================================= */

.explorer-grid {

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    18px;

}


/* =========================================================
   CARD
========================================================= */

.explorer-card {

  --explorer-color:
    #8fd3e8;

  --explorer-color-pale:
    #f3fbfe;

  --explorer-color-dark:
    #579bb3;


  position:
    relative;

  min-width: 0;

  overflow:
    hidden;

  border:
    1px solid
    var(--theme-border);

  border-radius:
    17px;

  background:
    rgba(
      255,
      255,
      255,
      0.97
    );

  box-shadow:
    0 8px 25px
    rgba(
      40,
      70,
      80,
      0.08
    );

  cursor:
    pointer;

  transition:
    transform
    0.15s ease,
    box-shadow
    0.15s ease,
    border-color
    0.15s ease;

}


.explorer-card:hover {

  transform:
    translateY(
      -3px
    );

  box-shadow:
    0 14px 34px
    rgba(
      40,
      70,
      80,
      0.13
    );

}


.explorer-card:focus-visible {

  outline:
    none;

  box-shadow:
    0 0 0 3px
    white,
    0 0 0 6px
    var(--explorer-color);

}


body.edit-mode
.explorer-card {

  cursor:
    default;

}


.explorer-card.selected {

  border-color:
    var(--explorer-color);

  box-shadow:
    0 0 0 2px
    var(--explorer-color-pale),
    0 12px 30px
    rgba(
      40,
      70,
      80,
      0.10
    );

}


/* =========================================================
   GEOMETRIC DECORATION
========================================================= */

.card-geometry {

  position:
    absolute;

  z-index:
    0;

  pointer-events:
    none;

}


/* 大きなダイヤ */

.geometry-a {

  top:
    -45px;

  right:
    -35px;

  width:
    150px;

  height:
    150px;

  border:
    1px solid
    var(--explorer-color);

  opacity:
    0.13;

  transform:
    rotate(
      45deg
    );

}


/* 円 */

.geometry-b {

  right:
    28px;

  bottom:
    -62px;

  width:
    125px;

  height:
    125px;

  border:
    1px solid
    var(--explorer-color);

  border-radius:
    50%;

  opacity:
    0.11;

}


/* 三角形 */

.geometry-c {

  top:
    27px;

  right:
    90px;

  width: 0;

  height: 0;

  border-left:
    26px solid
    transparent;

  border-right:
    26px solid
    transparent;

  border-bottom:
    42px solid
    var(--explorer-color);

  opacity:
    0.055;

  transform:
    rotate(
      18deg
    );

}


/* 斜め格子 */

.explorer-card::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  pointer-events:
    none;

  opacity:
    0.035;

  background-image:
    linear-gradient(
      45deg,
      var(--explorer-color)
      1px,
      transparent
      1px
    ),
    linear-gradient(
      -45deg,
      var(--explorer-color)
      1px,
      transparent
      1px
    );

  background-size:
    32px 32px;

}


/* ドット */

.explorer-card::after {

  content:
    "";

  position:
    absolute;

  top:
    18px;

  right:
    18px;

  width:
    52px;

  height:
    52px;

  z-index:
    0;

  pointer-events:
    none;

  opacity:
    0.12;

  background-image:
    radial-gradient(
      circle,
      var(--explorer-color)
      1.4px,
      transparent
      1.6px
    );

  background-size:
    8px 8px;

}


/* =========================================================
   ACCENT
========================================================= */

.card-accent {

  position:
    absolute;

  z-index:
    2;

  top:
    0;

  left:
    0;

  bottom:
    0;

  width:
    7px;

  background:
    var(--explorer-color);

}


/* =========================================================
   SELECT
========================================================= */

.card-selection {

  position:
    absolute;

  top:
    13px;

  right:
    13px;

  z-index:
    10;

}


/* =========================================================
   MAIN
========================================================= */

.card-main {

  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    116px
    minmax(
      0,
      1fr
    );

  align-items:
    center;

  gap:
    21px;

  min-height:
    185px;

  padding:
    25px
    30px
    25px
    31px;

}


/* =========================================================
   ICON
========================================================= */

.icon-wrap {

  display:
    block;

  width:
    108px;

  height:
    108px;

  flex:
    none;

}


.explorer-icon {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    108px;

  height:
    108px;

  overflow:
    hidden;

  border:
    5px solid
    var(--explorer-color);

  border-radius:
    50%;

  background:
    var(--explorer-color-pale);

  box-shadow:
    0 5px 16px
    rgba(
      40,
      70,
      80,
      0.11
    );

  transition:
    transform
    0.15s ease;

}


.explorer-card:hover
.explorer-icon {

  transform:
    scale(
      1.035
    );

}


body.edit-mode
.explorer-card:hover
.explorer-icon {

  transform:
    none;

}


.explorer-icon img {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center top;

}


.icon-placeholder {

  color:
    var(--explorer-color);

  font-size:
    30px;

}


/* =========================================================
   INFO
========================================================= */

.card-info {

  min-width: 0;

  padding-right:
    12px;

}


.card-scenario {

  min-height:
    14px;

  margin-bottom:
    6px;

  overflow:
    hidden;

  color:
    var(--explorer-color-dark);

  font-size:
    8px;

  font-weight:
    bold;

  letter-spacing:
    0.08em;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

}


.card-kana {

  margin-bottom:
    2px;

  overflow:
    hidden;

  color:
    var(--sub);

  font-size:
    9px;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

}


.card-info h2 {

  margin:
    0 0 5px;

  overflow:
    hidden;

  color:
    var(--text);

  font-size:
    24px;

  line-height:
    1.25;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

}


.card-occupation {

  min-height:
    16px;

  margin-bottom:
    12px;

  color:
    var(--sub);

  font-size:
    11px;

}


.card-mini-profile {

  padding-top:
    9px;

  border-top:
    1px solid
    var(--explorer-color-pale);

  color:
    var(--sub);

  font-size:
    9px;

}


/* =========================================================
   EDIT ONLY
========================================================= */

.edit-only-card {

  display:
    none;

}


body.edit-mode
.card-selection {

  display:
    block;

}


body.edit-mode
.card-settings {

  display:
    grid;

}


/* =========================================================
   SETTINGS
========================================================= */

.card-settings {

  position:
    relative;

  z-index:
    3;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;

  padding:
    12px
    18px
    15px
    30px;

  border-top:
    1px solid
    var(--theme-border);

  background:
    var(--explorer-color-pale);

}


.setting-block {

  min-width: 0;

}


.setting-title {

  margin-bottom:
    5px;

  color:
    var(--explorer-color-dark);

  font-size:
    7px;

  font-weight:
    bold;

  letter-spacing:
    0.12em;

}


/* =========================================================
   ICON SETTINGS
========================================================= */

.icon-actions {

  display:
    flex;

  gap:
    6px;

}


.setting-button {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    30px;

  padding:
    5px 8px;

  border:
    1px solid
    var(--theme-border);

  border-radius:
    7px;

  background:
    white;

  color:
    var(--explorer-color-dark);

  font-size:
    8px;

  cursor:
    pointer;

}


label.setting-button {

  flex: 1;

}


.setting-button input {

  display:
    none;

}


/* =========================================================
   COLOR SETTINGS
========================================================= */

.image-color-controls {

  display:
    grid;

  grid-template-columns:
    31px
    minmax(
      0,
      1fr
    );

  gap:
    6px;

}


.image-color-picker {

  width:
    31px;

  height:
    31px;

  padding:
    2px;

  border:
    1px solid
    var(--theme-border);

  border-radius:
    7px;

  background:
    white;

  cursor:
    pointer;

}


.image-color-code {

  width:
    100%;

  min-width:
    0;

  height:
    31px;

  padding:
    5px 8px;

  border:
    1px solid
    var(--theme-border);

  border-radius:
    7px;

  outline:
    none;

  background:
    white;

  color:
    var(--text);

  font-family:
    Consolas,
    monospace;

  font-size:
    9px;

  text-transform:
    uppercase;

}


.image-color-code:focus {

  border-color:
    var(--explorer-color);

}


.image-color-code.invalid {

  border-color:
    #d87585;

  background:
    #fff4f6;

}


/* =========================================================
   EMPTY
========================================================= */

.empty-state {

  padding:
    80px 30px;

  border:
    1px dashed
    var(--theme-border);

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.6
    );

  color:
    var(--sub);

  text-align:
    center;

}


/* =========================================================
   ERROR
========================================================= */

.error-message {

  margin-bottom:
    18px;

  padding:
    12px 15px;

  border:
    1px solid
    #edc3cb;

  border-radius:
    10px;

  background:
    #fff6f8;

  color:
    #b55f70;

  font-size:
    11px;

}


/* =========================================================
   TABLET
========================================================= */

@media (
  max-width: 1050px
) {

  .header-main {

    flex-direction:
      column;

  }


  .header-controls {

    width:
      100%;

    justify-content:
      flex-end;

  }

}


@media (
  max-width: 950px
) {

  .explorer-grid {

    grid-template-columns:
      1fr;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width: 700px
) {

  body {

    padding:
      14px;

  }


  .header-controls {

    justify-content:
      flex-start;

    flex-wrap:
      wrap;

  }


  .sort-editor {

    flex:
      1 1 130px;

  }


  .edit-mode-box {

    flex:
      1 1 130px;

  }


  .theme-editor {

    flex:
      1 1 160px;

  }


  .edit-toolbar {

    align-items:
      stretch;

    flex-direction:
      column;

  }


  .card-main {

    grid-template-columns:
      92px
      minmax(
        0,
        1fr
      );

    gap:
      15px;

    padding:
      22px
      20px
      22px
      26px;

  }


  .icon-wrap,
  .explorer-icon {

    width:
      86px;

    height:
      86px;

  }


  .card-info h2 {

    font-size:
      20px;

  }


  .card-settings {

    grid-template-columns:
      1fr;

    padding-left:
      26px;

  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (
  max-width: 450px
) {

  body {

    padding:
      9px;

  }


  h1 {

    font-size:
      31px;

  }


  .card-main {

    grid-template-columns:
      74px
      minmax(
        0,
        1fr
      );

    gap:
      12px;

  }


  .icon-wrap,
  .explorer-icon {

    width:
      70px;

    height:
      70px;

  }


  .card-info h2 {

    font-size:
      18px;

  }

}

/* =========================================================
   PUBLIC MY PAGE
========================================================= */

.publish-editor {
  min-width: 156px;
  padding: 8px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.92);
}

.publish-mypage-button,
.publish-sub-button {
  width: 100%;
  min-height: 29px;
  padding: 5px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: white;
  color: var(--theme-dark);
  font-size: 9px;
  font-weight: bold;
  cursor: pointer;
}

.publish-mypage-button:hover,
.publish-sub-button:hover {
  border-color: var(--theme-main);
  background: var(--theme-pale);
}

.publish-sub-button {
  margin-top: 5px;
}

.publish-mypage-status {
  margin: -14px 0 18px;
  padding: 8px 11px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--theme-dark);
  font-size: 10px;
  text-align: right;
}

.publish-mypage-status.error {
  color: #9a4050;
}

@media (max-width: 900px) {
  .header-controls {
    flex-wrap: wrap;
  }

  .publish-editor {
    min-width: 148px;
  }
}


/* 公開サイトでは編集UIを表示しない */
.edit-only-card,
.edit-toolbar,
.edit-mode-box,
.theme-editor,
.publish-editor,
.publish-mypage-status {
  display: none !important;
}

.explorer-card {
  cursor: pointer;
}

.scenario-header-link{display:flex;align-items:center;justify-content:center;min-height:54px;padding:8px 13px;border:1px solid var(--theme-border);border-radius:13px;background:rgba(255,255,255,.92);color:var(--theme-dark);font-size:9px;font-weight:bold;text-decoration:none}.scenario-header-link:hover{border-color:var(--theme-main);background:white}


/* =========================================================
   STANDEE GALLERY
========================================================= */

.standee-strip-section {
  position: relative;
  margin: 0 0 22px;
  padding: 14px 14px 12px;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96),
      rgba(255, 255, 255, 0.78)
    );
}

.standee-strip-section[hidden] {
  display: none !important;
}

.standee-strip-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.standee-strip-head h2 {
  margin: 0;
  color: var(--theme-dark);
  font-size: 14px;
  line-height: 1.2;
}

.standee-strip-head p {
  margin: 0;
  color: var(--theme-dark);
  opacity: 0.58;
  font-size: 8px;
  white-space: nowrap;
}

.standee-strip-eyebrow {
  margin-bottom: 3px;
  color: var(--theme-main);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.standee-strip {
  display: flex;
  align-items: end;
  gap: 8px;
  min-height: 196px;
  padding: 4px 2px 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.standee-strip-item {
  position: relative;
  display: block;
  flex: 0 0 116px;
  width: 116px;
  min-width: 116px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  scroll-snap-align: start;
}

.standee-strip-figure {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%;
  height: 166px;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 13px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.78),
      rgba(255, 255, 255, 0.32)
    );
}

.standee-strip-figure::before {
  content: "";
  position: absolute;
  inset: auto 12px 7px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  filter: blur(4px);
}

.standee-strip-figure img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.standee-strip-label {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: var(--theme-dark);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standee-strip-item:hover .standee-strip-figure img {
  transform: translateY(-3px) scale(1.02);
}

.standee-strip-item:focus-visible {
  outline: 2px solid var(--theme-main);
  outline-offset: 3px;
}

.standee-strip-loading {
  display: flex;
  align-items: center;
  min-height: 160px;
  padding: 0 12px;
  color: var(--theme-dark);
  opacity: 0.58;
  font-size: 9px;
}

@media (max-width: 700px) {
  .standee-strip-section {
    margin-bottom: 16px;
    padding: 11px 10px 10px;
    border-radius: 16px;
  }

  .standee-strip-head {
    align-items: center;
  }

  .standee-strip-head p {
    display: none;
  }

  .standee-strip {
    min-height: 166px;
    gap: 7px;
  }

  .standee-strip-item {
    flex-basis: 94px;
    width: 94px;
    min-width: 94px;
  }

  .standee-strip-figure {
    height: 142px;
  }

  .standee-strip-label {
    font-size: 9px;
  }
}


/* =========================================================
   STANDEE GALLERY — HEIGHT BASED
   画像の高さを揃え、横幅は立ち絵の比率に任せる
========================================================= */

.standee-strip {
  align-items: end;
}

.standee-strip-item {
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: 0 !important;
}

.standee-strip-figure {
  width: max-content !important;
  min-width: 72px;
  height: 166px;
  overflow: visible !important;
  border: 0;
  background: transparent;
}

.standee-strip-figure::before {
  right: 12%;
  left: 12%;
}

.standee-strip-figure img {
  display: block;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center bottom;
}

.standee-strip-label {
  max-width: 180px;
  margin-inline: auto;
}

@media (max-width: 700px) {
  .standee-strip-item {
    flex-basis: auto !important;
    width: max-content !important;
    min-width: 0 !important;
  }

  .standee-strip-figure {
    width: max-content !important;
    min-width: 62px;
    height: 142px;
  }
}


/* =========================================================
   SEARCH / FAVORITE / TAGS
========================================================= */

.library-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 18px;
}

.search-box {
  flex: 1 1 420px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.search-box > span {
  flex: 0 0 auto;
  color: var(--theme-main);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.search-box input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--theme-dark);
  font: inherit;
  font-size: 12px;
}

.search-box input::placeholder {
  color: rgba(30, 40, 50, 0.42);
}

.favorite-filter {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--theme-dark);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.favorite-filter input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--theme-main);
}

.favorite-star {
  position: absolute;
  z-index: 8;
  top: 11px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--theme-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(60, 70, 75, 0.35);
  font-size: 16px;
  line-height: 1;
}

button.favorite-star {
  cursor: pointer;
}

.favorite-star.active {
  color: #d4a62a;
  background: rgba(255, 250, 225, 0.92);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.card-tag {
  max-width: 120px;
  overflow: hidden;
  padding: 3px 7px;
  border: 1px solid var(--explorer-color);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--explorer-color-dark);
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standee-strip-head {
  margin-bottom: 8px;
}

.standee-strip-eyebrow {
  color: var(--theme-main);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

@media (max-width: 700px) {
  .library-tools {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .search-box {
    flex-basis: auto;
  }

  .favorite-filter {
    align-self: flex-start;
  }
}


/* =========================================================
   LARGE LIBRARY / 5-COLUMN GRID v1.5.0
========================================================= */
.explorer-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.explorer-card {
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: 190px;
}

.explorer-card .card-main {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 10px !important;
  min-height: 132px !important;
  padding: 16px 12px !important;
}

.explorer-card .icon-wrap,
.explorer-card .explorer-icon {
  width: 64px !important;
  height: 64px !important;
}

.explorer-card .explorer-icon {
  border-width: 3px !important;
}

.explorer-card .card-info {
  padding-right: 0 !important;
}

.explorer-card .card-info h2 {
  font-size: 16px !important;
}

.explorer-card .card-occupation {
  margin-bottom: 7px !important;
  font-size: 9px !important;
}

.explorer-card .card-mini-profile {
  padding-top: 6px !important;
  font-size: 8px !important;
}

.explorer-card .card-tags {
  gap: 3px !important;
}

.explorer-card img {
  content-visibility: auto;
}

/* 5列を基本にしつつ、狭い画面だけ段階的に減らす */
@media (max-width: 1100px) {
  .explorer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 900px) {
  .explorer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 700px) {
  .explorer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .explorer-card .card-main {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 112px !important;
    padding: 12px 9px !important;
  }
  .explorer-card .icon-wrap,
  .explorer-card .explorer-icon {
    width: 52px !important;
    height: 52px !important;
  }
  .explorer-card .card-info h2 {
    font-size: 14px !important;
  }
}

/* 自動スクロール中も手動横スクロール可能 */
.standee-strip {
  scroll-behavior: auto;
  overscroll-behavior-inline: contain;
}

.card-render-sentinel {
  grid-column: 1 / -1;
  width: 100%;
  height: 1px;
  pointer-events: none;
}


/* =========================================================
   v1.5.2 MOBILE STANDEE GALLERY FIX
   - 見出し色を他の見出しと統一
   - 1人単位スクロール用のスナップを安定化
========================================================= */
@media (max-width: 700px) {
  .standee-strip-eyebrow {
    color: var(--theme-dark) !important;
  }

  .standee-strip {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .standee-strip-item {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}


/* =========================================================
   v1.5.31 - Public page polish
========================================================= */

/* 公開ページではお気に入りの☆を表示しない */
.favorite-button,
.favorite-star,
.favorite-toggle,
[data-favorite-button],
[data-action="favorite"] {
  display: none !important;
}

/* 公開ページのページネーション */
.explorer-pagination {
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 30px auto 14px;
  padding: 8px 12px;
  border: 1px solid rgba(99, 190, 224, .20);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 6px 22px rgba(77, 153, 183, .08);
  backdrop-filter: blur(8px);
}
.explorer-pagination[hidden] {
  display: none !important;
}
.explorer-page-button {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--theme-dark, #69a9c3) !important;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease !important;
}
.explorer-page-button:hover:not(:disabled):not(.active) {
  background: rgba(107, 196, 229, .12) !important;
  transform: translateY(-1px);
}
.explorer-page-button.active {
  background: var(--theme-dark, #73bad5) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(73, 157, 190, .18) !important;
}
.explorer-page-button:disabled {
  opacity: .28 !important;
  cursor: default;
}

.favorite-star {
 display:none !important;
}




/* v1.5.35 色相環ナビ */
.color-wheel-nav-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border:1px solid #d3eaf3;
  border-radius:16px;
  background:#fff;
  color:#6aa9c1;
  text-decoration:none;
  font:inherit;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  transition:background .18s ease,transform .18s ease;
}
.color-wheel-nav-button:hover{
  background:#f2fbfe;
  transform:translateY(-1px);
}


/* =========================================================
   v1.5.42 - 色相環ボタンを通過済みシナリオと統一
========================================================= */
.color-wheel-nav-button{
  color:#7f8d94 !important;
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:600 !important;
  letter-spacing:normal !important;
  line-height:inherit !important;
  text-decoration:none !important;
}
.color-wheel-nav-button:hover{
  color:#7f8d94 !important;
}