* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #000000;
    /* ノッチ色と統一 */
    color: #333;
    font-size: 16px;
    width: 100%;
    min-height: 100%;
}

/* VisualViewportを代替する独自scroll領域 */
.page-viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* iOS慣性スクロール */
    background: #f4f4f4;
    /* ページ全体の背景 */
}

/* 固定ボトムナビの下に実コンテンツが隠れないよう、ページ全体に下パディングを付与 */
#main-content {
    flex: 1;
    overflow: visible;
    /*    padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px));*/
    min-height: auto;
}

.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 {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(to right, #746fa2, #61819d);

    height: calc(50px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    flex-shrink: 0;

    /* ここを微調整 */
    transition: transform 0.4s ease;
    /* 0.25s → 0.4s くらいに */
    will-change: transform;
}

header.header-hidden {
    transform: translateY(-100%);
}

.head-point {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #444c65;
    border-radius: 100px;
    padding: 0.2rem 0.8rem 0.2rem 0.2rem;
    height: 25px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0.75rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    gap: 0.5rem;
    z-index: 1;
}

@supports (-webkit-touch-callout: none) {

    .head-point,
    .bottom-nav {
        transform: none !important;
        will-change: auto !important;
    }
}

.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;
    }
}


.page-setting #main-content {
    background: initial;
}

.page-card #main-content {
    padding: 0;
}


.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: #ecf6e7;
    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;
}

.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 .comment span {
    width: 70px;
}

.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;
    width: 75px;
}

.card-bottom-buttons .pick span {
    width: 70px;
}

footer {
    margin: 1rem 0;
    text-align: center;
}

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.7);
    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: 2;
}

.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: linear-gradient(to right, #746fa2, #61819d);
}

.no-user {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.status-guide-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    text-decoration: none;
    color: #fff;
    border-radius: 100px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    line-height: 1;
}

/* アイコンの見え方を統一 */
.status-guide-btn .info-icon {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    position: relative;
    top: 0;
}

.sinpanel .profile-header {
    padding-top: 40px;
    background: #fff;
}

.profile-icon-wrapper {
    width: 85px;
    height: 85px;
    background: #fff;
    border-radius: 50%;
    border: 5px solid #ffffff;
    position: relative;
}

.profile-icon-wrapper.bronze {
    border: 5px solid #B0806E;
}

.profile-icon-wrapper.silver {
    border: 5px solid #8E8E8E;
}

.profile-icon-wrapper.gold {
    border: 5px solid #C8A966;
}

.profile-icon-wrapper.platinum {
    border: 5px solid #B6BDC5;
}

.profile-icon {
    /*    background: linear-gradient(to right, #746fa2, #61819d); */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #eee;
}

.status-badge {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    bottom: 0;
}


.status-badge2 {
    width: 13px;
    height: 13px;
}



.profile-username {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    margin: 0.5rem 1rem 0 1rem;
    text-align: center;
}

.profile-userid {
    color: #ddd;
    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: 0.5rem 0 1rem 0;
    padding: 0 2rem;
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    cursor: pointer;
}

.stat-number {
    font-size: 1rem;
    font-weight: 600;
}

.stat-title {
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.follow-btn,
.edit-btn {
    margin: 0;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    color: #fff;
    border-radius: 999px;
}

.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: #ecf6e7;
    position: relative;
}

.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;
}

.pf-tabs.tabs {
    display: flex;
    width: 100%;
    justify-content: space-around;
    border-bottom: 1px solid #ddd;
    background: linear-gradient(to right, #746fa2, #61819d);
}

.pf-tabs .tab {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
    border-bottom: 2px solid transparent;
    user-select: none;
    opacity: 0.5;
}

.pf-tabs .tab svg {
    stroke: #fff;
    transition: stroke 0.2s;
}

.pf-tabs .tab.active {
    color: #fff;
    border-bottom: 2px solid #fff;
    opacity: 1;
}

.pf-tabs .tab.active svg {
    stroke: #fff;
}

.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;
}

