/* ========================================
   AI入学式 特設サイト - スタイルシート
   Figmaデザイン準拠 (SP only, wood texture)
   ======================================== */

/* ========================================
   CSS Variables (カスタムプロパティ)
   ======================================== */
:root {
    /* Design Spec Color Palette */
    --color-white: #FFFFFF;
    --color-black: #222222;
    --color-dark-navy: #222222;
    --color-navy: #000066;
    --color-cream: #F2F1D4;
    --color-gray: #808080;
    --color-light-gray: #A2A2A2;
    --color-border-gray: #DADADA;

    /* Semantic Colors */
    --color-error: #EF4444;
    --color-warning: #DC2626;
    --color-success: #10B981;

    /* Backward-compat aliases used in JS-generated inline styles */
    --color-primary: #000066;
    --color-primary-dark: #1E296F;
    --color-primary-bg: #E6F2FF;
    --color-primary-light: #4A5F9F;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #A2A2A2;
    --color-gray-500: #808080;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;

    /* Typography */
    --font-family-base: 'Zen Kaku Gothic New', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-h1: 45px;
    --font-size-h2: 36px;
    --font-size-h3: 28px;
    --font-size-body-large: 30px;
    --font-size-body: 23px;
    --font-size-body-medium: 21px;
    --font-size-body-small: 20px;
    --font-size-caption: 19px;
    --font-size-small: 17px;

    /* Legacy font-size aliases */
    --font-size-xs: 15px;
    --font-size-sm: 17px;
    --font-size-base: 19px;
    --font-size-lg: 21px;
    --font-size-xl: 23px;
    --font-size-2xl: 27px;
    --font-size-3xl: 33px;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-card: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* Z-index */
    --z-dropdown: 100;
    --z-modal: 200;
    --z-loading: 300;

    /* Rainbow dot colors */
}

/* ========================================
   Reset & Base Styles
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-black);
    background-image: url('../assets/images/design-parts/image_木目.png');
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    overflow-x: hidden;
}

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

a {
    color: var(--color-navy);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-dark-navy);
}

button {
    font-family: inherit;
    cursor: pointer;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: var(--font-size-body-medium);
}

/* ========================================
   Layout
   ======================================== */
.container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

.page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.page[hidden] {
    display: none !important;
}

[hidden] {
    display: none !important;
}

/* Colorful Dot Line Decoration: removed */

/* ========================================
   Loading Overlay
   ======================================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: var(--z-loading);
    transition: opacity var(--transition-base);
}

.loading-overlay[hidden] {
    opacity: 0;
    pointer-events: none;
    display: flex !important;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-border-gray);
    border-top-color: var(--color-dark-navy);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    margin-top: var(--spacing-md);
    color: var(--color-gray);
    font-size: var(--font-size-caption);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   Typography
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-dark-navy);
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
    color: #222222;
}

h3 {
    font-size: var(--font-size-h3);
    color: #222222;
}

.site-title {
    font-size: var(--font-size-h2);
    font-weight: 600;
    color: var(--color-dark-navy);
    text-align: center;
    padding: 0;
    margin: 0;
}

.section-title {
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--color-dark-navy);
    margin-bottom: -18px;
    padding-bottom: 0;
    text-align: center;
    position: relative;
}

.section-title::after {
    content: none;
}

.section-title--editable {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 90px;
}

.section-title--editable .section-title__deco {
    height: 60px;
    width: auto;
    flex-shrink: 0;
    z-index: 0;
}

.section-title--editable .section-title__deco:first-child {
    margin-right: -16px;
    align-self: flex-start;
}

.section-title--editable .section-title__deco:last-child {
    margin-left: -16px;
    align-self: flex-end;
}

.section-title--editable .section-title__text {
    position: relative;
    z-index: 1;
    font-size: var(--font-size-h1);
    font-weight: 700;
    color: #222222;
    white-space: nowrap;
}

.section-title--editable .section-title__sub {
    font-size: var(--font-size-h3);
    font-weight: 700;
}

/* ========================================
   Buttons
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px;
    font-size: var(--font-size-body-medium);
    font-weight: 600;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-dark-navy);
    background-color: var(--color-white);
    color: var(--color-dark-navy);
    transition: all var(--transition-fast);
    text-align: center;
    box-shadow: var(--shadow-button);
    line-height: 1.4;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background-color: var(--color-white);
    color: var(--color-dark-navy);
    border: 2px solid var(--color-dark-navy);
}

.btn-primary::after {
    content: ' >';
    margin-left: 4px;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-cream);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-gray);
    border: 2px solid var(--color-border-gray);
}

.btn-secondary:hover:not(:disabled) {
    background-color: #F5F5F5;
}

.btn-text {
    background: none;
    color: var(--color-gray);
    padding: var(--spacing-sm);
    border: none;
    box-shadow: none;
}

.btn-text:hover {
    color: var(--color-navy);
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-outline-navy {
    background-color: var(--color-white);
    color: var(--color-dark-navy);
    border: 2px solid var(--color-dark-navy);
    padding: 12px 40px;
    font-size: var(--font-size-body-medium);
    font-weight: 600;
}

.btn-outline-navy::after {
    content: ' >';
    margin-left: 4px;
}

.btn-outline-navy:hover:not(:disabled) {
    background-color: var(--color-cream);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.btn-outline-white {
    background-color: var(--color-white);
    color: var(--color-dark-navy);
    border: none;
    padding: 10px 40px;
    font-size: var(--font-size-body-medium);
    font-weight: 600;
}

.btn-outline-white:hover:not(:disabled) {
    background-color: #F0F0F0;
    transform: translateY(-2px);
}

.btn-back {
    background: none;
    border: none;
    padding: var(--spacing-sm);
    color: var(--color-gray);
    font-size: var(--font-size-xl);
    display: flex;
    align-items: center;
    transition: color var(--transition-fast);
    box-shadow: none;
}

.btn-back:hover {
    color: var(--color-navy);
}

.btn-group {
    display: flex;
    gap: var(--spacing-md);
}

.btn-group .btn {
    flex: 1;
}

.btn-center {
    margin: var(--spacing-xl) auto 0;
    display: flex;
}

.btn-small {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-caption);
}

.btn-navy {
    background-color: var(--color-dark-navy);
    color: var(--color-white);
    border: 2px solid var(--color-dark-navy);
    padding: 14px 40px;
    font-size: var(--font-size-body-medium);
    font-weight: 600;
}

.btn-navy:hover:not(:disabled) {
    background-color: #0F1629;
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

/* ========================================
   Forms
   ======================================== */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-group label {
    font-size: var(--font-size-caption);
    font-weight: 600;
    color: var(--color-black);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px var(--spacing-md);
    border: 1px solid var(--color-border-gray);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    font-size: var(--font-size-body-medium);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgba(0, 0, 102, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-light-gray);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23808080' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: 40px;
}

