* {
    box-sizing: border-box;
}
html, body {
    font-family: 'Noto Sans JP', sans-serif;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
    color: #333;
    font-size: 14px;
    width: 100%;
    margin-bottom: 5rem;
    height: 100%;
}
.overlaylogo {
    position: absolute;
    top: 0.75rem;
    transform: translateX(-50%);
    z-index: 9;
    mix-blend-mode: initial;
    left: 50%;
}
.overlaylogo.mix-blend-mode-difference {
    mix-blend-mode: difference;
}
h2 {
    font-size: 1em;
    text-align: center;
    margin-top: 0;
}
label {
    display: block;
    font-weight: bold;
    padding: 0.8rem 0 0.4rem;
}
input[type="text"],
input[type="number"],
input[type="range"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}
input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="range"]:disabled,
input[type="email"]:disabled,
textarea:disabled,
select:disabled {
    background: #eee!important;
    color: #aaa!important;
}

button, .action-button {
    background: linear-gradient(to right, #746fa2, #61819d);
    color: white;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    margin: 0.5rem 0.5rem 0.5rem 0rem;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    line-height: 1;
    border: 1px solid #97a1c7;
}
button:disabled {
    background: #bbb!important;
    border: 1px solid #bbb!important;
}
button:hover, .action-button:hover {
    background: #7984af;
}
.sub-button {
    background: #fff;
    color: #97a1c7;
    border: 1px solid #97a1c7;
    cursor: pointer;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-size: 1em;
    margin: 0.5rem 0.5rem 0.5rem 0rem;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    line-height: 1;
}
.sub-button:hover {
    background: #f0f3f8;
}
.remove-button {
    background: #e75c52;
    color: #fff;
    border: 1px solid #e75c52;
    border-radius: 6px;
    cursor: pointer;
    margin: 0;
}
.remove-button:hover {
    background: #e75c52;
    opacity: 0.5;
}
.remove-sub-button {
    background: #fff;
    color: #e75c52;
    border: 1px solid #e75c52;
    border-radius: 6px;
    cursor: pointer;
    margin: 0;
}
.remove-sub-button:hover {
    background: #f0f3f8;
    opacity: 0.5;
}
.small-button {
    padding: 0.4rem 0.6rem;
}
.w-100 {
    width: 100%;
}
.m-0 {
    margin: 0;
}
.m-auto {
    margin: auto;
}
.t-center {
    text-align: center;
}
.d-block {
    display: block;
}


header {
    height: 55px;
    background: rgba(255,255,255,1);
    position: fixed;
    width: 100%;
    z-index: 1;
}


.head-point {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to right, #746fa2, #61819d);
    background: #666;
    border-radius: 100px;
    padding: 0.2rem 0.8rem 0.2rem 0.2rem;
    height: 25px;
    position: fixed;
    top: 0;
    left: 0;
    margin: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    gap: 0.5rem;
    z-index: 1;
}
.head-point-icon {
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.head-point-icon svg {
    width: 100%;
    height: 100%;
}
.head-point-number {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
}
/* 数値そのもののバンプ＋グロー */
.head-point-number {
    transition: transform .2s ease, color .2s ease, text-shadow .2s ease;
    position: relative;
  }
  /* 増加時：緑っぽく、軽く光ってポンと大きく */
  .points-gain {
  /*   color: #11a36d; */
    text-shadow: 0 0 .35em rgba(17,163,109,.4);
    animation: points-bump .45s ease;
  }
  /* 減少時：赤っぽく、軽く光ってポンと大きく */
  .points-loss {
  /*   color: #d64545; */
    text-shadow: 0 0 .35em rgba(214,69,69,.35);
    animation: points-bump .45s ease;
  }
  @keyframes points-bump {
    0%   { transform: scale(1) }
    35%  { transform: scale(1.18) }
    100% { transform: scale(1) }
  }
  /* 差分バッジ（+10 / -5 みたいなやつが数値の上に浮く） */
  .points-delta {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -0.9em;
    font-size: .8em;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
  }
  .points-delta.gain { color: #11a36d; }
  .points-delta.loss { color: #d64545; }
  @keyframes delta-rise {
    0%   { opacity: 0; transform: translate(-50%, .2em); }
    15%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -1.2em); }
  }
  /* 「コインのキラッ」控えめエフェクト（大きな増加時のみ） */
  .points-sparkle {
    position: absolute;
    right: -0.6em; top: -0.2em;
    width: .75em; height: .75em;
    background: radial-gradient(circle, #ffd966 0%, #ffb300 55%, rgba(255,179,0,0) 60%);
    border-radius: 50%;
    filter: drop-shadow(0 0 .35em rgba(255,179,0,.6));
    opacity: 0;
    animation: sparkle-pop .6s ease forwards;
  }
  @keyframes sparkle-pop {
    0%   { transform: scale(.4) rotate(0deg);   opacity: 0; }
    35%  { transform: scale(1.1) rotate(25deg); opacity: 1; }
    100% { transform: scale(.85) rotate(0deg);  opacity: 0; }
  }
  /* ユーザーが reduced motion を設定している場合はアニメ弱めに */
  @media (prefers-reduced-motion: reduce) {
    .head-point-number { transition: none; }
    .points-gain, .points-loss { animation: none; text-shadow: none; }
    .points-delta, .points-sparkle { animation: none; display: none; }
  }


#main-content {
    min-height: 100%;
    padding-bottom: 55px;
}
#main-content-inner {
    padding: 55px 0 0 0;
}
.page-setting #main-content {
    background: initial;
    padding: 55px 1rem;
}
.page-card #main-content {
    padding: 0;
    height: 100%;
}