.meta-label {
    display: flex;
    align-items: center;
}

.meta-label .icon {
    width: 1.2rem;
    height: 1.2rem;
    stroke-width: 2;
    margin-right: 0.4em;
    flex-shrink: 0;
}

.form .meta-label {
    margin: 0.8rem 0 0.4rem;
}

.form .label {
    font-weight: bold;
}

.form {
    padding: 0 1rem 1rem 1rem;
    background: #fff;
}

.sinpanel .form {
    padding: 0 1rem 65px 1rem;
    margin-bottom: 1rem;
}

.form-buttons {
    width: 100%;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    border-top: 1px solid #ccc;
    height: 50px;
}

.form-buttons button {
    width: 100%;
    margin: 0;
    border-radius: 0;
    border: 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,
#pick-form .image-upload-label {
    height: 250px;
    position: relative;
}

#dream-add-form #image-preview,
#dream-edit-form #image-preview,
#pick-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: 0.5rem 1rem 1rem 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-date .icon,
.list-meta .icon {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
    flex-shrink: 0;
}


.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: #ecf6e7;
    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;
    display: flex;
    align-items: center;
    gap: .2rem;
}

.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,
#support-empty,
#follower-empty,
#followee-empty,
#crystal-empty {
    margin: 1rem;
    border: none;
    padding: 0;
}

.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.crystalized {
    background-color: #e9eaf1;
    position: relative;
}

.list-item.crystalized .list-body {
    background-color: initial;
    border: 5px solid;
    border-top: 6px solid;
    border-bottom: 6px solid;
    border-image: linear-gradient(135deg, #c1bedc, #b4c1de, #a6c3dd);
    border-image-slice: 1;
}

.list-item.completed {
    background-color: #ecf6e7;
    position: relative;
}

.list-item.completed .list-body {
    background-color: initial;
    border: 5px solid;
    border-top: 6px solid;
    border-bottom: 6px solid;
    border-image: linear-gradient(to right, rgba(173, 233, 226, 1), rgb(189, 235, 178), rgb(234, 239, 188));
    border-image: linear-gradient(to right, rgb(234, 239, 188), rgb(189, 235, 178), rgba(173, 233, 226, 1));
    border-image-slice: 1;
}


.list-left {
    flex: 0 0 auto;
}

.list-left .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;
}

.list-media img.dream-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 450px;
    max-width: 400px;
    border-radius: 1.5rem;
    object-fit: cover;
}





.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;
    z-index: 1;
}

.edit:hover {
    color: #333;
    background-color: #ddd;
}

.edit svg {
    width: 1.2rem;
    height: 1.2rem;
    color: #666666;
    stroke-width: 2;
    flex-shrink: 0;
}

.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;
    font-weight: 500;
    line-height: 1.25rem;
}

.list-text a {
    text-decoration: none;
    color: #97a1c7;
}

.list-text p {
    margin: 0;
    color: #555;
    font-weight: 600;
    line-height: 1.5;
}

.activity-dream_log .list-text,
.activity-target .list-text {
    overflow: hidden;
}

.activity-dream_log .list-body,
.activity-target .list-body {
    background: #f7f7f7;
}

.activity-dream_log .list-right,
.activity-target .list-right {
    gap: 0.25rem;
}

.activity-dream_log svg,
.activity-target svg {
    border-radius: 10px;
    padding: 1.5px;
    background: #ccc;
    stroke: #fff !important;
    float: left;
    display: block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;
    margin-top: 0.125rem;
}


.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;
    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;
}

.list-dream {
    text-decoration: none;
    color: #97a1c7;
    font-size: 0.9rem;
}

/* ターゲットの進捗をドリームのバッジ風に */
.list-badge.target-progress {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 4px;
    background: #e5e7eb;
    font-size: .75rem;
}

/* 省略記号が効くように、flex 子に min-width:0 を付与 */
.target-item .list-right {
    min-width: 0;
}

