* {
  box-sizing: border-box;
}

:root {
  --blue: #56b8eb;
  --blue-deep: #45ace2;
  --blue-soft: #d9efff;
  --text: #10223a;
  --muted: #607894;
  --line: #dce8f1;
  --surface: #ffffff;
  --chat-bg: #f5fbff;
  --shadow: 0 8px 24px rgba(54, 102, 138, 0.11);
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Noto Sans JP",
    sans-serif;
  color: var(--text);
  background: #eaf3f9;
}

body {
  min-height: 100svh;
}

button,
input,
textarea {
  font: inherit;
}

button {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
}

.app-shell {
  width: min(100%, 430px);
  min-height: 100svh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--chat-bg);
  box-shadow: 0 0 30px rgba(38, 84, 117, 0.14);
}

/* 共通ヘッダー */

.app-header,
.home-header {
  flex: 0 0 auto;
  color: #fff;
  background:
    radial-gradient(circle at 50% -90%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, #54b9ec 0%, #51b4e8 100%);
}

.app-header {
  padding: 13px 20px;
}

.top-actions {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-actions-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.icon-button {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}

.icon-button svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-button {
  width: 22px;
  align-content: center;
  gap: 4px;
}

.menu-button span {
  width: 22px;
  height: 2px;
  border-radius: 3px;
  background: currentColor;
}

.notification-dot {
  position: absolute;
  top: 1px;
  right: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6b47;
  box-shadow: 0 0 0 1px rgba(255,255,255,.65);
}

/* グループチャット */

.group-page {
  height: 100svh;
}

.room-header {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  min-height: 78px;
  padding: 12px 17px 12px 15px;
  display: grid;
  grid-template-columns: 34px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #edf2f6;
  background: rgba(255,255,255,.97);
}

.room-icon-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #4d6780;
}

.room-icon-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-button {
  color: #122942;
}

.room-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #8bd0f2, #71c0eb);
}

.room-avatar svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.room-info {
  min-width: 0;
}

.room-info h1 {
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.room-info h1 span {
  margin-left: 3px;
  font-size: 15px;
}

.room-info p {
  margin: 5px 0 0;
  color: #6b8199;
  font-size: 13px;
  letter-spacing: .02em;
}

.room-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.more-button {
  align-content: center;
  justify-items: center;
  gap: 3px;
}

.more-button span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.chat-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 13px 16px 30px;
  background:
    radial-gradient(circle at 48% 12%, rgba(255,255,255,.98), rgba(255,255,255,.35) 35%, transparent 58%),
    linear-gradient(180deg, #f7fcff 0%, #f3faff 100%);
  scrollbar-width: none;
}

.chat-area::-webkit-scrollbar {
  display: none;
}

.date-label {
  width: max-content;
  margin: 0 auto 13px;
  padding: 5px 10px;
  border-radius: 7px;
  color: #4da7dc;
  background: #dff1fd;
  font-size: 12px;
  font-weight: 700;
}

.message-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 18px;
}

.message-row.outgoing {
  justify-content: flex-end;
}

.avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin-top: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 3px 12px rgba(51, 97, 130, .12);
}