.non-displayable-card {
    position: fixed;
    top: 50%;
    margin: 0;
    width: 100%;
    text-align: center;
    margin-top: -0.5rem;
}
.dream-card-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #746fa2, #61819d);
}
.dream-card {
    width: 80vw;
    height: 80vw;
    background: #fff;
    border-radius: 8vw;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
    background-image: url('/assets/img/card-bg.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    margin-bottom: 50px;
}
.dream-card.completed {
    background-color: #e4f7dc;
    position: relative;
}
.dream-card.completed::after {
    content: '✔︎';
    font-size: 20vw;
    color: #fff;
    position: absolute;
    bottom: 0rem;
    right: 1rem;
    opacity: 0.9;
    pointer-events: none;
    }

.dream-card-wrapper .overlaylogo {
    position: absolute;
    mix-blend-mode: difference;
}
.card-body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}
.card-body .dream-cat {
    position: absolute;
    right: 0;
    top: -2rem;
    border-radius: initial;
    background: #161515;
}
.card-text {
    font-size: 5vw;
    padding: 3rem 2rem 2rem 2rem;
}
.card-meta {
    position: absolute;
    bottom: 0;
    width: 80vw;
    text-align: center;
    font-size: 0.8em;
    z-index: 999;
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: #555;
}
.card-user {
    text-decoration: none;
    color: #555;
    margin: 0;
    cursor: pointer;
}
.card-date {
    color: #999;
    margin: 0;
}