.target-item .meta-buttons {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

/* 一行省略（三点リーダー） */
.target-item .meta-buttons .list-dream {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 期限切れ表示（未達成かつ今日より前） */
.expired {
    color: rgb(217, 130, 130) !important;
    font-weight: 600;
}



.bottom-nav {
    position: sticky;
    bottom: 0;
    z-index: 1000;
    background: #fff;
    height: calc(55px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    flex-shrink: 0;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.bottom-nav {
    position: sticky;
    bottom: 0;
    z-index: 1000;
    background: #fff;
    height: calc(55px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    flex-shrink: 0;
    border-top: 1px solid #ddd;
}

footer.footer-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

.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: 1001;
    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(2, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 720px) {
    .board-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.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;
    /*    background: linear-gradient(to right, rgba(235, 97, 97, 1), rgb(239, 152, 107) 57.98%, rgba(241, 138, 181, 1));*/
    border: 0;
}

.sidepanel .add-button {
    position: absolute;
}

.dream-section,
.board-section,
.targets-section,
.profile-section {
    width: 100%;
}

.dream-section .add-button,
.board-section .add-button {
    bottom: calc(55px + env(safe-area-inset-bottom, 0px));
}

.sinpanel .add-button {
    display: none;
}

.spacer {
    width: 100%;
    height: 50px;
}

.detail-target-section .add-button,
.detail-log-section .add-button {
    position: sticky !important;
}



/* ログイン前ページ関連 */
.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.w90 {
    width: 90%;
}

.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;
    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: block;
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    padding: 0;
    margin: 0.75rem 1rem;
    z-index: 1000;
}

.setting-button:hover {
    background: initial;
}

.setting-button svg {
    width: 24px;
    height: 24px;
    color: #fff;
    stroke-width: 1.75;
}

.profile-only {
    display: none;
}

body.page-profile .profile-only {
    display: inline-flex;
}

/* 既存UIに合わせてinline-flex */



/* 左側（アイコン+ラベル）をひとまとめに */
.settings-left {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    /* ラベル長い場合の折返し安定 */
}

/* Lucide用アイコンの見た目統一（既存トーンに合わせる） */
.settings-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    flex-shrink: 0;
    /* アイコンが潰れないよう固定 */
}

/* ラベル折返し時も行頭にアイコンが揃う */
.settings-label {
    display: inline-block;
    /* 既存のままでも可だが安定化 */
    line-height: 1.25;
}



/* コメント関連 */
.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;
}





/* =========================
   Popup modal（共通）
   ========================= */
.pp-root {
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* ← iOS残像対策：閉じている間はDOMごと消す */
    display: none;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    background: transparent;

    /* ← clip-path は使わず safe-area を “空ける” 方式に */
    padding:
        env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);

    /* iOS Safari 再描画の安定化 */
    contain: paint;
}

.pp-root.is-open {
    display: grid;
    /* ← 開く時だけ描画に参加させる */
    opacity: 1;
    pointer-events: auto;
}

/* 背景フェード（pp 内だけにスコープ。clip-path は使わない） */
.pp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    /* iOS 合成レイヤ確定で残像防止 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* （以前のグローバル強制固定は削除）
     .pp-backdrop,#loading-overlay,.mask,.modal-mask{ ... } は不要 */

/* 中央ダイアログ */
.pp-dialog {
    position: relative;
    width: min(92vw, 420px);
    max-height: 88dvh;
    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);
    transition: transform .22s ease, opacity .22s ease;
}

#popup-modal-checkin .pp-dialog {
    border: 10px solid #746fa2;
    /* border-image: linear-gradient(to right, #746fa2, #61819d); */
    /* border-image-slice: 1; */
}