.avatar-mama { background: #ffe8b3; }
.avatar-papa { background: #d9f0fb; }
.avatar-sakura { background: #ffe2c5; }
.avatar-grandpa { background: #e8eef2; }

.message-content {
  max-width: calc(100% - 49px);
}

.outgoing .message-content {
  max-width: 86%;
}

.sender-name {
  margin: 0 0 5px 3px;
  color: #4aaee5;
  font-size: 13px;
  font-weight: 700;
}

.message-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.incoming .message-line > time {
  flex: 0 0 auto;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
}

.message-bubble {
  max-width: 100%;
  padding: 12px 15px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: .01em;
  word-break: break-word;
}

.incoming .message-bubble {
  border-top-left-radius: 8px;
}

.outgoing .message-bubble {
  border-top-right-radius: 8px;
  background: linear-gradient(135deg, #dff2ff 0%, #c9eaff 100%);
}

.message-meta {
  flex: 0 0 auto;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  text-align: right;
}

.message-meta time,
.message-meta span {
  display: block;
}

.reaction {
  width: max-content;
  margin-top: 4px;
  padding: 4px 9px 5px;
  border: 1px solid #edf3f7;
  border-radius: 999px;
  color: #4f6f8f;
  background: #fff;
  box-shadow: 0 3px 10px rgba(46, 85, 112, .10);
  font-size: 13px;
  line-height: 1;
}

.reaction span {
  margin-left: 3px;
  font-size: 11px;
}

.outgoing .reaction {
  margin-left: auto;
  margin-right: 2px;
}

.reaction.pink {
  color: #5c7791;
}

.composer {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  min-height: 68px;
  padding: 10px 13px max(9px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 28px 28px 28px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.98);
  box-shadow: 0 -6px 18px rgba(77, 119, 148, .05);
}

.composer-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #5f7890;
}

.composer-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.add-button {
  color: var(--blue-deep);
}

.message-input {
  min-width: 0;
  height: 40px;
  padding: 0 5px 0 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #dce8f1;
  border-radius: 22px;
  color: #9aabbb;
  background: #fff;
  font-size: 13px;
}

.message-input > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.emoji-button {
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  margin-left: auto;
  display: grid;
  place-items: center;
  color: #4bb2e9;
}

.emoji-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mic-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #63c4f0, #42abe3);
  box-shadow: 0 5px 14px rgba(67, 172, 226, .25);
}

.mic-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ホーム */

.home-page {
  position: relative;
  height: 100svh;
  background: #f5fbff;
}

.home-header {
  min-height: 82px;
  padding: 18px 18px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: #55b8e9;
}

.home-profile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-profile-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  color: #43a9df;
  background: #fff;
  font-size: 21px;
}

.home-profile-text {
  min-width: 0;
}

.home-profile-text span,
.home-profile-text strong {
  display: block;
}

.home-profile-text span {
  margin-bottom: 2px;
  color: rgba(255,255,255,.82);
  font-size: 11px;
}

.home-profile-text strong {
  overflow: hidden;
  font-size: 17px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-header-actions {
  display: flex;
  align-items: center;
  gap: 13px;
}

.home-header-button {
  position: relative;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 21px;
}

.home-header-button .notification-dot {
  top: 0;
  right: -1px;
}

.home-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 15px 15px 88px;
  scrollbar-width: none;
}

.home-content::-webkit-scrollbar {
  display: none;
}

.home-search {
  height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dce8f1;
  border-radius: 15px;
  color: #7d93a7;
  background: #fff;
}

.home-search i {
  flex: 0 0 auto;
  color: #58b5e6;
  font-size: 15px;
}

.home-search input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 13px;
}

.home-search input::placeholder {
  color: #9aabbb;
}

.home-search input::-webkit-search-cancel-button {
  display: none;
}

.home-section {
  margin-top: 22px;
}

.section-heading {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-heading h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: .01em;
}

.section-heading button {
  color: #49aae0;
  font-size: 11px;
  font-weight: 700;
}

.family-list {
  display: grid;
  gap: 11px;
}

.family-card {
  padding: 14px;
  border: 1px solid #e4edf4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(54, 102, 138, .07);
}

.family-card-top {
  display: flex;
  align-items: center;
  gap: 11px;
}

.member-avatar {
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #4aaee4;
  background: #e2f4ff;
  font-size: 20px;
}

.child-avatar {
  color: #ec9b52;
  background: #fff0dc;
}

.second-avatar {
  color: #d986a8;
  background: #ffe8f0;
}

.family-card-name {
  min-width: 0;
  flex: 1 1 auto;
}

.name-status-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.name-status-row h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.status-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
}

.status-badge.active {
  color: #22875c;
  background: #e4f7ed;
}

.status-badge.paused {
  color: #a36d23;
  background: #fff2d9;
}

.family-card-name p {
  margin: 4px 0 0;
  color: #7b90a4;
  font-size: 10px;
}

.card-menu-button {
  flex: 0 0 25px;
  width: 25px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #8397a9;
  font-size: 15px;
}

.family-detail-grid {
  margin-top: 12px;
  padding: 10px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #edf3f7;
  border-bottom: 1px solid #edf3f7;
}

.family-detail-grid > div {
  min-width: 0;
  padding: 0 10px;
}

.family-detail-grid > div + div {
  border-left: 1px solid #edf3f7;
}

.family-detail-grid span,
.family-detail-grid strong {
  display: block;
}

.family-detail-grid span {
  margin-bottom: 3px;
  color: #8a9cad;
  font-size: 9px;
}

.family-detail-grid strong {
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.parent-room-button {
  width: 100%;
  height: 38px;
  margin-top: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 12px;
  color: #fff;
  background: #55b8e9;
  font-size: 12px;
  font-weight: 700;
}

.people-list {
  padding: 14px 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  border: 1px solid #e4edf4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(54, 102, 138, .07);
}

.person-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #526e88;
  font-size: 10px;
  font-weight: 700;
}