/* Character Counter */
.char-counter {
    font-size: var(--font-size-small);
    color: var(--color-gray);
    text-align: right;
    margin-top: -4px;
}

.char-counter .char-count {
    font-weight: 600;
    color: var(--color-navy);
}

.readonly-field {
    padding: var(--spacing-md);
    background-color: #F5F5F5;
    border-radius: var(--radius-md);
    color: var(--color-gray);
    font-size: var(--font-size-caption);
}

.form-section {
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--color-border-gray);
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section h3 {
    margin-bottom: var(--spacing-md);
    color: var(--color-dark-navy);
    font-size: var(--font-size-body);
}

/* ========================================
   Error Messages
   ======================================== */
.error-message {
    color: var(--color-error);
    font-size: var(--font-size-caption);
    padding: var(--spacing-md);
    background-color: #FEF2F2;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-error);
}

.error-message[hidden] {
    display: none;
}

#login-error:not([hidden]) {
    margin-bottom: var(--spacing-md);
}

/* NG Word Validation Errors */
.ng-error-message {
    color: var(--color-error);
    font-size: var(--font-size-caption);
    margin-top: 4px;
    padding: 4px 8px;
    background-color: #FEF2F2;
    border-radius: 4px;
    border-left: 3px solid var(--color-error);
}

.ng-error-message[hidden] {
    display: none;
}

input.ng-invalid,
textarea.ng-invalid {
    border-color: var(--color-error) !important;
    background-color: #FFF5F5 !important;
}

input.ng-invalid:focus,
textarea.ng-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.error-container {
    text-align: center;
    padding: var(--spacing-2xl);
}

/* ========================================
   Warning Box
   ======================================== */
.warning-box {
    background-color: #FEF3C7;
    border-left: 4px solid #F59E0B;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.warning-box p {
    color: var(--color-black);
    font-size: var(--font-size-caption);
}

.warning-text {
    color: var(--color-warning);
    font-size: var(--font-size-caption);
    font-weight: 600;
}

/* ========================================
   Page Headers
   ======================================== */
.page-header {
    padding: var(--spacing-lg) 0;
    text-align: center;
    position: relative;
}

/* Puzzle piece decorations now included in heading images */
.page-header::before,
.page-header::after {
    content: none;
}

.page-header h1 {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-h1);
    color: var(--color-dark-navy);
}

.page-description {
    color: var(--color-gray);
    font-size: var(--font-size-caption);
    margin-bottom: var(--spacing-sm);
}

.page-note {
    color: var(--color-light-gray);
    font-size: var(--font-size-small);
}

/* ========================================
   Site Header (white logo bar)
   ======================================== */
.site-header {
    background-color: #fff;
    width: 100%;
    padding: var(--spacing-md) var(--spacing-md);
    display: flex;
    justify-content: center;
}

.school-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.school-logo-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   Page Footer
   ======================================== */
.page-footer {
    text-align: center;
    padding: var(--spacing-lg) 0;
    margin-top: auto;
}

.page-footer p {
    font-size: var(--font-size-small);
    color: var(--color-gray);
}

/* ========================================
   Login Page
   ======================================== */
.page-login {
    justify-content: space-between;
    padding-top: 0;
}

/* Puzzle decorations for login */
.page-login .login-header {
    position: relative;
    margin-bottom: var(--spacing-2xl);
}

.page-login .login-header::before,
.page-login .login-header::after {
    content: none;
}

/* Additional puzzle decorations for login form area */
.page-login .login-form {
    position: relative;
}

.page-login .login-form::before,
.page-login .login-form::after {
    content: none;
}

.page-login .login-notes {
    position: relative;
}

.page-login .login-notes::after {
    content: none;
}

.login-header .site-title {
    font-size: var(--font-size-h1);
    color: var(--color-dark-navy);
    font-weight: 600;
}

.login-form {
    background-color: var(--color-white);
    padding: var(--spacing-2xl) var(--spacing-xl);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.login-form .form-group {
    margin-bottom: var(--spacing-md);
}

.login-notes {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md) 0;
    text-align: left;
}

.login-notes p {
    font-size: var(--font-size-small);
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
    line-height: 1.7;
}

/* ========================================
   Initial Registration Pages
   ======================================== */
.page-initial-profile,
.page-initial-ceremony,
.page-initial-intro {
    justify-content: space-between;
    padding-top: 0;
}

.page-initial-profile .page-header h1,
.page-initial-ceremony .page-header h1,
.page-initial-intro .page-header h1 {
    font-size: var(--font-size-h2);
    color: var(--color-dark-navy);
    font-weight: 600;
}

/* Initial Profile Box */
.initial-profile-box {
    background-color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.initial-profile-box .form {
    background-color: transparent;
    padding: 0;
    box-shadow: none;
}

.ceremony-intro-text {
    margin-bottom: var(--spacing-lg);
}

.ceremony-intro-text p {
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
    line-height: 1.7;
    font-size: var(--font-size-body-small);
}

.warning-text-box {
    margin-bottom: var(--spacing-xl);
    background-color: #FFF5F5;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.warning-text-box .warning-title {
    color: var(--color-warning);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-body-small);
}

.warning-text-box .warning-content {
    color: var(--color-warning);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
    line-height: 1.6;
    font-size: var(--font-size-caption);
}

.page-initial-profile .form,
.page-initial-ceremony .form,
.page-initial-intro .form {
    background-color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.ceremony-intro-box {
    background-color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-card);
}

.ceremony-intro-box p {
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
    line-height: 1.7;
}

.ceremony-intro-box p:last-child {
    margin-bottom: 0;
}