.card-bottom {
    padding: 1.75rem 1rem 1.75rem 1rem;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    margin-top: -4rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.card-bottom-head {
    color: #fff;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.card-bottom-head svg {
    display: block;
}
.card-bottom-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.share {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: initial!important;
    mix-blend-mode: difference;
}


.card-bottom-buttons .support {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: rgba(255, 255, 255, 1)!important;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
    color: #999;
    font-size: 0.7rem;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    gap: 0.25rem;
    margin: 0;
}
.card-bottom-buttons .support:hover,.card-bottom-buttons .support:focus {
    opacity: 0.75;
}
.card-bottom-buttons .support svg {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
}
.card-bottom-buttons .support .count {
    font-size: 0.9rem;
}
.card-bottom-buttons .support.supported {
    background: linear-gradient(to right, #746fa2, #61819d)!important;
    color: #fff;
}
.card-bottom-buttons .support.supported .count {
    background: #626b95;
    color: #fff;
}
.card-bottom-buttons .support .path {
    fill: #999;
}
.card-bottom-buttons .support.supported .path {
    fill: #fff;
}
.support.completed, .support.completed:hover, .support.completed:active {
    opacity: .4!important;
}


.card-bottom-buttons .comment {
    background: rgba(255, 255, 255, 0);
    padding: 0.5rem 1rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
    margin: 0;
    color: #fff;
    font-size: 0.7rem;
    vertical-align: middle;
    border: 2px solid #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}
.card-bottom-buttons .pick {
    background: rgba(255, 255, 255, 0);
    padding: 0.5rem 1rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
    margin: 0;
    color: #fff;
    font-size: 0.7rem;
    vertical-align: middle;
    border: 2px solid #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}	

footer {
    padding: 1rem;
    text-align: center;
}
footer.footer-fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
}
footer .footer-logo {
    height: 20px;
}
footer a {
    mix-blend-mode: difference;
    color: #fff;
    text-decoration: none;
}

.sinpanel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -100%;
    height: 90%;
    background: #f4f4f4;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    transition: bottom 0.4s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sinpanel.show {
    bottom: 0;
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    display: none;
}
.mask.show {
    display: block;
}

.sinpanel h2 {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    background: #fff;
    margin: 0;
    z-index: 1;
}
.sinpanel h2 .dynamic {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
    margin: auto;
    display: block;
}

.panel-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    color: #333;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    z-index: 10000;
    font-size: 2rem;
    font-weight: 100;
    margin: 0;
    margin-top: -0.5rem;
}
.panel-close:hover {
    opacity: 0.7;
    background: none;
}


.share-buttons {
    text-align: center;
    padding: 1rem;
}
.share-buttons a, .share-buttons button {
    text-decoration: none;
    background: #97a1c7;
    border: 0;
    cursor: pointer;
    color: #fff;
    width: 100%;
    margin: 0;
    font-size: 1rem;
    padding: 0.75rem 0 0.5rem 0;
    border-radius: 6px;
    display: block;
    margin-bottom: 0.5rem;
}
.share-buttons span {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.5rem
}



.profile-panel {
    display: flex;
    flex-direction: column;
    height: 85%;
    padding-bottom: 0;
}
.profile-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 1rem;
    background: #fff;
}
.sinpanel .profile-header {
    padding-top: 40px;
    background: #fff;
}
.profile-icon-wrapper {
    width: 85px;
    height: 85px;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
}
.profile-icon {
    background: linear-gradient(to right, #746fa2, #61819d);
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #eee;
}
.profile-username {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin: 0.5rem 1rem;
    text-align: center;
}
.profile-userid {
    color: #999;
    font-size: 0.8rem;
    font-weight: 500;
}
.profile-type {
    display: flex;
    text-align: center;
    margin: 0;
    background: rgb(151, 161, 199, 0.1);
    padding: 0.5rem;
    border-radius: 6px;
}
.none-profile-type {
    text-align: center;
    margin: 0;
    background: rgb(151, 161, 199, 0.1);
    padding: 1rem;
    border-radius: 6px;
}
.ennea-title {
    margin-top: 0;
}
.ennea-desc {
    opacity: 0.5;
    margin-top: 0;
}
.typeicon {
    width: 30px;
    height: 30px;
    border: 3px solid #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    padding: 5px;
    background: linear-gradient(135deg, #a39fc8, #93a2c6, #83a5c3);
}
.typeneme {
    margin: 0;
    text-align: left;
    line-height: 16px;
    padding: 7px;
}
.profile-stats {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 1rem 0;
    padding: 0 2rem;
}
.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
    cursor: pointer;
}
.stat-number {
    font-size: 1.2rem;
    font-weight: 400;
}
.stat-title {
    font-size: 0.8rem;
    margin-top: 0.2rem;
}
.follow-btn, .edit-btn {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
}
.follow-btn:hover .edit-btn:hover {
    opacity: 0.8;
}
.follow-btn.followed {
    background: #aaa;
}


.skill-entry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.skill-entry select {
    flex: 1;
}
.skill-entry input[type="text"] {
    flex: 2;
    margin: 0;
}
.remove-profile-image-btn {
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
}


.panel-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.panel-scroll-inner {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.profile-content {
    text-align: left;
    color: #333;
}
.profile-section {
    display: none;
    padding: 1rem;
    background: #fff;
}
.board-section {
    display: none;
}
#panel-body {
    height: 100%;
}



.dream-detail.completed {
    background-color: #e4f7dc;
    position: relative;
}
.dream-detail.list-body.completed::after {
    content: '✔︎';
    font-size: 50px;
    color: #fff;
    position: absolute;
    bottom: 0rem;
    right: 0.5rem;
    height: 60px;
    opacity: 0.9;
    pointer-events: none;
}
.non-displayable-detail {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    margin-top: -0.5rem;
}



.tabs {
    display: flex;
    width: 100%;
    justify-content: space-around;
    border-bottom: 1px solid #ddd;
    background: #fff;
}
.tab {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 0.8rem;
    border-bottom: 2px solid transparent;
    user-select: none;
}
.tab svg {
    stroke: #aaa;
    transition: stroke 0.2s;
}
.tab.active {
    color: #97a1c7;
    border-bottom: 2px solid #97a1c7;
}
.tab.active svg {
    stroke: #97a1c7;
}

.detail-log-section, .dream-edit-target-section, .dream-edit-log-section {
    display: none;
}

.profile-details {
    list-style: none;
    margin: 0;
    padding: 0;
}
.profile-desc {
    padding: 1rem 0;
}
.profile-details li {
    border-top: 1px solid #eee;
    padding: 1rem 0;
}
.profile-details .label {
    font-weight: bold;
    display: block;
    color: #7984af;
    margin-bottom: 0.25rem;
}
.profile-details .value {
    color: #333;
}
.tag {
    display: inline-block;
    background: rgb(151, 161, 199, 0.1);
    border-radius: 12px;
    padding: 0.3em 0.7em 0.3em 0.7em;
    font-size: 0.9rem;
    margin: 0 0.2rem 0.4rem 0;
    word-break: break-word;
}


.form {
    padding: 0 1rem 1rem 1rem;
    background: #fff;
}
.sinpanel .form {
    padding: 0 1rem 55px 1rem;
    margin-bottom: 1rem;
}
.form-buttons {
    width: 100%;
    display: flex;
    gap: 0.5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0.5rem;
    background: #fff;
    border-top: 1px solid #ccc;
    height: 50px;
}
.form-buttons button {
    width: 100%;
    margin: 0;
}
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    margin: 0;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch input:checked + .slider.round {
    background-color: #97a1c7;
}
.slider.round {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: .4s;
}
.switch input:checked + .slider.round:before {
    transform: translateX(16px);
}
.slider.round:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.sinpanel select {
    width: 100%;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #444;
    font-size: 1rem;
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg fill='%2397a1c7' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 12l-5-5h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 1rem;
    padding-right: 2rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin: 0;
}
.sinpanel .note {
    color: #999;
    font-size: 0.8rem;
    font-weight: 500;
}
.sinpanel input {
    max-width: 100%;
    font-size: 16px;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #444;
}
.image-upload {
}
.image-upload-label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: background 0.3s;
    background: rgba(255, 255, 255, 0.85);
    width: 100%;
    color: #aaa;
    margin-bottom: 0.5rem;
}
.image-upload-label:hover {
    background: rgba(240, 240, 240, 0.85);
}
#profile-edit-form .image-upload-label {
    border-radius: 50%;
    padding: 0;
    width: 100px;
    height: 100px;
    margin-bottom: 0.5rem;
    position: relative;
}
#profile-edit-form textarea {
    height: 6rem;
}
#profile-image-preview {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    display: none;
    position: absolute;
    top: -2px;
    left: -2px;
    border: 1px solid #eee;
}