.person-item > span:last-child {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.friend-one {
  color: #5aa7dc;
  background: #e1f2ff;
}

.friend-two {
  color: #d786a6;
  background: #ffe8f0;
}

.friend-three {
  color: #8e9ad0;
  background: #ececff;
}

.add-person-item .member-avatar {
  border: 1px dashed #8ecbea;
  color: #4daee2;
  background: #f7fcff;
}

.group-list {
  overflow: hidden;
  border: 1px solid #e4edf4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(54, 102, 138, .07);
}

.home-group-card {
  width: 100%;
  min-height: 67px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  border-bottom: 1px solid #edf3f7;
}

.home-group-card:last-child {
  border-bottom: 0;
}

.group-card-icon {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #4aaee4;
  background: #e2f4ff;
  font-size: 18px;
}

.relative-group-icon {
  color: #8c83ce;
  background: #efedff;
}

.group-card-text {
  min-width: 0;
  flex: 1 1 auto;
}

.group-card-text strong,
.group-card-text small {
  display: block;
}

.group-card-text strong {
  margin-bottom: 4px;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-card-text small {
  color: #8599aa;
  font-size: 10px;
}

.home-group-card > i {
  flex: 0 0 auto;
  color: #a5b5c2;
  font-size: 12px;
}

.official-notice-card {
  width: 100%;
  min-height: 70px;
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  border: 1px solid #e4edf4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(54, 102, 138, .07);
}

.notice-icon {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #e49b3f;
  background: #fff3de;
  font-size: 17px;
}

.notice-text {
  min-width: 0;
  flex: 1 1 auto;
}

.notice-text strong,
.notice-text small {
  display: block;
}

.notice-text strong {
  margin-bottom: 4px;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.notice-text small {
  overflow: hidden;
  color: #8599aa;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.notice-date {
  flex: 0 0 auto;
  color: #8fa1b0;
  font-size: 9px;
}

.official-notice-card > i {
  flex: 0 0 auto;
  color: #a5b5c2;
  font-size: 12px;
}

.bottom-nav {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 67px;
  padding: 8px 18px max(8px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  border-top: 1px solid #dfeaf2;
  background: rgba(255,255,255,.98);
  box-shadow: 0 -5px 15px rgba(54, 91, 119, .05);
}

.bottom-nav-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #8296a8;
  font-size: 9px;
  font-weight: 700;
}

.bottom-nav-item > i,
.nav-icon-wrap > i {
  font-size: 21px;
}

.bottom-nav-item.active {
  color: #49afe4;
}

.nav-icon-wrap {
  position: relative;
}

.nav-dot {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #ff6b63;
}



.family-photo-section {
  margin-top: 18px;
}

.family-photo-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #e4edf4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(54, 102, 138, .07);
}

.family-photo-card img {
  display: block;
  width: 100%;
  height: 184px;
  object-fit: cover;
  background: #dff4ff;
}

.family-photo-edit-button {
  position: absolute;
  top: 12px;
  right: 12px;
  height: 31px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 999px;
  color: #35546d;
  background: rgba(255,255,255,.92);
  box-shadow: 0 3px 10px rgba(36, 78, 105, .12);
  font-size: 10px;
  font-weight: 700;
}

.family-photo-edit-button i {
  color: #4aaee4;
  font-size: 11px;
}

/* 小さい画面 */

@media (max-width: 380px) {
  .app-header {
    padding-left: 17px;
    padding-right: 17px;
  }

  .room-header {
    grid-template-columns: 30px 44px minmax(0, 1fr) auto;
    gap: 8px;
    padding-left: 11px;
    padding-right: 11px;
  }

  .room-avatar {
    width: 44px;
    height: 44px;
  }

  .room-info h1 {
    font-size: 14px;
  }

  .chat-area {
    padding-left: 11px;
    padding-right: 11px;
  }

  .avatar {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    font-size: 23px;
  }

  .message-content {
    max-width: calc(100% - 45px);
  }

  .message-bubble {
    padding: 11px 13px;
    font-size: 13px;
  }

  .composer {
    grid-template-columns: 25px 25px 25px minmax(0, 1fr) 40px;
    gap: 6px;
    padding-left: 9px;
    padding-right: 9px;
  }

  .composer-icon {
    width: 25px;
  }

  .composer-icon svg {
    width: 22px;
    height: 22px;
  }

  .mic-button {
    width: 40px;
    height: 40px;
  }

  .home-header {
    padding-right: 14px;
    padding-left: 14px;
  }

  .home-header-actions {
    gap: 9px;
  }

  .home-content {
    padding-right: 12px;
    padding-left: 12px;
  }

  .family-card {
    padding-right: 12px;
    padding-left: 12px;
  }

  .people-list {
    padding-right: 7px;
    padding-left: 7px;
  }
}


/* プロフィール */

.profile-page {
  position: relative;
  height: 100svh;
  background: #f5fbff;
}

.subpage-header {
  flex: 0 0 auto;
  min-height: 58px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  color: #fff;
  background: #55b8e9;
}

.subpage-header h1 {
  margin: 0;
  font-size: 17px;
  text-align: center;
}

.subpage-header-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
}

.profile-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 92px;
  scrollbar-width: none;
}

.profile-content::-webkit-scrollbar {
  display: none;
}

.profile-visual {
  position: relative;
  margin-bottom: 51px;
}

.profile-cover-image {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.profile-avatar-image {
  position: absolute;
  bottom: -47px;
  left: 50%;
  width: 94px;
  height: 94px;
  padding: 4px;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgba(52, 95, 125, .18);
  transform: translateX(-50%);
}

.profile-avatar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% center;
  border-radius: 50%;
}

.profile-summary {
  padding: 0 18px;
  text-align: center;
}

.profile-summary h2 {
  margin: 0;
  font-size: 21px;
}

.profile-summary > p {
  margin: 5px 0 0;
  color: #758a9d;
  font-size: 12px;
}

.profile-action-row {
  margin-top: 17px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-action-button {
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 700;
}

.profile-action-button.primary {
  color: #fff;
  background: #55b8e9;
}

.profile-action-button.secondary {
  border: 1px solid #76c4eb;
  color: #42a9df;
  background: #fff;
}

/* トーク一覧 */

.talk-page {
  position: relative;
  height: 100svh;
  background: #f5fbff;
}

.talk-header {
  flex: 0 0 auto;
  min-height: 62px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  color: #fff;
  background: #55b8e9;
}

.talk-header h1 {
  margin: 0;
  font-size: 20px;
}

.talk-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 14px 86px;
  scrollbar-width: none;
}