.page-initial-ceremony .warning-box {
    background-color: #FFF5F5;
    border-left: 4px solid var(--color-warning);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
}

.page-initial-ceremony .warning-box p {
    color: var(--color-warning);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.page-initial-ceremony .warning-box p:first-child {
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

/* ========================================
   Coming Soon Page
   ======================================== */
.page-coming-soon {
    justify-content: space-between;
    padding-top: 0;
    text-align: center;
}

.coming-soon-title {
    font-size: var(--font-size-h1);
    color: var(--color-dark-navy);
    font-weight: 600;
    margin-bottom: var(--spacing-xl);
}

/* Puzzle decoration images inside content boxes */
.puzzle-bordered__top,
.puzzle-bordered__bottom {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.puzzle-bordered__top {
    margin-bottom: var(--spacing-md);
}

.puzzle-bordered__bottom {
    margin-top: var(--spacing-md);
}

.coming-soon-content {
    background-color: var(--color-white);
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--spacing-xl);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.coming-soon-content h2 {
    font-size: var(--font-size-h1);
    color: var(--color-dark-navy);
    margin-bottom: var(--spacing-lg);
    font-weight: 600;
}

.coming-soon-content p {
    color: var(--color-black);
    font-size: var(--font-size-body-medium);
}

/* ========================================
   Main Top Page
   ======================================== */
.page-main-top {
    justify-content: space-between;
    padding-top: 0;
}

.page-main-top .container {
    padding: var(--spacing-xl) var(--spacing-md);
}

.main-header {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.main-subtitle {
    font-size: var(--font-size-body-small);
    color: var(--color-dark-navy);
    margin-bottom: var(--spacing-xs);
    font-weight: 400;
}

.main-header .site-title {
    font-size: var(--font-size-h2);
    color: var(--color-dark-navy);
    padding: 0;
    font-weight: 600;
}

.early-access-notice {
    background-color: #FFF8E8;
    border: 1px solid #F5C842;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    font-size: var(--font-size-body-small);
    font-weight: 600;
    color: #7A5C00;
    line-height: 1.6;
}

.intro-text {
    background-color: var(--color-white);
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-align: center;
}

.intro-text p {
    font-size: var(--font-size-body-small);
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

.intro-text p:last-child {
    margin-bottom: 0;
}

.menu-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.menu-card {
    background: none;
    padding: var(--spacing-md) 0;
    border-radius: 0;
    box-shadow: none;
}

.menu-card h3 {
    color: var(--color-dark-navy);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-body);
    font-weight: 600;
}

.menu-card-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-card-title__frame {
    display: block;
    width: 90%;
    margin: 0 auto;
}

.menu-card-title__frame img {
    width: 100%;
    height: auto;
    display: block;
}

.menu-card-title__text {
    position: absolute;
    color: #222222;
    font-size: var(--font-size-body-large);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.menu-card p {
    font-size: var(--font-size-body-medium);
    color: var(--color-black);
    margin-bottom: var(--spacing-lg);
    line-height: 1.7;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.footer-section {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.footer-section p {
    font-size: var(--font-size-caption);
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
}

/* ========================================
   Ceremony Page
   ======================================== */
.page-ceremony {
    justify-content: space-between;
    padding-top: 0;
}

.ceremony-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.ceremony-header h1 {
    font-size: var(--font-size-h1);
    color: var(--color-dark-navy);
    font-weight: 600;
}

.ceremony-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    text-align: center;
}

.ceremony-loading p {
    margin-top: var(--spacing-md);
    color: var(--color-gray);
}

.ceremony-content {
    padding-bottom: var(--spacing-xl);
}

/* Ceremony card - dark navy header area */
.ceremony-card {
    background-color: #1E296F;
    padding: var(--spacing-2xl);
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.ceremony-title {
    color: var(--color-white);
    font-size: var(--font-size-h2);
    font-weight: 600;
    margin-bottom: var(--spacing-xl);
    line-height: 1.5;
}

.ceremony-video-wrapper {
    background-color: #C0C0C0;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.ceremony-video-wrapper video {
    width: 100%;
    height: 100%;
    display: block;
}

.ceremony-principal {
    color: var(--color-white);
    font-size: var(--font-size-caption);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

.puzzle-decoration-ceremony {
    width: 100%;
    display: block;
}

.ceremony-text-box {
    background-color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-card);
    text-align: left;
    box-shadow: var(--shadow-card);
}

.ceremony-text {
    line-height: 1.9;
    color: var(--color-black);
    white-space: pre-wrap;
    font-size: var(--font-size-body-medium);
}

.ceremony-error-box {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
}

.ceremony-error-box .error-message {
    color: var(--color-warning);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-body-medium);
}

/* ========================================
   Personality Page
   ======================================== */
.page-personality {
    justify-content: space-between;
    padding-top: 0;
}

.page-personality .page-header {
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.page-personality .page-header h1 {
    font-size: var(--font-size-h2);
    color: var(--color-dark-navy);
    font-weight: 600;
    line-height: 1.4;
}

/* Personality Intro */
.personality-intro {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.personality-intro-content {
    background-color: var(--color-white);
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-card);
}

.personality-intro-content h2 {
    color: var(--color-dark-navy);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-h2);
    font-weight: 600;
    line-height: 1.4;
}

.personality-intro-content p {
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
    font-size: var(--font-size-body-small);
}

.personality-intro-content .warning-text {
    color: var(--color-warning);
    font-weight: 600;
    font-size: var(--font-size-caption);
}

/* Personality Questions */
.personality-questions {
    padding: var(--spacing-lg) 0;
}

.personality-questions .section-title {
    margin-bottom: var(--spacing-xl);
}

.question-page-progress {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.progress-indicator-img {
    display: block;
    max-width: 300px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.questions-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.question-item {
    padding: var(--spacing-md);
    border-radius: var(--radius-card);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.25s ease;
}

.question-item.active {
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 2px var(--color-accent);
}

.question-item.faded {
    opacity: 0.35;
}

.question-text {
    color: var(--color-black);
    font-size: var(--font-size-body-medium);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.scale-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--spacing-sm);
}

.scale-option {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.scale-label-below {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    font-size: var(--font-size-body-medium);
    font-weight: 600;
    color: var(--color-black);
    white-space: nowrap;
}

.question-scale {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-lg);
}

.scale-option input[type="radio"] {
    appearance: none;
    width: 36px;
    height: 36px;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    background-color: #fff;
}

/* 左2つ（そう思う側）: 緑枠線 */
.scale-option:nth-child(1) input[type="radio"],
.scale-option:nth-child(2) input[type="radio"] {
    border-color: #4CAF50;
}

/* 右2つ（そう思わない側）: 紫枠線 */
.scale-option:nth-child(4) input[type="radio"],
.scale-option:nth-child(5) input[type="radio"] {
    border-color: #9C6ADE;
}

/* 中央: グレー枠線 */
.scale-option:nth-child(3) input[type="radio"] {
    border-color: #BDBDBD;
}

/* サイズ: 両端が大きく中央が小さい */
.scale-option:nth-child(1) input[type="radio"],
.scale-option:nth-child(5) input[type="radio"] {
    width: 56px;
    height: 56px;
}

.scale-option:nth-child(2) input[type="radio"],
.scale-option:nth-child(4) input[type="radio"] {
    width: 46px;
    height: 46px;
}

.scale-option:nth-child(3) input[type="radio"] {
    width: 34px;
    height: 34px;
}

/* ホバー: 枠線の色でぼんやり塗りつぶし */
.scale-option:nth-child(1) input[type="radio"]:hover,
.scale-option:nth-child(2) input[type="radio"]:hover {
    background-color: rgba(76, 175, 80, 0.2);
}

.scale-option:nth-child(4) input[type="radio"]:hover,
.scale-option:nth-child(5) input[type="radio"]:hover {
    background-color: rgba(156, 106, 222, 0.2);
}

.scale-option:nth-child(3) input[type="radio"]:hover {
    background-color: rgba(189, 189, 189, 0.2);
}

/* 選択済み: .selected クラスで管理 */
.scale-option:nth-child(1).selected input[type="radio"],
.scale-option:nth-child(2).selected input[type="radio"] {
    background-color: rgba(76, 175, 80, 0.3);
}

.scale-option:nth-child(4).selected input[type="radio"],
.scale-option:nth-child(5).selected input[type="radio"] {
    background-color: rgba(156, 106, 222, 0.3);
}

.scale-option:nth-child(3).selected input[type="radio"] {
    background-color: rgba(189, 189, 189, 0.3);
}

/* 非選択時: 薄く */
.scale-option.dimmed input[type="radio"] {
    opacity: 0.3;
}

/* チェックマーク */
.radio-checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    width: 20px;
    height: 20px;
}

.radio-checkmark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 11px;
    border-right: 2.5px solid;
    border-bottom: 2.5px solid;
    transform: translate(-50%, -60%) rotate(45deg);
}

.scale-option:nth-child(1) .radio-checkmark::after,
.scale-option:nth-child(2) .radio-checkmark::after {
    border-color: rgba(76, 175, 80, 0.9);
}

.scale-option:nth-child(4) .radio-checkmark::after,
.scale-option:nth-child(5) .radio-checkmark::after {
    border-color: rgba(156, 106, 222, 0.9);
}

.scale-option:nth-child(3) .radio-checkmark::after {
    border-color: rgba(160, 160, 160, 0.9);
}

.scale-option.selected .radio-checkmark {
    opacity: 1;
}

.question-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

/* Personality Result */
.personality-result {
    padding: var(--spacing-lg) 0;
}

.result-page-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.result-page-header h1 {
    font-size: var(--font-size-h1);
    color: var(--color-dark-navy);
    font-weight: 600;
}

.result-card {
    background-color: var(--color-white);
    border-radius: var(--radius-card);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-card);
}

.result-card-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.result-card-info {
    flex: 1;
    padding-left: var(--spacing-md);
    display: flex;
    align-items: center;
}

.result-type-name-wrapper {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.result-type-name {
    font-family: 'Kaisei Decol', serif;
    font-size: var(--font-size-h1);
    color: var(--color-dark-navy);
    font-weight: 700;
    white-space: nowrap;
}

.puzzle-piece-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 5px;
}

.puzzle-piece-label::before {
    content: '';
    position: static;
    flex-shrink: 0;
    transform: rotate(-30deg);
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15.2321 15.232C13.8557 15.5287 12.4615 15.7356 11.0583 15.8515C9.59731 15.9554 9.46147 14.7865 9.86953 14.1909C10.9218 12.654 10.0863 10.8212 7.92897 10.8212C5.77162 10.8212 4.93681 12.654 5.98841 14.1909C6.39594 14.7865 6.26074 15.9555 4.79969 15.8515C3.3965 15.7353 2.0023 15.5284 0.625845 15.232C0.329244 13.8556 0.122338 12.4614 0.00643826 11.0582C-0.0974731 9.59726 1.07139 9.46142 1.66698 9.86948C3.20386 10.9217 5.03666 10.0863 5.03666 7.92892C5.03666 5.77157 3.20429 4.93697 1.66741 5.98847C1.07182 6.396 -0.0971527 6.2608 0.00686455 4.79974C0.123034 3.39655 0.329936 2.00235 0.626272 0.625901C2.00273 0.329564 3.39692 0.122662 4.80011 0.00649406C6.26106 -0.0974168 6.3969 1.07145 5.98884 1.66704C4.93628 3.20434 5.77173 5.03704 7.92908 5.03704C10.0864 5.03704 10.9211 3.20434 9.86964 1.66736C9.46147 1.07177 9.59667 -0.0964556 11.0576 0.00681444C12.461 0.123025 13.8554 0.329926 15.2321 0.626221C15.5283 2.00283 15.7351 3.39717 15.8513 4.80049C15.9552 6.26144 14.7863 6.39749 14.1907 5.98911C12.6538 4.93697 10.8211 5.77232 10.8211 7.92967C10.8211 10.087 12.6538 10.9218 14.1907 9.87023C14.7863 9.46249 15.9552 9.5979 15.8513 11.059C15.7351 12.4621 15.5282 13.8563 15.2319 15.2328L15.2321 15.232Z' fill='%23E8998D'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.puzzle-piece-label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 100%;
    height: 2px;
    background: #FF7D77;
    filter: blur(4px);
}

.result-image-container {
    flex-shrink: 0;
    width: 40%;
}

.result-image-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-border-gray);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray);
    font-size: var(--font-size-body);
}

.result-catchphrase {
    font-family: 'RocknRoll One', sans-serif;
    font-size: var(--font-size-body-medium);
    font-weight: 400;
    color: var(--color-dark-navy);
    text-align: left;
    margin-top: var(--spacing-sm);
}

.result-summary {
    font-size: var(--font-size-caption);
    color: var(--color-black);
    line-height: 1.7;
    text-align: left;
    margin-bottom: var(--spacing-md);
}

/* Individual result sections */
.result-section {
    margin-bottom: var(--spacing-lg);
}

.result-section-title {
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--color-dark-navy);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.result-section-content {
    font-size: var(--font-size-caption);
    color: var(--color-black);
    line-height: 1.7;
    max-width: 92%;
    margin-inline: auto;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

/* Compatible types grid */
.compatible-types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.compatible-type-item {
    text-align: center;
}

.compatible-type-img-card {
    background-color: var(--color-white);
    border-radius: var(--radius-card);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--spacing-sm);
}

.compatible-type-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
}