#dream-add-form .image-upload-label, #dream-edit-form .image-upload-label {
    height: 250px;
    position: relative;
}
#dream-add-form #image-preview, #dream-edit-form #image-preview {
    max-width: 100%;
    height: auto;
    max-height: 246px;
    position: absolute;
    width: auto;
}

.status, .publish {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}
.permission-note {
    font-size: 0.9rem;
    color: #777;
    display: block;
    margin-top: 0.25rem;
}
.status-block {
    padding: 1rem;
    margin-top: 1.5rem;
    background: rgba(151, 161, 199, 0.25);
    border-radius: 6px;
}
.status-block label {
    padding: 0;
}
.consumption-points {
    margin: 0.2rem 0 0 0.2rem;
    font-size: 0.6rem;
}


.target-content-box, .log-content-box {
    padding: 1rem 2rem 1rem 1rem;
    background: white;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    border-top: 1px solid #eee;
}
.target-content-box:last-child, .log-content-box:last-child {
    border-bottom: 1px solid #eee;
}
.target-content-box.completed {
    background-color: #e4f7dc;
    position: relative;
    overflow: hidden;
}
.target-content-box.completed::after {
    content: '✔︎';
    font-size: 50px;
    color: #fff;
    position: absolute;
    bottom: 0rem;
    right: 0.5rem;
    height: 60px;
    opacity: 0.9;
    pointer-events: none;
}
.target-date-bottom, .log-date-bottom {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}
.target-text {
    margin: 0;
    padding: 0;
    border: 0;
    margin-bottom: 0.5rem;
}
.target-list, .log-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.target-date {
    font-size: 0.9rem;
    color: #777;
}
.target-progress {
    font-size: 0.9rem;
    color: #777;
}
.r-link {
    color: #97a1c7;
    float: right;
    font-size: 0.9rem;
}




