/* ========================================
   基本設定
======================================== */

:root {
    --color-background: #f7f7f9;
    --color-surface: #ffffff;
    --color-text: #111111;
    --color-text-light: #6d6d73;
    --color-border: rgba(17, 17, 17, 0.1);

    --color-main: #635bff;
    --color-main-dark: #4b43da;
    --color-main-light: #eeecff;

    --color-black: #111111;
    --color-white: #ffffff;

    --shadow-small:
        0 8px 24px rgba(0, 0, 0, 0.06);

    --shadow-medium:
        0 20px 60px rgba(0, 0, 0, 0.12);

    --shadow-large:
        0 30px 100px rgba(0, 0, 0, 0.18);

    --border-radius-small: 12px;
    --border-radius-medium: 24px;
    --border-radius-large: 40px;

    --header-height: 76px;
    --content-width: 1200px;
}


/* ========================================
   リセット
======================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    background: var(--color-background);
    color: var(--color-text);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        "Noto Sans JP",
        sans-serif;
    line-height: 1.7;
    letter-spacing: 0.02em;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: none;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}


/* ========================================
   共通レイアウト
======================================== */

.section {
    padding: 120px 24px;
}

.section-inner {
    width: min(100%, var(--content-width));
    margin: 0 auto;
}

.section-heading {
    max-width: 700px;
    margin-bottom: 64px;
}

.section-heading.center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.section-label {
    margin-bottom: 16px;
    color: var(--color-main);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.section-title {
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.section-description {
    margin-top: 24px;
    color: var(--color-text-light);
    font-size: 18px;
    line-height: 1.9;
}


/* ========================================
   ヘッダー
======================================== */

.header {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc(100% - 48px), var(--content-width));
    height: 100%;
    margin: 0 auto;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}

.logo-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 18px;
    font-weight: 800;
}

.logo-text {
    font-size: 16px;
    letter-spacing: -0.02em;
}

.navigation {
    display: flex;
    align-items: center;
    gap: 30px;
}

.navigation-link {
    position: relative;
    color: #3b3b3f;
    font-size: 14px;
    font-weight: 600;
    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}

.navigation-link::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    border-radius: 100px;
    background: var(--color-main);
    content: "";
    opacity: 0;
    transform: scaleX(0);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.navigation-link:hover {
    color: var(--color-main);
}

.navigation-link:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.navigation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.navigation-button:hover {
    background: var(--color-main);
    box-shadow: 0 12px 30px rgba(99, 91, 255, 0.25);
    transform: translateY(-2px);
}


/* ========================================
   ハンバーガーメニュー
======================================== */

.menu-button {
    display: none;
    width: 44px;
    height: 44px;
    padding: 11px;
    border-radius: 12px;
    background: transparent;
}

.menu-button span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    border-radius: 999px;
    background: var(--color-black);
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.menu-button.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-button.active span:nth-child(2) {
    opacity: 0;
}

.menu-button.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    z-index: 999;
    top: var(--header-height);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-medium);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.mobile-menu.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mobile-menu-link,
.mobile-menu-button {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
}

.mobile-menu-link:hover {
    background: #f2f2f5;
}

.mobile-menu-button {
    justify-content: center;
    margin-top: 8px;
    background: var(--color-black);
    color: var(--color-white);
}


/* ========================================
   ヒーロー
======================================== */

.hero {
    position: relative;
    display: flex;
    min-height: 100vh;
    align-items: center;
    padding:
        calc(var(--header-height) + 70px)
        24px
        100px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f4f2ff 48%,
            #f7f7f9 100%
        );
}

.hero-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0.7;
    animation: floating-circle 9s ease-in-out infinite;
}

.hero-circle-one {
    top: 8%;
    right: 6%;
    width: 420px;
    height: 420px;
    background: rgba(120, 92, 255, 0.16);
}

.hero-circle-two {
    bottom: 2%;
    left: -8%;
    width: 500px;
    height: 500px;
    background: rgba(66, 205, 255, 0.12);
    animation-delay: -3s;
}

.hero-circle-three {
    top: 35%;
    left: 42%;
    width: 260px;
    height: 260px;
    background: rgba(255, 139, 203, 0.13);
    animation-delay: -6s;
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(100%, var(--content-width));
    margin: 0 auto;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.9fr);
    gap: 70px;
}

.hero-content {
    max-width: 650px;
}

.hero-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-bottom: 25px;
    padding: 0 16px;
    border: 1px solid rgba(99, 91, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-main);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    box-shadow: var(--shadow-small);
}

.hero-title {
    max-width: none;
    font-size: clamp(52px, 6vw, 84px);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -0.065em;
    white-space: nowrap;
}

.hero-description {
    max-width: 600px;
    margin-top: 30px;
    color: var(--color-text-light);
    font-size: 18px;
    line-height: 1.9;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

.primary-button,
.secondary-button {
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 750;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.primary-button {
    background: var(--color-black);
    color: var(--color-white);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.primary-button:hover {
    background: var(--color-main);
    box-shadow: 0 20px 44px rgba(99, 91, 255, 0.3);
    transform: translateY(-3px);
}

.secondary-button {
    border: 1px solid rgba(17, 17, 17, 0.1);
    background: rgba(255, 255, 255, 0.82);
    color: var(--color-black);
    box-shadow: var(--shadow-small);
}

.secondary-button:hover {
    background: var(--color-white);
    box-shadow: var(--shadow-medium);
    transform: translateY(-3px);
}

.hero-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 32px;
}

.hero-note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #55555c;
    font-size: 13px;
    font-weight: 600;
}

.check-icon {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: var(--color-main-light);
    color: var(--color-main);
    font-size: 11px;
    font-weight: 800;
}


/* ========================================
   ヒーロー右側
======================================== */

.hero-visual {
    position: relative;
    min-height: 620px;
}

.nfc-card {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 0;
    display: flex;
    width: 380px;
    aspect-ratio: 1.586 / 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            #222227 0%,
            #0d0d0f 55%,
            #2c2c35 100%
        );
    color: var(--color-white);
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translateY(-50%) rotate(-8deg);
    animation: card-floating 5s ease-in-out infinite;
}

.nfc-card::after {
    position: absolute;
    inset: 1px;
    border-radius: 27px;
    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.08),
            transparent 40%
        );
    content: "";
    pointer-events: none;
}

.nfc-card-top,
.nfc-card-bottom {
    position: relative;
    z-index: 2;
}

.nfc-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.nfc-card-logo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.nfc-symbol {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    transform: rotate(90deg);
}

.nfc-symbol span {
    display: block;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-left: 0;
    border-radius: 0 100px 100px 0;
}

.nfc-symbol span:nth-child(1) {
    width: 8px;
    height: 14px;
}

.nfc-symbol span:nth-child(2) {
    width: 12px;
    height: 22px;
}

.nfc-symbol span:nth-child(3) {
    width: 16px;
    height: 30px;
}

.nfc-card-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.nfc-card-text {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    letter-spacing: 0.18em;
}

.phone {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 10px;
    width: 290px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50px;
    background: #111114;
    box-shadow: var(--shadow-large);
    transform: rotate(5deg);
    animation: phone-floating 6s ease-in-out infinite;
}

.phone::before {
    position: absolute;
    z-index: 4;
    top: 17px;
    left: 50%;
    width: 88px;
    height: 25px;
    border-radius: 999px;
    background: #09090b;
    content: "";
    transform: translateX(-50%);
}

.phone-screen {
    min-height: 500px;
    overflow: hidden;
    border-radius: 41px;
    background:
        linear-gradient(
            180deg,
            #eeecff 0%,
            #ffffff 40%
        );
}

.phone-status-bar {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    font-size: 10px;
    font-weight: 700;
}

.phone-status-icons {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 6px;
}

.phone-profile {
    padding: 30px 20px 28px;
    text-align: center;
}

.phone-profile-image {
    display: grid;
    width: 92px;
    height: 92px;
    margin: 0 auto 18px;
    place-items: center;
    border: 5px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #6c63ff,
            #bd70ff
        );
    color: var(--color-white);
    font-size: 34px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(99, 91, 255, 0.25);
}

.phone-profile h2 {
    font-size: 23px;
    letter-spacing: -0.04em;
}

.phone-profile-reading {
    margin-top: 2px;
    color: #9999a2;
    font-size: 10px;
}

.phone-profile-bio {
    margin-top: 15px;
    color: #66666d;
    font-size: 11px;
    line-height: 1.7;
}

.phone-profile-links {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.phone-profile-link {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    color: #33333a;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}


/* ========================================
   スクロール表示
======================================== */

.scroll-down {
    position: absolute;
    z-index: 3;
    bottom: 26px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: #7d7d85;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    transform: translateX(-50%);
}

.scroll-line {
    position: relative;
    display: block;
    width: 1px;
    height: 42px;
    overflow: hidden;
    background: rgba(17, 17, 17, 0.12);
}

.scroll-line::after {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 60%;
    background: var(--color-main);
    content: "";
    animation: scroll-line 1.8s ease-in-out infinite;
}


/* ========================================
   特徴
======================================== */

.features {
    background: var(--color-surface);
}

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

.feature-card {
    min-height: 310px;
    padding: 34px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: var(--border-radius-medium);
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fafafe
        );
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.feature-card:hover {
    border-color: rgba(99, 91, 255, 0.2);
    box-shadow: 0 22px 55px rgba(99, 91, 255, 0.11);
    transform: translateY(-8px);
}

.feature-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 26px;
    place-items: center;
    border-radius: 18px;
    background: var(--color-main-light);
    color: var(--color-main);
    font-size: 21px;
    font-weight: 800;
}

.feature-card h3 {
    margin-bottom: 14px;
    font-size: 22px;
    letter-spacing: -0.03em;
}

.feature-card p {
    color: var(--color-text-light);
    font-size: 15px;
    line-height: 1.85;
}


/* ========================================
   アニメーション
======================================== */

@keyframes floating-circle {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -24px, 0) scale(1.04);
    }
}

@keyframes card-floating {
    0%,
    100% {
        transform:
            translateY(-50%)
            rotate(-8deg)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            translateY(-54%)
            rotate(-6deg)
            translate3d(0, -8px, 0);
    }
}

@keyframes phone-floating {
    0%,
    100% {
        transform:
            rotate(5deg)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            rotate(3deg)
            translate3d(0, -12px, 0);
    }
}

@keyframes scroll-line {
    0% {
        top: -70%;
    }

    100% {
        top: 120%;
    }
}


/* ========================================
   タブレット対応
======================================== */

@media (max-width: 1050px) {
    .navigation {
        gap: 20px;
    }

    .hero-inner {
        grid-template-columns: 1fr 430px;
        gap: 30px;
    }

    .hero-visual {
        transform: scale(0.9);
        transform-origin: center right;
    }

    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   スマートフォン対応
======================================== */

@media (max-width: 820px) {
    :root {
        --header-height: 68px;
    }

    .section {
        padding: 86px 20px;
    }

    .header-inner {
        width: min(calc(100% - 32px), var(--content-width));
    }

    .navigation {
        display: none;
    }

    .menu-button {
        display: block;
    }

    .mobile-menu {
        display: flex;
    }

    .hero {
        min-height: auto;
        padding:
            calc(var(--header-height) + 65px)
            20px
            90px;
    }

    .hero-inner {
        display: flex;
        flex-direction: column;
        gap: 55px;
    }

    .hero-content {
        max-width: none;
        text-align: center;
    }

    .hero-label {
        margin-right: auto;
        margin-left: auto;
    }

    .hero-description {
        margin-right: auto;
        margin-left: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-notes {
        justify-content: center;
    }

    .hero-visual {
        width: 100%;
        min-height: 580px;
        transform: none;
    }

    .nfc-card {
        left: 50%;
        width: min(78vw, 360px);
        transform: translate(-60%, -50%) rotate(-8deg);
    }

    .phone {
        right: 3%;
        width: min(60vw, 280px);
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   小さいスマートフォン対応
======================================== */

@media (max-width: 520px) {
    .logo-text {
        font-size: 14px;
    }

    .hero-title {
        font-size: clamp(36px, 11vw, 58px);
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
    }

    .hero-notes {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .hero-visual {
        min-height: 500px;
        margin-top: 10px;
    }

    .nfc-card {
        top: 52%;
        left: 48%;
        width: 285px;
        padding: 23px;
    }

    .phone {
        top: 0;
        right: -30px;
        width: 225px;
        border-radius: 41px;
    }

    .phone-screen {
        min-height: 470px;
        border-radius: 33px;
    }

    .phone-profile {
        padding: 24px 15px;
    }

    .phone-profile-image {
        width: 72px;
        height: 72px;
        font-size: 27px;
    }

    .phone-profile h2 {
        font-size: 19px;
    }

    .phone-profile-link {
        min-height: 40px;
    }

    .section-title {
        font-size: 38px;
    }

    .section-description {
        font-size: 16px;
    }

    .feature-card {
        min-height: auto;
        padding: 28px;
    }
}


/* ========================================
   動きを減らす設定
======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ========================================
   使い方
======================================== */

.how-to-use {
    background:
        linear-gradient(
            180deg,
            #f7f7f9 0%,
            #f2f0ff 100%
        );
}

.how-to-use .section-title {
    font-size: min(clamp(38px, 5vw, 68px), 7vw);
    white-space: nowrap;
}

.steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 24px;
}

.step {
    position: relative;
    min-height: 270px;
    padding: 34px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: var(--border-radius-medium);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-small);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.step:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-7px);
}

.step-number {
    display: inline-flex;
    min-width: 62px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    border-radius: 999px;
    background: var(--color-main-light);
    color: var(--color-main);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.step-content h3 {
    margin-bottom: 14px;
    font-size: 23px;
    letter-spacing: -0.03em;
}

.step-content p {
    color: var(--color-text-light);
    font-size: 15px;
    line-height: 1.9;
}

.step-line {
    width: 54px;
    height: 1px;
    align-self: center;
    background:
        linear-gradient(
            90deg,
            rgba(99, 91, 255, 0.2),
            rgba(99, 91, 255, 0.8),
            rgba(99, 91, 255, 0.2)
        );
}


/* ========================================
   プロフィール紹介
======================================== */

.design {
    overflow: hidden;
    background: var(--color-surface);
}

.design .section-title {
    font-size: min(clamp(38px, 5vw, 68px), 9vw);
    white-space: nowrap;
}

.design-inner {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1fr);
    gap: 90px;
}

.design-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin-top: 34px;
}

.design-list li {
    position: relative;
    padding-left: 25px;
    color: #48484f;
    font-size: 15px;
    font-weight: 600;
}

.design-list li::before {
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-main);
    box-shadow: 0 0 0 6px var(--color-main-light);
    content: "";
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 38px;
    color: var(--color-main);
    font-size: 15px;
    font-weight: 800;
}

.text-link span {
    transition: transform 0.25s ease;
}

.text-link:hover span {
    transform: translateX(6px);
}

.design-preview {
    position: relative;
    display: flex;
    min-height: 680px;
    align-items: center;
    justify-content: center;
}

.design-preview::before {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(99, 91, 255, 0.2) 0%,
            rgba(99, 91, 255, 0.05) 45%,
            transparent 72%
        );
    content: "";
}

.preview-card {
    position: relative;
    z-index: 2;
    width: min(100%, 420px);
    padding: 24px 26px 34px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 38px;
    background:
        linear-gradient(
            180deg,
            #f0edff 0%,
            #ffffff 35%
        );
    box-shadow: var(--shadow-large);
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.preview-edit-button,
.preview-qr-button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(17, 17, 17, 0.07);
    background: rgba(255, 255, 255, 0.9);
    color: #33333a;
    box-shadow: var(--shadow-small);
}

.preview-edit-button {
    padding: 0 17px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.preview-qr-button {
    width: 40px;
    border-radius: 50%;
    font-size: 16px;
}

.preview-qr-button img,
.profile-qr-icon img {
    display: block;
    width: 22px;
    height: 22px;
}

.profile-qr-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.preview-profile-image {
    display: grid;
    width: 110px;
    height: 110px;
    margin: 24px auto 18px;
    place-items: center;
    border: 6px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #655dff,
            #bd73ff
        );
    color: var(--color-white);
    font-size: 42px;
    font-weight: 800;
    box-shadow: 0 18px 40px rgba(99, 91, 255, 0.28);
}

.preview-card h3 {
    text-align: center;
    font-size: 29px;
    letter-spacing: -0.04em;
}

.preview-furigana,
.preview-username {
    text-align: center;
}

.preview-furigana {
    margin-top: 3px;
    color: #9a9aa2;
    font-size: 11px;
}

.preview-username {
    margin-top: 9px;
    color: var(--color-main);
    font-size: 13px;
    font-weight: 700;
}

.preview-bio {
    margin-top: 24px;
    color: #616169;
    text-align: center;
    font-size: 14px;
    line-height: 1.85;
}

.preview-links {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.preview-link {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    padding: 0 19px;
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    color: #33333a;
    font-size: 13px;
    font-weight: 750;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.055);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.preview-link:hover {
    box-shadow: 0 16px 32px rgba(99, 91, 255, 0.12);
    transform: translateY(-3px);
}


/* ========================================
   商品
======================================== */

.purchase {
    background:
        linear-gradient(
            180deg,
            #f7f7f9 0%,
            #ffffff 100%
        );
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.product-card {
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 30px;
    background: var(--color-white);
    box-shadow: var(--shadow-small);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.product-card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-8px);
}

.product-image {
    display: grid;
    min-height: 390px;
    place-items: center;
    padding: 50px;
}

.product-image-black {
    background:
        radial-gradient(
            circle at 50% 30%,
            #45454d 0%,
            #1a1a1f 43%,
            #0c0c0f 100%
        );
}

.product-image-white {
    background:
        radial-gradient(
            circle at 50% 30%,
            #ffffff 0%,
            #f3f3f7 52%,
            #e3e3e9 100%
        );
}

.product-nfc-card {
    display: flex;
    width: min(100%, 390px);
    aspect-ratio: 1.586 / 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    border-radius: 26px;
    background:
        linear-gradient(
            145deg,
            #27272d,
            #0c0c0e
        );
    color: var(--color-white);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: rotate(-6deg);
}

.product-nfc-card.white {
    border: 1px solid rgba(17, 17, 17, 0.07);
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #e9e9ef
        );
    color: var(--color-black);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.product-logo {
    font-size: 22px;
    font-weight: 850;
}

.product-card-label {
    color: rgba(255, 255, 255, 0.56);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.19em;
}

.product-nfc-card.white .product-card-label {
    color: rgba(17, 17, 17, 0.45);
}

.product-content {
    padding: 30px 32px 34px;
}

.product-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.product-type {
    margin-bottom: 5px;
    color: var(--color-main);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.product-title-row h3 {
    font-size: 23px;
    letter-spacing: -0.03em;
}

.product-price {
    white-space: nowrap;
    font-size: 20px;
    font-weight: 800;
}

.product-description {
    margin-top: 19px;
    color: var(--color-text-light);
    font-size: 14px;
    line-height: 1.85;
}

.product-button {
    width: 100%;
    min-height: 54px;
    margin-top: 26px;
    border-radius: 999px;
    background: #ededf1;
    color: #8a8a91;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.order-product-link { display:flex; align-items:center; justify-content:center; background:var(--color-black); color:#fff; transition:.25s; }.order-product-link:hover { background:var(--color-main); transform:translateY(-2px); }


/* ========================================
   FAQ
======================================== */

.faq {
    background: var(--color-surface);
}

.faq-inner {
    display: grid;
    grid-template-columns: minmax(260px, 0.6fr) minmax(0, 1fr);
    gap: 90px;
}

.faq-list {
    display: grid;
    gap: 14px;
}

.faq-item {
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.035);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.faq-item[open] {
    border-color: rgba(99, 91, 255, 0.2);
    box-shadow: 0 16px 38px rgba(99, 91, 255, 0.08);
}

.faq-item summary {
    display: flex;
    min-height: 80px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 24px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 750;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--color-main-light);
    color: var(--color-main);
    font-size: 20px;
    transition: transform 0.25s ease;
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
}

.faq-item p {
    padding: 0 24px 26px;
    color: var(--color-text-light);
    font-size: 14px;
    line-height: 1.9;
}


/* ========================================
   CTA
======================================== */

.cta {
    position: relative;
    overflow: hidden;
    padding: 130px 24px;
    background: #101014;
    color: var(--color-white);
    text-align: center;
}

.cta-background {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(99, 91, 255, 0.34),
            transparent 36%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(210, 104, 255, 0.22),
            transparent 34%
        );
}

.cta-inner {
    position: relative;
    z-index: 2;
    width: min(100%, 900px);
    margin: 0 auto;
}

.cta-label {
    margin-bottom: 20px;
    color: #aaa5ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.cta h2 {
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.16;
    letter-spacing: -0.055em;
}

.cta p:not(.cta-label) {
    max-width: 620px;
    margin: 26px auto 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 17px;
    line-height: 1.9;
}

.cta-button {
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 36px;
    padding: 0 29px;
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-black);
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.cta-button:hover {
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.32);
    transform: translateY(-4px);
}

