/* Shorts uses the shared product tokens while keeping its immersive dark surface. */
.shorts-page { display: grid; grid-template-columns: minmax(300px, 440px) minmax(220px, 380px); justify-content: center; align-items: start; gap: 64px; margin-top: 20px; }
.shorts-noscript { grid-column: 1 / -1; margin-bottom: 16px; }
.shorts-viewer { min-width: 0; color: var(--ink); }
.shorts-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 8px; }
.shorts-heading p { margin: 0; font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: -.02em; }
.shorts-heading a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 12px; }
.shorts-expanded-bar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-height: 56px; padding-inline: 8px 4px; color: #f5f3ef; font-size: 12px; }
.shorts-expanded-bar[hidden] { display: none; }
.shorts-expanded-bar [data-short-home] { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding-inline: 8px; border-radius: 999px; color: #f5f3ef; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.shorts-expanded-state, .shorts-share-status { min-width: 0; overflow: hidden; color: #b7b4af; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.shorts-expanded-state { flex: 1 1 auto; }
.shorts-share-status { margin-left: auto; }
.shorts-expanded-state:empty, .shorts-share-status:empty { display: none; }
.shorts-expanded-bar button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: #1a1b1d; color: #f5f3ef; font: inherit; }
.shorts-fullscreen-exit[hidden] { display: none; }
.shorts-audio-pill-row { display: flex; align-items: center; min-height: 52px; padding: 0 16px 8px; }
.shorts-audio-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #1a1b1d; color: #f5f3ef; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; }
.shorts-audio-pill svg { flex: 0 0 auto; }
[data-short-sound][aria-pressed="false"] .shorts-sound-waves,
[data-short-sound][aria-pressed="true"] .shorts-sound-cross { display: none; }
.shorts-screen { position: relative; width: 100%; height: min(55dvh, 640px); min-height: 280px; overflow: hidden; border-radius: 8px; background: #0e0f10; }
.shorts-screen::after { content: ''; position: absolute; z-index: 1; inset: auto 0 0; height: 200px; background: linear-gradient(180deg, rgba(14,15,16,0) 0%, rgba(14,15,16,.72) 46%, rgba(14,15,16,.96) 100%); pointer-events: none; }
.shorts-mount, .shorts-mount iframe, .shorts-mount video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.shorts-mount iframe, .shorts-mount video { pointer-events: none; object-fit: contain; background: #0e0f10; }
.shorts-mount [data-short-active="false"] { z-index: 0; opacity: 0; }
.shorts-mount [data-short-active="true"] { z-index: 1; opacity: 1; }
.shorts-mount { transform: translateY(var(--short-drag, 0)); transition: transform 140ms ease-out; }
.shorts-screen[data-drag] .shorts-mount { transition: none; }
.shorts-screen[data-drag]::before { position: absolute; z-index: 7; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: #1a1b1de8; color: #f5f3ef; font-size: 13px; pointer-events: none; }
.shorts-screen[data-drag="next"]::before { content: '↑ 次へ'; }
.shorts-screen[data-drag="previous"]::before { content: '↓ 前へ'; }
.shorts-touch-surface { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; touch-action: pan-x; }
.shorts-touch-surface:disabled { opacity: 1; }
.shorts-touch-surface:focus-visible { outline: 3px solid #f5f3ef; outline-offset: -6px; box-shadow: inset 0 0 0 3px #101418; }
.shorts-overlay { position: absolute; z-index: 8; inset: 50% 16px auto; display: flex; transform: translateY(-50%); flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #f5f3ef; text-align: center; font-size: 13px; pointer-events: none; }
.shorts-overlay[hidden] { display: none; }
.shorts-overlay p { max-width: 300px; margin: 0; padding: 8px 14px; border-radius: 999px; background: #1a1b1de8; line-height: 1.6; }
.shorts-overlay .button { min-height: 48px; pointer-events: auto; }
.shorts-controls { display: flex; align-items: center; gap: 8px; min-height: 56px; }
.shorts-controls button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: #1a1b1d; color: #f5f3ef; }
.shorts-controls svg { width: 20px; height: 20px; }
.shorts-play-mark { display: block; }
.shorts-pause-lines { display: none; }
.shorts-controls [data-short-pause].is-playing .shorts-play-mark { display: none; }
.shorts-controls [data-short-pause].is-playing .shorts-pause-lines { display: block; }
.shorts-time { display: inline-block; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.shorts-bottom { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.shorts-info { min-height: 60px; }
.shorts-info > a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.4; }
.shorts-info h1 { margin: 0; font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; font-size: 20px; font-weight: 900; line-height: 1.25; letter-spacing: -.02em; }
.shorts-actions { display: flex; align-items: center; gap: 8px; }
.shorts-actions .button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 44px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 999px; background: #1a1b1d; color: #f5f3ef; font-size: 13px; font-weight: 700; white-space: nowrap; }
.shorts-actions .shorts-discovery-button { flex: 1 1 auto; min-width: 0; padding-inline: 20px; background: #c92424; color: #fff; font-size: 15px; }
.shorts-actions .shorts-discovery-button[aria-pressed="true"] { border: 1px solid #c92424; background: #0e0f10; color: #f5f3ef; }
.shorts-actions .shorts-discovery-button[aria-pressed="true"]::before { content: '✓'; margin-right: 6px; }
.shorts-actions .shorts-work-button { max-width: 156px; overflow: hidden; text-overflow: ellipsis; }
.shorts-actions .shorts-step-button { width: 44px; height: 44px; min-height: 44px; padding: 0; }
.shorts-actions .shorts-step-button:disabled { opacity: .4; }
.shorts-toast { display: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 8px 0 14px; border-radius: 8px; background: #f5f3ef; color: #101418; font-size: 14px; font-weight: 700; line-height: 1.4; }
.shorts-toast.is-visible, .shorts-toast:not(:empty) { display: flex; }
.shorts-toast > span { display: inline-flex; align-items: center; gap: 8px; padding-block: 12px; }
.shorts-toast > span::before { content: '✓'; font-size: 18px; }
.shorts-toast a { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding-inline: 8px; color: #c92424; font-size: 14px; font-weight: 700; white-space: nowrap; }
.shorts-hint, .shorts-status, .shorts-discovery-meta { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.shorts-status:empty, .shorts-discovery-meta p:empty { display: none; }
.shorts-discovery { padding-top: 82px; }
.shorts-discovery h2 { margin-bottom: 16px; font-size: 26px; line-height: 1.65; }
.shorts-discovery > p:not(.eyebrow) { max-width: 360px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.shorts-discovery > .button { margin-top: 24px; }
.shorts-discovery details { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.shorts-discovery summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
.shorts-discovery details p { margin-top: 8px; font-size: 12px; line-height: 1.9; }
.shorts-viewer :is(a, button):focus-visible { outline: 3px solid #101418; outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
html.shorts-expanded, html.shorts-expanded body { overflow: hidden; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) { position: fixed; z-index: 1000; inset: 0; display: flex; flex-direction: column; width: 100%; height: 100dvh; min-height: 0; overflow: hidden; padding: max(0px, env(safe-area-inset-top)) max(0px, env(safe-area-inset-right)) max(0px, env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left)); background: #0e0f10; color: #f5f3ef; overscroll-behavior: contain; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-heading { display: none; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-expanded-bar { position: relative; z-index: 10; display: flex; height: 56px; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-audio-pill-row { position: relative; z-index: 10; flex: 0 0 auto; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-screen { flex: 1 1 0; width: 100%; height: auto; min-height: 0; margin: 0; border-radius: 0; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-touch-surface { touch-action: none; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-controls { position: absolute; z-index: 9; right: 12px; bottom: 176px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-time { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-bottom { position: absolute; z-index: 8; right: 0; bottom: 0; left: 0; gap: 12px; margin: 0; padding: 0 16px max(16px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(14,15,16,0), rgba(14,15,16,.72) 34%, rgba(14,15,16,.96)); }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-info { min-height: 0; padding-right: 72px; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-info > a { color: #b7b4af; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-info h1 { color: #f5f3ef; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) :is(.shorts-hint, .shorts-status, .shorts-discovery-meta) { color: #b7b4af; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-discovery-meta,
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) :is(a, button):focus-visible { outline-color: #f5f3ef; box-shadow: 0 0 0 3px #101418; }
@media (hover: hover) { .shorts-heading a:hover, .shorts-info > a:hover { color: #c92424; } .shorts-expanded-bar [data-short-home]:hover { color: #fff; } }
@media (max-width: 959px) { .shorts-page { grid-template-columns: minmax(280px, 410px) minmax(180px, 260px); gap: 28px; } .shorts-discovery h2 { font-size: 23px; } }
@media (max-width: 699px) {
  .shorts-page { display: block; margin-top: 0; }
  .shorts-heading { display: none; }
  .shorts-screen { min-height: 360px; }
  .shorts-discovery { display: none; }
  .shorts-page + .site-footer { margin-top: 0; }
  .shorts-actions .shorts-work-button { max-width: 132px; padding-inline: 12px; font-size: 12px; }
  .shorts-page[data-short-auto-viewport] { margin: 0; }
}
@media (max-width: 374px) {
  .shorts-expanded-bar { gap: 6px; }
  .shorts-audio-pill { padding-inline: 12px; font-size: 12px; }
  .shorts-bottom { padding-inline: 12px !important; }
  .shorts-actions { gap: 6px; }
  .shorts-actions .shorts-discovery-button { padding-inline: 12px; font-size: 14px; }
  .shorts-actions .shorts-work-button { max-width: 106px; padding-inline: 10px; }
}
@media (max-height: 650px) and (max-width: 699px) {
  .shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-audio-pill-row { position: absolute; z-index: 10; top: 56px; left: 0; }
  .shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-audio-pill { width: 44px; padding: 0; justify-content: center; }
  .shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-audio-pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .shorts-viewer:is(:fullscreen, [data-short-display-mode="viewport"], [data-short-display-mode="native"]) .shorts-info { display: block; }
}
@media (prefers-reduced-motion: reduce) { .shorts-page *, .shorts-page *::before, .shorts-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .shorts-mount { transform: none; } }