/* ==========================================================================
   App demo（管理画面のイメージ。1192×770 で描いて縮小する）
   トップページ・サービスページ共通。マークアップは includes/app-demo.php、動きは assets/js/app-demo.js
   デザイン元: _designfile/top-redesign-2026-10/canvas/AppDemo.dc.html
   ========================================================================== */

.app-demo,
.app-demo-tabs {
    --demo-line: #e5e5e5;
    --demo-muted: #525252;
    --demo-subtle: #737373;
    --demo-text: #404040;
}

.app-demo [hidden],
.app-demo-tabs [hidden] {
    display: none !important;
}
.app-demo {
    --demo-scale: 0.68;
    position: relative;
    width: 100%;
    height: calc(770px * var(--demo-scale));
}

.app-demo__window {
    position: absolute;
    left: 0;
    top: 0;
    width: 1192px;
    height: 770px;
    transform: scale(var(--demo-scale));
    transform-origin: top left;
    overflow: hidden;
    white-space: nowrap;
    line-height: normal;
    text-align: left;
    color: #0a0a0a;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 16px;
    box-shadow: 0 40px 100px rgba(10, 10, 10, 0.14), 0 4px 14px rgba(10, 10, 10, 0.06);
}

.app-demo__window b {
    font-weight: 700;
}

.app-demo__browser {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: #f5f5f5;
    border-bottom: 1px solid var(--demo-line);
}

.app-demo__dot {
    width: 11px;
    height: 11px;
    border-radius: 6px;
    background: var(--demo-line);
}

.app-demo__url {
    margin-left: 16px;
    flex: 0 1 420px;
    height: 24px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--demo-line);
    font-size: 12px;
    color: var(--demo-subtle);
}

.app-demo__body {
    position: relative;
    display: flex;
    height: 732px;
}

/* sidebar */
.app-demo__sidebar {
    width: 224px;
    flex: none;
    box-sizing: border-box;
    padding: 12px 10px;
    border-right: 1px solid #ededed;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    color: #3f3f46;
}

.app-demo__brand {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px 0 8px;
}

.app-demo__brand-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 900;
    color: #333;
    letter-spacing: 0.03em;
}

.app-demo__nav {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border-radius: 10px;
}

.app-demo__nav svg {
    flex: none;
    color: var(--demo-muted);
}

.app-demo__nav-label {
    flex: 1;
}

.app-demo__nav-chev {
    font-size: 11px;
    color: #a3a3a3;
}

.app-demo__nav--switch.is-hover {
    background: #fce7f3;
    color: #9d174d;
}

.app-demo__nav--switch.is-hover svg {
    color: #9d174d;
}

.app-demo__nav--switch.is-active {
    background: linear-gradient(90deg, #ec4899, #f472b6);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(236, 72, 153, 0.25);
}

.app-demo__nav--switch.is-active svg,
.app-demo__nav--switch.is-active .app-demo__nav-chev {
    color: #fff;
}

.app-demo__nav-group {
    height: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    padding: 0 10px 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--demo-muted);
}

/* main area */
.app-demo__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-demo__topbar {
    height: 60px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px 0 26px;
}

.app-demo__topbar-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-demo__chip {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid var(--demo-line);
    border-radius: 8px;
    font-size: 13px;
    color: var(--demo-muted);
}

.app-demo__chip--dark {
    gap: 8px;
    color: #262626;
}

.app-demo__chip--small {
    height: 30px;
    font-size: 12px;
    font-weight: 500;
    color: #0a0a0a;
}

.app-demo__chip--bold {
    padding: 0 10px;
    font-weight: 700;
    color: #0a0a0a;
}