.talk-content::-webkit-scrollbar {
  display: none;
}

.talk-search {
  height: 43px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dce8f1;
  border-radius: 15px;
  color: #7d93a7;
  background: #fff;
}

.talk-search i {
  color: #58b5e6;
  font-size: 14px;
}

.talk-search input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 12px;
}

.talk-search input::placeholder {
  color: #9aabbb;
}

.talk-search input::-webkit-search-cancel-button {
  display: none;
}

.talk-list-page {
  margin-top: 13px;
  overflow: hidden;
  border: 1px solid #e4edf4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(54, 102, 138, .07);
}

.talk-list-item {
  position: relative;
  min-height: 76px;
  padding: 12px 38px 12px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #edf3f7;
}

.talk-list-item:last-child {
  border-bottom: 0;
}

.talk-list-avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 19px;
}

.family-room-avatar {
  color: #49aae0;
  background: #dff2ff;
}

.parent-child-room-avatar {
  color: #e49a50;
  background: #fff0dd;
}

.friend-room-avatar {
  color: #d681a4;
  background: #ffe8f0;
}

.relative-room-avatar {
  color: #8c83ce;
  background: #efedff;
}

.paused-room-avatar {
  color: #78899a;
  background: #edf1f4;
}

.official-room-avatar {
  color: #e49b3f;
  background: #fff3de;
}

.talk-list-body {
  min-width: 0;
  flex: 1 1 auto;
}

.talk-list-title-row,
.talk-list-message-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.talk-list-title-row {
  margin-bottom: 6px;
}