.compatible-type-name {
    font-family: 'RocknRoll One', sans-serif;
    font-size: var(--font-size-body-medium);
    font-weight: 400;
    color: var(--color-dark-navy);
    margin-top: var(--spacing-sm);
}

.compatible-type-name.puzzle-piece-label::before {
    width: 20px;
    height: 20px;
    left: -24px;
}

/* Recommendations section */
.result-recommendations {
    margin-bottom: var(--spacing-xl);
}

.recommendations-title {
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--color-dark-navy);
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.recommendation-category {
    margin-bottom: var(--spacing-xl);
}

.category-title {
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--color-dark-navy);
    margin-bottom: var(--spacing-md);
    text-align: left;
}

.recommendation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

#recommendations-club,
#recommendations-activity {
    grid-template-columns: 1fr;
}

#recommendations-extra {
    grid-template-columns: 1fr;
}

.rec-btn {
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 2.5px solid var(--rec-color, #A9A5FF);
    background: #fff;
    border-radius: 0 18px 18px 0;
    padding: 10px 14px 10px 28px;
    width: 100%;
    max-width: min(68vw, 310px);
    margin: 0 auto;
    transition: transform 0.2s ease;
}

.rec-btn:hover {
    transform: translateY(-2px);
}

.rec-btn-puzzle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(calc(-50% - 1px));
    display: flex;
    align-items: center;
    pointer-events: none;
}