.cta-button span {
    transition: transform 0.25s ease;
}

.cta-button:hover span {
    transform: translateX(5px);
}


/* ========================================
   フッター
======================================== */

.footer {
    padding: 76px 24px 28px;
    background: #0b0b0e;
    color: var(--color-white);
}

.footer-inner {
    width: min(100%, var(--content-width));
    margin: 0 auto;
}

.footer-main {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: 90px;
    padding-bottom: 64px;
}

.footer-logo .logo-mark {
    background: var(--color-white);
    color: var(--color-black);
}

.footer-brand p {
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    line-height: 1.85;
}

.footer-navigation {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 38px;
}

.footer-navigation-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.footer-navigation-group h3 {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.footer-navigation-group a {
    color: rgba(255, 255, 255, 0.74);
    font-size: 14px;
    white-space: nowrap;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.footer-navigation-group a:hover {
    color: var(--color-white);
    transform: translateX(4px);
}

.footer-company-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.footer-company-name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

.footer-company-name span {
    font-size: 11px;
    transition: transform 0.25s ease;
}

.footer-company-name:hover span {
    transform: translate(2px, -2px);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.36);
    font-size: 12px;
}


/* ========================================
   続きのレスポンシブ
======================================== */

@media (max-width: 1050px) {
    .steps {
        grid-template-columns: 1fr;
    }

    .step-line {
        width: 1px;
        height: 42px;
        justify-self: center;
        background:
            linear-gradient(
                180deg,
                rgba(99, 91, 255, 0.2),
                rgba(99, 91, 255, 0.8),
                rgba(99, 91, 255, 0.2)
            );
    }

    .design-inner {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .faq-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 820px) {
    .design-inner {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .design-content {
        width: 100%;
    }

    .design-preview {
        width: 100%;
        min-height: auto;
        padding: 10px 0;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .footer-navigation {
        gap: 24px;
    }
}

@media (max-width: 620px) {
    .design-list {
        grid-template-columns: 1fr;
    }

    .preview-card {
        border-radius: 30px;
    }

    .product-image {
        min-height: 300px;
        padding: 34px 24px;
    }

    .product-nfc-card {
        padding: 24px;
    }

    .product-content {
        padding: 26px 24px 30px;
    }

    .product-title-row {
        flex-direction: column;
        gap: 10px;
    }

    .faq-item summary {
        min-height: 74px;
        padding: 0 18px;
        font-size: 14px;
    }

    .faq-item p {
        padding: 0 18px 22px;
    }

    .footer-navigation {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta {
        padding: 100px 20px;
    }
}


/* ========================================
   JavaScript連動スタイル
======================================== */

.header.scrolled {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
}

.fade-up {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.75s ease,
        transform 0.4s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}


/* ========================================
   ログイン・認証ページ
======================================== */

.auth-page {
    min-height: 100vh;
    background: #f7f7f9;
}

.auth-header {
    position: relative;
    z-index: 20;
    height: 76px;
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid rgba(17, 17, 17, 0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.auth-header-inner {
    display: flex;
    width: min(calc(100% - 48px), var(--content-width));
    height: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #55555d;
    font-size: 14px;
    font-weight: 700;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.auth-back-link:hover {
    color: var(--color-main);
    transform: translateX(-4px);
}


/* ========================================
   ログインページ背景
======================================== */

.auth-main {
    position: relative;
    display: flex;
    min-height: calc(100vh - 76px);
    align-items: center;
    padding: 90px 24px;
    overflow: hidden;
}

.auth-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.auth-background::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4f2ff 48%,
            #f7f7f9 100%
        );
    content: "";
}

.auth-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(12px);
    opacity: 0.75;
    animation: auth-circle-floating 9s ease-in-out infinite;
}

.auth-circle-one {
    top: 5%;
    right: 8%;
    width: 430px;
    height: 430px;
    background: rgba(99, 91, 255, 0.14);
}

.auth-circle-two {
    bottom: -12%;
    left: -7%;
    width: 520px;
    height: 520px;
    background: rgba(80, 202, 255, 0.12);
    animation-delay: -3s;
}

.auth-circle-three {
    top: 45%;
    left: 45%;
    width: 260px;
    height: 260px;
    background: rgba(255, 123, 198, 0.12);
    animation-delay: -6s;
}


/* ========================================
   ログイン全体レイアウト
======================================== */

.auth-container {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(100%, 1120px);
    margin: 0 auto;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.82fr);
    gap: 90px;
}

.auth-introduction {
    max-width: 580px;
}

.auth-label {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    margin-bottom: 24px;
    padding: 0 16px;
    border: 1px solid rgba(99, 91, 255, 0.17);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-main);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    box-shadow: var(--shadow-small);
}

.auth-title {
    font-size: clamp(48px, 6vw, 76px);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -0.055em;
}

.auth-description {
    max-width: 540px;
    margin-top: 26px;
    color: var(--color-text-light);
    font-size: 17px;
    line-height: 1.9;
}


/* ========================================
   左側プロフィールプレビュー
======================================== */

.auth-preview-card {
    width: min(100%, 500px);
    margin-top: 42px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--shadow-medium);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: rotate(-2deg);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.auth-preview-card:hover {
    box-shadow: var(--shadow-large);
    transform: rotate(0deg) translateY(-5px);
}

.auth-preview-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.auth-preview-profile {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-preview-image {
    display: grid;
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    place-items: center;
    border: 4px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #675fff,
            #bd72ff
        );
    color: #ffffff;
    font-size: 23px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(99, 91, 255, 0.22);
}

.auth-preview-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.auth-preview-username {
    margin-top: 2px;
    color: var(--color-main);
    font-size: 12px;
    font-weight: 700;
}

.auth-preview-edit {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 0 15px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 999px;
    background: #ffffff;
    color: #55555d;
    font-size: 12px;
    font-weight: 700;
}

.auth-preview-bio {
    margin-top: 22px;
    color: #66666e;
    font-size: 13px;
    line-height: 1.8;
}

.auth-preview-links {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.auth-preview-link {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    color: #3f3f46;
    font-size: 12px;
    font-weight: 750;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
}


/* ========================================
   ログインカード
======================================== */

.auth-card {
    width: 100%;
    padding: 42px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-large);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.auth-card-heading {
    margin-bottom: 32px;
}

.auth-card-heading h2 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.auth-card-heading p {
    margin-top: 10px;
    color: var(--color-text-light);
    font-size: 14px;
    line-height: 1.8;
}


/* ========================================
   フォーム
======================================== */

.auth-form {
    display: grid;
    gap: 22px;
}

.form-group {
    display: grid;
    gap: 9px;
}

.form-group label {
    color: #2e2e34;
    font-size: 13px;
    font-weight: 750;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.forgot-password-link {
    color: var(--color-main);
    font-size: 12px;
    font-weight: 700;
}

.forgot-password-link:hover {
    text-decoration: underline;
}

.input-wrapper {
    position: relative;
    display: flex;
    min-height: 58px;
    align-items: center;
    border: 1px solid rgba(17, 17, 17, 0.11);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.94);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.input-wrapper:focus-within {
    border-color: var(--color-main);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.1);
}

.input-icon {
    display: grid;
    width: 52px;
    flex: 0 0 auto;
    place-items: center;
    color: #888891;
    font-size: 15px;
}

.input-wrapper input {
    width: 100%;
    height: 56px;
    min-width: 0;
    padding: 0 15px 0 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-black);
    font-size: 15px;
}

.input-wrapper input::placeholder {
    color: #aaaab2;
}

.password-toggle {
    flex: 0 0 auto;
    margin-right: 8px;
    padding: 8px 11px;
    border-radius: 10px;
    background: transparent;
    color: var(--color-main);
    font-size: 12px;
    font-weight: 750;
}

.password-toggle:hover {
    background: var(--color-main-light);
}

.form-error {
    min-height: 18px;
    color: #d54444;
    font-size: 12px;
    line-height: 1.5;
}


/* ========================================
   ログイン保持
======================================== */

.remember-login {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    color: #55555d;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.remember-login input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.custom-checkbox {
    position: relative;
    display: grid;
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(17, 17, 17, 0.2);
    border-radius: 7px;
    background: #ffffff;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.remember-login input:checked + .custom-checkbox {
    border-color: var(--color-main);
    background: var(--color-main);
    box-shadow: 0 6px 16px rgba(99, 91, 255, 0.23);
}

.remember-login input:checked + .custom-checkbox::after {
    width: 5px;
    height: 9px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    content: "";
    transform: rotate(45deg) translate(-1px, -1px);
}

.remember-login input:focus-visible + .custom-checkbox {
    box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.12);
}


/* ========================================
   ログインボタン
======================================== */

.auth-submit-button {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 2px;
    border-radius: 999px;
    background: var(--color-black);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.17);
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.auth-submit-button:hover {
    background: var(--color-main);
    box-shadow: 0 20px 40px rgba(99, 91, 255, 0.28);
    transform: translateY(-3px);
}

.auth-submit-button:active {
    transform: translateY(-1px);
}

.auth-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0;
    color: #9999a1;
    font-size: 12px;
}

.auth-divider::before {
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(17, 17, 17, 0.08);
    content: "";
}

.auth-divider span {
    position: relative;
    z-index: 2;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.94);
}

.auth-register-text {
    color: #66666e;
    text-align: center;
    font-size: 13px;
}

.auth-register-text a {
    margin-left: 7px;
    color: var(--color-main);
    font-weight: 800;
}

.auth-register-text a:hover {
    text-decoration: underline;
}

.auth-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
    color: #9999a2;
    font-size: 11px;
}


/* ========================================
   認証ページフッター
======================================== */

.auth-footer {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 max(24px, calc((100vw - var(--content-width)) / 2));
    border-top: 1px solid rgba(17, 17, 17, 0.07);
    background: #ffffff;
    color: #92929a;
    font-size: 12px;
}

.auth-footer-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.auth-footer-links a {
    transition: color 0.25s ease;
}

.auth-footer-links a:hover {
    color: var(--color-main);
}


/* ========================================
   エラー・成功表示
======================================== */

.input-wrapper.error {
    border-color: #d54444;
    box-shadow: 0 0 0 4px rgba(213, 68, 68, 0.08);
}

.input-wrapper.success {
    border-color: #2ca46f;
    box-shadow: 0 0 0 4px rgba(44, 164, 111, 0.08);
}

.auth-message {
    display: none;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.7;
}

.auth-message.show {
    display: block;
}

.auth-message.error {
    border: 1px solid rgba(213, 68, 68, 0.16);
    background: rgba(213, 68, 68, 0.08);
    color: #b72f2f;
}

.auth-message.success {
    border: 1px solid rgba(44, 164, 111, 0.16);
    background: rgba(44, 164, 111, 0.08);
    color: #208356;
}


/* ========================================
   ログインページアニメーション
======================================== */

@keyframes auth-circle-floating {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -25px, 0) scale(1.04);
    }
}


/* ========================================
   ログインページ タブレット対応
======================================== */

@media (max-width: 980px) {
    .auth-container {
        grid-template-columns: 1fr 420px;
        gap: 45px;
    }

    .auth-preview-card {
        padding: 24px;
    }

    .auth-card {
        padding: 34px;
    }
}


/* ========================================
   ログインページ スマホ対応
======================================== */

@media (max-width: 820px) {
    .auth-header {
        height: 68px;
    }

    .auth-header-inner {
        width: min(calc(100% - 32px), var(--content-width));
    }

    .auth-back-link {
        font-size: 0;
    }

    .auth-back-link span {
        font-size: 21px;
    }

    .auth-main {
        min-height: calc(100vh - 68px);
        padding: 64px 20px;
    }

    .auth-container {
        display: flex;
        flex-direction: column;
        gap: 42px;
    }

    .auth-introduction {
        max-width: 620px;
        text-align: center;
    }

    .auth-label {
        margin-right: auto;
        margin-left: auto;
    }

    .auth-description {
        margin-right: auto;
        margin-left: auto;
    }

    .auth-preview-card {
        display: none;
    }

    .auth-card {
        width: min(100%, 520px);
    }
}


/* ========================================
   ログインページ 小さいスマホ対応
======================================== */

@media (max-width: 520px) {
    .auth-main {
        padding: 48px 16px;
    }

    .auth-title {
        font-size: 42px;
    }

    .auth-description {
        font-size: 15px;
    }

    .auth-card {
        padding: 28px 22px;
        border-radius: 25px;
    }

    .auth-card-heading h2 {
        font-size: 28px;
    }

    .form-label-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .input-wrapper {
        min-height: 55px;
    }

    .input-wrapper input {
        height: 53px;
        font-size: 14px;
    }

    .auth-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px 20px;
    }

    .auth-footer-links {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}


/* ========================================
   新規登録ページ 特徴リスト
======================================== */

.register-benefits {
    display: grid;
    gap: 28px;
    margin-top: 44px;
}

.register-benefit {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    text-align: left;
}

.register-benefit-number {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-main-light);
    color: var(--color-main);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.register-benefit h2 {
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.register-benefit p {
    color: var(--color-text-light);
    font-size: 13px;
    line-height: 1.8;
}


/* ========================================
   ユーザー名入力・使用確認
======================================== */

.username-input-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.username-input-wrapper {
    flex: 1;
    min-width: 0;
}

.username-check-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid rgba(17, 17, 17, 0.11);
    border-radius: 17px;
    background: #ffffff;
    color: #2e2e34;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.username-check-button:hover {
    border-color: var(--color-main);
    color: var(--color-main);
}

.username-check-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.username-check-button.checked {
    border-color: rgba(44, 164, 111, 0.35);
    background: rgba(44, 164, 111, 0.08);
    color: #208356;
}

.form-help {
    color: var(--color-text-light);
    font-size: 12px;
    line-height: 1.6;
}

.form-success {
    min-height: 18px;
    color: #2ca46f;
    font-size: 12px;
    line-height: 1.5;
}


/* ========================================
   パスワード強度表示
======================================== */

.password-strength {
    display: grid;
    gap: 8px;
    margin-top: 2px;
}

.password-strength-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.password-strength-bars span {
    height: 4px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.08);
    transition: background 0.25s ease;
}

#password-strength-text {
    color: var(--color-text-light);
    font-size: 12px;
    line-height: 1.6;
    transition: color 0.25s ease;
}

.password-strength.level-weak .password-strength-bars span.active {
    background: #d54444;
}

.password-strength.level-weak #password-strength-text {
    color: #d54444;
}

.password-strength.level-fair .password-strength-bars span.active {
    background: #e08a3c;
}

.password-strength.level-fair #password-strength-text {
    color: #c97a2f;
}

.password-strength.level-strong .password-strength-bars span.active {
    background: var(--color-main);
}

.password-strength.level-strong #password-strength-text {
    color: var(--color-main);
}

.password-strength.level-very-strong .password-strength-bars span.active {
    background: #2ca46f;
}

.password-strength.level-very-strong #password-strength-text {
    color: #208356;
}


/* ========================================
   規約同意エリア
======================================== */

.register-agreement {
    width: 100%;
    align-items: flex-start;
    gap: 12px;
}

.register-agreement .custom-checkbox {
    margin-top: 2px;
}

.register-agreement a {
    color: var(--color-main);
    font-weight: 700;
}

.register-agreement a:hover {
    text-decoration: underline;
}


/* ========================================
   新規登録ページ スマホ対応
======================================== */

@media (max-width: 480px) {
    .username-input-row {
        flex-direction: column;
    }

    .username-check-button {
        width: 100%;
        min-height: 46px;
    }
}


/* ========================================
   特徴カードのホバー表示

   .fade-up.show の transform より後に指定し、
   スクロールアニメーション後も浮き上がるようにする。
======================================== */

@media (hover: hover) and (pointer: fine) {
    .feature-card.fade-up.show:hover {
        border-color: rgba(99, 91, 255, 0.24);
        box-shadow: 0 24px 58px rgba(99, 91, 255, 0.14);
        transform: translateY(-10px);
    }
}

/* ========================================
   公開プロフィールページ
======================================== */

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

.public-profile-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 5%, color-mix(in srgb, var(--profile-theme) 22%, transparent), transparent 36%),
        radial-gradient(circle at 85% 90%, rgba(109, 205, 255, 0.2), transparent 38%),
        #f5f5f8;
}

.public-profile-shell {
    width: 100%;
    min-height: 100vh;
    padding: 42px 18px;
}