.lr-list {
    padding: 0;
    margin: 0;
    background: #fff;
}
.list-item {
    border-bottom: 1px solid #eee;
    list-style:none;
    cursor: pointer;
    position: relative;
}
.list-item:last-child {
    border: 0;
}
.list-item.none,#dreams-empty,#board-empty {
    margin: 1rem;
    border: none;
}
.list-body {
    display: flex;
    flex-direction: row;
    padding: 1rem;
    gap: 1rem;
    position: relative;
    background: #fff;
}
.list-item.is-new .list-body {
    background:#fffbe9;
}
.list-item.completed {
    background-color: #e4f7dc;
    position: relative;
}
.list-item.completed .list-body {
    background-color: initial;
}
.list-item.completed::after {
    content: '✔︎';
    font-size: 50px;
    color: #fff;
    position: absolute;
    bottom: 0rem;
    right: 0.5rem;
    height: 60px;
    opacity: 0.9;
    pointer-events: none;
}
.list-left {
    flex: 0 0 auto;
}
.dream-img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 8px;
}
.user-img {
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: 100px;
    border: 1px solid #eee;
}
.list-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

.edit {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 3px;
    color: #666;
    display: flex;
    align-items: center;
    position: initial;
    margin: 0;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}
.edit:hover {
    color: #333;
    background-color: #ddd;
}
.open {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 3px;
    display: flex;
    align-items: center;
    position: initial;
    margin: 0;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}
.open:hover {
    stroke: #333;
    background-color: #ddd;
}
.open svg {
    stroke: #666;
}
.open:hover svg {
    stroke: #333;
}
.list-text {
    margin: 0;
    margin-right: 1rem;
}
.list-text a {
    text-decoration: none;
    color: #97a1c7;
}
.list-text p {
    margin: 0;
    color: #555;
    font-weight: 600;
    line-height: 1.5;
}
.dream-cat {
    width: fit-content;
    top: 1rem;
    right: 1rem;
    background: #aaa;
    color: #fff;
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin: 0;
}

.private-flag {
    display: inline-flex;
    align-items: center;
    margin-bottom: 2px;
    color: #999;
}
.private-flag svg {
    margin: 0 0 -3px 0;
}


.meta-buttons {
    gap: 0.75rem;
    display: flex;
}
.meta-buttons .support, .meta-buttons .comment {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    margin: 0;
    color: #999;
    font-size: 0.8rem;
    vertical-align: middle;
    width: fit-content;
    padding: 0;
    background: initial;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
}	
.meta-buttons .support:hover, .meta-buttons .comment:hover {
    background: initial;
    opacity: 0.75;
}
.meta-buttons .support:focus, .meta-buttons .comment:focus {
    outline: none;
    background: initial;
    opacity: 0.75;
}
.meta-buttons .support.supported, .meta-buttons .comment.active {
    color: #626b95;
}
.meta-buttons .support svg, .meta-buttons .comment svg {
    display: inline-block;
    vertical-align: middle;
}
.meta-buttons .support .count, .meta-buttons .comment .count {
    display: inline-block;
    color: #999;
    font-size: 0.9rem;
    padding: 0.2rem 0;
    border-radius: 999px;
    line-height: 1;
    vertical-align: middle;
    width: auto;
}
.meta-buttons .support.supported .count, .meta-buttons .comment.active .count {
    background: #999;
    color: #fff;
    padding: 0.2rem 0.5rem;
}
.meta-buttons .count-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    direction: rtl;
    text-align: left;
    width: auto;
    transition:
    width 1.5s ease,
    margin-right 1.5s ease;
    font-size: 0.8rem;
}
.meta-buttons .count-text.shrink {
    width: 0 !important;
}
.meta-buttons .support.supported .count, .meta-buttons .comment.active .count {
    background: #97a1c7;
}
.meta-buttons .support .path {
    fill: #999;
}
.meta-buttons .support.supported .path {
    fill: #97a1c7;
}
.meta-buttons .comment .path {
    stroke: #999;
    fill: none;
}
.meta-buttons .comment.supported .path {
    stroke: #97a1c7;
    fill: none;
}





