/* ========================================
   AI-MY PRODUCT PUBLISHING - Flask Version
   ======================================== */

/* Custom Font - VIRTUAL-BOY for English */
@font-face {
    font-family: 'VIRTUAL-BOY';
    src: url('/static/fonts/virtual-boy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ========================================
   COLOR PALETTES COLLECTION
   ======================================== */

/*
 * PALETTE: Original Blue-Gray
 * Source: デザイン初期バージョン
 * --background: #f5f0e0;
 * --foreground: #1a1a1a;
 * --primary: #e07050;
 * --secondary: #3d4f66;
 * --header-text: #3d4f66;
 * --hero-bg: #8a9cae;
 * --block-orange: #e8956e;
 * --block-blue: #7db4e6;
 * --vertical-box-bg: #5a6a7a;
 * --vertical-text: #c4a54e;
 * --middle-start: #8a9cae;
 * --middle-end: #a8b8c8;
 * --json-text: #c23a3a;
 * --description-key: #8b6914;
 * --description-value: #3d4f66;
 * --bottom-color: #e86860;
 * --green-box: #3d5a4a;
 */

/*
 * PALETTE: Street Art
 * Source: docs/8075c24159099545024773b00bd1cf86.jpg
 * --background: #c9bc8e;
 * --foreground: #2d3436;
 * --primary: #e53935;
 * --secondary: #1a7a7a;
 * --header-text: #2d3436;
 * --hero-bg: #b8aa7d;
 * --block-orange: #f57c00;
 * --block-blue: #1a7a7a;
 * --vertical-box-bg: #2d3436;
 * --vertical-text: #f57c00;
 * --middle-start: #b8aa7d;
 * --middle-end: #c9bc8e;
 * --json-text: #e53935;
 * --description-key: #f57c00;
 * --description-value: #2d3436;
 * --bottom-color: #e53935;
 * --green-box: #1a7a7a;
 */

/*
 * PALETTE: Neo-Japonism
 * Source: docs/83960f3c1bbda75d15675371d3da0106.jpg
 * --background: #e85d2d;
 * --foreground: #1a2744;
 * --primary: #c43030;
 * --secondary: #7a8a70;
 * --header-text: #1a2744;
 * --hero-bg: #d54a20;
 * --block-orange: #e85d2d;
 * --block-blue: #1a2744;
 * --vertical-box-bg: #1a2744;
 * --vertical-text: #c4a040;
 * --middle-start: #d54a20;
 * --middle-end: #e85d2d;
 * --json-text: #1a2744;
 * --description-key: #c4a040;
 * --description-value: #f5f0e0;
 * --bottom-color: #1a2744;
 * --green-box: #4a9090;
 */

/*
 * PALETTE: Cyber Collage
 * Source: docs/aee26e963affeb47f99ee26f2c8b4c87.jpg
 * --background: #e8e4dc;
 * --foreground: #1a2030;
 * --primary: #e84545;
 * --secondary: #d43a6e;
 * --header-text: #1a2030;
 * --hero-bg: #ddd8d0;
 * --block-orange: #d94c2a;
 * --block-blue: #1a2030;
 * --vertical-box-bg: #1a2030;
 * --vertical-text: #d94c2a;
 * --middle-start: #ddd8d0;
 * --middle-end: #e8e4dc;
 * --json-text: #e84545;
 * --description-key: #d43a6e;
 * --description-value: #1a2030;
 * --bottom-color: #d43a6e;
 * --green-box: #1a2030;
 */

/*
 * PALETTE: Tokyo Butterfly
 * Source: docs/bb7beadd11983101b60339acf22a315c.jpg
 * --background: #d4a030;
 * --foreground: #1a1a1a;
 * --primary: #e85020;
 * --secondary: #1a8a9a;
 * --header-text: #1a1a1a;
 * --hero-bg: #c99020;
 * --block-orange: #e85020;
 * --block-blue: #1a8a9a;
 * --vertical-box-bg: #1a1a1a;
 * --vertical-text: #e85020;
 * --middle-start: #c99020;
 * --middle-end: #d4a030;
 * --json-text: #e85020;
 * --description-key: #1a8a9a;
 * --description-value: #1a1a1a;
 * --bottom-color: #1a8a9a;
 * --green-box: #e85020;
 */

/*
 * PALETTE: Ethereal Garden (ACTIVE)
 * Source: docs/cc7bafd0cd592d36bef301d8fc83a570.jpg
 */
:root {
    --background: #f0ebe0;
    --foreground: #2a4a5a;
    --primary: #e5654a;
    --secondary: #4a7080;

    /* Header - no background, dark text */
    --header-text: #2a4a5a;

    /* Hero section */
    --hero-bg: #b8c4b8;
    --block-orange: #e5654a;
    --block-blue: #4a7080;
    --vertical-box-bg: #2a4a5a;
    --vertical-text: #e5654a;

    /* Middle section gradient */
    --middle-start: #b8c4b8;
    --middle-end: #c8d4c8;

    /* JSON text */
    --json-text: #e5654a;
    --description-key: #4a7080;
    --description-value: #2a4a5a;

    /* Bottom section */
    --bottom-color: #4a7080;
    --green-box: #e5654a;

    /* Fonts */
    --font-en: 'VIRTUAL-BOY', monospace;
    --font-ja: 'Shippori Mincho', serif;
}

/*
 * PALETTE: Neon Noir
 * Source: docs/168220e474f8e40ce6b25bef6c7c6a1f.jpg
 * --background: #0a0a0a;
 * --foreground: #f0e8e0;
 * --primary: #e53520;
 * --secondary: #30c8c8;
 * --header-text: #30c8c8;
 * --hero-bg: #101818;
 * --block-orange: #e53520;
 * --block-blue: #30c8c8;
 * --vertical-box-bg: #e53520;
 * --vertical-text: #0a0a0a;
 * --middle-start: #101818;
 * --middle-end: #0a0a0a;
 * --json-text: #30c8c8;
 * --description-key: #e53520;
 * --description-value: #f0e8e0;
 * --bottom-color: #30c8c8;
 * --green-box: #e53520;
 */

/*
 * PALETTE: Y2K Sunset
 * Source: docs/79f6f8b98d7e2c75c9e0524c2793eb8f.jpg
 * --background: #f0c830;
 * --foreground: #1a3a3a;
 * --primary: #d82060;
 * --secondary: #1a3a3a;
 * --header-text: #1a3a3a;
 * --hero-bg: #e8b820;
 * --block-orange: #e89020;
 * --block-blue: #1a3a3a;
 * --vertical-box-bg: #1a3a3a;
 * --vertical-text: #f0c830;
 * --middle-start: #e8b820;
 * --middle-end: #f0c830;
 * --json-text: #d82060;
 * --description-key: #1a3a3a;
 * --description-value: #1a3a3a;
 * --bottom-color: #d82060;
 * --green-box: #1a3a3a;
 */

/*
 * PALETTE: Koi Fantasy
 * Source: docs/4d92a241e720106a303baf9ff399bde2.jpg
 * --background: #f04525;
 * --foreground: #5a8898;
 * --primary: #f04525;
 * --secondary: #5a8898;
 * --header-text: #306070;
 * --hero-bg: #e83820;
 * --block-orange: #f04525;
 * --block-blue: #5a8898;
 * --vertical-box-bg: #306070;
 * --vertical-text: #f0b0a0;
 * --middle-start: #5a8898;
 * --middle-end: #6a98a8;
 * --json-text: #f04525;
 * --description-key: #306070;
 * --description-value: #f0e8e0;
 * --bottom-color: #5a8898;
 * --green-box: #f04525;
 */

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

body {
    font-family: var(--font-ja);
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.5;
}

/* Main Container */
.main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 0 2rem;
}

/* ========================================
   Header - No background, dark text
   ======================================== */
.header {
    background-color: var(--background);
    color: var(--header-text);
    padding: 1.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__title {
    font-size: 1.75rem;
    font-family: var(--font-en);
    font-weight: normal;
    letter-spacing: -0.02em;
    color: var(--header-text);
}

.header__nav {
    display: flex;
    gap: 0.5rem;
    font-size: 1rem;
    font-family: var(--font-en);
}

.header__lang {
    color: var(--header-text);
    text-decoration: none;
    transition: opacity 0.2s;
}

.header__lang:hover {
    opacity: 0.7;
}

.header__separator {
    color: var(--header-text);
}

/* ========================================
   Hero Section - Video Carousel
   ======================================== */
.hero {
    background-color: var(--hero-bg);
    padding: 2rem 0;
    overflow: hidden;
}

.hero__carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
}

.hero__slides {
    display: flex;
    transition: transform 0.6s ease-in-out;
}

.hero__slide {
    display: flex;
    flex-shrink: 0;
    /* メインスライドは画面の70%、次のスライドが30%見える */
    width: 85%;
}

.hero__slide:last-child {
    /* 最後のスライドも同じ幅（次のスライドが見える） */
    width: 85%;
}

/* Video container */
.hero__video {
    flex: 1;
    aspect-ratio: 16 / 9;
    background-color: var(--block-orange);
    position: relative;
    overflow: hidden;
}

.hero__video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero__video-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* クリック用オーバーレイ（待機中スライドのみ表示） */
.hero__click-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    background: transparent;
}