.app-demo__avatar {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e30b5c;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.app-demo__page {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 4px 22px 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-demo__screen {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-demo__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-demo__title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-demo__title {
    font-size: 20px;
    font-weight: 700;
}

.app-demo__help {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c4c4c4;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.app-demo__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.app-demo__toolbar .app-demo__chip {
    padding: 0 10px;
}

.app-demo__compare {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--demo-muted);
}

.app-demo__compare-select {
    width: 120px;
    height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border: 1px solid #f9a8c9;
    border-radius: 8px;
    background: #fff5f8;
    color: #0a0a0a;
    font-weight: 500;
}

.app-demo__compare-select span {
    color: #a3a3a3;
}

.app-demo__badge {
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--demo-subtle);
    color: #fff;
    font-size: 11px;
}

.app-demo__count {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e30b5c;
    color: #fff;
    font-size: 10px;
}

.app-demo__card {
    border: 1px solid var(--demo-line);
    border-radius: 12px;
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-demo__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-demo__card-head > span:first-child {
    font-size: 14px;
    font-weight: 700;
}

.app-demo__square {
    width: 28px;
    height: 28px;
    border: 1px solid var(--demo-line);
    border-radius: 7px;
}

.app-demo__caption {
    font-size: 12px;
    color: var(--demo-muted);
}

/* screen A: KPI */
.app-demo__kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.app-demo__kpi {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-left: 3px solid;
    border-radius: 8px;
    background: #f5f5f5;
}

.app-demo__kpi-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.app-demo__kpi-axis {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.app-demo__axis-tag {
    flex: none;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.app-demo__select {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px 8px;
    border: 1px solid var(--demo-line);
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
}

.app-demo__kpi-prev {
    font-size: 11px;
    color: var(--demo-subtle);
}

.app-demo__kpi-value {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.app-demo__kpi-value > span:first-child {
    font-size: 22px;
    line-height: 1.15;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.app-demo__delta {
    font-size: 11px;
    font-weight: 700;
    color: #15803d;
}

.app-demo.is-counting .app-demo__delta {
    opacity: 0;
}

.app-demo__legend-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--demo-muted);
}

.app-demo__legend {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-demo__legend b {
    color: #0a0a0a;
}

.app-demo__legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.app-demo__legend i {
    width: 9px;
    height: 9px;
    border-radius: 5px;
}

.app-demo__bubble {
    animation: demoBubble 1.3s cubic-bezier(.2, .8, .2, 1) both;
}

.app-demo__fade {
    animation: demoFadeOnly .35s ease both;
}

.app-demo__fade-late {
    animation: demoFadeOnly .6s ease 1.5s both;
}

.app-demo__fade-up {
    animation: demoFade .5s ease .9s both;
}

.app-demo__list-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid #f9a8c9;
    border-radius: 12px;
    background: #fff5f8;
    font-size: 13px;
}

.app-demo__list-bar b {
    color: #9d174d;
}

.app-demo__pill {
    padding: 1px 8px;
    border-radius: 6px;
    background: #fbcfe0;
    color: #9d174d;
    font-size: 11px;
}

.app-demo__pill--green {
    border: 1px solid #86efac;
    background: #f0fdf4;
    color: #15803d;
}

.app-demo__muted {
    color: var(--demo-subtle);
}

/* screen B: 期間推移 */
.app-demo__filter-bar {
    padding: 7px 12px;
    border: 1px solid #f9a8c9;
    border-radius: 10px;
    background: #fff5f8;
    font-size: 12px;
}

.app-demo__filter-bar span {
    padding: 3px 10px;
    border: 1px solid var(--demo-line);
    border-radius: 999px;
    background: #fff;
}

.app-demo__axes {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--demo-muted);
}

.app-demo__axis-select {
    width: 110px;
    padding: 4px 10px;
    border: 1px solid var(--demo-line);
    border-radius: 6px;
    color: #0a0a0a;
}

.app-demo__axis-names {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--demo-subtle);
}

.app-demo__chart {
    display: flex;
    gap: 8px;
}

.app-demo__y-left,
.app-demo__y-right {
    height: 290px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 11px;
    color: var(--demo-subtle);
    font-variant-numeric: tabular-nums;
}

.app-demo__y-left {
    width: 60px;
    align-items: flex-end;
}

.app-demo__y-right {
    width: 30px;
}

.app-demo__plot {
    flex: 1;
    position: relative;
    height: 290px;
    border-bottom: 1px solid var(--demo-muted);
}

.app-demo__grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.app-demo__grid span {
    height: 1px;
    background: #efefef;
}

.app-demo__grid span:last-child {
    height: 0;
}

.app-demo__bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
}

.app-demo__bar {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    padding: 0 3px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform-origin: bottom center;
    animation: demoGrowY .7s cubic-bezier(.2, .8, .2, 1) both;
}

.app-demo__bar span {
    display: block;
}

.app-demo__lines {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.app-demo__draw {
    stroke-dasharray: 1;
    animation: demoDraw 1.6s ease both;
}

.app-demo__x-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 30px 0 68px;
    font-size: 11px;
    color: var(--demo-subtle);
    font-variant-numeric: tabular-nums;
}

.app-demo__series {
    display: flex;
    gap: 16px;
    padding-left: 68px;
    font-size: 12px;
    color: var(--demo-text);
}

.app-demo__series span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.app-demo__series i {
    display: inline-block;
}

.app-demo__series--center {
    justify-content: center;
    gap: 14px;
    padding-left: 0;
    font-size: 11px;
}

.app-demo__series--wrap {
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-top: 6px;
}

/* screen C: アトリビューション */
.app-demo__toggle {
    display: flex;
    padding: 2px;
    border: 1px solid var(--demo-line);
    border-radius: 8px;
    font-size: 12px;
}

.app-demo__toggle span {
    padding: 5px 12px;
    color: var(--demo-muted);
}

.app-demo__toggle .is-on {
    border-radius: 6px;
    background: #e30b5c;
    color: #fff;
    font-weight: 500;
}

.app-demo__attr {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 24px;
}

.app-demo__attr-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-demo__attr-title {
    font-size: 13px;
    font-weight: 700;
}

.app-demo__attr-sub {
    font-size: 11px;
    color: var(--demo-subtle);
}

.app-demo__pop {
    transform-origin: 150px 130px;
    animation: demoPop 1s cubic-bezier(.2, .8, .2, 1) both;
}

.app-demo__stacks {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 0 8px;
}

.app-demo__stack-grid {
    position: absolute;
    left: 92px;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.app-demo__stack-grid span {
    width: 1px;
    background: #efefef;
}

.app-demo__stack-grid span:first-child {
    background: var(--demo-muted);
}

.app-demo__stack {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-demo__stack-label {
    width: 82px;
    text-align: right;
    font-size: 12px;
    color: var(--demo-text);
}

.app-demo__stack-bar {
    flex: 1;
    height: 44px;
    display: flex;
    transform-origin: left center;
    animation: demoGrowX 1s cubic-bezier(.2, .8, .2, 1) both;
}

.app-demo__stack-scale {
    display: flex;
    justify-content: space-between;
    padding-left: 88px;
    font-size: 11px;
    color: var(--demo-subtle);
}

.app-demo__table {
    overflow: hidden;
    border: 1px solid var(--demo-line);
    border-radius: 12px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.app-demo__tr {
    display: grid;
    grid-template-columns: 1.5fr repeat(6, minmax(0, 1fr)) 1.1fr;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.app-demo__tr:last-child {
    border-bottom: none;
}

.app-demo__tr span:not(:first-child) {
    text-align: right;
}

.app-demo__tr--head {
    padding: 7px 12px;
    background: #fafafa;
    border-bottom-color: var(--demo-line);
    font-weight: 700;
}

/* fake cursor */
.app-demo__cursor {
    position: absolute;
    left: 640px;
    top: 520px;
    width: 22px;
    height: 22px;
    pointer-events: none;
    transition: left .9s cubic-bezier(.45, 0, .2, 1), top .9s cubic-bezier(.45, 0, .2, 1);
}

.app-demo__cursor svg {
    position: absolute;
    left: 0;
    top: 0;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
}

.app-demo__ripple {
    position: absolute;
    left: -14px;
    top: -14px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: rgba(227, 11, 92, 0.35);
    animation: demoRipple .5s ease-out both;
}

/* 画面の切り替えボタン（サービスページなど、$demo_tabs = true のとき） */
.app-demo-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding-top: 12px;
}

.app-demo-tabs__btn {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #dcdcdc;
    border-radius: 999px;
    background: #fff;
    color: var(--demo-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.app-demo-tabs__btn[aria-pressed="true"] {
    border-color: #e30b5c;
    background: #fdf2f8;
    color: #b0145a;
    font-weight: 700;
}

.app-demo-tabs__btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.app-demo__nav--switch {
    cursor: pointer;
}

@keyframes demoFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes demoFadeOnly {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes demoGrowY {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@keyframes demoGrowX {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes demoDraw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes demoBubble {
    from { transform: translate(var(--dx), var(--dy)); opacity: .25; }
    to { transform: translate(0, 0); opacity: 1; }
}

@keyframes demoPop {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes demoRipple {
    from { transform: scale(.2); opacity: .7; }
    to { transform: scale(1.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .app-demo * {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }
}