.pp-root.is-open .pp-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* 閉じる */
.pp-close {
    position: absolute;
    right: .5rem;
    top: .5rem;
    border: 0;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

/* ビューポート＆スライド */
.pp-viewport {
    position: relative;
    width: 100%;
    height: min(55vh);
    overflow: hidden;
}

.pp-track {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform .28s ease;
}

.pp-slide {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1rem 0;
}

.pp-slide .pp-img {
    width: 100%;
    height: 50%;
    max-height: 300px;
    background: #eee;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
}

.pp-slide .pp-text {
    width: 100%;
    padding: 1rem;
    font-size: .95rem;
    line-height: 1.6;
}

/* ドット & ナビ */
.pp-dots {
    display: flex;
    gap: .4rem;
    justify-content: center;
    padding: 1rem 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.pp-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
}

.pp-dots .dot.active {
    background: #97a1c7;
}

.pp-nav {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eee;
    height: 50px;
}

.pp-nav button {
    flex: 1;
    padding: .8rem 1rem;
    border: 0;
    border-radius: 0;
    background: linear-gradient(to right, #746fa2, #61819d);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}

.pp-nav .pp-prev {
    background: #e5e7eb;
    color: #111;
}

.pp-nav .pp-done {
    background: linear-gradient(to right, rgba(251, 104, 104, 1), rgb(248, 174, 134) 57.98%, rgba(245, 159, 195, 1));
    font-weight: 700;
}

.pp-nav .pp-done {
    display: none;
}

/* =========================
     開始パネル（中央寄せ）
     ========================= */
.pp-start,
.pp-complete {
    text-align: center;
}

.pp-start .pp-text,
.pp-complete .pp-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pp-start .pp-img {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(180deg, rgba(37, 99, 235, .08), rgba(245, 159, 195, .12));
}

/* 開始アイコン */
.pp-svg-start,
.pp-svg-complete {
    width: min(48%, 136px);
    height: auto;
    display: block;
    margin: 0 auto;
}

.pp-svg-start {
    margin-top: 1rem;
}

.pp-svg-start svg,
.pp-svg-complete svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ふわふわアニメ */
@keyframes ppFloat {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }

    100% {
        transform: translateY(0)
    }
}

.pp-float {
    animation: ppFloat 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pp-float {
        animation: none;
    }
}

.pp-title-start {
    margin: .2rem 0 0;
    font-size: 1.2rem;
    font-weight: 800;
}

.pp-lead-start {
    margin: .4rem 0 1rem;
    color: #6b7280;
}

/* =========================
     カード（ドリーム）
     ========================= */
.pp-card .pp-img {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, .03));
}

.pp-title-card {
    margin: .2rem 0 0;
    font-size: 1.2rem;
    text-align: center;
}

.pp-meta-card {
    margin: .4rem 0 1rem;
    color: #6b7280;
}

.pp-card-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 1rem;
}

.pp-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.pp-card-wrapper .dream-card {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    border-radius: 10%;
}

#popup-modal-checkin .pp-viewport {
    width: 100.5%;
    height: min(55vh);
}

#popup-modal-checkin .pp-slide {
    padding: 0;
    background-image: linear-gradient(180deg, rgba(37, 99, 235, .08), rgba(245, 159, 195, .0));
    display: flex;
    justify-content: center;
    align-items: center;
}

#popup-modal-checkin .pp-img {
    border-radius: 0px;
    height: auto;
    background: none;
    display: initial;
    padding-top: 1rem;
}



/* =========================
     完了パネル + バッジ + ボーナス
     ========================= */
.pp-complete .pp-img {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(180deg, rgba(37, 99, 235, .08), rgba(245, 159, 195, .12));
}

.pp-lead-complete {
    margin: 0;
}

/* バッジラッパ */
.pp-svg-complete-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    /* 行ボックス余白を除去 */
}

/* チェックバッジ：外枠なし・余白なし */
.pp-badge {
    right: 23%;
    bottom: 0%;
    width: clamp(42px, 28%, 58px);
    aspect-ratio: 1/1;
    background: #10B981;
    /* エメラルド */
    border: none;
    outline: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
    pointer-events: none;
    z-index: 3;
    position: absolute;
}

/* SVGサイズと内部構成 */
.pp-badge svg {
    width: 92%;
    height: 92%;
    display: block;
}