.public-profile-card {
    position: relative;
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 24px 24px 30px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 36px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 28px 80px rgba(38, 35, 70, 0.15);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.public-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.profile-action-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #34343b;
    font-size: 13px;
    font-weight: 750;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.profile-qr-open {
    width: 42px;
    padding: 0;
}

@media (max-width: 520px) {
    .public-profile-actions { gap: 6px; }
    .profile-action-button { padding: 0 11px; font-size: 12px; }
    .profile-settings-link { width: 42px; padding: 0; font-size: 0; }
    .profile-settings-link span { font-size: 16px; }
}

.profile-action-button:hover {
    box-shadow: 0 13px 28px rgba(99, 91, 255, 0.15);
    transform: translateY(-3px);
}

/* ========================================
   マイページ・プロフィール交換・メッセージ
======================================== */

.profile-community-panel { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 4px 28px; padding:18px; border:1px solid color-mix(in srgb,var(--profile-theme) 22%,#e8e8ee); border-radius:22px; background:color-mix(in srgb,var(--profile-theme) 5%,#fff); }
.profile-community-panel[hidden] { display:none; }
.community-primary-button,.community-secondary-button,.community-text-button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:0 20px; border:0; border-radius:999px; font:inherit; font-size:13px; font-weight:800; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease; }
.community-primary-button { background:#635bff; color:#fff; box-shadow:0 12px 28px rgba(99,91,255,.22); }
.community-secondary-button { border:1px solid #e5e5eb; background:#fff; color:#25252b; }
.community-soft-button { border-color:#dcd9ff; background:#f0efff; color:#5149df; box-shadow:0 10px 24px rgba(99,91,255,.08); }
.community-soft-button:hover { border-color:#c9c5ff; background:#e9e7ff; box-shadow:0 14px 30px rgba(99,91,255,.14); }
.community-text-button { min-height:40px; background:#f2f2f5; color:#55555d; }
.community-primary-button:hover,.community-secondary-button:hover { transform:translateY(-2px); }
.community-primary-button:disabled,.community-secondary-button:disabled { cursor:wait; opacity:.55; transform:none; }
.community-action-status { grid-column:1/-1; min-height:18px; margin:0; color:#777780; font-size:12px; text-align:center; }
.community-action-status.success,.community-page-status.success { color:#21865a; }
.community-action-status.error,.community-page-status.error { color:#c83e3e; }
.profile-community-panel.is-receive-mode {
    border-color: color-mix(in srgb, var(--profile-theme) 58%, #ffffff);
    box-shadow: 0 16px 38px color-mix(in srgb, var(--profile-theme) 18%, transparent);
}
.community-action-status.receive-mode {
    color: var(--profile-theme);
    font-weight: 700;
}
.community-receive-active {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(99, 91, 255, 0.09);
    color: #5148db;
    font-size: 13px;
    font-weight: 700;
}

.community-page { min-height:100vh; background:linear-gradient(135deg,#f6f4ff 0%,#f7f7f9 55%,#eef8ff 100%); color:#111114; }
.community-header { position:sticky; top:0; z-index:20; display:flex; min-height:76px; align-items:center; justify-content:space-between; gap:20px; padding:0 max(24px,calc((100vw - 1180px)/2)); border-bottom:1px solid rgba(17,17,20,.07); background:rgba(255,255,255,.88); backdrop-filter:blur(18px); }
.community-back-link { color:#55555d; font-size:13px; font-weight:750; }
.community-main { width:min(calc(100% - 40px),1180px); margin:0 auto; padding:68px 0 100px; }
.community-hero { display:flex; align-items:stretch; flex-direction:column; gap:28px; margin-bottom:28px; padding:38px; border:1px solid rgba(17,17,20,.06); border-radius:30px; background:rgba(255,255,255,.9); box-shadow:0 24px 60px rgba(24,24,40,.07); }
.community-hero-copy { min-width:0; }
.community-hero h1 { display:flex; flex-wrap:wrap; gap:0 .22em; margin-top:10px; font-size:clamp(34px,4.3vw,54px); line-height:1.15; letter-spacing:-.05em; }
.mypage-title-owner,.mypage-title-label { white-space:nowrap; }
.community-hero>div>p:last-child { max-width:680px; margin-top:16px; color:#777780; line-height:1.8; }
.community-hero-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding-top:25px; border-top:1px solid #ededf1; }
.community-hero-actions .community-primary-button { grid-column:auto; min-height:52px; }
.community-page-status { min-height:22px; margin:0 0 14px; color:#635bff; font-size:13px; font-weight:700; }
.community-section { margin-top:24px; padding:34px; border:1px solid rgba(17,17,20,.06); border-radius:30px; background:rgba(255,255,255,.9); box-shadow:0 24px 60px rgba(24,24,40,.07); }
.community-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.community-section-heading h2 { margin-top:6px; font-size:26px; letter-spacing:-.035em; }
.community-count { display:grid; width:40px; height:40px; place-items:center; border-radius:50%; background:#f0efff; color:#635bff; font-weight:850; }
.community-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.community-profile-search { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:20px; padding:0 15px; border:1px solid #dedee6; border-radius:17px; background:#fff; transition:border-color .2s ease,box-shadow .2s ease; }
.community-profile-search:focus-within { border-color:#635bff; box-shadow:0 0 0 4px rgba(99,91,255,.09); }
.community-search-icon { color:#777781; font-size:20px; }
.community-profile-search input { width:100%; height:54px; border:0; outline:0; background:transparent; color:#202025; font:inherit; font-size:14px; }
.community-profile-search input::placeholder { color:#a0a0a9; }
.community-profile-search button { display:grid; width:30px; height:30px; place-items:center; border:0; border-radius:50%; background:#f1f1f5; color:#777781; font-size:17px; cursor:pointer; }
.community-person-card[hidden] { display:none; }
.community-library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.community-library-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:16px; min-height:110px; padding:22px; border:1px solid #e8e8ee; border-radius:22px; background:#fff; box-shadow:0 14px 35px rgba(24,24,40,.05); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.community-library-card:hover { transform:translateY(-4px); border-color:rgba(99,91,255,.3); box-shadow:0 22px 44px rgba(24,24,40,.1); }
.community-library-icon { display:grid; width:48px; height:48px; place-items:center; border-radius:15px; background:var(--color-main-light); color:var(--color-main); font-size:20px; font-weight:900; }
.community-library-copy { display:grid; gap:5px; min-width:0; }
.community-library-copy strong { color:#17171b; font-size:17px; }
.community-library-copy small { color:#888892; font-size:12px; line-height:1.55; }
.community-library-arrow { color:#8d8d98; font-size:20px; }
.community-list-main { padding-top:38px; }
.community-list-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding:30px 34px; border:1px solid rgba(17,17,20,.06); border-radius:30px; background:rgba(255,255,255,.9); box-shadow:0 24px 60px rgba(24,24,40,.07); }
.community-list-hero h1 { margin-top:7px; font-size:clamp(34px,5vw,56px); letter-spacing:-.05em; }
.community-list-hero p:not(.section-label) { margin-top:12px; color:#777780; line-height:1.8; }
.community-person-card { display:grid; grid-template-columns:58px minmax(0,1fr); gap:14px; align-items:center; padding:18px; border:1px solid #e9e9ee; border-radius:22px; background:#fff; box-shadow:0 10px 26px rgba(20,20,32,.04); }
.community-avatar { display:grid; width:58px; height:58px; flex:0 0 auto; place-items:center; overflow:hidden; border-radius:50%; background:linear-gradient(135deg,#635bff,#b86fff); color:#fff; font-size:20px; font-weight:850; }
.community-avatar img { width:100%; height:100%; object-fit:cover; }
.community-person-copy { min-width:0; }
.community-person-copy .community-saved-date { display:block; margin-top:7px; color:#8a8a95; font-size:10px; font-weight:750; }
.community-person-copy h3 { overflow:hidden; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
.community-person-copy p,.community-person-copy small { display:block; overflow:hidden; margin-top:4px; color:#85858e; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.community-connected-badge,.community-saved-badge { display:inline-flex; width:max-content; margin-top:9px; padding:5px 9px; border-radius:999px; background:#e9f9f0; color:#20875a; font-size:9px; font-weight:800; }
.community-saved-badge { background:#f0efff; color:#635bff; }
.community-person-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; padding-top:4px; }
.community-person-actions a,.community-person-actions button { display:inline-flex; min-height:36px; align-items:center; justify-content:center; padding:0 13px; border:1px solid #e5e5eb; border-radius:999px; background:#fff; color:#46464d; font-size:10px; font-weight:800; cursor:pointer; }
.community-person-actions .primary,.community-person-actions button:not(.danger) { border-color:#635bff; background:#635bff; color:#fff; }
.community-person-actions .danger { margin-left:auto; color:#b24a4a; }
.community-empty { margin:24px 0 4px; color:#9999a1; font-size:13px; text-align:center; }
.community-empty[hidden] { display:none; }
.community-receive-panel { text-align:center; }
.community-receive-panel>p { color:#6f6f78; font-size:14px; line-height:1.8; }
.community-tap-visual { display:flex; width:150px; height:150px; align-items:center; justify-content:center; gap:12px; margin:25px auto; border-radius:50%; background:linear-gradient(135deg,#f0efff,#eaf8ff); color:#635bff; }
.community-tap-visual span { font-size:58px; }.community-tap-visual i { font-size:24px; font-style:normal; }
.community-modal-note { margin-top:12px; font-size:11px!important; }

.chat-main { display:grid; min-height:calc(100vh - 76px); place-items:center; padding:28px 20px; }
.chat-shell { display:grid; grid-template-rows:auto minmax(300px,1fr) auto auto; width:min(100%,760px); height:min(780px,calc(100vh - 132px)); overflow:hidden; border:1px solid rgba(17,17,20,.07); border-radius:28px; background:#fff; box-shadow:0 30px 80px rgba(22,22,35,.12); }
.chat-partner { display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid #ececf0; }
.chat-partner .community-avatar { width:46px; height:46px; }
.chat-partner h1 { font-size:17px; }.chat-partner a { display:block; margin-top:4px; color:#635bff; font-size:10px; font-weight:750; }
.chat-messages { display:flex; overflow-y:auto; flex-direction:column; gap:10px; padding:24px; background:#f7f7fa; }
.chat-message { width:fit-content; max-width:76%; }.chat-message p { padding:11px 14px; border-radius:17px; background:#fff; color:#292930; font-size:14px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; box-shadow:0 4px 14px rgba(0,0,0,.04); }
.chat-message.is-short p { padding-right:8px; padding-left:8px; }
.chat-message.mine { align-self:flex-end; }.chat-message.mine p { border-bottom-right-radius:5px; background:#635bff; color:#fff; }.chat-message.theirs p { border-bottom-left-radius:5px; }
.chat-message small { display:block; margin-top:4px; color:#9999a1; font-size:9px; }.chat-message.mine small { text-align:right; }
.chat-empty { margin:auto; color:#9999a1; font-size:13px; }
.chat-shell>.community-page-status { margin:0; padding:4px 22px; }
.chat-form { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; padding:14px; border-top:1px solid #ececf0; }
.chat-form textarea { width:100%; max-height:120px; resize:vertical; padding:13px 15px; border:1px solid #dedee5; border-radius:17px; outline:none; font:inherit; font-size:14px; }.chat-form textarea:focus { border-color:#635bff; box-shadow:0 0 0 4px rgba(99,91,255,.09); }

.messages-list-section { margin-top:22px; }
.messages-list { display:grid; gap:12px; }
.message-thread-card { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:15px; padding:17px 18px; border:1px solid #e8e8ee; border-radius:21px; background:#fff; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.message-thread-card:hover { transform:translateY(-3px); border-color:rgba(99,91,255,.28); box-shadow:0 16px 34px rgba(25,25,40,.08); }
.message-thread-card.has-unread { border-color:rgba(99,91,255,.24); background:linear-gradient(135deg,#fff,#f8f7ff); }
.message-thread-copy { display:grid; min-width:0; gap:3px; }
.message-thread-copy strong { overflow:hidden; color:#1d1d22; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.message-thread-copy small { color:#8e8e98; font-size:10px; }
.message-thread-copy>span { overflow:hidden; margin-top:4px; color:#6f6f79; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.message-thread-meta { display:grid; min-width:48px; justify-items:end; gap:8px; }
.message-thread-meta time { color:#9999a2; font-size:9px; }
.message-thread-meta b { display:grid; min-width:22px; height:22px; padding:0 6px; place-items:center; border-radius:999px; background:#635bff; color:#fff; font-size:10px; }
.message-thread-meta i { color:#94949e; font-style:normal; }
.community-message-card .community-library-icon { background:#eeecff; }

@media(max-width:760px){
    body[data-community-page="chat"] { height:100vh; height:100dvh; overflow:hidden; }
    .profile-community-panel { grid-template-columns:1fr; }.community-action-status { grid-column:auto; }
    .community-header { min-height:66px; padding:0 16px; }.community-header .logo-text { display:none; }
    .community-main { width:min(calc(100% - 24px),1180px); padding:42px 0 70px; }
    .community-hero { gap:22px; padding:26px 18px; border-radius:24px; }.community-hero h1 { font-size:clamp(31px,9vw,44px); }.community-hero-actions { grid-template-columns:1fr 1fr; padding-top:20px; }
    .community-section { padding:23px 15px; border-radius:24px; }.community-card-grid,.community-library-grid { grid-template-columns:1fr; }
    .community-list-main { padding-top:22px; }.community-list-hero { align-items:flex-start; flex-direction:column; padding:25px 20px; border-radius:24px; }.community-list-hero .community-secondary-button { width:100%; }
    .message-thread-card { grid-template-columns:50px minmax(0,1fr) auto; gap:12px; padding:15px 13px; }.message-thread-card .community-avatar { width:50px; height:50px; }.message-thread-meta time { display:none; }
    .community-person-card { padding:15px; }.community-person-actions .danger { margin-left:0; }
    .chat-main { min-height:0; height:calc(100vh - 66px); height:calc(100dvh - 66px); padding:0; overflow:hidden; }.chat-shell { width:100%; height:100%; min-height:0; border:0; border-radius:0; }.chat-messages { min-height:0; padding:18px 14px; }.chat-message { max-width:86%; }.chat-form { grid-template-columns:minmax(0,1fr) auto; padding:10px; padding-bottom:max(10px,env(safe-area-inset-bottom)); background:#fff; }.chat-form textarea { min-width:0; resize:none; }.chat-form .community-primary-button { min-height:46px; padding:0 16px; }
}

@media(max-width:480px){
    .community-hero-actions { grid-template-columns:1fr; }
}

.public-profile-header {
    padding: 14px 18px 8px;
    text-align: center;
}

.public-profile-avatar {
    display: grid;
    width: 122px;
    height: 122px;
    margin: 0 auto 18px;
    place-items: center;
    border: 6px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--profile-theme), #bd73ff);
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--profile-theme) 28%, transparent);
}
.public-profile-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}
.profile-additional-links { display:contents; }

[data-social="line"] { order: 10; }
[data-social="instagram"] { order: 20; }
[data-social="tiktok"] { order: 30; }
[data-social="x"] { order: 40; }
[data-social="youtube"] { order: 50; }
[data-social="threads"] { order: 60; }
[data-social="facebook"] { order: 70; }
[data-default-extra] { order: 6; }
#profile-additional-socials .public-profile-link { order: 60; }

#profile-edit-form input[name="line"] { order: 1; }
#profile-edit-form label:has(input[name="line"]) { order: 1; }
#profile-edit-form label:has(input[name="instagram"]) { order: 2; }
#profile-edit-form label:has(input[name="tiktok"]) { order: 3; }
#profile-edit-form label:has(input[name="x"]) { order: 4; }
#profile-edit-form label:has(input[name="youtube"]) { order: 5; }
#profile-edit-form label:has(input[name="threads"]) { order: 6; }
#profile-edit-form label:has(input[name="facebook"]) { order: 7; }

.public-profile-header h1 {
    font-size: 31px;
    line-height: 1.25;
    letter-spacing: -0.04em;
}

.public-profile-furigana {
    margin-top: 4px;
    color: #96969e;
    font-size: 11px;
}

.public-profile-work {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 12px;
    margin-top: 12px;
    color: #55555d;
    font-size: 13px;
    font-weight: 700;
}

.public-profile-work[hidden],
.public-profile-work p[hidden] {
    display: none;
}

.public-profile-username {
    margin-top: 8px;
    color: var(--profile-theme);
    font-size: 14px;
    font-weight: 750;
}

.public-profile-bio {
    max-width: 390px;
    margin: 20px auto 0;
    color: #5f5f67;
    font-size: 14px;
    line-height: 1.85;
}

.profile-section {
    margin-top: 28px;
}

.profile-section-title {
    margin: 0 4px 10px;
    color: #8c8c94;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.public-profile-links {
    display: grid;
    gap: 11px;
}

.public-profile-link,
.profile-business-card-link {
    display: flex;
    min-height: 66px;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 9px 25px rgba(22, 20, 46, 0.055);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.profile-business-card-preview {
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 20px;
    background: #f3f3f6;
    box-shadow: 0 12px 30px rgba(22, 20, 46, 0.07);
}

.profile-business-card-preview > img,
.profile-business-card-preview > iframe {
    display: block;
    width: 100%;
    border: 0;
}

.profile-business-card-preview > img {
    height: auto;
}

.profile-business-card-preview > iframe {
    min-height: 430px;
    background: #fff;
}

.profile-business-card-sample {
    display: flex;
    aspect-ratio: 91 / 55;
    justify-content: space-between;
    flex-direction: column;
    padding: clamp(24px, 6vw, 42px);
    background: linear-gradient(145deg, #25252b, #0d0d10);
    color: #fff;
}

.profile-business-card-sample div {
    display: grid;
    gap: 5px;
}

.profile-business-card-sample strong {
    font-size: clamp(22px, 5vw, 34px);
}

.profile-business-card-sample b {
    font-size: clamp(13px, 3vw, 18px);
}

.profile-business-card-sample span {
    color: rgba(255, 255, 255, 0.62);
    font-size: clamp(9px, 2.2vw, 12px);
}

.profile-business-card-open {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 10px;
    padding: 0 5px;
    color: #777780;
    font-size: 11px;
    font-weight: 700;
}

.profile-business-card-open:hover {
    color: var(--profile-theme);
}

.profile-business-card-open[hidden] {
    display: none;
}

.public-profile-link:hover,
.profile-business-card-link:hover {
    border-color: color-mix(in srgb, var(--profile-theme) 28%, transparent);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--profile-theme) 13%, transparent);
    transform: translateY(-4px);
}

.profile-link-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    background: color-mix(in srgb, var(--profile-theme) 11%, white);
    color: var(--profile-theme);
    font-size: 17px;
    font-weight: 800;
}

.profile-link-icon.contact-icon::before { width:20px; height:20px; background:currentColor; content:""; -webkit-mask:var(--contact-icon) center / contain no-repeat; mask:var(--contact-icon) center / contain no-repeat; }
.profile-link-icon.phone-icon { --contact-icon:url("assets/icons/phone.svg"); }
.profile-link-icon.email-icon { --contact-icon:url("assets/icons/email.svg"); }
.profile-link-icon.fax-icon { --contact-icon:url("assets/icons/fax.svg"); }
.profile-link-icon.location-icon { --contact-icon:url("assets/icons/location.svg"); }
.public-profile-link[href^="mailto:"] .profile-link-icon.contact-icon::before { width:22px; height:22px; }

body.phone-action-open { overflow:hidden; }
.phone-action-sheet[hidden] { display:none; }
.phone-action-sheet { position:fixed; z-index:3000; inset:0; display:grid; align-items:end; }
.phone-action-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(15,15,22,.44); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.phone-action-panel { position:relative; width:min(calc(100% - 24px),460px); margin:0 auto 12px; padding:10px 16px max(16px,env(safe-area-inset-bottom)); border:1px solid rgba(255,255,255,.75); border-radius:28px; background:rgba(255,255,255,.96); box-shadow:0 25px 80px rgba(15,15,25,.24); text-align:center; }
.phone-action-handle { width:42px; height:5px; margin:0 auto 16px; border-radius:999px; background:#d8d8df; }
.phone-action-panel>p { color:#94949d; font-size:11px; font-weight:800; letter-spacing:.08em; }
.phone-action-panel>h2 { margin:5px 0 18px; font-size:20px; letter-spacing:.01em; }
.phone-action-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.phone-action-buttons a { display:grid; min-height:92px; place-items:center; align-content:center; gap:8px; border:1px solid #e6e6ec; border-radius:20px; background:#fafafd; color:#25252b; font-size:13px; }
.phone-action-buttons a:hover { border-color:color-mix(in srgb,var(--profile-theme,#635bff) 25%,#e6e6ec); background:color-mix(in srgb,var(--profile-theme,#635bff) 6%,white); }
.phone-action-buttons .profile-link-icon { width:38px; height:38px; border-radius:12px; }
.phone-action-sms-icon { position:relative; display:block; width:38px; height:38px; border-radius:12px; background:color-mix(in srgb,var(--profile-theme,#635bff) 11%,white); }
.phone-action-sms-icon::before { position:absolute; inset:9px 8px 10px; border:2px solid var(--profile-theme,#635bff); border-radius:7px; content:""; }
.phone-action-sms-icon::after { position:absolute; left:11px; bottom:7px; width:7px; height:7px; border-bottom:2px solid var(--profile-theme,#635bff); content:""; transform:rotate(-35deg); }
.phone-action-cancel { width:100%; min-height:48px; margin-top:10px; border:0; border-radius:16px; background:#f0f0f4; color:#55555e; font-weight:800; cursor:pointer; }

.social-facebook { background: #edf3ff; color: #1877f2; }
.social-youtube { background: #fff0f0; color: #ff0033; }
.social-tiktok { background: #f0f0f2; color: #111; }
.social-instagram { background: #fff0f7; color: #d62976; }

.profile-link-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.profile-link-copy strong {
    color: #303037;
    font-size: 14px;
}

.profile-link-copy small {
    overflow: hidden;
    color: #919199;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-link-arrow {
    margin-left: auto;
    color: #a0a0a8;
    transition: transform 0.25s ease;
}

.public-profile-link:hover .profile-link-arrow,
.profile-business-card-link:hover .profile-link-arrow {
    transform: translateX(4px);
}

.public-profile-footer {
    padding: 36px 0 4px;
}

.public-profile-footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #8e8e96;
    font-size: 12px;
    font-weight: 700;
}

.public-profile-footer .logo-mark {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 13px;
}

/* QRモーダル */
.profile-modal[hidden] { display: none; }

.profile-modal {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.profile-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 13, 17, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.profile-modal-panel {
    position: relative;
    z-index: 2;
    width: min(100%, 390px);
    padding: 34px;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.profile-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #f1f1f4;
    color: #55555d;
    font-size: 23px;
}

.profile-modal-label {
    color: var(--profile-theme);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.profile-modal-panel h2 {
    margin-top: 7px;
    font-size: 27px;
}

.profile-qr-placeholder {
    display: grid;
    width: 210px;
    height: 210px;
    margin: 24px auto 17px;
    place-items: center;
    padding: 14px;
    outline: 1px solid #e3e3e8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
}

.profile-qr-placeholder img,
.profile-qr-placeholder canvas { display:block; width:100% !important; height:100% !important; }

.profile-qr-url {
    overflow-wrap: anywhere;
    color: #777780;
    font-size: 12px;
}

.profile-copy-button {
    width: 100%;
    min-height: 50px;
    margin-top: 18px;
    border-radius: 999px;
    background: var(--profile-theme);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.profile-download-button {
    width: 100%;
    min-height: 50px;
    margin-top: 10px;
    border: 1px solid color-mix(in srgb, var(--profile-theme) 25%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--profile-theme) 8%, white);
    color: var(--profile-theme);
    font-size: 14px;
    font-weight: 800;
}

.profile-copy-status {
    min-height: 19px;
    margin-top: 8px;
    color: #25835a;
    font-size: 12px;
}

body.profile-modal-open { overflow: hidden; }

/* PC用：横長プロフィール */
@media (min-width: 900px) {
    .public-profile-shell {
        display: grid;
        min-height: 100vh;
        place-items: center;
        padding: 24px;
    }

    .public-profile-card {
        display: grid;
        width: min(100%, 1200px);
        min-height: min(760px, calc(100vh - 64px));
        padding: 42px 48px;
        grid-template-columns: minmax(300px, 0.75fr) minmax(520px, 1.4fr);
        grid-template-rows: auto auto 1fr auto;
        column-gap: 60px;
        border-radius: 42px;
    }

    .public-profile-card::before {
        position: absolute;
        top: 48px;
        bottom: 82px;
        left: 35.5%;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(17, 17, 17, 0.09) 12%, rgba(17, 17, 17, 0.09) 88%, transparent);
        content: "";
    }

    .public-profile-actions {
        position: absolute;
        z-index: 3;
        top: 26px;
        right: 28px;
    }

    .public-profile-header {
        display: flex;
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: center;
        flex-direction: column;
        justify-content: center;
        padding: 42px 38px 42px 8px;
    }

    .profile-community-panel {
        grid-column: 1;
        grid-row: 4;
        align-self: start;
        margin: 0 38px 0 8px;
    }

    .public-profile-avatar {
        width: 160px;
        height: 160px;
        margin-bottom: 25px;
        font-size: 57px;
    }

    .public-profile-header h1 { font-size: 39px; }
    .public-profile-bio {
        max-width: 430px;
        font-size: 16px;
    }

    .profile-section {
        grid-column: 2;
        margin-top: 0;
    }

    .profile-business-card {
        grid-row: 1;
        margin-top: 40px;
    }

    .profile-section + .profile-section { margin-top: 24px; }

    .public-profile-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-business-card-link { min-height: 78px; }

    .public-profile-link {
        min-height: 72px;
        padding: 12px 18px;
    }

    .public-profile-footer {
        grid-column: 1 / -1;
        padding: 34px 0 0;
    }
}

@media (max-width: 560px) {
    .public-profile-shell { padding: 0; }
    .public-profile-card {
        min-height: 100vh;
        padding: 18px 16px 26px;
        border: 0;
        border-radius: 0;
    }
    .public-profile-header { padding-right: 8px; padding-left: 8px; }
    .profile-modal-panel { padding: 32px 22px 26px; }
}

/* プロフィール編集 */
.profile-edit-page { background:#f5f5f8; }
.edit-header { position:sticky; z-index:100; top:0; height:72px; border-bottom:1px solid rgba(17,17,17,.07); background:rgba(255,255,255,.88); backdrop-filter:blur(20px); }
.edit-header-inner { display:flex; width:min(calc(100% - 40px),1100px); height:100%; margin:auto; align-items:center; justify-content:space-between; }
.edit-preview-link { color:var(--color-main); font-size:13px; font-weight:750; }
.edit-main { width:min(calc(100% - 40px),900px); margin:auto; padding:70px 0 100px; }
.edit-heading { margin-bottom:38px; }
.edit-heading h1 { font-size:clamp(36px,5vw,56px); letter-spacing:-.045em; }
.edit-heading > p:last-child { margin-top:12px; color:var(--color-text-light); }
.edit-form { display:grid; gap:22px; }
.edit-panel { padding:34px; border:1px solid rgba(17,17,17,.07); border-radius:26px; background:#fff; box-shadow:0 12px 36px rgba(0,0,0,.045); }
.edit-panel-heading { display:flex; align-items:flex-start; gap:15px; margin-bottom:28px; }
.edit-panel-heading > span { display:grid; width:40px; height:40px; flex:0 0 auto; place-items:center; border-radius:12px; background:var(--color-main-light); color:var(--color-main); font-size:12px; font-weight:850; }
.edit-panel-heading h2 { font-size:22px; letter-spacing:-.03em; }
.edit-panel-heading p { margin-top:3px; color:#8c8c94; font-size:13px; }
.edit-avatar-row { display:flex; align-items:center; gap:22px; margin-bottom:26px; }
.edit-avatar-preview { display:grid; width:92px; height:92px; flex:0 0 auto; place-items:center; overflow:hidden; border-radius:50%; background:linear-gradient(135deg,#635bff,#bd73ff); color:#fff; font-size:34px; font-weight:800; }
.edit-avatar-preview img { width:100%; height:100%; object-fit:cover; }
.visually-hidden-input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.edit-upload-button,.add-item-button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:0 18px; border-radius:999px; background:#ededf3; color:#46464e; font-size:13px; font-weight:750; cursor:pointer; }
.edit-help { margin-top:7px; color:#9898a0; font-size:11px; }
.edit-fields { display:grid; gap:18px; }
.edit-fields.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.edit-fields.three-columns { grid-template-columns:repeat(3,minmax(0,1fr)); }
.edit-field { display:grid; gap:8px; margin-top:18px; color:#35353c; font-size:13px; font-weight:750; }
.edit-field > span { display:flex; justify-content:space-between; }
.edit-field small { color:#9999a1; font-weight:500; }
.edit-field input,.edit-field textarea,.additional-item-row input,.additional-item-row select { width:100%; border:1px solid rgba(17,17,17,.11); border-radius:15px; outline:0; background:#fbfbfd; color:#222229; font-size:14px; font-weight:400; transition:.2s; }
.edit-field input { height:54px; padding:0 16px; }
.edit-field textarea { padding:14px 16px; resize:vertical; }
.edit-field input:focus,.edit-field textarea:focus,.additional-item-row input:focus,.additional-item-row select:focus { border-color:var(--color-main); box-shadow:0 0 0 4px rgba(99,91,255,.09); background:#fff; }
.theme-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.theme-options label { display:flex; min-height:76px; align-items:center; justify-content:center; flex-direction:column; gap:7px; border:1px solid rgba(17,17,17,.08); border-radius:16px; color:#66666e; font-size:11px; cursor:pointer; }
.theme-options input { position:absolute; opacity:0; }
.theme-options label > span { width:28px; height:28px; border-radius:50%; background:var(--swatch); }
.theme-options label:has(input:checked) { border-color:var(--profile-theme,var(--color-main)); box-shadow:0 0 0 3px rgba(99,91,255,.08); }
.edit-dropzone { display:flex; min-height:130px; align-items:center; justify-content:center; flex-direction:column; gap:5px; border:2px dashed rgba(99,91,255,.23); border-radius:20px; background:#faf9ff; color:#494950; cursor:pointer; }
.edit-dropzone small { color:#96969e; font-size:11px; }
.add-item-button { width:100%; margin-top:8px; border:1px dashed rgba(99,91,255,.28); background:#faf9ff; color:var(--color-main); }
.additional-item-row { display:grid; grid-template-columns:140px 1fr 1.4fr 42px; gap:10px; margin-bottom:12px; }
.additional-category-items:not(:empty) { margin-top:20px; padding-top:18px; border-top:1px solid #ededf1; }
.additional-item-row[data-additional-group="sns"] { grid-template-columns:1fr 1.4fr 42px; }
.additional-item-row[data-additional-group="sns"] > .additional-item-type { display:none; }
.additional-item-label-slot { display:grid; gap:8px; min-width:0; }
.additional-item-row input,.additional-item-row select { height:48px; padding:0 12px; }
.remove-item-button { border-radius:12px; background:#fff0f0; color:#c94545; }
.edit-form-actions { display:flex; justify-content:flex-end; gap:12px; padding-top:8px; }
.edit-cancel-button,.edit-save-button { display:inline-flex; min-height:54px; align-items:center; justify-content:center; padding:0 28px; border-radius:999px; font-size:14px; font-weight:800; }
.edit-cancel-button { border:1px solid rgba(17,17,17,.1); background:#fff; }
.edit-save-button { background:var(--color-main); color:#fff; box-shadow:0 14px 30px rgba(99,91,255,.24); }
.edit-save-status { min-height:22px; color:#25835a; text-align:right; font-size:13px; }
.edit-save-status.error { color:#c43b3b; font-weight:700; }
@media (max-width:700px) { .edit-main { width:min(calc(100% - 24px),900px); padding:42px 0 80px; } .edit-panel { padding:24px 18px; } .edit-fields.two-columns,.edit-fields.three-columns,.theme-options { grid-template-columns:1fr; } .theme-options { grid-template-columns:repeat(2,1fr); } .additional-item-row { grid-template-columns:1fr 42px; } .additional-item-row input,.additional-item-row select,.additional-item-label-slot { grid-column:1; } .remove-item-button { grid-column:2; grid-row:1 / 4; } .edit-form-actions { flex-direction:column-reverse; } .edit-cancel-button,.edit-save-button { width:100%; } }
@media (max-width:700px) { .additional-item-row[data-additional-group="sns"] { grid-template-columns:1fr 42px; } }

/* 管理画面 */
.admin-page { min-height:100vh; background:#f4f4f7; }
.sales-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.sales-stats article { display:grid; gap:8px; padding:22px; border:1px solid rgba(17,17,17,.07); border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.04); }
.sales-stats span { color:#777780; font-size:11px; font-weight:800; }
.sales-stats strong { color:#24242a; font-size:clamp(24px,3vw,34px); letter-spacing:-.04em; }
.sales-stats small { color:#a0a0a8; font-size:9px; }
.sales-layout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:22px; }
.sales-chart-section { margin-bottom:22px; }
.sales-period-switch { display:flex; width:fit-content; gap:5px; margin-bottom:12px; padding:5px; border-radius:999px; background:#eeeef3; }
.sales-period-switch button { min-height:36px; padding:0 16px; border-radius:999px; color:#777780; font-size:10px; font-weight:800; }
.sales-period-switch button.active { background:#fff; color:var(--color-main); box-shadow:0 5px 15px rgba(0,0,0,.08); }
.sales-chart { display:grid; height:280px; grid-template-columns:repeat(7,minmax(48px,1fr)); align-items:end; gap:12px; overflow-x:auto; padding:20px 8px 0; border-bottom:1px solid #dedee5; }
.sales-chart-column { display:grid; height:100%; min-width:48px; grid-template-rows:26px 1fr 28px; align-items:end; justify-items:center; gap:6px; }
.sales-chart-value { color:#777780; font-size:9px; font-weight:750; white-space:nowrap; }
.sales-chart-track { position:relative; width:min(44px,72%); height:100%; overflow:hidden; border-radius:10px 10px 3px 3px; background:#f0efff; }
.sales-chart-bar { position:absolute; right:0; bottom:0; left:0; min-height:3px; border-radius:10px 10px 3px 3px; background:linear-gradient(180deg,#847dff,#635bff); box-shadow:0 8px 18px rgba(99,91,255,.22); transition:height .6s ease; }
.sales-chart-column strong { color:#777780; font-size:10px; }
.sales-layout .admin-section { margin:0; }
.sales-product-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 0; border-bottom:1px solid #ececf1; }
.sales-product-row:last-child { border-bottom:0; }
.sales-product-row div { display:grid; gap:3px; }
.sales-product-row strong { font-size:12px; }
.sales-product-row small { color:#9999a1; font-size:9px; }
.sales-product-row b { color:var(--color-main); font-size:14px; }
.sales-history { display:grid; gap:9px; }
.sales-history-row { display:grid; grid-template-columns:1fr 1fr 1.2fr .8fr; gap:12px; align-items:center; padding:14px 16px; border:1px solid #ececf1; border-radius:15px; background:#fafafd; }
.sales-history-row div { display:grid; min-width:0; gap:3px; }
.sales-history-row strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.sales-history-row small { overflow:hidden; color:#92929a; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.sales-payment-status { width:fit-content; padding:3px 7px; border-radius:999px; font-weight:800; }
.sales-payment-status.paid { background:#e7f7ef; color:#237e59; }
.sales-payment-status.unpaid { background:#fff0e2; color:#a76a13; }
@media(max-width:1000px){.sales-stats{grid-template-columns:repeat(2,1fr)}.sales-layout{grid-template-columns:1fr}}
@media(max-width:620px){.sales-stats{grid-template-columns:1fr 1fr}.sales-stats article{padding:17px 14px}.sales-period-switch{width:100%;overflow-x:auto}.sales-period-switch button{flex:1;white-space:nowrap}.sales-chart{height:230px}.sales-history-row{grid-template-columns:1fr 1fr}.sales-history-row div:nth-child(3){grid-column:1}.sales-history-row div:nth-child(4){grid-column:2}}
.admin-sidebar { position:fixed; z-index:20; top:0; bottom:0; left:0; display:flex; width:250px; padding:28px 20px; flex-direction:column; border-right:1px solid rgba(17,17,17,.08); background:#111115; color:#fff; }
.admin-logo { padding:0 8px; }.admin-logo .logo-mark { background:#fff; color:#111; }
.admin-navigation { display:grid; gap:7px; margin-top:45px; }.admin-navigation a { padding:13px 15px; border-radius:13px; color:rgba(255,255,255,.58); font-size:13px; font-weight:700; }.admin-navigation a:hover,.admin-navigation a.active { background:rgba(255,255,255,.1); color:#fff; }
.admin-exit-link { margin-top:auto; padding:12px; color:rgba(255,255,255,.55); font-size:12px; }
.admin-main { display:flex; margin-left:250px; padding:48px clamp(25px,5vw,72px) 90px; flex-direction:column; }
.admin-main > [hidden] { display:none !important; }
.admin-topbar { order:0; }
.admin-stats { order:1; }
.admin-dashboard-actions { order:2; }
#issue { order:2; }
#users { order:3; }
#cards { order:4; }
#pages { order:5; }
.admin-topbar { display:flex; align-items:center; justify-content:space-between; }.admin-topbar h1 { font-size:38px; letter-spacing:-.04em; }
.admin-account { display:flex; align-items:center; gap:10px; }.admin-account > span { display:grid; width:42px; height:42px; place-items:center; border-radius:50%; background:var(--color-main); color:#fff; font-weight:800; }.admin-account div { display:grid; }.admin-account strong { font-size:13px; }.admin-account small { color:#9999a1; font-size:10px; }
.admin-stats { display:grid; margin-top:36px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.admin-stat-card { display:grid; min-height:175px; padding:22px; border:1px solid rgba(17,17,17,.07); border-radius:21px; background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.035); transition:transform .25s ease,box-shadow .25s ease; }
.admin-stat-card:hover { box-shadow:0 16px 38px rgba(0,0,0,.075); transform:translateY(-4px); }
.admin-stat-heading { display:flex; align-items:center; gap:10px; }
.admin-stat-heading b { display:grid; width:34px; height:34px; place-items:center; border-radius:11px; background:#eeeeF3; color:#65656d; font-size:12px; }
.admin-stat-heading span { color:#55555d; font-size:13px; font-weight:800; }
.admin-stat-card > strong { align-self:end; margin-top:18px; color:#24242a; font-size:42px; line-height:1; }
.admin-stat-card > small { margin-top:9px; color:#92929a; font-size:10px; line-height:1.55; }
.admin-stat-card.action { border-color:rgba(225,151,47,.18); background:linear-gradient(145deg,#fff,#fff9ef); }
.admin-stat-card.action .admin-stat-heading b { background:#fff0d8; color:#a76a13; }
.admin-stat-card.success { border-color:rgba(45,154,108,.18); background:linear-gradient(145deg,#fff,#effaf5); }
.admin-stat-card.success .admin-stat-heading b { background:#def4e9; color:#267e5b; }
.admin-stat-card.rate { border-color:rgba(99,91,255,.18); background:linear-gradient(145deg,#fff,#f2f0ff); }
.admin-stat-card.rate .admin-stat-heading b { background:var(--color-main-light); color:var(--color-main); }
.admin-stat-card.rate > strong { color:var(--color-main); }
.admin-dashboard-actions { margin-top:24px; padding:28px; border:1px solid rgba(17,17,17,.07); border-radius:24px; background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.035); }
.admin-dashboard-actions-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.admin-dashboard-actions-heading h2 { font-size:24px; }
.admin-dashboard-actions-heading > p { color:#92929a; font-size:12px; }
.admin-dashboard-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.admin-dashboard-action-grid a { display:grid; min-height:92px; grid-template-columns:46px 1fr auto; align-items:center; gap:14px; padding:17px; border:1px solid #eaeaef; border-radius:18px; background:#fafafd; transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease; }
.admin-dashboard-action-grid a:hover { border-color:rgba(99,91,255,.24); background:#fff; box-shadow:0 14px 30px rgba(99,91,255,.1); transform:translateY(-3px); }
.admin-dashboard-action-grid a > span { display:grid; width:46px; height:46px; place-items:center; border-radius:14px; background:var(--color-main-light); color:var(--color-main); font-size:17px; font-weight:850; }
.admin-dashboard-action-grid a > div { display:grid; min-width:0; }
.admin-dashboard-action-grid strong { color:#303038; font-size:14px; }
.admin-dashboard-action-grid small { margin-top:4px; color:#92929a; font-size:10px; }
.admin-dashboard-action-grid a > b { color:#aaaab2; font-size:18px; transition:transform .25s ease; }
.admin-dashboard-action-grid a:hover > b { color:var(--color-main); transform:translateX(4px); }
.admin-dashboard-action-grid .issue > span { background:#fff0d8; color:#a76a13; }
.admin-dashboard-action-grid .cards > span { background:#e8efff; color:#5368c9; }
.admin-dashboard-action-grid .pages > span { background:#e6f7ef; color:#267e5b; }
.admin-section { margin-top:24px; padding:30px; border:1px solid rgba(17,17,17,.07); border-radius:24px; background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.035); }.admin-section-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:26px; }.admin-section-heading h2 { font-size:24px; }.admin-section-heading > p { color:#92929a; font-size:12px; }
.admin-page-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.admin-page-links a { display:flex; min-height:78px; align-items:center; gap:12px; padding:14px; border:1px solid #ededf1; border-radius:16px; background:#fafafd; transition:.25s; }.admin-page-links a:hover { border-color:rgba(99,91,255,.2); background:#fff; box-shadow:0 12px 28px rgba(99,91,255,.09); transform:translateY(-3px); }.admin-page-links a > span { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border-radius:12px; background:var(--color-main-light); color:var(--color-main); font-size:14px; font-weight:800; }.admin-page-links a div { display:grid; min-width:0; }.admin-page-links strong { font-size:12px; }.admin-page-links small { margin-top:2px; overflow:hidden; color:#9999a1; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.admin-card-workflow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:12px; }.admin-card-workflow article { display:flex; min-height:92px; align-items:center; gap:12px; padding:16px; border:1px solid #ededf1; border-radius:17px; background:#fafafd; }.admin-card-workflow article > span { display:grid; width:36px; height:36px; flex:0 0 auto; place-items:center; border-radius:12px; background:var(--color-main-light); color:var(--color-main); font-size:10px; font-weight:850; }.admin-card-workflow article div { display:grid; }.admin-card-workflow strong { font-size:12px; }.admin-card-workflow small { margin-top:3px; color:#9999a1; font-size:9px; line-height:1.5; }.admin-card-workflow > b { color:#b0b0b7; font-size:13px; }
.admin-nfc-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:22px; }.admin-nfc-summary > div { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:12px 14px; border:1px solid #ececf1; border-radius:14px; background:#fafafd; }.admin-nfc-summary span { width:9px; height:9px; border-radius:50%; }.admin-nfc-summary small { color:#777780; font-size:9px; font-weight:700; }.admin-nfc-summary strong { font-size:18px; }.admin-nfc-summary .waiting span { background:#e49b39; }.admin-nfc-summary .written span { background:#6271df; }.admin-nfc-summary .tested span { background:#9a5ed5; }.admin-nfc-summary .shipped span { background:#2d9a6c; }
.admin-nfc-list { display:grid; gap:13px; margin-top:16px; }.admin-nfc-row { display:grid; grid-template-columns:minmax(210px,.85fr) minmax(210px,1fr) minmax(320px,1.45fr) auto; align-items:center; gap:18px; padding:18px; border:1px solid #e9e9ee; border-left:5px solid #e49b39; border-radius:18px; background:#fff; box-shadow:0 7px 22px rgba(0,0,0,.03); }.admin-nfc-row.stage-written { border-left-color:#6271df; }.admin-nfc-row.stage-tested { border-left-color:#9a5ed5; }.admin-nfc-row.stage-shipped { border-left-color:#2d9a6c; background:#fbfffd; }.admin-nfc-row-head { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:10px; }.admin-nfc-user,.admin-nfc-url { display:grid; min-width:0; }.admin-nfc-user strong,.admin-nfc-url strong { overflow:hidden; color:#303038; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.admin-nfc-user small,.admin-nfc-url small { margin-top:2px; overflow:hidden; color:#9898a0; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.admin-current-stage { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:#fff3df; color:#a46c1b; font-size:8px; font-weight:850; }.admin-current-stage.written { background:#edf0ff; color:#5362ca; }.admin-current-stage.tested { background:#f4eaff; color:#8549bd; }.admin-current-stage.shipped { background:#e7f7ef; color:#237e59; }
.admin-nfc-progress { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }.admin-nfc-progress::before { position:absolute; z-index:0; top:13px; right:12%; left:12%; height:2px; background:#e3e3e8; content:""; }.admin-nfc-step { position:relative; z-index:1; display:grid; justify-items:center; gap:5px; }.admin-nfc-step > span { display:grid; width:27px; height:27px; place-items:center; border:3px solid #fff; border-radius:50%; background:#e8e8ed; color:#919199; box-shadow:0 0 0 1px #dddde3; font-size:8px; font-weight:850; }.admin-nfc-step small { color:#9a9aa2; font-size:7px; font-weight:750; }.admin-nfc-step.done > span { background:#2d9a6c; color:#fff; box-shadow:0 0 0 1px #2d9a6c; }.admin-nfc-step.done small { color:#2d8b64; }.admin-nfc-step.current > span { background:var(--color-main); color:#fff; box-shadow:0 0 0 3px rgba(99,91,255,.15); }.admin-nfc-step.current small { color:var(--color-main); font-weight:850; }.admin-nfc-actions { display:flex; gap:6px; }.admin-nfc-actions button { min-height:38px; padding:0 12px; border-radius:999px; background:#eeeeF3; color:#55555d; font-size:9px; font-weight:800; white-space:nowrap; }.admin-nfc-actions button.primary { background:var(--color-main); color:#fff; }.admin-nfc-actions button:disabled { cursor:not-allowed; opacity:.45; }.admin-nfc-message { min-height:18px; margin-top:10px; color:#27825a; font-size:11px; text-align:right; }

/* NFC management rows must stay inside the administration panel. */
.admin-main,
.admin-section,
.admin-nfc-list,
.admin-nfc-row { min-width:0; max-width:100%; }
.admin-nfc-row { grid-template-columns:minmax(170px,.8fr) minmax(190px,1fr) minmax(260px,1.25fr) minmax(180px,.75fr); gap:14px; }
.admin-nfc-progress { min-width:0; }
.admin-nfc-actions { display:grid; min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); }
.admin-nfc-actions button { width:100%; min-width:0; padding:0 9px; }
.admin-issue-form { display:grid; grid-template-columns:1.2fr 1fr 1.3fr .8fr auto; align-items:end; gap:12px; }.admin-issue-form label { display:grid; gap:7px; color:#55555d; font-size:11px; font-weight:750; }.admin-issue-form input,.admin-issue-form select,.admin-search input { width:100%; height:48px; padding:0 13px; border:1px solid rgba(17,17,17,.1); border-radius:13px; outline:0; background:#fafafd; }.admin-issue-form input:focus,.admin-issue-form select:focus,.admin-search input:focus { border-color:var(--color-main); box-shadow:0 0 0 3px rgba(99,91,255,.08); }.admin-username-input { display:flex; align-items:center; height:48px; border:1px solid rgba(17,17,17,.1); border-radius:13px; background:#fafafd; overflow:hidden; }.admin-username-input b { padding-left:12px; color:#9999a1; font-size:11px; }.admin-username-input input { border:0; box-shadow:none!important; }.admin-issue-form button { min-height:48px; padding:0 19px; border-radius:999px; background:var(--color-main); color:#fff; font-size:12px; font-weight:800; }.admin-form-message { grid-column:1/-1; min-height:18px; color:#27825a; font-size:12px; }
.admin-pending-orders { width:100%; margin-bottom:20px; padding:18px; border:1px solid rgba(99,91,255,.13); border-radius:18px; background:#f9f8ff; }.admin-pending-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }.admin-pending-heading > div { display:grid; }.admin-pending-heading strong { font-size:13px; }.admin-pending-heading small { margin-top:3px; color:#92929a; font-size:10px; }.admin-pending-heading > span { padding:5px 10px; border-radius:999px; background:var(--color-main-light); color:var(--color-main); font-size:10px; font-weight:800; }.admin-pending-list { display:grid; gap:10px; margin-top:15px; }.admin-pending-order { display:grid; grid-template-columns:1fr 1fr 1fr auto; align-items:center; gap:14px; padding:14px; border:1px solid #e9e8f2; border-radius:15px; background:#fff; }.admin-pending-order div { display:grid; min-width:0; }.admin-pending-order strong { overflow:hidden; color:#303038; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.admin-pending-order small { margin-top:2px; overflow:hidden; color:#9999a1; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.admin-pending-order button { min-height:40px; padding:0 18px; border-radius:999px; background:var(--color-main); color:#fff; font-size:11px; font-weight:800; }.admin-pending-empty { padding:25px 10px 8px; color:#9999a1; text-align:center; font-size:11px; }.admin-manual-issue { width:100%; margin-top:0; padding:18px; border:1px solid rgba(99,91,255,.13); border-radius:18px; background:#f9f8ff; }.admin-manual-heading { display:grid; }.admin-manual-heading strong { color:#35353d; font-size:13px; }.admin-manual-heading small { margin-top:3px; color:#96969e; font-size:10px; }.admin-manual-issue .admin-issue-form { width:100%; margin-top:18px; }
.admin-search { width:min(100%,340px); }.admin-search input { font-size:12px; }.admin-table-wrap { overflow-x:auto; }.admin-table { width:100%; min-width:880px; border-collapse:collapse; }.admin-table th { padding:13px 12px; border-bottom:1px solid #ededf1; color:#96969e; text-align:left; font-size:10px; letter-spacing:.08em; }.admin-table td { padding:16px 12px; border-bottom:1px solid #f0f0f3; color:#4f4f57; font-size:12px; }.admin-table td strong { display:block; color:#292930; font-size:13px; }.admin-table td small { display:block; margin-top:2px; color:#9b9ba3; }.admin-status { display:inline-flex; padding:5px 9px; border-radius:999px; background:#fff3dd; color:#a46a16; font-size:10px; font-weight:800; }.admin-status.done { background:#e8f8f0; color:#23805a; }.admin-table button { padding:7px 10px; border-radius:9px; background:#eeeeF3; color:#56565e; font-size:10px; font-weight:750; }.admin-row-actions { display:flex; gap:6px; white-space:nowrap; }.admin-table button.danger { background:#fff0f0; color:#c33f3f; }.admin-table button.danger:hover { background:#c94747; color:#fff; }.admin-empty { padding:35px; color:#9999a1; text-align:center; font-size:13px; }
.admin-user-tools { display:flex; align-items:center; gap:10px; }
.admin-filter { width:190px; }
.admin-filter select { width:100%; height:48px; padding:0 36px 0 13px; border:1px solid rgba(17,17,17,.1); border-radius:13px; outline:0; background:#fafafd; color:#55555d; font-size:11px; font-weight:700; }
.admin-filter select:focus { border-color:var(--color-main); box-shadow:0 0 0 3px rgba(99,91,255,.08); }
.admin-user-result-count { margin:-14px 0 12px; color:#92929a; font-size:11px; font-weight:700; }
@media(max-width:1200px){.admin-nfc-row{grid-template-columns:1fr 1fr}.admin-nfc-actions{justify-content:stretch}}
@media(max-width:1050px){.admin-issue-form{grid-template-columns:repeat(2,1fr)}.admin-issue-form button{grid-column:1/-1}.admin-stats{grid-template-columns:repeat(2,1fr)}.admin-page-links{grid-template-columns:repeat(2,1fr)}.admin-card-workflow{grid-template-columns:1fr 1fr}.admin-card-workflow>b{display:none}.admin-pending-order{grid-template-columns:1fr 1fr}.admin-pending-order button{grid-column:1/-1}.admin-nfc-summary{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.admin-sidebar{position:static;width:100%;padding:18px}.admin-navigation{display:flex;margin-top:20px;overflow-x:auto}.admin-navigation a{white-space:nowrap}.admin-exit-link{display:none}.admin-main{margin-left:0;padding:30px 14px 70px}.admin-topbar{align-items:flex-start}.admin-account div{display:none}.admin-stats{grid-template-columns:1fr 1fr}.admin-dashboard-action-grid{grid-template-columns:1fr}.admin-dashboard-actions-heading{align-items:flex-start;flex-direction:column;gap:6px}.admin-section{padding:22px 16px}.admin-section-heading{align-items:flex-start;flex-direction:column}.admin-user-tools{width:100%;align-items:stretch;flex-direction:column}.admin-filter,.admin-search{width:100%}.admin-user-result-count{margin-top:-10px}.admin-issue-form{grid-template-columns:1fr}.admin-pending-order,.admin-nfc-row{grid-template-columns:1fr}.admin-nfc-actions{justify-content:stretch}.admin-nfc-actions button{flex:1}}

/* Keep the NFC workflow readable and scroll it inside its own panel. */
.admin-nfc-list {
    width:100%;
    padding-bottom:10px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-gutter:stable;
    -webkit-overflow-scrolling:touch;
}
.admin-nfc-list .admin-nfc-row {
    width:100%;
    min-width:1080px;
    max-width:none;
    grid-template-columns:minmax(170px,.8fr) minmax(190px,1fr) minmax(260px,1.25fr) minmax(180px,.75fr);
}
.admin-nfc-list .admin-nfc-simple-row {
    min-width:1180px;
    grid-template-columns:minmax(170px,.8fr) minmax(180px,.8fr) minmax(260px,1.2fr) minmax(290px,1.3fr) minmax(230px,.8fr);
    border-left-color:#e49b39;
    transition:border-left-color .25s ease, box-shadow .25s ease;
}
.admin-nfc-list .admin-nfc-simple-row.is-completed {
    border-left-color:#635bff !important;
}
.admin-nfc-list .admin-nfc-simple-row.is-shipped {
    border-left-color:#2d9a6c !important;
}
.admin-nfc-simple-row .admin-nfc-actions {
    grid-template-columns:repeat(2,minmax(110px,1fr));
}
.admin-nfc-actions button.completed {
    background:#e8f8f0;
    color:#23805a;
    opacity:1;
}
.admin-nfc-actions button.shipped {
    background:#e7f7ef;
    color:#237e59;
    opacity:1;
}
.admin-nfc-tools {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}
.admin-nfc-tools .admin-search {
    width:min(100%,420px);
}
.admin-nfc-tools .admin-filter {
    width:180px;
}
.admin-nfc-result-count {
    margin-left:auto;
    color:#92929a;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}
@media(max-width:720px) {
    .admin-nfc-tools {
        align-items:stretch;
        flex-direction:column;
    }
    .admin-nfc-tools .admin-search,
    .admin-nfc-tools .admin-filter {
        width:100%;
    }
    .admin-nfc-result-count {
        margin-left:0;
    }
}
.admin-nfc-column-label {
    display:block;
    margin-bottom:6px;
    color:var(--color-main);
    font-size:8px;
    font-weight:850;
    letter-spacing:.08em;
}
.admin-nfc-product,
.admin-nfc-shipping {
    display:grid;
    min-width:0;
}
.admin-nfc-product strong,
.admin-nfc-shipping strong {
    overflow:hidden;
    color:#303038;
    font-size:12px;
    line-height:1.5;
    text-overflow:ellipsis;
}
.admin-nfc-product small,
.admin-nfc-shipping small {
    margin-top:2px;
    overflow:hidden;
    color:#9898a0;
    font-size:9px;
    line-height:1.45;
    text-overflow:ellipsis;
}
.admin-nfc-shipping.is-empty strong { color:#9999a1; }
.admin-shipping-entry {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-top:9px;
}
.admin-shipping-entry select,
.admin-shipping-entry input {
    width:100%;
    min-width:0;
    height:34px;
    padding:0 9px;
    border:1px solid #e2e2e8;
    border-radius:9px;
    outline:0;
    background:#fafafd;
    color:#55555d;
    font-size:9px;
}
.admin-shipping-entry select:focus,
.admin-shipping-entry input:focus {
    border-color:var(--color-main);
    box-shadow:0 0 0 3px rgba(99,91,255,.08);
}
.admin-shipping-saved {
    margin-top:7px!important;
    color:#237e59!important;
    font-weight:750;
}
@media(max-width:480px){.admin-page-links,.admin-card-workflow,.admin-stats{grid-template-columns:1fr}.admin-stat-card{min-height:155px}.admin-dashboard-actions{padding:22px 16px}.admin-dashboard-action-grid a{grid-template-columns:42px 1fr auto;padding:14px}.admin-dashboard-action-grid a>span{width:42px;height:42px}}

/* カード有効化 */
.activation-main { position:relative; display:grid; min-height:calc(100vh - 76px); place-items:center; padding:70px 24px; overflow:hidden; background:radial-gradient(circle at 15% 20%,rgba(99,91,255,.17),transparent 32%),radial-gradient(circle at 90% 80%,rgba(77,202,255,.14),transparent 34%),#f6f6f9; }
.activation-layout { display:grid; width:min(100%,1080px); align-items:center; grid-template-columns:1fr 430px; gap:80px; }
.activation-guide h1 { font-size:clamp(40px,4.2vw,52px); line-height:1.14; letter-spacing:-.055em; }.activation-guide h1 span { display:block; white-space:nowrap; }.activation-guide > p:not(.auth-label) { max-width:570px; margin-top:24px; color:#686870; font-size:16px; line-height:1.9; }
.activation-steps { display:grid; gap:17px; margin-top:38px; }.activation-steps li { display:flex; align-items:center; gap:15px; color:#92929a; }.activation-steps li > span { display:grid; width:39px; height:39px; flex:0 0 auto; place-items:center; border:1px solid rgba(17,17,17,.1); border-radius:50%; background:#fff; font-size:12px; font-weight:800; }.activation-steps li.active > span { border-color:var(--color-main); background:var(--color-main); color:#fff; }.activation-steps li div { display:grid; }.activation-steps strong { color:#44444b; font-size:14px; }.activation-steps small { margin-top:2px; font-size:11px; }
.activation-card { padding:38px; }.activation-card .input-wrapper input { text-transform:none; }.activation-card #activation-code { text-transform:uppercase; letter-spacing:.14em; font-weight:750; }
@media(max-width:850px){.activation-layout{display:flex; max-width:520px; flex-direction:column; gap:42px}.activation-guide{text-align:center}.activation-guide h1{font-size:42px}.activation-guide .auth-label{margin-right:auto;margin-left:auto}.activation-steps{text-align:left}.activation-card{width:100%}}
@media(max-width:520px){.activation-main{padding:45px 16px}.activation-guide h1{font-size:clamp(24px,7.8vw,39px)}.activation-card{padding:28px 22px}}

/* 購入申し込み */
.nfc-card,.product-nfc-card,.order-card-sample { overflow:hidden; border-radius:26px; background:linear-gradient(145deg,#27272d 0%,#0c0c0e 58%,#24242b 100%); color:#fff; }
.product-nfc-card.white,.order-card-sample.white { background:linear-gradient(145deg,#fff 0%,#e9e9ef 100%); color:#17171b; }
.nfc-design-top,.nfc-design-bottom { position:relative; z-index:2; display:flex; width:100%; }
.nfc-design-top { align-items:flex-start; justify-content:space-between; }
.nfc-design-top > b { font-size:22px; font-weight:850; letter-spacing:-.04em; }
.nfc-design-symbol { position:relative; display:flex; align-items:center; gap:3px; margin-top:7px; padding-left:7px; }
.nfc-design-symbol::before { position:absolute; top:50%; left:0; width:5px; height:5px; border-radius:50%; background:currentColor; content:""; opacity:.82; transform:translateY(-50%); }
.nfc-design-symbol i { display:block; border:2px solid currentColor; border-left:0; border-radius:0 100px 100px 0; opacity:.78; }
.nfc-design-symbol i:nth-child(1) { width:7px; height:12px; }
.nfc-design-symbol i:nth-child(2) { width:10px; height:20px; }
.nfc-design-symbol i:nth-child(3) { width:13px; height:28px; }
.nfc-design-bottom { align-items:flex-start; flex-direction:column; }
.nfc-design-bottom strong { color:inherit; font-size:15px; font-weight:800; letter-spacing:.1em; }
.nfc-design-bottom small { margin-top:5px; color:currentColor; font-size:9px; font-weight:700; letter-spacing:.18em; opacity:.52; }
.order-card-sample .nfc-design-top> b { font-size:17px; }
.order-card-sample .nfc-design-bottom strong { font-size:10px; }
.order-card-sample .nfc-design-bottom small { font-size:7px; }
.order-card-sample .nfc-design-symbol { gap:3px; transform:scale(.75); transform-origin:top right; }
.order-page { background:#f5f5f8; }.order-main { width:min(calc(100% - 40px),1160px); margin:auto; padding:65px 0 100px; }.order-heading { margin-bottom:38px; }.order-heading h1 { font-size:clamp(40px,5vw,62px); letter-spacing:-.05em; }.order-heading > p:last-child { margin-top:12px; color:#74747c; }
.order-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:start; gap:25px; }.order-form-column { display:grid; gap:22px; }.order-card-options { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.order-card-options label { display:grid; gap:10px; cursor:pointer; }.order-card-options input { position:absolute; opacity:0; }.order-card-sample { display:flex; aspect-ratio:1.586/1; flex-direction:column; justify-content:space-between; padding:20px; border:3px solid transparent; border-radius:26px; box-shadow:0 16px 36px rgba(0,0,0,.16); transition:.25s; }.order-card-sample.black { background:linear-gradient(145deg,#27272d 0%,#0c0c0e 58%,#24242b 100%); color:#fff; }.order-card-sample.white { border-color:#eeeef2; background:linear-gradient(145deg,#fff 0%,#e9e9ef 100%); color:#17171b; }.order-card-options input:checked + .order-card-sample { outline:4px solid rgba(99,91,255,.13); border-color:var(--color-main); transform:translateY(-4px); }.order-card-options label > strong { text-align:center; font-size:13px; }
.order-username-row { display:grid; grid-template-columns:1fr; gap:10px; }.order-field-message { min-height:18px; color:#c54444!important; }.order-field-message.success { color:#248158!important; }
.postal-code-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.postal-code-row button { min-height:52px; padding:0 16px; border-radius:14px; background:#222227; color:#fff; font-size:11px; font-weight:800; white-space:nowrap; transition:background .2s ease,transform .2s ease; }
.postal-code-row button:hover { background:var(--color-main); transform:translateY(-1px); }
.postal-code-row button:disabled { cursor:wait; opacity:.6; transform:none; }
.postal-code-message { min-height:18px; margin-top:1px; color:#777780; font-size:10px; line-height:1.5; }
.postal-code-message.success { color:#248158; }
.postal-code-message.error { color:#c54444; }
.order-summary { position:sticky; top:92px; padding:28px; border:1px solid rgba(17,17,17,.07); border-radius:25px; background:#fff; box-shadow:0 16px 46px rgba(0,0,0,.07); }.order-summary h2 { font-size:25px; }.order-summary-card { display:flex; justify-content:space-between; margin-top:24px; padding:18px 0; border-bottom:1px solid #ededf1; font-size:13px; }.order-summary dl { display:grid; gap:12px; margin-top:20px; }.order-summary dl div { display:flex; justify-content:space-between; color:#777780; font-size:12px; }.order-summary dl .total { margin-top:6px; padding-top:16px; border-top:1px solid #ededf1; color:#222; font-size:17px; font-weight:800; }.order-agreement { align-items:flex-start; margin-top:24px; line-height:1.6; }.order-submit-button { width:100%; min-height:54px; margin-top:20px; border-radius:999px; background:var(--color-main); color:#fff; font-size:14px; font-weight:800; box-shadow:0 14px 30px rgba(99,91,255,.22); }.order-submit-message { min-height:20px; margin-top:8px; color:#c54444; font-size:11px; }.order-summary > small { display:block; margin-top:12px; color:#aaaab1; font-size:9px; line-height:1.6; }
.order-quantity { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:16px; color:#66666e; font-size:12px; font-weight:750; }
.order-quantity select { width:100px; height:42px; padding:0 12px; border:1px solid #dedee5; border-radius:12px; outline:0; background:#fafafd; color:#33333a; font-weight:750; }
.order-quantity select:focus { border-color:var(--color-main); box-shadow:0 0 0 3px rgba(99,91,255,.08); }
.order-complete { width:min(100%,650px); margin:40px auto; padding:60px 35px; border-radius:30px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.09); text-align:center; }.order-complete > span { display:grid; width:70px; height:70px; margin:0 auto 22px; place-items:center; border-radius:50%; background:#e8f8f0; color:#23805a; font-size:30px; }.order-complete h2 { font-size:32px; }.order-complete p { margin-top:13px; color:#74747c; }.order-complete a { display:inline-flex; min-height:48px; align-items:center; margin-top:25px; padding:0 23px; border-radius:999px; background:#222227; color:#fff; font-size:13px; font-weight:800; }
@media(max-width:850px){.order-layout{grid-template-columns:1fr}.order-summary{position:static}.order-main{width:min(calc(100% - 24px),760px)}}@media(max-width:560px){.order-main{padding:42px 0 70px}.order-card-options{grid-template-columns:1fr 1fr}.order-card-sample{padding:14px;border-radius:15px}.order-username-row{grid-template-columns:1fr}.order-username-row button{min-height:45px}}

/* 注文完了ページ */
.order-complete-page { min-height:100vh; background:radial-gradient(circle at 20% 10%,rgba(99,91,255,.18),transparent 34%),radial-gradient(circle at 85% 90%,rgba(68,200,255,.14),transparent 36%),#f5f5f8; }
.order-complete-main { display:grid; min-height:calc(100vh - 76px); place-items:center; padding:55px 20px; }
.order-complete-card { width:min(100%,700px); padding:55px 60px; border:1px solid rgba(255,255,255,.8); border-radius:34px; background:rgba(255,255,255,.9); box-shadow:0 28px 85px rgba(35,31,73,.15); text-align:center; backdrop-filter:blur(22px); }
.order-complete-icon { display:grid; width:78px; height:78px; margin:0 auto 23px; place-items:center; border-radius:50%; background:#e6f8ef; color:#218158; font-size:33px; font-weight:850; box-shadow:0 12px 28px rgba(35,151,100,.14); }
.order-complete-card h1 { font-size:clamp(36px,5vw,54px); line-height:1.18; letter-spacing:-.05em; }
.order-complete-lead { max-width:550px; margin:22px auto 0; color:#707078; font-size:14px; line-height:1.9; }
.order-number-card { display:grid; gap:5px; margin:28px auto 0; padding:19px; border:1px solid rgba(99,91,255,.14); border-radius:18px; background:#f8f7ff; }.order-number-card span { color:#8e8e97; font-size:10px; font-weight:750; letter-spacing:.12em; }.order-number-card strong { color:var(--color-main); font-size:20px; letter-spacing:.06em; }
.order-next-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px; text-align:left; }.order-next-steps li { display:flex; align-items:flex-start; gap:10px; padding:15px; border:1px solid #ededf1; border-radius:16px; background:#fff; }.order-next-steps li > span { display:grid; width:27px; height:27px; flex:0 0 auto; place-items:center; border-radius:50%; background:var(--color-main-light); color:var(--color-main); font-size:10px; font-weight:800; }.order-next-steps li div { display:grid; }.order-next-steps strong { font-size:11px; }.order-next-steps small { margin-top:3px; color:#9999a1; font-size:9px; line-height:1.5; }
.order-complete-actions { display:flex; justify-content:center; gap:10px; margin-top:30px; }.order-complete-actions a { display:inline-flex; min-height:49px; align-items:center; justify-content:center; padding:0 21px; border:1px solid rgba(17,17,17,.1); border-radius:999px; background:#fff; color:#414149; font-size:12px; font-weight:800; }.order-complete-actions a.primary { border-color:#222227; background:#222227; color:#fff; }
.order-demo-note { margin-top:22px; color:#aaaab2; font-size:9px; }
@media(max-width:620px){.order-complete-main{padding:25px 12px}.order-complete-card{padding:38px 20px;border-radius:27px}.order-next-steps{grid-template-columns:1fr}.order-complete-actions{flex-direction:column}.order-complete-actions a{width:100%}}

/* 複数商品対応の注文表示 */
.legal-page { background:#f5f5f8; }
.legal-main { width:min(calc(100% - 36px),900px); margin:0 auto; padding:65px 0 90px; }
.legal-document { padding:clamp(28px,6vw,64px); border:1px solid rgba(17,17,17,.07); border-radius:30px; background:#fff; box-shadow:0 18px 55px rgba(0,0,0,.06); }
.legal-heading { padding-bottom:30px; border-bottom:1px solid #ececf1; }
.legal-heading h1 { font-size:clamp(38px,6vw,58px); letter-spacing:-.05em; }
.legal-heading>p:last-child { margin-top:12px; color:#92929a; font-size:11px; }
.legal-draft-note { margin:28px 0; padding:18px 20px; border:1px solid #f0d49f; border-radius:16px; background:#fff9ed; }
.legal-draft-note strong { color:#8d5d10; font-size:13px; }
.legal-draft-note p { margin-top:6px; color:#7b6849; font-size:11px; line-height:1.75; }
.legal-document section { margin-top:36px; }
.legal-document section h2 { color:#292930; font-size:19px; letter-spacing:-.02em; }
.legal-document section p,.legal-document section li { color:#62626a; font-size:13px; line-height:2; }
.legal-document section p,.legal-document section ul,.legal-document section ol { margin-top:12px; }
.legal-document section ul,.legal-document section ol { padding-left:1.5em; }
.legal-document section li+li { margin-top:5px; }
.legal-footer { display:flex; min-height:80px; align-items:center; justify-content:center; gap:24px; padding:20px; border-top:1px solid #e5e5ea; background:#fff; color:#777780; font-size:11px; }
.legal-footer a:hover { color:var(--color-main); }
.order-agreement a { color:var(--color-main); text-decoration:underline; text-underline-offset:2px; }
@media(max-width:560px){.legal-main{width:min(calc(100% - 20px),900px);padding:30px 0 60px}.legal-document{padding:28px 20px;border-radius:22px}.legal-footer{align-items:flex-start;flex-direction:column;gap:10px}}

/* ========================================
   お問い合わせページ
======================================== */

.contact-main {
    width: min(calc(100% - 36px), 760px);
    margin: 0 auto;
    padding: 65px 0 90px;
}

.contact-card {
    padding: clamp(28px, 6vw, 58px);
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.06);
}

.contact-introduction {
    margin: 18px 0 30px;
    color: #66666e;
    font-size: 14px;
    line-height: 1.9;
}

.contact-form {
    display: grid;
    gap: 22px;
}

.contact-form textarea {
    width: 100%;
    min-height: 180px;
    padding: 16px 18px;
    resize: vertical;
    border: 1px solid rgba(17, 17, 17, 0.11);
    border-radius: 17px;
    outline: none;
    background: #fff;
    color: var(--color-black);
    font: inherit;
    line-height: 1.7;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.contact-form textarea:focus {
    border-color: var(--color-main);
    box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.1);
}

.contact-form select {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border: 0;
    outline: 0;
    border-radius: 17px;
    background: transparent;
    color: var(--color-black);
    font-size: 14px;
}

.contact-note {
    color: #8b8b94;
    font-size: 11px;
    line-height: 1.7;
}

@media (max-width: 560px) {
    .contact-main { width: min(calc(100% - 20px), 760px); padding: 30px 0 60px; }
    .contact-card { padding: 28px 20px; border-radius: 22px; }
}

/* プロフィール見本の勤務先情報 */
.phone-profile-work {
    margin-top: 8px;
    color: #72727a;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.55;
}

.phone-profile-username {
    margin-top: 7px;
    color: var(--color-main);
    font-size: 9px;
    font-weight: 800;
}

.preview-work {
    margin-top: 10px;
    color: #66666e;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

.auth-preview-work {
    margin-top: 3px;
    color: #777780;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.45;
}

.auth-preview-reading {
    margin-top: 2px;
    color: #a0a0a8;
    font-size: 9px;
    letter-spacing: 0.06em;
}

.sample-business-card {
    display: flex;
    width: 100%;
    min-height: 0;
    aspect-ratio: 91 / 55;
    justify-content: space-between;
    flex-direction: column;
    margin-top: 22px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(145deg, #28282e, #0e0e11);
    color: #fff;
    text-align: left;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.sample-business-card strong { font-size: 15px; letter-spacing: 0.04em; }
.sample-business-card span { margin-top: auto; font-size: 11px; font-weight: 750; }
.sample-business-card small { color: rgba(255, 255, 255, 0.6); font-size: 9px; }
.sample-business-card.compact { min-height: 0; margin-top: 14px; padding: 11px 13px; border-radius: 13px; }
.sample-business-card.compact strong { font-size: 10px; }
.sample-business-card.compact small { font-size: 8px; }

.sample-business-card,
.profile-business-card-sample {
    position: relative;
    overflow: hidden;
    border: 1px solid #e2e2e7;
    background:
        radial-gradient(circle at 100% 0, rgba(99, 91, 255, 0.12), transparent 36%),
        linear-gradient(145deg, #ffffff, #f7f7fa);
    color: #222229;
    box-shadow: 0 14px 34px rgba(25, 23, 56, 0.1);
}

.sample-business-card::before,
.profile-business-card-sample::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    background: linear-gradient(180deg, #635bff, #b66cff);
    content: "";
}

.sample-business-card .sample-card-brand,
.profile-business-card-sample .sample-card-brand {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sample-card-brand b {
    color: #222229;
    font-size: clamp(12px, 2.5vw, 18px);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.sample-card-brand small {
    color: #96969f;
    font-size: clamp(6px, 1.4vw, 9px);
    font-weight: 800;
    letter-spacing: 0.13em;
}

.sample-business-card .sample-card-person,
.profile-business-card-sample .sample-card-person {
    display: grid;
    gap: 3px;
    margin-top: auto;
}

.sample-card-person strong {
    color: #202027;
    font-size: clamp(15px, 4vw, 29px);
    line-height: 1.1;
    letter-spacing: -0.045em;
}

.sample-card-person span,
.profile-business-card-sample .sample-card-person span {
    color: #55555e;
    font-size: clamp(7px, 1.8vw, 11px);
    font-weight: 750;
}

.sample-card-person small {
    color: #85858e;
    font-size: clamp(6px, 1.5vw, 9px);
}

.sample-business-card .sample-card-contact,
.profile-business-card-sample .sample-card-contact {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e5e5ea;
}

.sample-card-contact span,
.profile-business-card-sample .sample-card-contact span {
    color: #777780;
    font-size: clamp(6px, 1.35vw, 9px);
    font-weight: 600;
}

.sample-business-card.compact .sample-card-brand b { font-size: 9px; }
.sample-business-card.compact .sample-card-brand small { font-size: 5px; }
.sample-business-card.compact .sample-card-person strong { font-size: 12px; }
.sample-business-card.compact .sample-card-person span { color: #777780; font-size: 7px; }

.sample-section-label {
    margin: 5px 0 -4px;
    color: #96969e;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.phone-profile .sample-business-card { margin-top: 0; }
.auth-preview-card .sample-business-card { margin-top: 18px; }

.profile-link-icon.social-brand {
    overflow: hidden;
    padding: 0;
    background: transparent;
}

.profile-link-icon.social-brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Official brand files have different built-in margins. Normalize their visual size. */
[data-social="instagram"] .profile-link-icon.social-brand,
.profile-link-icon.social-brand:has(img[src$="instagram.png"]) {
    position: relative;
    background:
        radial-gradient(circle at 28% 105%, #ffd600 0 18%, #ff7a00 34%, transparent 58%),
        linear-gradient(135deg, #7638fa 0%, #d300c5 38%, #ff0169 68%, #ff7a00 100%);
}

[data-social="instagram"] .profile-link-icon.social-brand img,
.profile-link-icon.social-brand:has(img[src$="instagram.png"]) img {
    opacity: 0;
}

[data-social="instagram"] .profile-link-icon.social-brand::after,
.profile-link-icon.social-brand:has(img[src$="instagram.png"])::after {
    position: absolute;
    inset: 7px;
    background: #ffffff;
    content: "";
    mask: url("assets/icons/instagram.png") center / contain no-repeat;
    -webkit-mask: url("assets/icons/instagram.png") center / contain no-repeat;
}

[data-social="x"] .profile-link-icon.social-brand,
.profile-link-icon.social-brand:has(img[src$="x.png"]) {
    background: #000000;
}

[data-social="x"] .profile-link-icon.social-brand img,
.profile-link-icon.social-brand:has(img[src$="x.png"]) img {
    filter: none;
    width: 23px;
    height: 23px;
    object-position: center;
    transform: none;
}

[data-social="youtube"] .profile-link-icon.social-brand img,
.profile-link-icon.social-brand:has(img[src$="youtube.png"]) img {
    transform: scale(1.28);
}

[data-social="threads"] .profile-link-icon.social-brand,
.profile-link-icon.social-brand:has(img[src$="threads.png"]) {
    background: #000000;
}

[data-social="threads"] .profile-link-icon.social-brand img,
.profile-link-icon.social-brand:has(img[src$="threads.png"]) img {
    filter: none;
    width: 23px;
    height: 23px;
    object-position: center;
    transform: none;
}

.profile-link-icon.other-icon {
    background: color-mix(in srgb, var(--profile-theme, var(--color-main)) 13%, white);
}

.profile-link-icon.other-icon::before {
    display: block;
    width: 20px;
    height: 20px;
    background: var(--profile-theme, var(--color-main));
    content: "";
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.profile-link-icon.link-icon::before {
    mask-image: url("assets/icons/link.svg");
    -webkit-mask-image: url("assets/icons/link.svg");
}

.profile-link-icon.text-icon::before {
    mask-image: url("assets/icons/text.svg");
    -webkit-mask-image: url("assets/icons/text.svg");
}

.sample-social-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sample-social-label img {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.phone-profile-link,
.preview-link,
.auth-preview-link {
    gap: 12px;
    text-align: left;
}

.phone-profile-link .profile-link-icon {
    width: 29px;
    height: 29px;
    border-radius: 9px;
    font-size: 12px;
}

.phone-profile-link .profile-link-copy strong { font-size: 9px; }
.phone-profile-link .profile-link-copy small { max-width: 132px; font-size: 7px; }

.preview-link .profile-link-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 15px;
}

.preview-link .profile-link-copy strong { font-size: 12px; }
.preview-link .profile-link-copy small { max-width: 240px; font-size: 9px; }

.auth-preview-link .profile-link-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 13px;
}

.auth-preview-link .profile-link-copy strong { font-size: 11px; }
.auth-preview-link .profile-link-copy small { max-width: 250px; font-size: 8px; }

/* ========================================
   トップページ スマホ表示の安定化
======================================== */
@media (max-width: 820px) {
    .hero,
    .features,
    .how-to-use,
    .design,
    .purchase,
    .faq,
    .cta,
    .footer {
        max-width: 100%;
        overflow-x: clip;
    }

    .hero-inner,
    .hero-content,
    .section-inner,
    .design-content,
    .design-preview {
        min-width: 0;
    }

    .hero-title {
        width: 100%;
        font-size: clamp(36px, 10.5vw, 58px);
    }

    .hero-visual {
        width: min(100%, 430px);
        margin-right: auto;
        margin-left: auto;
    }

    .design-preview::before {
        width: min(520px, 120vw);
        height: min(520px, 120vw);
    }

    .preview-card {
        width: min(100%, 420px);
    }

    .footer-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .hero {
        padding-right: 16px;
        padding-left: 16px;
    }

    .hero-title {
        font-size: clamp(32px, 10vw, 48px);
    }

    .hero-label {
        max-width: 100%;
        padding: 0 12px;
        font-size: 9px;
        letter-spacing: 0.12em;
    }

    .hero-description {
        overflow-wrap: anywhere;
    }

    .hero-visual {
        min-height: 400px;
    }

    .nfc-card {
        top: 55%;
        left: 44%;
        width: min(245px, 74vw);
        padding: 20px;
    }

    .phone {
        right: -4px;
        width: min(200px, 60vw);
        padding: 8px;
        border-radius: 36px;
    }

    .phone::before {
        top: 14px;
        width: 70px;
        height: 20px;
    }

    .phone-screen {
        min-height: 350px;
        border-radius: 29px;
    }

    .phone-status-bar {
        height: 42px;
        padding: 0 18px;
    }

    .phone-profile {
        padding: 18px 12px 16px;
    }

    .phone-profile-image {
        width: 48px;
        height: 48px;
        margin-bottom: 8px;
        border-width: 3px;
        font-size: 20px;
    }

    .phone-profile h2 {
        font-size: 17px;
    }

    .phone-profile-work {
        margin-top: 5px;
        font-size: 8px;
    }

    .phone-profile-bio {
        margin-top: 9px;
        font-size: 9px;
    }

    .phone-profile-links {
        gap: 6px;
        margin-top: 12px;
    }

    .phone-profile-link {
        min-height: 32px;
        padding: 0 9px;
        font-size: 9px;
    }

    .phone-profile-link .profile-link-icon {
        width: 22px;
        height: 22px;
        border-radius: 7px;
        font-size: 9px;
    }

    .sample-social-label img {
        width: 15px;
        height: 15px;
    }

    .footer-navigation {
        grid-template-columns: 1fr;
    }
}
.edit-header-actions { display:flex; align-items:center; gap:10px; }
.edit-logout-link { display:inline-flex; min-height:42px; align-items:center; padding:0 16px; border:1px solid #e1e1e7; border-radius:999px; color:#777780; font-size:11px; font-weight:750; }
.edit-logout-link:hover { border-color:#d65a5a; color:#c74646; }
.edit-settings-link { display:inline-flex; min-height:40px; align-items:center; padding:0 16px; border:1px solid #dddde6; border-radius:999px; background:#fff; color:#55555d; font-size:12px; font-weight:750; transition:border-color .2s,color .2s; }
.edit-settings-link:hover { border-color:var(--color-main); color:var(--color-main); }
@media(max-width:520px){.edit-header-actions{gap:5px}.edit-logout-link{padding:0 11px}.edit-preview-link{padding-right:12px;padding-left:12px}}
@media(max-width:620px){.edit-settings-link{width:40px;padding:0;font-size:0;justify-content:center}.edit-settings-link::before{content:"⚙";font-size:16px}}
.forgot-password-container { grid-template-columns:minmax(0,1fr) minmax(400px,.82fr); }
.account-settings-container { grid-template-columns:minmax(0,1fr) minmax(400px,.82fr); }
@media(max-width:820px){.forgot-password-container{display:flex;flex-direction:column}}
@media(max-width:820px){.account-settings-container{display:flex;flex-direction:column}}
.edit-business-card-preview { display:flex; min-height:80px; align-items:center; gap:14px; margin-top:14px; padding:13px; border:1px solid #e5e5eb; border-radius:15px; background:#fafafd; color:#55555d; font-size:12px; }
.edit-business-card-preview[hidden] { display:none; }
.edit-business-card-preview img { width:110px; max-height:72px; object-fit:cover; border-radius:9px; }
.edit-business-card-preview .pdf { display:grid; width:50px; height:50px; place-items:center; border-radius:10px; background:#fff0f0; color:#c33f3f; font-size:11px; font-weight:850; }
.admin-table { min-width:1040px; }
.admin-table td.admin-user-product { min-width:150px; }
.admin-table td.admin-user-product strong { color:var(--color-main); }
.admin-pending-order { grid-template-columns:.9fr .85fr 1.15fr 1fr auto; }
.admin-pending-order .admin-order-product { padding:9px 11px; border-radius:11px; background:#f5f3ff; }
.admin-pending-order .admin-order-product strong { color:var(--color-main); }
@media(max-width:1050px){.admin-pending-order{grid-template-columns:1fr 1fr}.admin-pending-order button{grid-column:1/-1}}
@media(max-width:720px){.admin-pending-order{grid-template-columns:1fr}}
.admin-nfc-message.error { color:#c43f3f; }

/* Square payment */
.square-payment-panel { margin:22px 0; padding:18px; border:1px solid #e1e1e9; border-radius:18px; background:#fff; }
.square-payment-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; color:#29292f; font-size:14px; font-weight:800; }
.square-payment-heading b { padding:5px 9px; border-radius:999px; background:#fff2cc; color:#806000; font-size:10px; letter-spacing:.06em; }
.square-payment-heading b[data-environment="production"] { background:#e5f7ee; color:#14734c; }
.square-payment-heading b[data-environment="sandbox"] { background:#fff2cc; color:#806000; }
.square-environment-notice { margin:0 0 14px; padding:10px 12px; border-radius:12px; font-size:12px; font-weight:700; line-height:1.6; }
.square-environment-notice[data-environment="production"] { background:#edf9f3; color:#14734c; }
.square-environment-notice[data-environment="sandbox"] { background:#fff8df; color:#806000; }
#square-card-container { min-height:90px; }
#square-payment-status { margin-top:8px; color:#777780; font-size:12px; line-height:1.6; }
#square-payment-status.success { color:#208356; }
#square-payment-status.error { color:#c43f3f; }
.square-payment-panel > small { display:block; margin-top:8px; color:#92929a; font-size:10px; line-height:1.6; }
.order-submit-button:disabled { cursor:wait; opacity:.58; }

/* スマホのファーストビューは、カードイメージを先に表示する */
@media (max-width: 820px) {
    .hero-visual {
        order: 1;
    }

    .hero-content {
        order: 2;
    }
}
/* ========================================
   AI名刺スキャン
======================================== */
.community-hero-actions {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.community-scan-link { text-align: center; }
.scan-card-main { width: min(100% - 40px, 1080px); margin: 0 auto; padding: 70px 0 100px; }
.scan-card-heading { max-width: 720px; margin-bottom: 32px; }
.scan-card-heading h1 { margin: 10px 0 18px; font-size: clamp(42px, 6vw, 72px); line-height: 1.08; letter-spacing: -.055em; }
.scan-card-heading > p:last-child { color: #73737e; line-height: 1.8; }
.scan-card-panel { margin-top: 24px; padding: clamp(20px, 4vw, 46px); border: 1px solid rgba(17,17,20,.08); border-radius: 32px; background: #fff; box-shadow: 0 24px 70px rgba(30,30,50,.08); }
.scan-camera-shell { position: relative; display: grid; aspect-ratio: 4 / 3; overflow: hidden; place-items: center; border-radius: 24px; background: #121216; color: #fff; }
.scan-camera-shell video,.scan-camera-shell > img { width: 100%; height: 100%; object-fit: cover; }
.scan-camera-shell video { object-fit:cover; }
.scan-camera-shell.has-captured-image > img { object-fit:contain; }
.scan-camera-shell::after { position:absolute; inset:0; z-index:5; background:#fff; content:""; opacity:0; pointer-events:none; }
.scan-camera-shell.capture-flash::after { animation:scan-camera-flash .42s ease-out; }
@keyframes scan-camera-flash { 0%{opacity:0} 18%{opacity:.92} 100%{opacity:0} }
.scan-camera-placeholder { display: grid; justify-items: center; gap: 13px; padding: 30px; text-align: center; }
.scan-camera-placeholder small { color: rgba(255,255,255,.58); }
.scan-card-outline { display: grid; width: min(62vw, 420px); aspect-ratio: 85.6 / 53.98; place-items: center; border: 2px solid rgba(255,255,255,.75); border-radius: 14px; }
.scan-card-outline i { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at center,transparent 38%,#fff 40% 44%,transparent 46%), linear-gradient(90deg,transparent 45%,#fff 46% 54%,transparent 55%); opacity: .65; }
.scan-corners { position:absolute; top:50%; left:50%; width:min(84%,720px); aspect-ratio:85.6/53.98; transform:translate(-50%,-50%); pointer-events:none; }
.scan-corners i { position: absolute; width: 30px; height: 30px; border-color: #8178ff; }
.scan-camera-shell.card-ready .scan-corners i { border-color:#2dd58a; filter:drop-shadow(0 0 7px rgba(45,213,138,.75)); }
.scan-corners i:nth-child(1){top:0;left:0;border-top:4px solid;border-left:4px solid}.scan-corners i:nth-child(2){top:0;right:0;border-top:4px solid;border-right:4px solid}.scan-corners i:nth-child(3){bottom:0;left:0;border-bottom:4px solid;border-left:4px solid}.scan-corners i:nth-child(4){right:0;bottom:0;border-right:4px solid;border-bottom:4px solid}
.scan-motion { position:absolute; inset:0; overflow:hidden; border-radius:12px; pointer-events:none; }
.scan-motion span { position:absolute; right:0; left:0; height:3px; background:linear-gradient(90deg,transparent,#8d86ff 15%,#fff 50%,#8d86ff 85%,transparent); box-shadow:0 0 18px #8178ff; animation:scan-card-line 2s ease-in-out infinite; }
.scan-side-badge { position:absolute; top:18px; left:18px; z-index:2; padding:8px 13px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(10,10,14,.7); color:#fff; font-size:12px; font-weight:800; backdrop-filter:blur(8px); }
@keyframes scan-card-line { 0%{top:3%;opacity:.35} 50%{top:calc(100% - 3px);opacity:1} 100%{top:3%;opacity:.35} }
.scan-capture-actions,.scan-analysis-actions,.scan-form-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.scan-file-button { position: relative; overflow: hidden; cursor: pointer; }
.scan-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.scan-file-button-multiple { border-color:rgba(99,91,255,.28); background:#f0eeff; color:#5b52f5; }
.scan-file-button-multiple:hover { border-color:#635bff; background:#e7e4ff; }
.scan-privacy-note { margin: 22px auto 0; max-width: 720px; color: #858590; font-size: 12px; line-height: 1.7; text-align: center; }
.scan-batch-status { width:fit-content; margin:14px auto 0; padding:8px 13px; border-radius:999px; background:#efedff; color:#635bff; font-size:11px; font-weight:850; }
.scan-batch-status[hidden] { display:none; }
.scan-batch-organizer { margin-top:24px; }
.scan-batch-help { margin:-8px 0 22px; color:#777783; font-size:13px; line-height:1.75; }
.scan-batch-file-list { display:flex; gap:14px; margin:0 -4px; padding:4px 4px 18px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin; }
.scan-batch-file-item { position:relative; width:190px; flex:0 0 190px; padding:9px; border:2px solid transparent; border-radius:20px; background:#f6f6fa; color:inherit; text-align:left; scroll-snap-align:start; cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.scan-batch-file-item:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(25,25,45,.1); }
.scan-batch-file-item.is-selected { border-color:#635bff; background:#f0eeff; box-shadow:0 0 0 4px rgba(99,91,255,.1); }
.scan-batch-file-item.is-front { border-color:#635bff; background:#f3f1ff; }
.scan-batch-file-item.is-back { border-color:#aa72ee; background:#f8f1ff; }
.scan-batch-file-preview { display:block; width:100%; aspect-ratio:85.6/53.98; object-fit:cover; border-radius:13px; background:#ececf2; box-shadow:0 7px 18px rgba(20,20,35,.08); }
.scan-batch-file-info { min-width:0; padding:10px 4px 3px; }
.scan-batch-file-info strong { display:block; margin-bottom:4px; color:#202025; font-size:13px; }
.scan-batch-file-info small { display:block; overflow:hidden; color:#8a8a95; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.scan-batch-pair-badge { position:absolute; top:16px; left:16px; max-width:calc(100% - 32px); padding:6px 9px; overflow:hidden; border-radius:999px; background:rgba(20,20,25,.78); color:#fff; font-size:9px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; backdrop-filter:blur(8px); }
.scan-batch-file-item.is-front .scan-batch-pair-badge { background:#635bff; }
.scan-batch-file-item.is-back .scan-batch-pair-badge { background:#9455d8; }
.scan-batch-pair-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:8px; }
@media (max-width:620px) {
    .scan-batch-file-item { width:156px; flex-basis:156px; }
    .scan-batch-pair-actions > * { width:100%; }
}
.scan-result-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.scan-result-heading h2 { margin-top: 8px; font-size: clamp(28px,4vw,42px); }
.scan-result-heading > span { color: #858590; font-size: 13px; }
.scan-card-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.scan-field { display: grid; gap: 8px; }
.scan-field-wide,.scan-form-actions { grid-column: 1 / -1; }
.scan-field label { font-size: 13px; font-weight: 800; }
.scan-field input,.scan-field textarea { width: 100%; border: 1px solid #dedee6; border-radius: 14px; background: #fafafd; padding: 15px 16px; color: #17171b; font: inherit; outline: none; }
.scan-field input:focus,.scan-field textarea:focus { border-color: #635bff; box-shadow: 0 0 0 4px rgba(99,91,255,.1); background: #fff; }
.scanned-card-avatar { border-radius: 15px; background: var(--color-main-light,#efedff); color: var(--color-main,#635bff); font-size: 11px; font-weight: 900; }
.scanned-business-card .community-person-copy small { display: block; }
.scanned-business-card .scanned-card-avatar { overflow:hidden; border-radius:15px; }
.scanned-business-card .scanned-card-avatar img { width:100%; height:100%; object-fit:cover; }
.scan-mobile-break { display: none; }
@media (max-width: 640px) {
    .scan-card-main { width: min(100% - 24px,1080px); padding: 42px 0 70px; }
    .scan-card-panel { padding: 16px; border-radius: 24px; }
    .scan-camera-shell { aspect-ratio: 4 / 3; border-radius: 18px; }
    .scan-camera-placeholder { padding: 18px; }
    .scan-card-outline { width: min(74vw,340px); }
    .scan-corners { width:84%; }
    .scan-card-form { grid-template-columns: 1fr; }
    .scan-field-wide,.scan-form-actions { grid-column: auto; }
    .scan-result-heading { align-items: flex-start; flex-direction: column; }
    .scan-capture-actions > *,.scan-analysis-actions > *,.scan-form-actions > * { width: 100%; }
    .scan-mobile-break { display: block; }
}

/* 保存した紙の名刺プロフィール */
.scanned-profile-page { min-height:100vh; background:radial-gradient(circle at 12% 10%,rgba(99,91,255,.13),transparent 35%),#f5f5f8; color:#16161a; }
.scanned-profile-main { width:min(100% - 32px,860px); margin:0 auto; padding:58px 0 100px; }
.scanned-profile-card { overflow:hidden; border:1px solid rgba(20,20,30,.08); border-radius:36px; background:#fff; box-shadow:0 30px 90px rgba(25,25,45,.1); }
.scanned-profile-topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 28px; border-bottom:1px solid #ededf2; color:#777783; font-size:11px; font-weight:850; letter-spacing:.16em; }
.scanned-profile-topbar a { padding:9px 15px; border-radius:999px; background:#f0efff; color:#635bff; letter-spacing:0; }
.scanned-profile-identity { display:grid; justify-items:center; padding:48px 24px 38px; text-align:center; }
.scanned-profile-avatar { display:grid; width:92px; height:92px; place-items:center; margin-bottom:20px; border-radius:28px; background:linear-gradient(135deg,#635bff,#a66cff); color:#fff; font-size:34px; font-weight:900; box-shadow:0 16px 38px rgba(99,91,255,.25); }
.scanned-profile-identity > p { color:#9696a0; font-size:12px; letter-spacing:.08em; }
.scanned-profile-identity h1 { margin:5px 0 15px; font-size:clamp(34px,6vw,58px); line-height:1.1; letter-spacing:-.05em; }
.scanned-profile-company { display:flex; flex-wrap:wrap; justify-content:center; gap:7px 15px; color:#62626c; font-size:14px; font-weight:700; }
.scanned-profile-company span { display:block; }
.scanned-profile-saved-date { display:inline-flex; align-items:center; min-height:30px; margin-top:17px; padding:0 13px; border-radius:999px; background:#f1f0ff; color:#7169c8!important; font-size:11px!important; font-weight:800; letter-spacing:.03em!important; }
.scanned-profile-saved-date[hidden] { display:none; }
.scanned-profile-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:0 28px 36px; }
.scanned-profile-images > .profile-section-title { grid-column:1 / -1; margin-bottom:2px; }
.scanned-profile-images figure { margin:0; }
.scanned-profile-images figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px; color:#8a8a94; font-size:12px; font-weight:800; }
.scanned-profile-images figcaption a { color:var(--profile-theme,#635bff); font-size:11px; font-weight:800; }
.scanned-profile-image-link { display:block; border-radius:18px; }
.scanned-profile-images img { display:block; width:100%; aspect-ratio:85.6/53.98; object-fit:contain; border:1px solid #e4e4ea; border-radius:18px; background:#f5f5f8; box-shadow:0 12px 30px rgba(20,20,35,.07); }
.scanned-profile-section { padding:34px 28px; border-top:1px solid #ededf2; }
.scanned-profile-section h2 { margin:8px 0 20px; font-size:24px; }
.scanned-profile-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.scanned-profile-links a { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:16px; min-height:72px; padding:14px 18px; border:1px solid #e8e8ee; border-radius:18px; background:#fafafd; transition:transform .2s ease,box-shadow .2s ease; }
.scanned-profile-links a:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(30,30,50,.08); }
.scanned-profile-links a span { min-width:0; }
.scanned-profile-links strong,.scanned-profile-links small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scanned-profile-links strong { font-size:14px; }.scanned-profile-links small { margin-top:4px; color:#8a8a95; font-size:12px; }.scanned-profile-links b { color:#777782; }
.scanned-profile-text { color:#5f5f69; line-height:1.85; white-space:pre-wrap; }
.scanned-profile-page .scanned-profile-main { width:min(100% - 32px,1200px); }
.scanned-profile-page .scanned-profile-card { overflow:visible; }
.scanned-profile-page .scanned-profile-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.scanned-profile-page .scanned-profile-images.has-single-image { grid-template-columns:minmax(0,1fr); }
.scanned-profile-page .scanned-profile-images.has-single-image figure { width:min(100%,560px); }
.scanned-profile-page .scanned-profile-images figure[hidden],
.scanned-profile-page .scanned-profile-images[hidden] { display:none; }
@media(max-width:640px){.scanned-profile-main{width:min(100% - 18px,860px);padding:28px 0 60px}.scanned-profile-card{border-radius:26px}.scanned-profile-images,.scanned-profile-links{grid-template-columns:1fr}.scanned-profile-images{padding:0 18px 26px}.scanned-profile-section{padding:28px 18px}.scanned-profile-topbar{padding:18px}.scanned-profile-identity{padding:38px 18px 30px}}

/* ========================================
   マイページ UI polish
======================================== */
.community-page[data-community-page="mypage"] {
    background:
        radial-gradient(circle at 8% 4%, rgba(112, 96, 255, .16), transparent 28%),
        radial-gradient(circle at 92% 20%, rgba(73, 192, 255, .12), transparent 30%),
        linear-gradient(145deg, #f8f7ff 0%, #f6f7fb 48%, #f1f8fc 100%);
}

.community-page[data-community-page="mypage"] .community-header {
    border-bottom-color: rgba(99, 91, 255, .08);
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 8px 30px rgba(30, 28, 60, .04);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.community-page[data-community-page="mypage"] .community-main {
    width: min(calc(100% - 48px), 1220px);
    padding-top: 56px;
}

.community-page[data-community-page="mypage"] .community-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 34px;
    padding: clamp(28px, 4vw, 52px);
    border-color: rgba(99, 91, 255, .11);
    border-radius: 36px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 30px 80px rgba(31, 28, 70, .09);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.community-page[data-community-page="mypage"] .community-hero::before {
    position: absolute;
    z-index: -1;
    top: -150px;
    right: -110px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 91, 255, .17), rgba(99, 91, 255, 0) 68%);
    content: "";
    pointer-events: none;
}

.community-page[data-community-page="mypage"] .community-hero .section-label {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    margin-bottom: 8px;
    padding: 0 13px;
    border: 1px solid rgba(99, 91, 255, .14);
    border-radius: 999px;
    background: rgba(240, 239, 255, .85);
    font-size: 10px;
    letter-spacing: .18em;
}

.community-page[data-community-page="mypage"] .community-hero h1 {
    max-width: 820px;
    font-size: clamp(37px, 5vw, 64px);
    line-height: 1.08;
}

.community-page[data-community-page="mypage"] .community-hero-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding-top: 30px;
    border-top-color: rgba(35, 34, 50, .07);
}

.community-page[data-community-page="mypage"] .community-hero-actions > * {
    position: relative;
    min-height: 76px;
    justify-content: flex-start;
    overflow: hidden;
    padding: 13px 34px 13px 56px;
    border-radius: 20px;
    text-align: left;
    line-height: 1.35;
    box-shadow: 0 12px 28px rgba(34, 32, 65, .07);
}

.community-page[data-community-page="mypage"] .community-hero-actions > *::before {
    position: absolute;
    left: 15px;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .2);
    font-size: 15px;
    font-weight: 900;
}

.community-page[data-community-page="mypage"] .community-hero-actions > *::after {
    position: absolute;
    right: 14px;
    content: "→";
    font-size: 13px;
    opacity: .6;
    transition: transform .2s ease;
}

.community-page[data-community-page="mypage"] .community-hero-actions > *:hover::after {
    transform: translateX(3px);
}

.community-page[data-community-page="mypage"] .community-hero-actions > :nth-child(1)::before { content: "●"; }
.community-page[data-community-page="mypage"] .community-hero-actions > :nth-child(2)::before { content: "▣"; }
.community-page[data-community-page="mypage"] .community-hero-actions > :nth-child(3)::before { content: "↓"; }
.community-page[data-community-page="mypage"] .community-hero-actions > :nth-child(4)::before { content: "✎"; }
.community-page[data-community-page="mypage"] .community-hero-actions > :nth-child(5)::before { content: "⚙"; }

.community-page[data-community-page="mypage"] .community-hero-actions .community-primary-button {
    background: linear-gradient(135deg, #665cff, #5549e9);
    box-shadow: 0 17px 34px rgba(86, 73, 233, .24);
}

.community-page[data-community-page="mypage"] .community-hero-actions .community-soft-button {
    border-color: rgba(99, 91, 255, .14);
    background: linear-gradient(145deg, #f3f1ff, #ebe9ff);
    color: #5149d8;
}

.community-page[data-community-page="mypage"] .community-hero-actions .community-secondary-button:not(.community-soft-button) {
    border-color: rgba(28, 28, 36, .07);
    background: rgba(255, 255, 255, .9);
}

.community-page[data-community-page="mypage"] .community-hero-actions .community-secondary-button::before {
    background: #f3f3f7;
    color: #696972;
}

.community-page[data-community-page="mypage"] .community-hero-actions .community-soft-button::before {
    background: rgba(99, 91, 255, .1);
    color: #5d54e8;
}

.community-page[data-community-page="mypage"] .community-section {
    padding: clamp(24px, 3.4vw, 42px);
    border-color: rgba(99, 91, 255, .09);
    border-radius: 34px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 26px 70px rgba(31, 28, 70, .07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.community-page[data-community-page="mypage"] .community-library-card {
    position: relative;
    min-height: 126px;
    padding: 25px;
    border-color: rgba(25, 25, 35, .07);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,249,253,.92));
}

.community-page[data-community-page="mypage"] .community-library-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(145deg, #f0efff, #e4e1ff);
    box-shadow: inset 0 0 0 1px rgba(99, 91, 255, .08);
}

.community-page[data-community-page="mypage"] .community-library-copy strong {
    font-size: 18px;
    letter-spacing: -.02em;
}

@media (max-width: 1080px) {
    .community-page[data-community-page="mypage"] .community-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .community-page[data-community-page="mypage"] .community-main {
        width: min(calc(100% - 24px), 1220px);
        padding-top: 28px;
    }
    .community-page[data-community-page="mypage"] .community-hero {
        gap: 25px;
        padding: 24px 17px;
        border-radius: 27px;
    }
    .community-page[data-community-page="mypage"] .community-hero-actions {
        grid-template-columns: 1fr;
        gap: 9px;
        padding-top: 22px;
    }
    .community-page[data-community-page="mypage"] .community-hero-actions > * {
        min-height: 64px;
        border-radius: 17px;
    }
    .community-page[data-community-page="mypage"] .community-section {
        padding: 22px 14px;
        border-radius: 27px;
    }
    .community-page[data-community-page="mypage"] .community-library-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: 105px;
        padding: 18px 15px;
    }
    .community-page[data-community-page="mypage"] .community-library-card .community-count {
        position: absolute;
        top: 13px;
        right: 13px;
        width: 30px;
        height: 30px;
        font-size: 11px;
    }
    .community-page[data-community-page="mypage"] .community-library-arrow {
        display: none;
    }
}

/* ========================================
   NFC Digital Card - Global visual system
======================================== */
/* 以前のデザインへ戻すため、全体スタイル調整を無効化しています。 */
@media not all {
:root {
    --color-background: #f5f5fa;
    --color-surface: rgba(255, 255, 255, .92);
    --color-text: #15151a;
    --color-text-light: #74747f;
    --color-border: rgba(30, 28, 48, .09);
    --color-main: #6257f6;
    --color-main-dark: #493ed5;
    --color-main-light: #efedff;
    --shadow-small: 0 10px 30px rgba(31, 28, 68, .06);
    --shadow-medium: 0 24px 65px rgba(31, 28, 68, .1);
    --shadow-large: 0 38px 110px rgba(31, 28, 68, .15);
}

html { background: #f5f5fa; }

body {
    background:
        radial-gradient(circle at 6% 2%, rgba(99, 87, 246, .075), transparent 24%),
        radial-gradient(circle at 96% 18%, rgba(66, 190, 255, .055), transparent 24%),
        var(--color-background);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: rgba(98, 87, 246, .2); color: #17151f; }

:where(a, button, input, textarea, select, summary):focus-visible {
    outline: 3px solid rgba(98, 87, 246, .3);
    outline-offset: 3px;
}

.header,
.auth-header,
.edit-header,
.public-profile-actions,
.community-header {
    border-bottom-color: rgba(38, 34, 78, .075);
    background: rgba(255, 255, 255, .79);
    box-shadow: 0 8px 30px rgba(31, 28, 68, .04);
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
}

.logo-mark {
    background: linear-gradient(145deg, #1b1b21, #09090c);
    box-shadow: 0 9px 22px rgba(16, 16, 22, .17);
}

.navigation-link,
.auth-back-link,
.community-text-button,
.edit-preview-link {
    transition: color .2s ease, transform .2s ease, background .2s ease;
}

.primary-button,
.navigation-button,
.auth-submit-button,
.edit-save-button,
.order-submit-button,
.community-primary-button,
.product-button {
    background: linear-gradient(135deg, #6c61ff 0%, #5146df 100%);
    box-shadow: 0 15px 34px rgba(81, 70, 223, .23);
}

.primary-button:hover,
.navigation-button:hover,
.auth-submit-button:hover,
.edit-save-button:hover,
.order-submit-button:hover,
.community-primary-button:hover,
.product-button:hover {
    background: linear-gradient(135deg, #776dff 0%, #5548e5 100%);
    box-shadow: 0 20px 42px rgba(81, 70, 223, .3);
    transform: translateY(-3px);
}

.secondary-button,
.community-secondary-button,
.edit-cancel-button,
.order-complete-actions a {
    border-color: rgba(33, 31, 48, .1);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 9px 24px rgba(31, 28, 68, .045);
}

.section-label,
.auth-label,
.profile-modal-label {
    color: var(--color-main);
    font-weight: 800;
}

.section-title,
.hero-title,
.auth-title,
.order-heading h1,
.edit-heading h1,
.community-hero h1,
.community-list-hero h1,
.admin-topbar h1 {
    color: #121217;
    text-wrap: balance;
}

/* Landing page */
.hero {
    background:
        radial-gradient(circle at 16% 18%, rgba(110, 96, 255, .19), transparent 30%),
        radial-gradient(circle at 85% 24%, rgba(98, 205, 255, .16), transparent 28%),
        linear-gradient(145deg, #fbfaff 0%, #f5f3ff 50%, #f3f9fc 100%);
}

.hero-label {
    border-color: rgba(98, 87, 246, .15);
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 10px 30px rgba(54, 45, 116, .06);
    backdrop-filter: blur(12px);
}

.nfc-card,
.phone {
    filter: drop-shadow(0 28px 35px rgba(26, 23, 55, .16));
}

.feature-card,
.step,
.product-card,
.faq-item,
.preview-card {
    border-color: rgba(35, 32, 61, .075);
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(250,250,254,.92));
    box-shadow: 0 16px 45px rgba(31, 28, 68, .065);
}

.feature-card:hover,
.step:hover,
.product-card:hover {
    border-color: rgba(98, 87, 246, .18);
    box-shadow: 0 28px 58px rgba(31, 28, 68, .12);
    transform: translateY(-7px);
}

.feature-icon,
.step-number {
    background: linear-gradient(145deg, #f1efff, #e7e4ff);
    box-shadow: inset 0 0 0 1px rgba(98, 87, 246, .08);
}

.design,
.how-to-use,
.faq {
    background:
        radial-gradient(circle at 90% 10%, rgba(98, 87, 246, .07), transparent 28%),
        #f7f7fb;
}

.faq-item[open] {
    border-color: rgba(98, 87, 246, .2);
    box-shadow: 0 20px 48px rgba(31, 28, 68, .1);
}

.cta { background: linear-gradient(145deg, #171620, #0c0c11); }

/* Authentication, activation and account pages */
.auth-main,
.activation-main {
    background:
        radial-gradient(circle at 12% 12%, rgba(98, 87, 246, .17), transparent 31%),
        radial-gradient(circle at 88% 82%, rgba(64, 191, 255, .12), transparent 30%),
        #f6f6fa;
}

.auth-card,
.activation-card {
    border-color: rgba(255, 255, 255, .84);
    border-radius: 32px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 32px 90px rgba(31, 28, 68, .13);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
}

.input-wrapper,
.edit-field input,
.edit-field textarea,
.additional-item-row input,
.additional-item-row select,
.scan-field input,
.scan-field textarea,
.order-quantity select {
    border-color: rgba(35, 32, 61, .11);
    background: rgba(250, 250, 253, .9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.input-wrapper:focus-within,
.edit-field input:focus,
.edit-field textarea:focus,
.additional-item-row input:focus,
.additional-item-row select:focus,
.scan-field input:focus,
.scan-field textarea:focus {
    border-color: var(--color-main);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(98, 87, 246, .1), 0 10px 28px rgba(31, 28, 68, .06);
}

/* Order and editing pages */
.order-page,
.profile-edit-page,
.admin-page {
    background:
        radial-gradient(circle at 100% 0%, rgba(98, 87, 246, .07), transparent 26%),
        #f5f5f9;
}

.edit-panel,
.order-summary,
.square-payment-panel,
.order-complete-card {
    border-color: rgba(35, 32, 61, .075);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 22px 60px rgba(31, 28, 68, .08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.edit-panel {
    border-radius: 28px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.edit-panel:focus-within {
    border-color: rgba(98, 87, 246, .16);
    box-shadow: 0 28px 70px rgba(31, 28, 68, .1);
}

.edit-panel-heading > span {
    border-radius: 13px;
    background: linear-gradient(145deg, #f0eeff, #e5e2ff);
}

.edit-dropzone {
    border-color: rgba(98, 87, 246, .25);
    background: linear-gradient(145deg, #fbfaff, #f5f3ff);
}

.order-summary { border-radius: 28px; }

/* Public profile */
.public-profile-page {
    background:
        radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--profile-theme) 14%, transparent), transparent 32%),
        radial-gradient(circle at 92% 82%, rgba(64, 191, 255, .09), transparent 30%),
        #f5f5f9;
}

.public-profile-card,
.scanned-profile-card {
    border-color: rgba(35, 32, 61, .08);
    box-shadow: 0 35px 100px rgba(31, 28, 68, .13);
}

.public-profile-link,
.profile-business-card-link,
.scanned-profile-links a {
    border-color: rgba(35, 32, 61, .075);
    background: linear-gradient(145deg, #fff, #fafafe);
    box-shadow: 0 12px 30px rgba(31, 28, 68, .05);
}

.public-profile-link:hover,
.profile-business-card-link:hover,
.scanned-profile-links a:hover {
    border-color: color-mix(in srgb, var(--profile-theme) 25%, #dedee6);
    box-shadow: 0 20px 42px rgba(31, 28, 68, .1);
    transform: translateY(-4px);
}

/* Community and scanner */
.community-page {
    background:
        radial-gradient(circle at 7% 3%, rgba(98, 87, 246, .12), transparent 27%),
        radial-gradient(circle at 95% 20%, rgba(64, 191, 255, .08), transparent 26%),
        #f5f5f9;
}

.community-hero,
.community-section,
.community-list-hero,
.scan-card-panel {
    border-color: rgba(35, 32, 61, .075);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 28px 76px rgba(31, 28, 68, .085);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.community-person-card,
.community-library-card {
    border-color: rgba(35, 32, 61, .075);
    background: linear-gradient(145deg, #fff, #fafafe);
    box-shadow: 0 14px 34px rgba(31, 28, 68, .055);
}

.community-person-card:hover,
.community-library-card:hover {
    border-color: rgba(98, 87, 246, .18);
    box-shadow: 0 23px 48px rgba(31, 28, 68, .1);
}

.scan-camera-shell {
    box-shadow: 0 24px 65px rgba(10, 10, 18, .22);
}

/* Admin console */
.admin-sidebar {
    border-right-color: rgba(255, 255, 255, .06);
    background:
        radial-gradient(circle at 20% 0%, rgba(98, 87, 246, .2), transparent 30%),
        linear-gradient(180deg, #15151c 0%, #0c0c11 100%);
    box-shadow: 14px 0 45px rgba(20, 18, 42, .08);
}

.admin-navigation a {
    border: 1px solid transparent;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.admin-navigation a:hover,
.admin-navigation a.active {
    border-color: rgba(255, 255, 255, .07);
    background: linear-gradient(135deg, rgba(112, 99, 255, .24), rgba(255, 255, 255, .08));
    transform: translateX(3px);
}

.admin-stat-card,
.admin-section {
    border-color: rgba(35, 32, 61, .07);
    background: rgba(255, 255, 255, .91);
    box-shadow: 0 17px 48px rgba(31, 28, 68, .065);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.admin-stat-card:hover {
    border-color: rgba(98, 87, 246, .15);
    box-shadow: 0 25px 58px rgba(31, 28, 68, .11);
}

@media (max-width: 760px) {
    .auth-card,
    .activation-card,
    .edit-panel,
    .order-summary,
    .community-hero,
    .community-section,
    .community-list-hero,
    .scan-card-panel {
        border-radius: 24px;
    }

    .section { padding-top: 88px; padding-bottom: 88px; }
    .feature-card:hover,
    .step:hover,
    .product-card:hover { transform: none; }
}
}
.order-material-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.order-material-options label {
    cursor: pointer;
}

.order-material-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.order-material-options span {
    display: grid;
    gap: 5px;
    min-height: 82px;
    align-content: center;
    padding: 14px 16px;
    border: 1px solid rgba(17, 17, 20, 0.1);
    border-radius: 16px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.order-material-options small {
    color: #777783;
}

.order-material-options input:checked + span {
    border-color: #635bff;
    box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
    transform: translateY(-2px);
}

@media (max-width: 620px) {
    .order-material-options {
        grid-template-columns: 1fr;
    }
}