.rec-btn-puzzle svg {
    width: auto;
    height: 80%;
}

.rec-btn-text {
    flex: 1;
    color: var(--color-dark-navy);
    font-size: var(--font-size-caption);
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

.rec-btn-arrow {
    flex-shrink: 0;
    color: #555;
    font-size: 20px;
    line-height: 1;
}

.btn-rec-style {
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 2.5px solid #A9A5FF;
    background: #fff;
    border-radius: 0 18px 18px 0;
    padding: 10px 14px 10px 28px;
    width: 85%;
    margin: 0 auto;
    transition: transform 0.2s ease;
}

.btn-rec-style:hover {
    transform: translateY(-2px);
}

.btn-rec-style__puzzle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(calc(-50% - 1px));
    display: flex;
    align-items: center;
    pointer-events: none;
}

.btn-rec-style__puzzle svg {
    width: auto;
    height: 80%;
}

.btn-rec-style__text {
    flex: 1;
    color: var(--color-dark-navy);
    font-size: var(--font-size-caption);
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

.btn-rec-style__arrow {
    flex-shrink: 0;
    color: #555;
    font-size: 20px;
    line-height: 1;
}

.selection-required-label {
    display: inline-block;
    font-size: var(--font-size-small);
    color: var(--color-error);
    font-weight: 600;
    margin-left: var(--spacing-xs);
}

/* Personality Completed */
.personality-completed {
    padding: var(--spacing-3xl);
    text-align: center;
}

.personality-completed p {
    margin-bottom: var(--spacing-xl);
    color: var(--color-gray);
}

/* ========================================
   Intro Card Page
   ======================================== */
.page-intro-card {
    /* inherits page styles */
}

.page-intro-card .page-header {
    text-align: center;
}

.page-intro-card .page-header h1 {
    font-size: var(--font-size-h2);
    color: var(--color-dark-navy);
    font-weight: 600;
}

.intro-card-step1-lead {
    color: var(--color-black);
    font-size: var(--font-size-body-small);
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

.intro-card-description {
    background-color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-card);
}

.intro-card-description p {
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
    line-height: 1.7;
    font-size: var(--font-size-body-small);
}

.intro-card-description p:last-child {
    margin-bottom: 0;
}

.intro-card-description .warning-text {
    color: var(--color-warning);
    font-weight: 600;
}

.intro-card-main-form {
    background-color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.sheet-limit-warning {
    text-align: center;
    color: var(--color-warning);
    font-weight: 600;
    margin: var(--spacing-lg) 0;
}

/* Template Selector */
.template-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.template-option {
    cursor: pointer;
}

.template-option input {
    display: none;
}

.template-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.template-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-white);
    border: 2px solid var(--color-border-gray);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    overflow: hidden;
    transition: all var(--transition-fast);
    padding: var(--spacing-xs);
}

.template-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.template-placeholder {
    font-size: var(--font-size-small);
    color: var(--color-gray);
    text-align: center;
}

.template-option input:checked ~ .template-preview .template-image {
    border-color: var(--color-navy);
    box-shadow: 0 0 0 2px var(--color-navy);
}

.template-label {
    font-size: var(--font-size-small);
    color: var(--color-black);
    font-weight: 600;
    text-align: center;
}

/* Template Preview Layouts */
.color-blocks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    width: 100%;
    height: 100%;
}

.color-block {
    border-radius: 4px;
}

.grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
    width: 80%;
    height: 80%;
}

.grid-cell {
    background-color: var(--color-navy);
    border-radius: 4px;
}