/* アクティブスライドのオーバーレイは非表示（動画操作可能に） */
.hero__slide--active .hero__click-overlay {
    display: none;
}

/* Vertical URL bar */
.hero__vertical-bar {
    background-color: var(--vertical-box-bg);
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    width: 3.5rem;
}

.hero__url {
    writing-mode: vertical-lr;
    color: var(--vertical-text);
    font-size: 1.1rem;
    font-family: var(--font-en);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* アクティブスライド（再生中）はオレンジ背景 */
.hero__slide--active .hero__video {
    background-color: var(--block-orange);
}

/* 待機中のスライドは青色背景 */
.hero__slide:not(.hero__slide--active) .hero__video {
    background-color: var(--block-blue);
}

/* 待機中の縦バーはクリック可能 */
.hero__slide:not(.hero__slide--active) .hero__vertical-bar {
    cursor: pointer;
}

/* アクティブなURLバーは少し明るく */
.hero__slide--active .hero__vertical-bar {
    background-color: var(--vertical-box-bg);
}

/* Sound toggle in vertical bar */
.hero__sound-toggle {
    writing-mode: vertical-lr;
    font-family: var(--font-en);
    font-size: 1.1rem;
    color: var(--vertical-text);
    cursor: pointer;
    padding: 0.5rem 0;
    transition: opacity 0.2s;
    user-select: none;
    white-space: nowrap;
}

.hero__sound-toggle:hover {
    opacity: 0.7;
}

.hero__sound-label {
    opacity: 0.7;
}

.hero__sound-status {
    font-weight: bold;
}

.hero__sound-toggle--on .hero__sound-status {
    color: #4ade80;
}

/* ========================================
   Middle Section
   ======================================== */
.middle {
    background: linear-gradient(to bottom, var(--middle-start), var(--middle-end));
    padding: 3rem 0.75rem 4rem;
}

.description {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    color: var(--description-value);
}

.description__key {
    font-family: var(--font-en);
    color: var(--description-key);
}

.description__value {
    font-family: var(--font-ja);
}

/* JSON Text */
.json-text {
    color: var(--json-text);
    font-family: var(--font-en);
    line-height: 1.1;
}

.json-text__brace {
    font-size: 4.5rem;
}

.json-text__comma {
    font-size: 4.5rem;
}

.json-text__item {
    font-size: 4.5rem;
    margin: 0;
}

/* ========================================
   Accordion
   ======================================== */
.accordion {
    margin: 0;
}

.accordion__header {
    cursor: pointer;
    transition: opacity 0.2s;
}

.accordion__header:hover {
    opacity: 0.7;
}

.accordion__header--active .accordion__key {
    text-decoration: underline;
}

/* 閉じている時: カンマ表示、コロン非表示 */
.accordion__colon {
    display: none;
}

.accordion__comma {
    display: inline;
}

/* 開いている時: コロン表示、カンマ非表示 */
.accordion__header--active .accordion__colon {
    display: inline;
}

.accordion__header--active .accordion__comma {
    display: none;
}

/* 閉じブレース（開いている時のみ表示） */
.accordion__close {
    display: none;
    font-size: 4.5rem;
    color: var(--json-text);
    font-family: var(--font-en);
}

.accordion--open .accordion__close {
    display: block;
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

.accordion__content--open {
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.3s ease-in;
    overflow: visible;
}

.accordion__inner {
    padding: 1rem 0 1.5rem 0.5rem;
}

/* Product Selector */
.product-selector {
    padding: 1rem 0.5rem 1.5rem;
    font-family: var(--font-en);
    font-size: 1.3rem;
}

.product-selector__item {
    cursor: pointer;
    transition: opacity 0.3s, color 0.3s;
    opacity: 0.4;
    color: var(--secondary);
}

.product-selector__item:hover {
    opacity: 0.7;
}

.product-selector__item--active {
    opacity: 1;
    color: var(--accent);
}

.product-selector__comma {
    color: var(--secondary);
    opacity: 0.6;
    margin: 0 0.3rem;
}

/* Product Content */
.product-content {
    display: none;
}

.product-content--active {
    display: block;
}

/* Content Carousel (full-width like hero) */
.content-carousel {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    margin-bottom: 1.5rem;
    touch-action: pan-y pinch-zoom;
}

.content-carousel__slides {
    display: flex;
    transition: transform 0.6s ease-in-out;
}

.content-carousel__slide {
    display: flex;
    flex-shrink: 0;
    width: 85vw;
}

.content-carousel__slide--active .content-carousel__media {
    background-color: var(--block-orange);
}

.content-carousel__slide:not(.content-carousel__slide--active) .content-carousel__media {
    background-color: var(--block-blue);
}

.content-carousel__media {
    flex: 1;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
}

.content-carousel__player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.content-carousel__player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.content-carousel__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    background: transparent;
}

.content-carousel__slide--active .content-carousel__overlay {
    display: none;
}

.content-carousel__bar {
    background-color: var(--vertical-box-bg);
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    width: 3.5rem;
    cursor: pointer;
}

.content-carousel__sound-toggle {
    writing-mode: vertical-lr;
    font-family: var(--font-en);
    font-size: 1.1rem;
    color: var(--vertical-text);
    cursor: pointer;
    padding: 0.5rem 0;
    transition: opacity 0.2s;
    user-select: none;
    white-space: nowrap;
}

.content-carousel__sound-toggle:hover {
    opacity: 0.7;
}

.content-carousel__sound-label {
    opacity: 0.7;
}

.content-carousel__sound-status {
    font-weight: bold;
}

.content-carousel__sound-toggle--on .content-carousel__sound-status {
    color: #4ade80;
}

.content-carousel__url {
    writing-mode: vertical-lr;
    color: var(--vertical-text);
    font-size: 1.1rem;
    font-family: var(--font-en);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Data Block - JSON style content */
.data-block {
    font-family: var(--font-en);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--secondary);
}

.data-block__item {
    margin: 0.3rem 0;
}

.data-block__array {
    padding-left: 1.5rem;
}

.data-block__nested {
    padding-left: 1.5rem;
}

.data-key {
    color: var(--description-key);
}

.data-value {
    color: var(--secondary);
}

.data-value--ja {
    font-family: var(--font-ja);
}

.data-value--copyable {
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.data-value--copyable:hover {
    background-color: rgba(229, 101, 74, 0.2);
}

.data-value--copied {
    color: var(--primary) !important;
}

.data-value--prompt {
    color: var(--primary);
}

.data-block__item--indent {
    padding-left: 1.5rem;
}

.data-link {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.data-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* ========================================
   Bottom Section
   ======================================== */
.bottom {
    background-color: var(--bottom-color);
    padding: 3rem 0.75rem 2rem;
}

.bottom .description {
    color: var(--background);
}

.bottom .description__key {
    color: var(--background);
}

.bottom__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 2rem;
}

.bottom__logo {
    flex-shrink: 0;
}

.logo {
    height: 2.5rem;
    width: auto;
}

/* Subscribe Form */
.subscribe-form {
    display: flex;
}

.subscribe-form__input {
    background-color: var(--background);
    border: 2px solid var(--foreground);
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--foreground);
    width: 16rem;
    outline: none;
}

.subscribe-form__input::placeholder {
    color: var(--foreground);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.subscribe-form__button {
    background-color: var(--foreground);
    color: var(--background);
    border: 2px solid var(--foreground);
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-family: var(--font-en);
    cursor: pointer;
    transition: background-color 0.2s;
}

.subscribe-form__button:hover {
    background-color: #333;
}

.subscribe-form__button:disabled {
    background-color: #666;
    cursor: not-allowed;
}

/* Subscribe Message */
.subscribe-message {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    margin-top: 0.5rem;
}

.subscribe-message--success {
    color: #e5654a;
    background-color: rgba(229, 101, 74, 0.1);
}

.subscribe-message--error {
    color: #ff6b6b;
    background-color: rgba(255, 107, 107, 0.1);
}

/* Social Boxes */
.social-boxes {
    display: flex;
    gap: 0.4rem;
}

.social-box {
    width: 2rem;
    height: 2rem;
    background-color: var(--green-box);
}

.social-box--link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: transparent;
    transition: opacity 0.2s ease;
}

.social-box--link:hover {
    opacity: 0.8;
}

.social-box__icon {
    width: 2rem;
    height: 2rem;
    color: var(--primary);
}

/* ========================================
   Footer
   ======================================== */
.footer {
    background-color: var(--background);
    color: var(--secondary);
    text-align: center;
    padding: 1.5rem;
    font-size: 1rem;
    font-family: var(--font-en);
}

/* ========================================
   Responsive Design
   ======================================== */
@media (min-width: 768px) {
    .header {
        padding: 1.5rem 3rem;
    }

    .header__title {
        font-size: 2rem;
    }

    .hero {
        padding: 2rem 0;
    }

    .hero__slide {
        width: 75%;
    }

    .hero__vertical-bar {
        width: 3rem;
    }

    .hero__url {
        font-size: 0.8rem;
    }

    .middle {
        padding: 3rem 3rem 5rem;
    }

    .description {
        font-size: 1.1rem;
    }

    .json-text__brace {
        font-size: 5.5rem;
    }

    .json-text__comma {
        font-size: 5.5rem;
    }

    .json-text__item {
        font-size: 5.5rem;
    }

    .accordion__close {
        font-size: 5.5rem;
    }

    .accordion__inner {
        padding: 1rem 0 1.5rem 2rem;
    }

    .product-selector {
        padding: 1rem 2rem 1.5rem;
    }

    .bottom {
        padding: 3rem 3rem 2rem;
    }

    .bottom__content {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .header__title {
        font-size: 2.25rem;
    }

    .hero__block {
        min-height: 350px;
    }

    .json-text__brace {
        font-size: 6.5rem;
    }

    .json-text__comma {
        font-size: 6.5rem;
    }

    .json-text__item {
        font-size: 6.5rem;
    }

    .accordion__close {
        font-size: 6.5rem;
    }

    .data-block {
        font-size: 1.2rem;
    }
}

/* ========================================
   AI Mode - JSON View
   ======================================== */
.ai-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1e1e1e;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-mode--active {
    opacity: 1;
    visibility: visible;
}

.ai-mode__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #2d2d2d;
    border-bottom: 1px solid #3d3d3d;
    flex-shrink: 0;
}

.ai-mode__title {
    font-family: var(--font-en);
    font-size: 1rem;
    color: #9cdcfe;
}

.ai-mode__nav {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.ai-mode__lang {
    font-family: var(--font-en);
    font-size: 1rem;
    color: #6a9955;
    text-decoration: none;
    transition: color 0.2s;
}

.ai-mode__lang:hover {
    color: #b5cea8;
}

.ai-mode__lang--active {
    color: #dcdcaa;
}

.ai-mode__separator {
    color: #808080;
}

.ai-mode__content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
}

.ai-mode__json {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #d4d4d4;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* JSON Syntax Highlighting */
.json-key {
    color: #9cdcfe;
}

.json-string {
    color: #ce9178;
}

.json-number {
    color: #b5cea8;
}

.json-boolean {
    color: #569cd6;
}

.json-null {
    color: #569cd6;
}

.json-bracket {
    color: #ffd700;
}

.json-colon {
    color: #d4d4d4;
}

.json-comma {
    color: #d4d4d4;
}