.list-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.2rem .4rem;
    justify-content:flex-start;
    text-align:left;
    font-size: 0.9rem;
    color: #777;
}
.list-meta .list-user,
.list-meta .list-date{
    display:inline-flex;
}
.list-meta .list-user{
    font-size: 0.9rem;
    color: #777;
    cursor: pointer;
    flex:0 1 auto;
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.list-meta .list-date{
    font-size: 0.9rem;
    color: #aaa;
    flex:0 0 auto;
    white-space:nowrap;
    margin-left:0 !important;
}



.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: start;
    border-top: 1px solid #ddd;
    z-index: 1000;
    border-top: 1px solid #ccc;
    padding: 0.5rem 0 0.3rem 0;
}
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #aaa;
    cursor: pointer;
    user-select: none;
    text-align: center;
    flex: 1;
    text-decoration: none;
}
.nav-item svg {
    width: 20px;
    height: 20px;
    margin-bottom: 4px;
    stroke: #aaa;
}
.bottom-nav .nav-item.active {
    color: #97a1c7;
}

.bottom-nav .nav-item.active svg {
    stroke: #97a1c7;
}

.bottom-nav .nav-item.active .count,
.bottom-nav .nav-item.active .path {
    fill: #97a1c7;
}
/* ★ 追加：赤丸バッジの見た目 */
.bottom-nav .nav-item {
    position: relative;
}
.bottom-nav .nav-badge {
    position: absolute;
    left: 53%;
    top: 0;
    width: 8px;
    height: 8px;
    background: #ff3b30; /* iOS系の赤 */
    border-radius: 9999px;
    box-shadow: 0 0 0 2px #fff; /* 白縁で視認性アップ（任意） */
    display: none;   /* デフォルト非表示 */
}
.bottom-nav .nav-badge.show {
    display: inline-block;
}


.support-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to right, #746fa2, #61819d);
    border-radius: 100px;
    padding: 0.4rem 0.8rem 0.4rem 0.4rem;
    margin: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    gap: 0.5rem;
    z-index: 1;
    width: fit-content;
}
.support-view-icon {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.support-view-icon svg {
    width: 100%;
    height: 100%;
}
.support-view-number {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
}


/* ===== 検索関連 ===== */
.search-form {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fff;
    z-index: 100;
    border-bottom: 1px solid #eee;
}
.search-label {
    display: flex;
    align-items: center;
    width: 100%;
    background: #f0f0f0;
    border-radius: 999px;
    padding: 0.25rem 1rem;
    box-sizing: border-box;
    margin: 0;
}
.search-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    fill: #999;
    margin-right: 0.5rem;
}
.search-input {
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 1rem;
    color: #333;
    border: none!important;
    margin: 0!important;
    padding: 0.5rem 0!important;
}
.search-input::placeholder {
    color: #ccc;
}
.no-results, #search-empty, .notifications-empty {
    padding: 1rem;
    margin: 0;
    background: #f4f4f4;
}



/* ===== サイドパネル ===== */
.sidepanel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: right 0.4s ease;
    z-index: 9997;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sidepanel.show {
    right: 0;
}
.panel-content {

}
.sidepanel .panel-content {
    position: relative;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}
.sidepanel-wrapper {
    padding: 0 1rem 1rem 1rem;
}
#side-panel-body {
    height: 100%;
    background: #f4f4f4;
}
.sidepanel .panel-close {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    cursor: pointer;
    color: #333;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    z-index: 10000;
    font-size: 2rem;
    font-weight: 100;
    margin: 0;
    mix-blend-mode: difference;
    color: #fff;
    width: 30px;
    height: 30px;
}
.sidepanel h2 {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    background: #fff;
    margin: 0;
    z-index: 1;
    border-bottom: 1px solid #ddd;
}
.body-no-scroll {
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
}


/* サイドパネル内（既に overflow-y:auto はあります） */
.sidepanel .panel-content {
    -webkit-overflow-scrolling: touch; /* iOS慣性 */
    overscroll-behavior: contain;       /* 背景までスクロールが伝播しない */
  }
  
  /* 共通パネル内の縦スクロール領域（あなたの断片で使っているクラス） */
  .panel-scroll-inner {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* ログイン前のモーダル内スクロールも同様（必要なら） */
  .block-content .block-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .forgot-link {
    margin: 0.5rem 0 1rem 0;
    display: block;
  }

.board-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}
.board-item {
    cursor: pointer;
    position: relative;
}
.board-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}


.add-button, .sidepanel.show .add-button {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 0;
    border-radius: 0;
}
.sidepanel .add-button {
    position: absolute;
}

.dream-section .add-button, .board-section .add-button {
    bottom: 55px;
}
.sinpanel .add-button {
    display: none;
}
.dream-section, .board-section, .detail-target-section, .detail-log-section {
    padding-bottom: 50px;
}