.profile-layout,
.retro-layout {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

/* Motif Selector */
.motif-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.motif-option {
    cursor: pointer;
}

.motif-option input {
    display: none;
}

.motif-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.motif-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-white);
    border: 2px solid var(--color-border-gray);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: var(--font-size-small);
    color: var(--color-gray);
    text-align: center;
    padding: var(--spacing-xs);
    transition: all var(--transition-fast);
}

.motif-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.motif-option input:checked ~ .motif-preview .motif-image {
    border-color: var(--color-navy);
    box-shadow: 0 0 0 2px var(--color-navy);
}

.motif-label {
    font-size: var(--font-size-small);
    color: var(--color-black);
    text-align: center;
}

.motif-icon {
    font-size: 2rem;
}

/* Image Upload */
.image-upload-container {
    text-align: center;
}

.image-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    margin: 0 auto var(--spacing-md);
    background-color: #F5F5F5;
    border: 2px dashed var(--color-border-gray);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.image-upload-label:hover {
    border-color: var(--color-navy);
    background-color: rgba(0, 0, 102, 0.03);
}

.upload-icon {
    font-size: var(--font-size-h1);
    color: var(--color-light-gray);
    margin-bottom: var(--spacing-sm);
}

.image-upload-label span:last-child {
    font-size: var(--font-size-caption);
    color: var(--color-gray);
}

.image-preview {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto var(--spacing-md);
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.btn-remove-image {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background-color: var(--color-error);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    font-size: var(--font-size-caption);
    cursor: pointer;
}

.image-disclaimer {
    text-align: left;
}

.disclaimer-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-small);
    color: var(--color-black);
    line-height: 1.5;
    cursor: pointer;
}

.disclaimer-checkbox {
    margin-top: 3px;
    flex-shrink: 0;
}

.upload-note {
    font-size: var(--font-size-small);
    color: var(--color-gray);
}

.remaining-count {
    text-align: center;
    color: var(--color-gray);
    font-weight: 500;
}

/* Intro Card Intro */
.intro-card-intro {
    padding: var(--spacing-lg) 0;
}

.intro-card-intro-box {
    background-color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.intro-card-intro-box p {
    color: var(--color-black);
    line-height: 1.8;
    font-size: var(--font-size-body-small);
}

.intro-card-intro-box p.warning-text {
    color: var(--color-warning);
}

.intro-card-sample {
    margin-top: var(--spacing-lg);
    text-align: center;
}

.sample-label {
    font-weight: 600;
    color: var(--color-dark-navy);
    margin-bottom: var(--spacing-sm);
}

.sample-image-placeholder {
    max-width: 280px;
    margin: 0 auto;
}

.sample-image-placeholder img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.sample-placeholder {
    background-color: var(--color-border-gray);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    color: var(--color-gray);
    font-weight: 600;
    line-height: 1.5;
}

/* Intro Card Loading */
.intro-card-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    text-align: center;
}

.intro-card-loading p {
    margin-top: var(--spacing-md);
    color: var(--color-gray);
}

.loading-note {
    font-size: var(--font-size-small);
    color: var(--color-light-gray);
}

/* Intro Card Result */
.intro-card-result {
    padding: var(--spacing-lg) 0;
    text-align: center;
}

.generated-card-wrapper {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.generated-card-wrapper img {
    max-width: 100%;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.card-preview-container {
    margin-bottom: var(--spacing-xl);
}

.generating-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-caption);
    font-weight: 600;
    color: var(--color-dark-navy);
}

.loading-spinner-small {
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-border-gray);
    border-top-color: var(--color-dark-navy);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

.card-preview {
    margin-bottom: var(--spacing-xl);
}

.card-preview img {
    max-width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* Card Mock Preview */
.card-mock-preview {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
    border: 1px solid var(--color-border-gray);
}

.card-header-section {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    align-items: center;
}

.card-avatar {
    flex-shrink: 0;
}

.avatar-placeholder {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-dark-navy) 0%, var(--color-navy) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-profile-header {
    flex: 1;
    text-align: center;
}

.profile-divider-top,
.profile-divider-bottom {
    height: 2px;
    background-color: var(--color-dark-navy);
    margin: var(--spacing-xs) 0;
}

.card-profile-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-dark-navy);
    margin: 0;
    letter-spacing: 2px;
}

.card-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.info-row {
    background-color: #F5F5F5;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.info-row.full-width {
    grid-column: 1 / -1;
}

.info-label {
    font-size: var(--font-size-small);
    color: var(--color-gray);
    margin-bottom: var(--spacing-xs);
}

.info-value {
    font-size: var(--font-size-caption);
    font-weight: 600;
    color: var(--color-black);
}

.card-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.badge-item {
    background-color: #F5F5F5;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    text-align: center;
}

.badge-icon {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xs);
}

.badge-label {
    font-size: var(--font-size-small);
    color: var(--color-gray);
    margin-bottom: var(--spacing-xs);
}

.badge-value {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-black);
    word-break: break-word;
}

.card-message {
    background-color: #F5F5F5;
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
}

.message-label {
    font-size: var(--font-size-small);
    color: var(--color-gray);
    margin-bottom: var(--spacing-xs);
}

.message-content {
    font-size: var(--font-size-caption);
    color: var(--color-black);
    line-height: 1.6;
    word-break: break-word;
}

.card-actions {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
}

.card-actions .btn,
.card-actions .btn-puzzle-small {
    flex: 1;
}

.btn-remake {
    display: block;
    margin: var(--spacing-lg) auto 0;
    max-width: 280px;
    white-space: normal;
    line-height: 1.5;
}

/* Intro Card Steps */
.intro-card-step1 {
    /* Step 1: design selection */
}

.intro-card-step2 {
    /* Step 2: content input */
}

/* Intro Card Design Form */
.intro-card-design-form {
    /* wrapper for step1 content */
}

/* ========================================
   Modal Styles
   ======================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--spacing-md);
}

.modal-overlay[hidden] {
    display: none;
}

.modal-content {
    background-color: var(--color-white);
    border-radius: var(--radius-card);
    padding: var(--spacing-xl);
    max-width: 320px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-card);
}

.modal-close {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: none;
    border: none;
    font-size: var(--font-size-h2);
    color: var(--color-gray);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
}

.modal-close:hover {
    color: var(--color-black);
}

.modal-message {
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--color-dark-navy);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
}

.modal-content .btn {
    margin-top: var(--spacing-md);
}

/* ========================================
   Utility Classes
   ======================================== */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Circled text (e.g., ○月○日) */