.talk-list-title-row h2 {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.talk-list-title-row time {
  flex: 0 0 auto;
  color: #899baa;
  font-size: 9px;
}

.talk-list-message-row p {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  overflow: hidden;
  color: #758a9d;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.talk-list-message-row p strong {
  color: #617a91;
  font-weight: 700;
}

.talk-unread-badge {
  flex: 0 0 auto;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #50b3e6;
  font-size: 9px;
  font-weight: 700;
}

.talk-state-badge {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  color: #8f6b34;
  background: #fff0d5;
  font-size: 8px;
  font-weight: 700;
}

.talk-status-icon {
  position: absolute;
  top: 13px;
  right: 13px;
  color: #4eafe2;
  font-size: 11px;
}

.talk-status-icon.muted {
  color: #93a4b2;
}

.paused-room {
  background: #fbfcfd;
}

@media (max-width: 380px) {
  .profile-cover-image {
    height: 190px;
  }

  .profile-action-row {
    gap: 8px;
  }

  .talk-content {
    padding-right: 11px;
    padding-left: 11px;
  }

  .talk-list-item {
    padding-right: 34px;
    padding-left: 10px;
  }

  .talk-list-avatar {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
}
/* =========================================================
   代表ページ追加：ログイン・設定・招待・子管理・探す
   ========================================================= */

.subpage-header-spacer {
  width: 36px;
  height: 36px;
}

.standard-page,
.search-page {
  position: relative;
  height: 100svh;
  background: #f5fbff;
}

.standard-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 15px 15px 94px;
  scrollbar-width: none;
}

.standard-content::-webkit-scrollbar,
.search-content::-webkit-scrollbar {
  display: none;
}

/* ログイン */

.login-page {
  min-height: 100svh;
  background: #f5fbff;
}

.login-content {
  flex: 1 1 auto;
  min-height: 100svh;
  padding: max(38px, env(safe-area-inset-top)) 18px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-brand {
  margin-bottom: 25px;
  text-align: center;
}

.login-logo-mark {
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: #fff;
  background: #55b8e9;
  box-shadow: 0 8px 20px rgba(60, 157, 211, .19);
  font-size: 34px;
}

.login-brand h1 {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: "Fredoka", sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}

.login-brand-name {
  padding-left: .12em;
  color: #4faee0;
  letter-spacing: .12em;
}

.login-brand-dot {
  margin-left: .02em;
  color: #b8c1c9;
  letter-spacing: 0;
}

.login-brand p {
  margin: 5px 0 0;
  color: #6f8699;
  font-size: 12px;
}

.login-card {
  padding: 20px 17px;
  border: 1px solid #e1ebf2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(54, 102, 138, .08);
}

.login-section-title {
  margin-bottom: 14px;
}

.login-section-title h2 {
  margin: 0;
  font-size: 16px;
}

.login-section-title p {
  margin: 4px 0 0;
  color: #8498a9;
  font-size: 10px;
}

.auth-button {
  width: 100%;
  height: 46px;
  margin-top: 10px;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  border: 1px solid #dce6ed;
  border-radius: 13px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.auth-button i {
  font-size: 18px;
}

.auth-button span {
  grid-column: 2;
}

.google-button i {
  color: #4285f4;
}

.line-button {
  border-color: #20bf59;
  color: #fff;
  background: #20bf59;
}

.line-button i {
  color: #fff;
}

.login-divider {
  margin: 20px 0 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #8a9cac;
  font-size: 10px;
  font-weight: 700;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #e4edf3;
}

.child-login-form {
  display: grid;
  gap: 13px;
}

.form-field {
  display: grid;
  gap: 7px;
}

.form-field > span {
  color: #5b7186;
  font-size: 11px;
  font-weight: 700;
}

.input-with-icon {
  height: 45px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dce8f1;
  border-radius: 13px;
  background: #fafdff;
}

.input-with-icon > i {
  flex: 0 0 auto;
  color: #58b5e6;
  font-size: 14px;
}

.input-with-icon input,
.plain-input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 13px;
}

.input-with-icon button {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: #8ca0b0;
  font-size: 13px;
}

.primary-wide-button,
.secondary-wide-button {
  min-height: 44px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 700;
}

.primary-wide-button {
  color: #fff;
  background: #55b8e9;
}

.secondary-wide-button {
  border: 1px solid #79c6eb;
  color: #45a9dc;
  background: #fff;
}

.button-reset {
  width: 100%;
  border: 0;
}

.login-note {
  margin: 17px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #748b9e;
  font-size: 10px;
  text-align: center;
}

.login-note i {
  color: #55b8e9;
}

/* 設定 */

.settings-profile-card,
.child-summary-card {
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #e3edf4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(54, 102, 138, .07);
}

.settings-profile-avatar,
.child-summary-avatar {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #48a9de;
  background: #e2f4ff;
  font-size: 21px;
}

.settings-profile-text,
.child-summary-text {
  min-width: 0;
  flex: 1 1 auto;
}

.settings-profile-text strong,
.settings-profile-text span {
  display: block;
}

.settings-profile-text strong {
  margin-bottom: 4px;
  font-size: 15px;
}

.settings-profile-text span {
  color: #7f93a5;
  font-size: 10px;
}

.small-outline-button {
  flex: 0 0 auto;
  min-width: 51px;
  height: 31px;
  padding: 0 10px;
  border: 1px solid #87c9e9;
  border-radius: 10px;
  color: #45a8da;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
}

.settings-section {
  margin-top: 21px;
}

.settings-section > h2,
.form-card > h2 {
  margin: 0 0 9px 2px;
  color: #314a61;
  font-size: 13px;
}

.settings-list {
  overflow: hidden;
  border: 1px solid #e3edf4;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(54, 102, 138, .06);
}

.settings-row {
  min-height: 65px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #edf3f7;
  background: #fff;
}

.settings-row:last-child {
  border-bottom: 0;
}

.settings-row-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 15px;
}

.settings-row-icon.blue {
  color: #48a9de;
  background: #e2f4ff;
}

.settings-row-icon.violet {
  color: #857bc8;
  background: #efedff;
}

.settings-row-icon.orange {
  color: #df9148;
  background: #fff0dd;
}

.settings-row-icon.green {
  color: #42a276;
  background: #e6f7ef;
}

.settings-row-icon.pink {
  color: #d47c9f;
  background: #ffe9f1;
}

.settings-row-icon.gray {
  color: #73889a;
  background: #edf2f5;
}

.settings-row-icon.red {
  color: #d75f64;
  background: #ffeaeb;
}

.settings-row-text {
  min-width: 0;
  flex: 1 1 auto;
}

.settings-row-text strong,
.settings-row-text small {
  display: block;
}

.settings-row-text strong {
  margin-bottom: 4px;
  font-size: 12px;
}

.settings-row-text small {
  overflow: hidden;
  color: #8699a9;
  font-size: 9px;
  line-height: 1.45;
}

.settings-row > .fa-chevron-right {
  flex: 0 0 auto;
  color: #a7b6c1;
  font-size: 11px;
}

.danger-row .settings-row-text strong {
  color: #cb555b;
}

.toggle-control {
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 24px;
}

.toggle-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle-control span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #ced9e1;
  transition: .16s ease;
}

.toggle-control span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(41, 75, 98, .16);
  transition: .16s ease;
}

.toggle-control input:checked + span {
  background: #55b8e9;
}

.toggle-control input:checked + span::after {
  transform: translateX(18px);
}

/* 招待 */

.invite-content {
  padding-top: 18px;
}

.invite-intro h2 {
  margin: 0;
  font-size: 18px;
}

.invite-intro p {
  margin: 6px 0 0;
  color: #7d92a4;
  font-size: 10px;
  line-height: 1.6;
}

.invite-type-grid {
  margin-top: 15px;
  display: grid;
  gap: 10px;
}

.invite-type-card {
  width: 100%;
  min-height: 79px;
  padding: 12px;
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 11px;
  text-align: left;
  border: 1px solid #dfeaf2;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(54, 102, 138, .05);
}

.invite-type-card.active {
  border: 2px solid #67bee9;
  background: #f9fdff;
}

.invite-type-icon {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 18px;
}

.invite-type-icon.friend {
  color: #d77da1;
  background: #ffe9f1;
}

.invite-type-icon.family {
  color: #49a9dd;
  background: #e2f4ff;
}

.invite-type-card > span:nth-child(2) {
  min-width: 0;
}

.invite-type-card strong,
.invite-type-card small {
  display: block;
}

.invite-type-card strong {
  margin-bottom: 5px;
  font-size: 13px;
}

.invite-type-card small {
  color: #7e93a4;
  font-size: 9px;
  line-height: 1.55;
}

.invite-type-card > i {
  color: #9fb0bd;
  font-size: 11px;
}