/* SVG円は非表示（背景で表現） */
.pp-badge circle {
    display: none;
}

/* チェック線のみ白で描く */
.pp-badge path {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ボーナス（コイン × 数量） */
.pp-bonus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .4rem;
    font-size: .98rem;
}

.pp-coin {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-block;
    color: #f2c94c;
}

.pp-coin svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pp-mul {
    font-weight: 700;
    color: #374151;
    line-height: 1;
}

.pp-qty {
    font-weight: 800;
    font-size: 1.05rem;
    color: #111827;
    line-height: 1;
}

.pp-streak {
    margin: 1rem;
    color: #4b5563;
}

/* 完了パネルのフェードイン */
.pp-fade-enter {
    opacity: 0;
}

.pp-fade-enter.pp-fade-in {
    transition: opacity .22s ease;
    opacity: 1;
}

/* 追加：スクロールロック（iOS のアドレスバー再描画安定） */
html.is-modal-open,
body.is-modal-open {
    height: 100%;
}

html.is-modal-open body {
    position: fixed;
    width: 100%;
    overflow: hidden;
}




.pp-viewport.status-up {
    height: auto;
}

.pp-box {
    min-width: 100%;
}

.pp-box .pp-img {
    width: 100%;
    height: 200px;
    background: #eee;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
}

.pp-box .pp-text {
    width: 100%;
    padding: 1rem;
    font-size: .95rem;
    line-height: 1.6;
    text-align: center;
}

.pp-button.close {
    background: #e5e7eb;
    color: #111;
}

.pp-statusbadge {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: clamp(88px, 22vw, 148px);
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(255, 255, 255, 0.1));
    pointer-events: none;
}






/* =========================
   About Status
   ========================= */
/* ベース */
.rank-guide {
    padding: 1.5rem;
    color: #111;
    font-size: 16px
}

.rank-intro {
    color: #444;
    font-size: .95rem;
    margin-bottom: 1rem;
    margin-top: 0;
}

.rank-card {
    border: 2px solid #eee;
    border-radius: 1rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05)
}

.rank-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0.5rem 0 1rem 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0 1rem 0;
}

.rank-badge img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.rank-title-text {
    line-height: 1;
}

/* アイコン高さとベースラインを合わせる */
@media (min-width:768px) {
    .rank-badge img {
        width: 32px;
        height: 32px;
    }
}

.rank-desc {
    font-size: .9rem;
    color: #333;
    margin: 0 0 .6rem
}

.rank-list {
    list-style: disc;
    margin: .2rem 0 .6rem 1.2rem;
    padding: 0
}

.rank-list li {
    margin-bottom: .28rem;
    font-size: .95rem;
    line-height: 1.55
}

/* 直近30日枠（アクティビティのみ） */
.rank-activitybox {
    border: 1.5px dashed #ffffff;
    background: #ffffff;
    border-radius: .8rem;
    padding: .75rem .9rem .8rem;
    position: relative;
    margin-top: 1.5rem;
}

.ra-label {
    position: absolute;
    top: -.7rem;
    left: 0.4rem;
    color: #fff;
    font-weight: 700;
    padding: .22rem .5rem;
    border-radius: .5rem;
    font-size: .78rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.ra-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: #ffffff;
    display: inline-block
}

.ra-text {
    letter-spacing: .02em
}

.ra-list {
    list-style: disc;
    margin: 1rem 0 0 1.2rem;
    padding: 0
}

.ra-list li {
    margin-bottom: .26rem;
    font-size: .95rem;
    line-height: 1.55
}

.rank-note {
    font-size: .85rem;
    color: #666;
    text-align: center;
}






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

.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.7);
    opacity: .9;
    z-index: 100000;
    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)
    }
}














/* --- 最小限のメニュースタイル（汎用化） --- */
.action-menu {
    position: absolute;
    top: 6px;
    right: 6px;
}