/* ログイン前ページ関連 */
.page-wrapper {
    padding: 55px 1rem 1rem 1rem;
}

.block-content-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}
.block-content {
    display: flex;
    flex-direction: column;
    width: 80%;
    max-width: 400px;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    max-height: 80vh;
    z-index: 9;
}
.block-content .block-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    max-height: 80vh;
    padding-bottom: 55px;
}
.block-content > form {
    display: flex;
    flex-direction: column;
    height: 100%;      /* 親 .block-content の高さを引き継ぐ */
  }
.block-content .form-buttons {
    display: flex;
    gap: 0.5rem;
    border-top: 1px solid #ccc;
    background: #fff;
}
  
  
.block-content h2 {
    font-size: 1.2em;
    text-align: center;
    margin-top: 0;
    font-weight: 800;
}
.block-content .note {
    color: #999;
    font-size: 0.8rem;
    font-weight: 500;
}
.block-content form a {
    text-decoration: none;
    color: #97a1c7;
}
.block-content .agreement {
    font-weight: normal;
}
.block-content .error {
    color: red;
}
.block-content .success {
    color: green;
}



/* セッティングページ関連 */
.settings-container {
  max-width: 500px;
  margin: 1rem auto;
  font-family: "Noto Sans JP", sans-serif;
}
.settings-list {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  padding: 0;
}
.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.2s;
}
.settings-item:hover {
  background: #f9f9f9;
}
.settings-item:last-child {
  border-bottom: none;
}
.settings-label {
  font-size: 1rem;
  color: #333;
}
.chevron {
  width: 16px;
  height: 16px;
  fill: #999;
}
.modal-mask {
  display: none;
  position: fixed;
  inset: 0px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-content {
    background: #fff;
    padding: 1rem;
    padding-bottom: 55px;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    width: 90%;
    max-width: 300px;
}
.modal-form {
  max-width: initial;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: initial;
  overflow-wrap: initial;
  width: 100%;
}
.modal-text {
  text-align: center;
}
.modal-text h4 {
  margin-top: 1rem;
}
.modal-form button {
  width: 100%;
}
.settings-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
  padding: 0;
}
.settings-link:hover {
  background: #f9f9f9;
}
.settings-textbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.settings-text {
  font-size: 1rem;
  color: #999;
}

.setting-button {
    display: none;
}
#main-content .setting-button {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    background: none;
    border: none;
    padding: 0;
    margin: 1rem;
    z-index: 1;
}



/* コメント関連 */
.comments-block {
    height:100%;
    padding-bottom:72px;
    display:flex;
    flex-direction:column; }