.invite-type-card.active > i {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #55b8e9;
  font-size: 10px;
}

.qr-invite-card {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #e0ebf2;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 6px 17px rgba(54, 102, 138, .07);
}

.qr-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qr-card-heading > div:last-child {
  min-width: 0;
}

.qr-card-heading strong,
.qr-card-heading small {
  display: block;
}

.qr-card-heading strong {
  margin-bottom: 4px;
  font-size: 13px;
}

.qr-card-heading small {
  color: #7f94a5;
  font-size: 9px;
}

.qr-image-frame {
  width: 216px;
  height: 216px;
  margin: 19px auto 11px;
  padding: 10px;
  border: 1px solid #e5edf3;
  border-radius: 17px;
  background: #fff;
}

.qr-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qr-help-text {
  margin: 0;
  color: #71889b;
  font-size: 9px;
  line-height: 1.55;
  text-align: center;
}

.invite-action-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.invite-expiry {
  margin-top: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #879aab;
  font-size: 9px;
}

.invite-note-card {
  margin-top: 13px;
  padding: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #dbeaf3;
  border-radius: 15px;
  color: #527085;
  background: #f0f9fe;
}

.invite-note-card > i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #54b2e3;
  font-size: 14px;
}

.invite-note-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
}

.invite-note-card p {
  margin: 0;
  font-size: 9px;
  line-height: 1.65;
}

/* 子の管理 */

.child-summary-avatar {
  color: #df9148;
  background: #fff0dd;
}

.child-summary-text > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.child-summary-text strong {
  font-size: 15px;
}

.child-summary-text p {
  margin: 5px 0 0;
  color: #8196a7;
  font-size: 9px;
}

.form-card {
  margin-top: 18px;
  padding: 15px;
  display: grid;
  gap: 13px;
  border: 1px solid #e3edf4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(54, 102, 138, .06);
}

.plain-input {
  height: 43px;
  padding: 0 12px;
  border: 1px solid #dce8f1;
  border-radius: 13px;
  background: #fafdff;
}

.simple-input {
  background: #fafdff;
}

.read-only-row {
  min-height: 44px;
  padding: 0 11px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #dce8f1;
  border-radius: 13px;
  background: #fafdff;
}

.read-only-row > span {
  color: #758b9d;
  font-size: 10px;
}

.read-only-row > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.read-only-row > button {
  color: #49aadd;
  font-size: 9px;
  font-weight: 700;
}

.full-width-button {
  width: 100%;
}

.child-setting-section {
  margin-top: 18px;
}

.save-settings-button {
  width: 100%;
  margin-top: 18px;
}

/* 探す */

.search-header {
  flex: 0 0 auto;
  min-height: 62px;
  padding: 14px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: #55b8e9;
}

.search-header h1 {
  margin: 0;
  font-size: 20px;
}

.search-header button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
}

.search-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 13px 13px 91px;
  scrollbar-width: none;
}

.child-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.child-filter-row::-webkit-scrollbar {
  display: none;
}

.child-filter {
  flex: 0 0 auto;
  min-width: 78px;
  height: 41px;
  padding: 0 11px 0 6px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #dce8f1;
  border-radius: 999px;
  color: #61798e;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
}

.child-filter.active {
  border-color: #63bbe8;
  color: #329dd6;
  background: #eef9ff;
}

.child-filter-avatar {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
}

.orange {
  color: #df9148;
  background: #fff0dd;
}

.pink {
  color: #d47c9f;
  background: #ffe9f1;
}

.map-card {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #dfeaf2;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 6px 17px rgba(54, 102, 138, .07);
}

.map-canvas {
  position: relative;
  height: 355px;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,.8) 50%, transparent 51%),
    #eaf1e6;
}

.map-canvas::before,
.map-canvas::after {
  content: "";
  position: absolute;
  z-index: 1;
  background: #cde6ef;
}

.map-canvas::before {
  right: -25px;
  bottom: 34px;
  width: 220px;
  height: 68px;
  border-radius: 50% 0 0 50%;
  transform: rotate(-11deg);
}

.map-canvas::after {
  top: 34px;
  left: 26px;
  width: 95px;
  height: 42px;
  border-radius: 44% 56% 48% 52%;
  background: #d9ead2;
}

.map-road {
  position: absolute;
  z-index: 2;
  height: 17px;
  border: 4px solid #fff;
  border-radius: 999px;
  background: #d7dfe4;
  box-shadow: 0 0 0 1px rgba(153, 172, 185, .22);
}

.road-one {
  top: 108px;
  left: -45px;
  width: 530px;
  transform: rotate(-14deg);
}

.road-two {
  top: 218px;
  left: -62px;
  width: 510px;
  transform: rotate(18deg);
}

.road-three {
  top: -45px;
  left: 193px;
  width: 410px;
  transform: rotate(76deg);
}

.map-block {
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(155, 174, 184, .25);
  border-radius: 7px;
  background: #e4ddd1;
}

.block-one {
  top: 51px;
  right: 43px;
  width: 83px;
  height: 49px;
  transform: rotate(-9deg);
}

.block-two {
  top: 168px;
  left: 40px;
  width: 105px;
  height: 66px;
  transform: rotate(8deg);
}