.action-menu svg {
    width: 1.2rem;
    height: 1.2rem;
    color: #666666;
    stroke-width: 2;
    flex-shrink: 0;
}

.action-menu__btn {
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: initial;
    padding: 0;
    margin: 0;
}

.action-menu__btn:hover {
    background: rgba(0, 0, 0, .06);
}

.action-menu__list {
    position: absolute;
    top: 32px;
    right: 0;
    min-width: 160px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    padding: 6px 0;
    z-index: 20;
    display: none;
}

.action-menu__list.open {
    display: block;
    padding: 0;
    background: #ffffff;
    z-index: 9999;
}

.action-menu__item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    padding: 8px 12px;
    cursor: pointer;
    margin: 0;
    color: initial;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #ffffff;
}

.action-menu__item:hover {
    background: linear-gradient(to right, #746fa2, #61819d);
    color: #ffffff;
}

.action-menu__item:hover svg {
    stroke: #ffffff;
}

.comment-item.deleted .comment-text,
.reply-item.deleted .reply-text {
    color: #888;
    font-style: italic;
}


.scroll-sentinel {
    height: 1px;
}








.profile-head {
    background: #f5f5f5;
    margin: 0 1rem 0.5rem 1rem;
    border-radius: 0.75rem;
    padding: 1rem 2rem 1rem 1rem;
    position: relative;
    width: -webkit-fill-available;
}

/* —— 行クランプの基礎指定 —— */
.ph-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 0 0.5rem 0;
}

.ph-expanded .ph-desc {
    padding: 0;
}

/* 折りたたみ時に line-clamp 指定（対応している環境のみ有効にする） */
.ph-collapsed .ph-desc {
    -webkit-line-clamp: 3;
    padding-bottom: 0;
}

/* 展開時は解除 */
.ph-expanded .ph-desc {
    -webkit-line-clamp: unset;
    max-height: none;
}

/* —— 非対応環境向けフォールバック（JS が --ph-line を供給） —— */
.ph-collapsed .ph-desc {
    max-height: calc(var(--ph-line, 24px) * 3 + var(--ph-fix, 6px));
}

@supports (-webkit-line-clamp: 3) {
    .ph-collapsed .ph-desc {
        max-height: none;
    }
}

.ph-details-wrap {
    overflow: hidden;
    transition: max-height 800ms ease;
}

.ph-collapsed .ph-details-wrap {
    max-height: 0;
}

.ph-expanded .ph-details-wrap {
    max-height: 1600px;
}

.ph-readmore {
    margin: 0;
    font-size: .8rem;
    line-height: 1;
    padding: 0rem .25rem;
    border-radius: 999px;
    background: none;
    color: #333;
    cursor: pointer;
    border: 0;
    position: absolute;
    bottom: 0.5rem;
    right: 0.25rem;
}

.ph-readmore:hover {
    background: none;
}

.ph-readmore[hidden] {
    display: none;
}

.ph-readmore-button {
    text-align: center;
    padding: 0;
}

.follow-btn,
.edit-btn {
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    background: #fff;
    color: #999;
}

.follow-btn:hover,
.edit-btn:hover {
    background: #fff;
    color: #999;
    opacity: 0.5;
}

.status-guide-btn {
    top: 3rem;
    right: 1rem;
    padding: 0;
}

.edit-btn {
    display: flex;
    align-items: center;
    gap: .2rem;
    justify-content: flex-start;
    font-size: 0.9rem;
    padding: 0.25rem 0.75rem;
}

.edit-btn svg {
    width: 14px;
    height: 14px;
    margin-bottom: 1.5px;
}

.profile-details li {
    padding: 0;
    border: 0;
}

/* ====== クリスタルタブ ====== */
.crystals-section[hidden] {
    display: none;
}