.text-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.85em;
    margin: 0 2px;
}

/* Red highlighted/underlined text */
.text-highlight-red {
    color: var(--color-warning);
    font-weight: 700;
    text-decoration: underline;
}

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* ========================================
   Animations
   ======================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn var(--transition-base) ease-out;
}

/* ========================================
   PC Background Layout
   SP content centered, decorative images on sides
   ======================================== */

/* Hide PC background on mobile by default */
.pc-bg {
    display: none;
}

/* SP content wrapper - no effect on mobile */
.sp-content-wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
}

/* ========================================
   Responsive - SP (mobile)
   ======================================== */
@media (max-width: 480px) {
    .card-mock-preview {
        padding: var(--spacing-md);
    }

    .card-header-section {
        flex-direction: column;
        text-align: center;
    }

    .avatar-placeholder {
        width: 60px;
        height: 60px;
    }
}

@media (min-width: 480px) {
    .card-actions {
        flex-direction: row;
    }

    .card-actions .btn,
    .card-actions .btn-puzzle-small {
        flex: 1;
    }
}

/* ========================================
   Responsive - PC (desktop)
   SP content centered with side background images
   ======================================== */
@media (min-width: 769px) {
    body {
        /* PC body background color behind the side images */
        background-color: var(--color-cream);
        background-image: none;
    }

    /* SP content wrapper: fixed width, centered in the 3rd quarter (right-from-2nd) of viewport */
    .sp-content-wrapper {
        max-width: 480px;
        margin: 0 0 0 calc(62.5% - 240px);
        position: relative;
        z-index: 2;
        /* Wood bg only on the SP content area */
        background-image: url('../assets/images/design-parts/image_木目.png');
        background-size: 100% auto;
        background-repeat: repeat-y;
        background-attachment: fixed;
        min-height: 100vh;
        /* Warm border + shadow to clearly separate from PC background */
        border-left: 3px solid rgba(180, 140, 100, 0.45);
        border-right: 3px solid rgba(180, 140, 100, 0.45);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.3),
            0 0 48px rgba(80, 50, 20, 0.25),
            inset 0 0 24px rgba(0, 0, 0, 0.04);
    }

    /* Full-screen PC background image */
    .pc-bg {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 0;
        overflow: hidden;
    }

    /* Background image fills the viewport */
    .pc-bg-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    /* Container no longer needs max-width since wrapper handles it */
    .container {
        max-width: 100%;
    }

    /* Loading overlay should cover full screen on PC too */
    .loading-overlay {
        z-index: var(--z-loading);
    }

    /* Modal overlay covers full viewport */
    .modal-overlay {
        position: fixed;
        z-index: var(--z-modal);
    }
}

/* Even wider screens: no additional adjustments needed for full-screen bg */

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .loading-overlay,
    .btn,
    .btn-back {
        display: none !important;
    }

    .page {
        min-height: auto;
    }

    body {
        background-image: none;
        background-color: var(--color-white);
    }

    .pc-bg {
        display: none !important;
    }

    .sp-content-wrapper {
        box-shadow: none;
        max-width: 100%;
    }
}

/* ========================================
   Design Parts - Heading Images
   ======================================== */
.heading-image {
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin: 0 auto;
}

.heading-image-hero {
    max-width: 100%;
    border-radius: var(--radius-lg);
}

.heading-image-h2 {
    max-width: 240px;
}

.heading-image-h3 {
    max-width: 100%;
    height: auto;
}

/* Section title with heading image - remove underline */
.section-title:has(.heading-image)::after {
    content: none;
}

/* Menu card h3 with heading image */
.menu-card h3:has(.heading-image) {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.menu-card h3 .heading-image-h3 {
    max-width: 220px;
}

/* Result section title with heading image */
.result-section-title:has(.heading-image) {
    display: flex;
    justify-content: center;
}

.result-section-title .heading-image-h3 {
    max-width: 280px;
}

.recommendations-title:has(.heading-image) {
    display: flex;
    justify-content: center;
}

.recommendations-title .heading-image-h3 {
    max-width: 300px;
}

/* ========================================
   Design Parts - Puzzle Buttons
   ======================================== */
.btn-puzzle {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.btn-puzzle::after {
    content: none;
}

.btn-puzzle:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.05);
    background: none;
    box-shadow: none;
}

.btn-puzzle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-puzzle img {
    max-width: 100%;
    height: auto;
    display: block;
}

.btn-puzzle.btn-center {
    margin: var(--spacing-xl) auto 0;
    display: flex;
    justify-content: center;
}