.comments-list {
    padding-bottom: 50px;
    background: none;
}
#comments-empty {
    margin: 1rem;
}
.comment-input-area {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding:8px 16px;
  box-sizing:border-box;
  background:#fff;
  border-top:1px solid #ddd;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
.reply-info {
    display:none;
}
.comments-block.replying .reply-info {
  display:flex;
  align-items:center;
  font-size:0.85rem;
  color:#555;
  background:#f5f5f5;
  padding:4px 8px;
  border-radius:6px;
  flex:0 0 100%;
  margin:0 0 8px;
}
.comment-input {
    flex:1;
    resize:none;
    border:1px solid #ccc;
    padding: 4px 12px 5px;
    line-height:1.4;
    margin:0 0.5rem 0 0;
    border-radius:6px;
}
.comment-button {
    margin:0;
}

.reply-block {
    background: #fff;
}
.reply-list {
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin: 0 0 0 56px;
  padding:0;
  list-style:none;
  transition:max-height 0.6s ease,opacity 0.6s ease;
}
.comment-item.reply-open .reply-list {
    max-height:1000px;
    opacity:1;
}
.toggle-replies {
  display:block;
  margin:0 0 8px 56px;
  padding:0 8px 4px 8px;
  color:#97a1c7;
  cursor:pointer;
  font-size:0.9rem;
}
.comment-item.reply-open .toggle-replies {
    display:none;
}

.cancel-reply {
  background: none;
  border: 1px solid #aaa;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 0.25rem;
}
.cancel-reply svg path {
  stroke: #aaa;
}
.cancel-reply:hover {
  background: #f0f0f0;
}





/* ----- Onboarding modal ----- */
#onboarding-modal{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    opacity: 0;              /* ← 最初は透明 */
    pointer-events: none;
    transition: opacity .3s ease; /* ← フェード用 */
    background: transparent;
}
#onboarding-modal.is-open{
    opacity:1;
    pointer-events:auto;
}
/* 背景フェード */
.onb-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.5);
}
/* iOSノッチ/ホームバーを描画対象から完全除外 */
.onb-backdrop,
#loading-overlay,
.mask,
.modal-mask {
  position: fixed !important;
  inset: 0 !important;

  /* ここが肝：safe-area を“切り落とす” */
  clip-path: inset(env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0);
  /* 古いiOS向けのフォールバック */
  clip-path: inset(constant(safe-area-inset-top, 0px) 0 constant(safe-area-inset-bottom, 0px) 0);
}
/* 中央ダイアログ */
.onb-dialog{
    position:relative;
    width:min(92vw,420px);
    max-height:88dvh; /* モバイルURLバー対策 */
    background:#fff;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transform:translateY(8px) scale(.985);
    opacity:.98;
    transition:transform .22s ease,opacity .22s ease;
}
#onboarding-modal.is-open .onb-dialog{
    transform:translateY(0) scale(1);
    opacity:1;
}
/* 閉じる */
.onb-close{
    position:absolute;
    right:.5rem;
    top:.5rem;
    border:0;
    background:transparent;
    font-size:1.4rem;
    line-height:1;
    cursor:pointer;
}
/* ビューポート＆スライド */
.onb-viewport{
    position:relative;
    width:100%;
    height:min(62vh,520px);
    overflow:hidden;
}
.onb-track{
    display:flex;
    height:100%;
    will-change:transform;
    transition:transform .28s ease;
}
.onb-slide{
    min-width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:1rem 1rem 0;
}
.onb-slide .onb-img{
    width:100%;
    height:54%;
    max-height:300px;
    background:#eee;
    background-size:cover;
    background-position:center;
    border-radius:12px;
}
.onb-slide .onb-text{
    width:100%;
    padding:1rem;
    font-size:.95rem;
    line-height:1.6;
}
/* ドット & ボタン */
.onb-dots{
    display:flex;
    gap:.4rem;
    justify-content:center;
    padding:.6rem 0;
}
.onb-dots .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ddd;
}
.onb-dots .dot.active{
    background:#97a1c7;
}
.onb-nav{
    display:flex;
    gap:.5rem;
    justify-content:space-between;
    padding:.8rem;
    border-top:1px solid #eee;
}
.onb-nav button{
    flex:1;
    padding:.8rem 1rem;
    border:0;
    border-radius:10px;
    background:#111;
    background: linear-gradient(to right, #746fa2, #61819d);
    color:#fff;
    font-weight:600;
    cursor:pointer;
    margin: 0;
}
.onb-nav .onb-prev{
    background:#e5e7eb;
    color:#111;
}
.onb-nav .onb-done{
    background:#2563eb;
    background: linear-gradient(to right, rgba(251, 104, 104, 1), rgb(248, 174, 134) 57.98%, rgba(245, 159, 195, 1));
}







/* ----- 記事ページ関連 ----- */

.post-container {
    padding: 1rem;
    background: #fff;
}
.post-image {
    width: 100%;
    height: auto;
}
.post-date {
    font-size: 0.9rem;
    color: #aaa;
    margin-top: 0;
}
.post-title {
    margin: 0 0 1rem 0;
}
.post-item .list-body {
    background: rgba(151, 161, 199, 0.25);
}
.post-item .list-subtext {
    margin: 0;
    font-size: 0.9rem;
    color: #777;
}
.post-item .post-img {
    background: #fff;
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: 6px;
}
.marker {
    font-weight: bold;
    background: linear-gradient(transparent 60%, #97a1c7 98%);
}
.post-content hr {
    border: 0.5px solid #ccc;
}





/* toast */
.toast-container {
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
  }
  .toast {
    min-width: 240px;
    max-width: 88vw;
    background: rgba(20,20,20,.92);
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    font-size: 14px;
    line-height: 1.4;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .toast.show {
    opacity: 1;
    transform: translateY(0);
  }





/* ローダー */
  #loading-overlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,0.5);
    opacity:.9;
    z-index: 10000;
    height: 100%;
}
#loading-overlay.hidden{
    display:none
}
#loading-overlay .spinner{
    width:42px;
    height:42px;
    border:4px solid #fff;
    border-top-color:transparent;
    border-radius:50%;
    animation:spin .8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}