.crystal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 720px) {
    .crystal-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.crystal-item {
    position: relative;
    /* シールド重ね用 */
    background: #fff;
    overflow: hidden;
}

.crystal-item.completed::after {
    content: 'ACHIEVED';
    position: absolute;
    left: .5rem;
    top: .5rem;
    font-size: .65rem;
    color: #0a0;
    background: #eaffea;
    border: 1px solid #c6f1c6;
    padding: 0 .4rem;
    border-radius: 6px;
}

.crystal-badge {
    position: absolute;
    left: .5rem;
    top: .5rem;
    font-size: .65rem;
    color: #555;
    background: #f4f4f4;
    border: 1px solid #e5e5e5;
    padding: 0 .4rem;
    border-radius: 6px;
}

.crystal-view {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
    background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0) 60%), radial-gradient(30% 30% at 50% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0) 60%) !important;
    /* ここを修正：ユーザー操作による回転を完全遮断 */
    pointer-events: none;
    /* ← 追加：Three.js へのドラッグ等を遮断 */
    -webkit-user-drag: none;
    user-select: none;
}

/* 透明のタッチシールド：タップのみ受け付け、スクロールは許可 */
.crystal-touchshield {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    touch-action: pan-y;
    -webkit-user-drag: none;
    user-select: none;
    cursor: pointer;
    background: transparent;
}

/* ポップアップ内のクリスタルはジェスチャを専有（回転を意図通り扱う） */
#popup-root {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

#popup-root canvas,
#popup-root .crystal-view {
    touch-action: none;
}

/* フェードイン（初回表示時のみ） */
.crystal-item .crystal-view {
    opacity: 0;
    transition: opacity 300ms ease;
}

.crystal-item.is-visible .crystal-view {
    opacity: 1;
}

/* 低動作環境の配慮 */
@media (prefers-reduced-motion: reduce) {
    .crystal-item .crystal-view {
        transition: none;
    }
}

/* liアイテムバッジ関連 */
:root {
    --corner-size: 96px;
    --band-start: 66%;
    --band-end: 81%;
    --corner-cut: 62%;
    --band-icon-size: 14px;
    --band-icon-right: 22px;
    --band-icon-bottom: 40px;
    --star-size: 16px;
    --star-right: 10px;
    --star-bottom: 10px;
    --band-color: #a6c3dd;
    --corner-color: rgba(173, 233, 226, 1);
}

.lr-list .list-item .list-body {
    position: relative;
}

.lr-list .list-item .label-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--corner-size);
    height: var(--corner-size);
    pointer-events: none;
}

.label-overlay .corner-band,
.label-overlay .corner-fill {
    position: absolute;
    inset: 0;
    display: none;
}

.label-overlay .corner-band {
    background: linear-gradient(135deg,
            transparent 0 var(--band-start),
            var(--band-color) var(--band-start) var(--band-end),
            transparent var(--band-end) 100%);
}

.label-overlay .corner-band svg {
    position: absolute;
    bottom: 19px;
    right: 17px;
    width: var(--band-icon-size);
    height: var(--band-icon-size);
    stroke: #fff;
    opacity: .95;
}

.label-overlay .corner-fill {
    background: var(--corner-color);
    clip-path: polygon(100% var(--corner-cut), 100% 100%, var(--corner-cut) 100%);
    color: #fff;
}

.label-overlay .corner-fill svg {
    position: absolute;
    opacity: .95;
    right: 3px;
    bottom: 3px;
    width: var(--star-size);
    height: var(--star-size);
}

.lr-list .list-item.crystalized .label-overlay .corner-band {
    display: block;
}

.lr-list .list-item.completed .label-overlay .corner-fill {
    display: block;
}

.dream-detail .label-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--corner-size);
    height: var(--corner-size);
    pointer-events: none;
    z-index: 1;
}



.invite-panel .card {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem;
}

.invite-panel h3 {
    margin-top: 0;
}

.invite-panel .row {
    display: flex;
    gap: 8px;
    align-items: center;
    /* 各要素を縦中央に揃える */
}