.btn-puzzle.btn-block {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Small puzzle buttons (save card / save icon) */
.btn-puzzle-small {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.btn-puzzle-small::after {
    content: none;
}

.btn-puzzle-small:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.btn-puzzle-small img {
    max-width: 100%;
    max-height: 50px;
    height: auto;
    display: block;
}

/* Remake card button */
.btn-puzzle-remake {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.btn-puzzle-remake::after {
    content: none;
}

.btn-puzzle-remake:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.btn-puzzle-remake:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-puzzle-remake img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ========================================
   Design Parts - Puzzle Decorations
   ======================================== */
.puzzle-decoration {
    display: flex;
    justify-content: center;
    width: calc(100% + var(--spacing-md) * 2);
    margin-left: calc(-1 * var(--spacing-md));
    height: auto;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    overflow: visible;
}

.puzzle-decoration.puzzle-top {
    margin-bottom: var(--spacing-md);
}

.puzzle-decoration.puzzle-bottom {
    margin-top: var(--spacing-lg);
}

.puzzle-decoration-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ========================================
   Design Parts - Puzzle Nav Button
   ======================================== */
.puzzle-button {
    --main-width: min(68vw, 310px);
    --main-height: calc(var(--main-width) * 0.37144);
    --arrow-width: calc(var(--main-width) * 0.3122);
    --total-width: calc(var(--main-width) + var(--arrow-width));
    --main-top: calc(var(--arrow-width) * 0.18);
    --arrow-top-rest: 0px;
    --arrow-top-active: var(--main-top);
    --ease: cubic-bezier(.22, 1, .36, 1);
    --pb-blue: #4d8aec;
    --pb-pink: #e9a4cc;
    --pb-yellow: #ecd966;
    --pb-mint: #69d0c2;
    --pb-coral: #f67b73;
    --pb-bg: #ececec;
    --pb-offset-x: 15px; /* 横位置調整: 正の値で右、負の値で左 */
    position: relative;
    display: block;
    width: var(--total-width);
    height: calc(var(--main-height) + var(--arrow-width) * 0.42);
    overflow: visible;
    outline: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    margin: var(--spacing-lg) auto 0;
    transform: translateX(var(--pb-offset-x));
}

.puzzle-button__mainShell {
    position: absolute;
    top: var(--main-top);
    left: 0;
    width: var(--main-width);
    aspect-ratio: 530.987 / 197.229;
    z-index: 1;
}

.puzzle-button__mainSvg,
.puzzle-button__arrowSvg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.puzzle-button__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 4px;
    text-align: center;
    pointer-events: none;
    transform: translateX(var(--pb-label-offset-x, 0px));
    transition: transform 0.45s var(--ease);
}

.puzzle-button__labelText {
    display: inline-block;
    padding: 0.01em 0.1em;
    background: #fff;
    color: var(--color-dark-navy, #1f1f1f);
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.04em;
    transition:
        background-color 0.35s ease,
        padding 0.35s var(--ease),
        transform 0.35s var(--ease);
}

.puzzle-button__arrow {
    position: absolute;
    top: var(--arrow-top-rest);
    right: 0;
    width: var(--arrow-width);
    aspect-ratio: 1 / 1;
    transform: translateX(8%) rotate(15deg);
    transform-origin: center center;
    transition:
        transform 0.45s var(--ease),
        top 0.45s var(--ease),
        right 0.45s var(--ease);
    pointer-events: none;
    z-index: 0;
}

.puzzle-button .piece,
.puzzle-button .arrow-piece,
.puzzle-button .arrow-mark {
    transition:
        fill 0.35s ease,
        stroke 0.35s ease,
        opacity 0.35s ease;
}

.puzzle-button .piece {
    fill: #fff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.puzzle-button .piece--blue { stroke: var(--pb-blue); }
.puzzle-button .piece--pink { stroke: var(--pb-pink); }
.puzzle-button .piece--yellow { stroke: var(--pb-yellow); }
.puzzle-button .piece--mint { stroke: var(--pb-mint); }

.puzzle-button .arrow-piece {
    fill: #fff;
    stroke: var(--pb-coral);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.puzzle-button .arrow-mark {
    fill: none;
    stroke: var(--pb-coral);
    stroke-linecap: round;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

/* Hover / focus-visible states */
.puzzle-button:hover .piece--blue,
.puzzle-button:focus-visible .piece--blue { fill: var(--pb-blue); }
.puzzle-button:hover .piece--pink,
.puzzle-button:focus-visible .piece--pink { fill: var(--pb-pink); }
.puzzle-button:hover .piece--yellow,
.puzzle-button:focus-visible .piece--yellow { fill: var(--pb-yellow); }
.puzzle-button:hover .piece--mint,
.puzzle-button:focus-visible .piece--mint { fill: var(--pb-mint); }

.puzzle-button:hover .puzzle-button__labelText,
.puzzle-button:focus-visible .puzzle-button__labelText {
    background: #fff;
}

.puzzle-button:hover .puzzle-button__arrow,
.puzzle-button:focus-visible .puzzle-button__arrow {
    top: var(--arrow-top-active);
    transform: translateX(-25%) rotate(0deg);
}

.puzzle-button:hover .arrow-piece,
.puzzle-button:focus-visible .arrow-piece { fill: var(--pb-coral); }
.puzzle-button:hover .arrow-mark,
.puzzle-button:focus-visible .arrow-mark { stroke: #ffffff; }

.puzzle-button:focus-visible {
    filter: drop-shadow(0 0 0 4px rgba(246, 123, 115, 0.15));
}

/* Touch devices: always show filled state */
@media (hover: none), (pointer: coarse) {
    .puzzle-button .piece--blue { fill: var(--pb-blue); }
    .puzzle-button .piece--pink { fill: var(--pb-pink); }
    .puzzle-button .piece--yellow { fill: var(--pb-yellow); }
    .puzzle-button .piece--mint { fill: var(--pb-mint); }

    .puzzle-button .puzzle-button__labelText {
        padding: 0.22em 0.9em;
        background: #fff;
    }

    .puzzle-button .puzzle-button__arrow {
        top: var(--arrow-top-active);
        transform: translateX(-25%) rotate(0deg);
    }

    .puzzle-button .arrow-piece { fill: var(--pb-coral); }
    .puzzle-button .arrow-mark { stroke: #ffffff; }
}

@media (max-width: 767px) {
    :root {
        --font-size-h1: 32px;
        --font-size-h2: 30px;
        --font-size-h3: 25px;
        --font-size-body-large: 25px;
        --font-size-body: 20px;
        --font-size-body-medium: 19px;
        --font-size-body-small: 18px;
        --font-size-caption: 17px;
        --font-size-small: 15px;
    }

    .puzzle-button {
        --main-width: min(72vw, 320px);
        --pb-label-offset-x: 25px; /* SPテキスト横位置調整: 正の値で右、負の値で左 */
    }

    .puzzle-button__labelText {
        letter-spacing: 0.03em;
    }
}

/* ========================================
   Design Parts - Card Actions
   ======================================== */
.card-actions {
    display: flex;
    gap: var(--spacing-md);
    width: 85%;
    margin: 0 auto;
}

.card-actions .btn-puzzle-small {
    flex: 1 1 0;
}

.btn-rec-style--save {
    border-color: #4d8aec;
    padding: 6px 10px 6px 22px;
    max-width: none;
    width: auto;
    font-size: var(--font-size-small);
}

.btn-rec-style--save .btn-rec-style__puzzle svg path {
    fill: #4d8aec;
}

.btn-rec-style--save .btn-rec-style__text {
    font-size: var(--font-size-small);
}

.btn-rec-style--save .btn-rec-style__arrow {
    display: flex;
    align-items: center;
}

.card-actions .btn-rec-style--save {
    flex: 1 1 0;
}