.block-three {
  right: 35px;
  bottom: 44px;
  width: 81px;
  height: 54px;
  transform: rotate(-8deg);
}

.map-water {
  position: absolute;
  z-index: 0;
  top: -30px;
  left: -45px;
  width: 180px;
  height: 90px;
  border-radius: 50%;
  background: #cee8f4;
  transform: rotate(-17deg);
}

.map-marker {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.map-marker > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50% 50% 50% 8px;
  color: #fff;
  box-shadow: 0 5px 13px rgba(57, 89, 111, .2);
  transform: rotate(-45deg);
}

.map-marker > span i {
  transform: rotate(45deg);
}

.map-marker small {
  padding: 3px 6px;
  border-radius: 999px;
  color: #486175;
  background: rgba(255,255,255,.94);
  box-shadow: 0 2px 6px rgba(57, 89, 111, .12);
  font-size: 8px;
  font-weight: 700;
}

.marker-souta {
  top: 118px;
  left: 190px;
}

.marker-souta > span {
  background: #eb9b51;
}

.marker-sakura {
  top: 228px;
  left: 92px;
}

.marker-sakura > span {
  background: #d986a8;
}

.map-current-button {
  position: absolute;
  z-index: 5;
  right: 13px;
  bottom: 13px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #dce7ee;
  border-radius: 12px;
  color: #4aaade;
  background: rgba(255,255,255,.95);
  box-shadow: 0 4px 10px rgba(54, 102, 138, .12);
  font-size: 16px;
}

.map-selected-card {
  min-height: 67px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #e5edf3;
}

.map-selected-avatar,
.location-status-avatar {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #df9148;
  background: #fff0dd;
  font-size: 17px;
}

.map-selected-text {
  min-width: 0;
  flex: 1 1 auto;
}

.map-selected-text strong,
.map-selected-text span {
  display: block;
}

.map-selected-text strong {
  margin-bottom: 4px;
  font-size: 13px;
}

.map-selected-text span {
  color: #8297a8;
  font-size: 9px;
}

.map-selected-card > a {
  flex: 0 0 auto;
  height: 31px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 10px;
  color: #fff;
  background: #55b8e9;
  font-size: 9px;
  font-weight: 700;
}

.location-list-section {
  margin-top: 19px;
}

.location-update-time {
  color: #899baa;
  font-size: 9px;
}

.location-status-list {
  display: grid;
  gap: 9px;
}

.location-status-card {
  min-height: 75px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e2ecf3;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(54, 102, 138, .06);
}

.location-status-avatar.pink {
  color: #d47c9f;
  background: #ffe9f1;
}

.location-status-body {
  min-width: 0;
  flex: 1 1 auto;
}

.location-status-body > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.location-status-body strong {
  font-size: 13px;
}

.location-on-badge {
  padding: 3px 6px;
  border-radius: 999px;
  color: #25845e;
  background: #e4f6ed;
  font-size: 8px;
  font-weight: 700;
}

.location-status-body p {
  margin: 5px 0 2px;
  color: #5e7589;
  font-size: 10px;
}

.location-status-body small {
  color: #8ca0b0;
  font-size: 8px;
}

.location-status-card > .fa-chevron-right {
  color: #a4b3bf;
  font-size: 11px;
}

@media (max-width: 380px) {
  .login-content {
    padding-right: 14px;
    padding-left: 14px;
  }

  .standard-content,
  .search-content {
    padding-right: 11px;
    padding-left: 11px;
  }

  .invite-action-grid {
    grid-template-columns: 1fr;
  }

  .map-canvas {
    height: 320px;
  }

  .marker-souta {
    left: 165px;
  }
}
/* =========================================================
   紙芝居メニュー・子アカウント作成・認証情報表示
   ========================================================= */

.storyboard-page {
  min-height: 100svh;
  background: #f5fbff;
}

.storyboard-header {
  padding: max(24px, env(safe-area-inset-top)) 18px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  background: #55b8e9;
}

.storyboard-logo {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, .2);
  font-size: 22px;
}

.storyboard-header h1 {
  margin: 0;
  font-size: 22px;
}

.storyboard-header p {
  margin: 3px 0 0;
  font-size: 10px;
  opacity: .9;
}

.storyboard-content {
  padding: 18px 15px 34px;
}

.storyboard-section + .storyboard-section {
  margin-top: 25px;
}

.storyboard-section > h2 {
  margin: 0 0 10px 2px;
  color: #314a61;
  font-size: 13px;
}

.storyboard-card {
  position: relative;
  min-height: 72px;
  margin-bottom: 9px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid #e1ebf2;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(54, 102, 138, .06);
}

.storyboard-card.primary-flow {
  padding-left: 46px;
}

.storyboard-number {
  position: absolute;
  left: 13px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #55b8e9;
  font-size: 10px;
  font-weight: 800;
}

.storyboard-card-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 17px;
}

.storyboard-card-icon.blue {
  color: #48a9de;
  background: #e2f4ff;
}

.storyboard-card-icon.green {
  color: #42a276;
  background: #e6f7ef;
}

.storyboard-card-icon.violet {
  color: #857bc8;
  background: #efedff;
}