/* 招待コードの見た目と中央寄せ */
.invite-panel code.mono {
    display: inline-flex;
    /* インライン→flex にする */
    align-items: center;
    /* 縦中央揃え */
    justify-content: center;
    /* 横中央揃え */
    height: 40px;
    /* ボタンと同じ高さに */
    padding: 0 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 1.05rem;
    border-radius: 8px;
    background: rgba(151, 161, 199, 0.25);
    font-weight: 600;
}

.invite-panel input.full {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 8px;
    border: 0;
    background: rgba(151, 161, 199, 0.25);
}

.invite-panel button.sub-button.small-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 12px;
    white-space: nowrap;
}

.invite-panel .note {
    color: #aaa;
    font-size: .9rem;
    margin-top: 6px;
}

.invite-panel .error {
    color: #ff6b6b;
    margin-top: 8px;
}

.invite-panel .toast {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #2a2a2a;
    color: #fff;
    padding: 8px 12px;
    border-radius: 999px;
}

.invite-panel .qr-block {
    text-align: center;
}

#qr-code {
    display: inline-block;
    padding: 8px;
    background: #fff;
    border-radius: 8px;
}

.invite-panel .qr-block .note.small {
    font-size: .8rem;
    color: #888;
    margin-top: 4px;
}

#qr-code svg,
#qr-code canvas {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}







.tutorial-block {
    width: 100%;
}

.tutorial-block .tutorial-img {
    width: 100%;
}

.tutorial-block .tutorial-body {
    width: 100%;
    padding: 0 1rem 1rem 1rem;
}

.tutorial-multi {
    display: none;
}

.tutorial-block .fill {
    fill: #999;
    stroke: none;
}

.tutorial-block .stroke {
    stroke: #999;
    fill: none;
}

.howto-tip {
    background: #f4f5f9;
    border: 3px solid #97a1c7;
    padding: 1rem;
    margin-top: 10px;
    border-radius: 8px;
}

.howto-tip a {
    margin: 0.5rem 0 0 0;
}

.howto-tip h4 {
    margin: 0;
}

.howto-tip .howto {
    background: #fff;
    padding: 0.75rem;
    border-radius: 0.5rem;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
}

section.stepguide,
section.help-links {
    padding: 0 1rem 1rem 1rem;
}

.howto-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 20px;
}

.howto-page .lede {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #333;
    margin-bottom: 20px;
}

.howto-steps {
    counter-reset: step;
    display: grid;
    gap: 16px;
    list-style-type: none;
    padding: 0;
}

.howto-step {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.howto-step h4 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.howto-step h4 .num {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f4f5f9;
    font-weight: 700;
    font-size: .9rem;
}

.howto-step p {
    margin: 1rem 0;
}

.checklist {
    margin: 8px 0 0 0;
    padding-left: 1.1rem;
}

.checklist li {
    margin: 2px 0;
}

.help-links a,
.howto-tip a {
    text-decoration: none;
    color: #97a1c7;
}

.stepguide .tutorial-single {
    display: none;
}

.stepguide .tutorial-multi {
    display: block !important;
    margin: 1rem;
}

.stepguide .tutorial-title {
    display: none;
}

.ym {
    font-weight: bold;
    background: linear-gradient(transparent 50%, #97a1c7 110%);
}




/** mobile 判定 **/
/* PC: pointer=fine → ランドスケープなら必ず表示 */
@media screen and (orientation: landscape) and (pointer: fine) {
    .landscape-check {
        position: fixed;
        inset: 0;
        background: #eeeeee;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999999;

        background-image: url("/assets/img/landscape-check2.png");
        /* ← PC用画像 */
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px;
        /* PCは大きめ */
    }
}

/* スマホ: pointer=coarse → 横向きのとき表示 */
@media screen and (orientation: landscape) and (pointer: coarse) {
    .landscape-check {
        position: fixed;
        inset: 0;
        background: #eeeeee;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999999;

        background-image: url("/assets/img/landscape-check.png");
        /* ← スマホ用 */
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px;
    }
}






/* お知らせ用 */
.notification-label {
    font-weight: 700;
    background: #444c65;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    color: #fff;
    border-radius: 100px;
}