.storyboard-card-icon.orange {
  color: #df9148;
  background: #fff0dd;
}

.storyboard-card-icon.red {
  color: #d75f64;
  background: #ffeaeb;
}

.storyboard-card-text {
  min-width: 0;
}

.storyboard-card-text strong,
.storyboard-card-text small {
  display: block;
}

.storyboard-card-text strong {
  margin-bottom: 4px;
  font-size: 12px;
}

.storyboard-card-text small {
  color: #8095a6;
  font-size: 9px;
  line-height: 1.45;
}

.storyboard-card > .fa-chevron-right {
  color: #a6b5c0;
  font-size: 10px;
}

.storyboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.storyboard-grid a {
  min-height: 78px;
  padding: 11px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #e1ebf2;
  border-radius: 15px;
  color: #527086;
  background: #fff;
  box-shadow: 0 4px 12px rgba(54, 102, 138, .05);
  font-size: 9px;
  font-weight: 700;
}

.storyboard-grid a i {
  color: #55b8e9;
  font-size: 18px;
}

.section-heading > a {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #45a9dc;
  font-size: 10px;
  font-weight: 700;
}

.create-intro-card {
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #dcebf4;
  border-radius: 18px;
  background: #f1faff;
}

.create-intro-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #df9148;
  background: #fff0dd;
  font-size: 19px;
}

.create-intro-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.create-intro-card p {
  margin: 0;
  color: #6f879a;
  font-size: 9px;
  line-height: 1.55;
}

.avatar-select-button {
  min-height: 72px;
  padding: 11px;
  display: grid;
  grid-template-columns: 49px minmax(0, 1fr);
  align-items: center;
  column-gap: 11px;
  text-align: left;
  border: 1px dashed #a9d5ea;
  border-radius: 15px;
  background: #f7fcff;
}

.avatar-select-button > span {
  grid-row: 1 / 3;
  width: 49px;
  height: 49px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #4aaade;
  background: #e2f4ff;
  font-size: 18px;
}

.avatar-select-button strong {
  align-self: end;
  font-size: 11px;
}

.avatar-select-button small {
  align-self: start;
  color: #8297a8;
  font-size: 8px;
}

.field-help {
  color: #8297a8;
  font-size: 8px;
  line-height: 1.45;
}

.auto-password-note {
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #dceaf3;
  border-radius: 14px;
  color: #587187;
  background: #f2f9fd;
}

.auto-password-note > i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #55b8e9;
  font-size: 14px;
}

.auto-password-note strong {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
}

.auto-password-note p {
  margin: 0;
  font-size: 8px;
}

.compact-settings-list {
  box-shadow: none;
}

.storyboard-next-link {
  min-height: 39px;
  margin-top: 10px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed #8bc9e8;
  border-radius: 12px;
  color: #439fd0;
  background: #f5fbff;
  font-size: 9px;
  font-weight: 700;
}

.storyboard-next-link.compact-link {
  margin-top: 0;
}

.credentials-content {
  padding-top: 22px;
}

.success-heading {
  text-align: center;
}

.success-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #55b8e9;
  box-shadow: 0 8px 20px rgba(60, 157, 211, .18);
  font-size: 27px;
}

.success-heading h2 {
  margin: 0;
  font-size: 18px;
}

.success-heading p {
  margin: 6px 0 0;
  color: #7b91a3;
  font-size: 10px;
}

.credentials-warning {
  margin-top: 18px;
  padding: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #f2d4a8;
  border-radius: 15px;
  color: #80633c;
  background: #fff8ea;
}

.credentials-warning > i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #dc9749;
  font-size: 15px;
}

.credentials-warning strong {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
}

.credentials-warning p {
  margin: 0;
  font-size: 8px;
  line-height: 1.5;
}

.credentials-card {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #dfeaf2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(54, 102, 138, .07);
}

.credential-row {
  padding: 15px;
  border-bottom: 1px solid #eaf1f5;
}

.credential-row:last-child {
  border-bottom: 0;
}

.credential-row > span {
  display: block;
  margin-bottom: 8px;
  color: #71889b;
  font-size: 9px;
  font-weight: 700;
}

.credential-row > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.credential-row strong {
  min-width: 0;
  flex: 1 1 auto;
  padding: 11px 12px;
  overflow: hidden;
  border-radius: 11px;
  color: #263f56;
  background: #f4f9fc;
  font-size: 13px;
  letter-spacing: .03em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.credential-row button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #89c9e8;
  border-radius: 9px;
  color: #439fd0;
  background: #fff;
  font-size: 8px;
  font-weight: 700;
}

.login-guide-card {
  margin-top: 14px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid #dfeaf2;
  border-radius: 17px;
  background: #fff;
}

.login-guide-card > span {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #857bc8;
  background: #efedff;
  font-size: 17px;
}

.login-guide-card strong {
  font-size: 11px;
}

.login-guide-card ol {
  margin: 7px 0 0;
  padding-left: 17px;
  color: #6e8598;
  font-size: 9px;
  line-height: 1.75;
}

.credential-back-button {
  margin-top: 9px;
}

@media (max-width: 380px) {
  .storyboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .credential-row > div {
    flex-wrap: wrap;
  }

  .credential-row strong {
    flex-basis: 100%;
  }
}