/* ===================================================================
   style.css — Ske Portfolio
   テーマカラーは CSS 変数で管理。JS が :root に直接上書きして切り替える
   =================================================================== */

/* ==================== FONTS ====================
   Google Fonts CDN を使わず自己ホストしてる。FOUT（読み込み中に別フォントが一瞬見える）を
   font-display: block で防ぐのが目的。CDN だとクロスオリジンになって制御しにくい
   Unbounded は可変フォント（variable font）なので wght 100〜900 を1ファイルでカバーできる
   M PLUS 1p は日本語フォントだが、サイトのコンテンツが英語なので latin サブセットだけ自己ホスト
   ====================================================== */

/* Unbounded — latin-ext は latin より先に宣言する（ブラウザは上から順に一致を探すため） */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url('../assets/fonts/unbounded-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url('../assets/fonts/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* M PLUS 1p — ウェイトごとに別ファイル（非可変フォント） */
@font-face {
  font-family: 'M PLUS 1p';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../assets/fonts/mplus1p-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'M PLUS 1p';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../assets/fonts/mplus1p-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'M PLUS 1p';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('../assets/fonts/mplus1p-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'M PLUS 1p';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('../assets/fonts/mplus1p-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'M PLUS 1p';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../assets/fonts/mplus1p-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'M PLUS 1p';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../assets/fonts/mplus1p-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'M PLUS 1p';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url('../assets/fonts/mplus1p-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'M PLUS 1p';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url('../assets/fonts/mplus1p-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================== DESIGN TOKENS ==================== */
:root {
  /* デフォルトカラー（Mono テーマ）。テーマ切り替えで JS が上書きする */
  --color-bg: #242424;
  --color-white: #FAFAFA;
  --color-gray: #8A8A8A;
  --color-accent: #FAF9F5;
  --color-dark: #141413;

  /* テーマ切り替えアニメーションの長さ。全要素で共通にしたかったので変数化 */
  --theme-transition-duration: 0.7s;
  --theme-transition-ease: ease-in-out;

  /* フォントファミリー。英字と日本語で別のフォントを使い分ける */
  --font-family-latin: 'Unbounded', sans-serif;
  --font-family-japanese: 'M PLUS 1p', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;

  --font-weight-latin: 400;
  --font-weight-japanese: 500;
}

/* ==================== RESET ==================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* h1-h6 はブラウザデフォルトの font-size / font-weight を継承に戻す
   スタイルはクラスセレクターで制御してるので、要素の種類を変えても見た目が変わらないようにする */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* スクロールバーを非表示にする（Lenis でカスタムスクロールしてるので不要） */
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}

body {
  font-family: var(--font-family-japanese);
  background-color: var(--color-bg);
  color: var(--color-white);
  font-size: clamp(14px, 0.52vw, 16px); /* ビューポート幅に合わせてスケール */
  font-weight: var(--font-weight-japanese);
  overscroll-behavior: none; /* バウンスを防ぐ（Lenis と競合するので）*/
  cursor: none; /* カスタムカーソルを使うのでネイティブは消す */
}

/* テーマカラーに合わせて、選択時は文字色と背景色を反転させる */
::selection {
  background: var(--color-white);
  color: var(--color-bg);
}

::-moz-selection {
  background: var(--color-white);
  color: var(--color-bg);
}

/* ==================== THEME TRANSITIONS ==================== */
/* テーマ切り替え時のカラーアニメーション対象要素をまとめて列挙 */
/* 増減するたびにここも更新する必要があるのがちょっと面倒 */
body,
.loader,
.loader-logo,
.cursor-label,
.scroll-label,
.side-nav,
.side-nav a,
.nav-brand,
.theme-cycle,
.theme-cycle-dot,
.hero-text .line,
.hero-meta span,
.section-label,
.works-item,
.works-item-link,
.works-item-year,
.works-item-cat,
.favorites-group-label,
.favorites-items,
.favorite-card,
.favorite-card-title,
.favorite-card-note,
.tag,
.faq-item,
.faq-question,
.faq-icon,
.faq-answer-inner,
.main-footer,
.outline-logo,
.footer-outline-logo,
.footer-headline,
.footer-email,
.footer-links a,
.footer-copy {
  transition-duration: var(--theme-transition-duration);
  transition-timing-function: var(--theme-transition-ease);
}

/* 背景色・ボーダーの transition が必要なグループ */
body,
.loader,
.side-nav,
.favorites-items,
.favorite-card {
  transition-property: background-color, background, border-color, color, -webkit-text-stroke-color;
}

/* テキストカラー系の transition が必要なグループ */
.loader-logo,
.cursor-label,
.scroll-label,
.side-nav a,
.nav-brand,
.theme-cycle,
.hero-text .line,
.hero-meta span,
.section-label,
.works-item-link,
.works-item-year,
.works-item-cat,
.favorites-group-label,
.favorite-card-title,
.favorite-card-note,
.tag,
.faq-question,
.faq-icon,
.faq-answer-inner,
.outline-logo,
.footer-outline-logo,
.footer-headline,
.footer-email,
.footer-links a,
.footer-copy {
  transition-property: color, border-color, background-color, -webkit-text-stroke-color;
}

/* ボーダーカラーだけ transition するグループ */
.works-item,
.faq-item,
.main-footer {
  transition-property: border-color, background-color;
}

.theme-cycle-dot {
  transition-property: background-color;
}

/* マウス（pointer: fine）環境ではすべての要素のカーソルを none に
   モバイル（pointer: coarse）では body の cursor: auto に戻す */
@media (pointer: fine) {
  *, *::before, *::after {
    cursor: none !important;
  }
}

/* ==================== FOCUS ==================== */
/* ブラウザデフォルトの青いリングをサイトのトーンに合わせて再定義する
   :focus-visible = Tab / 矢印キー操作時のみ表示。マウスクリックでは出ない */
*:focus {
  outline: none;
}

/* 汎用：ボタン・リンク・カードなど小さい要素。テーマカラーに合わせた細線 */
:focus-visible {
  outline: 1px solid var(--color-white);
  outline-offset: 6px;
  opacity: 1;
}

/* Works リスト：全幅アイテムはアウトライン枠でなく hover と同じ色変化でフォーカスを示す */
.works-item-link:focus-visible,
button.works-item-link:focus-visible {
  outline: none;
  color: var(--color-white);
}

/* ベーススタイルで outline: none を持つ要素を上書き（特定度を上げて適用） */
.theme-cycle:focus-visible,
.footer-email:focus-visible {
  outline: 1px solid var(--color-white);
  outline-offset: 6px;
}

a {
  color: inherit;
}

ul {
  list-style: none;
}

/* ==================== TYPOGRAPHY SYSTEM ==================== */
/* typography.js がセットする data 属性に応じて text-wrap を切り替える */
[data-text-wrap="pretty"] {
  text-wrap: pretty;
}

[data-text-wrap="balance"] {
  text-wrap: balance;
}

/* 日本語の行末禁則・行頭禁則をより厳密に処理する */
[data-text-wrap] {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  hanging-punctuation: allow-end;
}

/* 単語単位のスパン。display: inline で通常のテキストフローに溶け込ませる */
.text-unit {
  display: inline;
}

/* ==================== SITE CONTENT ==================== */
/* ローダーが消えるまで不可視にしておく。JS が opacity: 1 にする */
.site-content {
  opacity: 0;
}

/* ==================== LOADER ==================== */
.loader {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998; /* カーソルより下、コンテンツより上 */
}
.loader.hidden {
  display: none; /* フェードアウト後に完全に取り除く */
}
.loader-logo {
  font-family: var(--font-family-latin);
  font-size: clamp(32px, 6vw, 80px);
  font-weight: var(--font-weight-latin);
  color: var(--color-white);
  letter-spacing: 0.15em;
  opacity: 0; /* GSAP でフェードインさせる */
}

/* ==================== CURSOR ==================== */
.cursor-wrap {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* クリックを素通しさせる */
  z-index: 9999;        /* 最前面 */
  opacity: 0;           /* cursor.js がマウス初回移動時に表示する */
}
.cursor-dot {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-cursor-dot, #ffffff);
  mix-blend-mode: difference; /* 下のコンテンツの色を反転させるトリック */
  position: absolute;
  /* transform は GSAP だけに任せる（CSS と競合すると変なことになる） */
}
.cursor-label {
  font-family: var(--font-family-latin);
  position: absolute;
  font-size: 11px;
  color: var(--color-cursor-label, #141413);
  opacity: 0; /* hover 時に GSAP でフェードイン */
  white-space: nowrap;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  pointer-events: none;
  z-index: 1;
}

/* ==================== SCROLL LABEL ==================== */
/* 左上に固定表示されるセクション名ラベル。スクロールで書き換わる */
.scroll-label {
  font-family: var(--font-family-latin);
  position: fixed;
  left: 2rem;
  top: 1.5rem;
  font-size: 11px;
  color: var(--color-gray);
  letter-spacing: 0.1em;
  z-index: 100;
  text-transform: uppercase;
  pointer-events: none; /* クリックを素通し */
}

/* ==================== SIDE NAV ==================== */
/* 左下に固定。padding で見えないホバーエリアを外側に広げて
   カーソル縮小のトリガーゾーンを広めにとってある */
.side-nav {
  position: fixed;
  left: 0.5rem;  /* 実質 left: 2rem に見えるよう padding で補正してる */
  bottom: 0.5rem;
  padding: 2.5rem 3rem 1.5rem 1.5rem; /* この透明な余白がカーソル縮小ゾーン */
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.side-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.side-nav a {
  font-family: var(--font-family-latin);
  font-size: 12px;
  color: var(--color-gray);
  text-decoration: underline;
  letter-spacing: 0.06em;
  text-underline-offset: 3px;
  transition: color 0.3s;
}
.side-nav a:hover {
  color: var(--color-white);
}
.nav-brand {
  font-family: var(--font-family-latin);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  margin-top: 1.2rem;
  letter-spacing: 0.08em;
}
/* ロゴはリンクだが、ナビのリンク（下線・灰色）の見た目にはしない */
.side-nav a.nav-brand {
  display: inline-block;
  text-decoration: none;
  color: var(--color-white);
}

/* ==================== THEME PICKER ==================== */
.theme-picker {
  margin-top: 0.75rem;
}
/* ボタン自体はリセットして、テキストリンクみたいな見た目にする */
.theme-cycle {
  font-family: var(--font-family-latin);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-gray);
  cursor: none;
  outline: none;
  transition: color 0.3s;
}
.theme-cycle:hover {
  color: var(--color-white);
}
/* テーマカラーを示すドット */
.theme-cycle-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.theme-cycle-name {
  text-transform: uppercase;
}
/* "+N" のロック数表示。控えめに薄くした */
.theme-cycle-locked {
  font-size: 10px;
  opacity: 0.45;
  margin-left: 0.15rem;
}

/* カスタムテーマ：呼び出しはナブの小さなトリガー、中身は画面中央のモーダル
   上のテーマピッカー（.theme-cycle）とテキストスタイルを揃えてある */
.theme-custom-toggle {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-family-latin);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray);
  background: none;
  border: none;
  padding: 0;
  cursor: none;
  transition: color 0.3s;
}
.theme-custom-toggle:hover {
  color: var(--color-white);
}

.theme-custom-modal {
  position: fixed;
  inset: 0;
  z-index: 2000; /* カーソル(9999)より下、他の全コンテンツより上 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.theme-custom-modal[hidden] {
  display: none; /* [hidden] は UA スタイルなので、上の author 側 display:flex が同じ詳細度で勝ってしまうのを明示的に上書き */
}
.theme-custom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: none;
}
.theme-custom-dialog {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: var(--color-bg);
  border: 1px solid rgba(138, 138, 138, 0.25);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 1.75rem;
}
.theme-custom-title {
  font-family: var(--font-family-latin);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-white);
}
.theme-custom-desc {
  margin-top: 0.5rem;
  font-family: var(--font-family-latin);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-gray);
}
.theme-custom-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.theme-custom-note {
  margin-top: 0.5rem;
  font-family: var(--font-family-latin);
  font-size: 11px;
  line-height: 1.4; /* min-height と揃えておくことで、空 → テキスト表示時にボックス高さが変わらないようにしてある */
  color: var(--color-gray);
  min-height: 1.4em;
}
.theme-custom-note-error {
  color: #ff6b6b;
}
.theme-custom-hint {
  margin-top: 1.25rem;
  font-family: var(--font-family-latin);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: rgba(138, 138, 138, 0.45);
}
.theme-custom-input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 12px;
  background: transparent;
  border: 1px solid rgba(138, 138, 138, 0.3);
  color: var(--color-white);
  padding: 0.55rem 0.7rem;
  outline: none;
  cursor: none;
  transition: border-color 0.3s;
}
.theme-custom-input:focus {
  border-color: var(--color-gray);
}
.theme-custom-input-error {
  border-color: #ff6b6b !important;
}
.theme-custom-apply {
  font-family: var(--font-family-latin);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray);
  background: none;
  border: 1px solid rgba(138, 138, 138, 0.3);
  padding: 0.55rem 0.9rem;
  cursor: none;
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s;
}
.theme-custom-apply:hover {
  color: var(--color-white);
  border-color: var(--color-white);
}

/* ==================== WORKS PREVIEW MODAL ==================== */
/* theme-custom-modal と同じ骨格（backdrop + dialog）。projects.js が中身を差し替えて使い回す */
.works-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.works-modal[hidden] {
  display: none;
}
.works-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: none;
}
.works-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid rgba(138, 138, 138, 0.25);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 1.75rem;
}
.works-modal-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}
.works-modal-cat {
  font-family: var(--font-family-latin);
  font-size: 10px;
  color: var(--color-gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(138, 138, 138, 0.25);
  padding: 3px 8px;
}
.works-modal-year {
  font-family: var(--font-family-latin);
  font-size: 12px;
  color: var(--color-gray);
  letter-spacing: 0.06em;
}
.works-modal-title {
  font-family: var(--font-family-latin), var(--font-family-japanese);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-white);
}
.works-modal-desc {
  margin-top: 0.75rem;
  font-family: var(--font-family-latin), var(--font-family-japanese);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-gray);
}
.works-modal-cta {
  margin-top: 1.5rem;
  width: 100%;
  font-family: var(--font-family-latin);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-white);
  border: none;
  padding: 0.85rem 1rem;
  cursor: none;
  transition: opacity 0.3s;
}
.works-modal-cta:hover {
  opacity: 0.85;
}

/* 新しいテーマがアンロックされた瞬間に出す通知 */
.theme-toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
}
.theme-toast {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--color-white);
  color: var(--color-bg);
  font-family: var(--font-family-latin);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.theme-toast-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ==================== HERO ==================== */
.main-intro {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10vh 8vw 8vh;
  position: relative;
}
.hero-text {
  display: flex;
  flex-direction: column;
}
.hero-text .line {
  font-family: var(--font-family-latin), var(--font-family-japanese);
  font-size: clamp(60px, 12vw, 160px);
  font-weight: var(--font-weight-latin);
  line-height: 1.0;
  letter-spacing: -0.03em;
  display: block;
  overflow: hidden; /* y 方向のスライドアニメが枠外にはみ出ないように */
  color: var(--color-white);
}
.hero-text .brand-name {
  font-size: clamp(80px, 15vw, 200px);
  color: var(--color-white);
}
.hero-meta {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-left: 0.3rem;
}
.hero-meta span {
  font-family: var(--font-family-latin);
  font-size: 12px;
  color: var(--color-gray);
  letter-spacing: 0.08em;
}
.hero-role {
  display: inline-block;
  min-width: 1ch;
  line-height: 1.2;
  min-height: 1.2em; /* 空文字になる瞬間も1行分の高さを維持する */
}

/* ==================== PHILOSOPHY ==================== */
.main-philosophy {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10vh 8vw;
  position: relative;
  overflow: hidden; /* アウトロゴが枠外にはみ出るのをクリップ */
}
.philosophy-inner {
  position: relative;
  z-index: 1; /* アウトロゴより手前に */
  width: 100%;
  max-width: none;
}
.philosophy-text {
  width: 100%;
  margin: 0;
  font-size: clamp(22px, 3.5vw, 56px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-align: left;
}
/* philosophy.js が1文字ずつスパンで包む。スクロールで opacity を操作する */
.philosophy-text .char {
  opacity: 0.15; /* 初期状態は薄暗く、スクロールで明るくなる */
  display: inline;
  transition: none; /* GSAP で操作するので CSS transition はオフ */
}
/* アウトラインの "Ske" ロゴ。背景色の塗り + 細い枠線 = アウトライン効果 */
.outline-logo {
  position: absolute;
  /* 枠の内側に収める。はみ出させると overflow:hidden で下端・右端が見切れる（環境でフォント位置が少しずれるだけで切れる） */
  bottom: 0.12em;
  right: 0.05em;
  font-family: var(--font-family-latin);
  font-size: clamp(100px, 18vw, 260px);
  color: var(--color-bg);                           /* 塗りを背景色と同色に */
  -webkit-text-stroke: 1px rgba(138, 138, 138, 0.18); /* 枠線だけ見せる */
  letter-spacing: -0.03em;
  user-select: none;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

/* ==================== WORKS ==================== */
.main-works {
  min-height: 80vh;
  padding: 10vh 8vw;
}
.section-header {
  margin-bottom: 3rem;
}
.section-label {
  font-family: var(--font-family-latin);
  font-size: 11px;
  color: var(--color-gray);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.works-list {
  width: 100%;
}
/* ボーダーで区切ったリスト形式 */
.works-item {
  border-top: 1px solid rgba(138, 138, 138, 0.18);
}
.works-item:last-child {
  border-bottom: 1px solid rgba(138, 138, 138, 0.18);
}
.works-item-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 0;
  text-decoration: none;
  color: var(--color-gray);
  transition: color 0.3s ease;
  cursor: none;
}
.works-item-link:hover {
  color: var(--color-white);
}
/* URL がない作品（展示のみ）はクリック不可 */
.works-item-link.no-link {
  cursor: default;
  pointer-events: none;
}
/* type="lightbox" の場合に <button> を使うので、ブラウザデフォルトをリセットする */
button.works-item-link {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
}
.works-item-title {
  font-family: var(--font-family-latin), var(--font-family-japanese);
  font-size: clamp(26px, 4.5vw, 68px);
  font-weight: var(--font-weight-latin);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.works-item-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-shrink: 0; /* タイトルが長くなっても年・カテゴリーは縮まない */
}
.works-item-year {
  font-family: var(--font-family-latin);
  font-size: 12px;
  color: var(--color-gray);
  letter-spacing: 0.06em;
}
.works-item-cat {
  font-family: var(--font-family-latin);
  font-size: 10px;
  color: var(--color-gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(138, 138, 138, 0.25);
  padding: 3px 8px;
}

/* ==================== FAVORITES ==================== */
.main-favorites {
  padding: 10vh 8vw;
}
.favorites-group {
  margin-bottom: 4rem;
}
.favorites-group:last-child {
  margin-bottom: 0;
}
.favorites-group-label {
  font-family: var(--font-family-latin);
  font-size: 11px;
  color: var(--color-gray);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(138, 138, 138, 0.18);
}
/* カードのグリッド。minmax(260px, 1fr) で自動的に列数が変わる */
.favorites-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;                          /* 1px の gap が仕切り線に見える */
  background: rgba(138, 138, 138, 0.1); /* gap の色 = これがボーダー代わり */
}
.favorite-card {
  background: var(--color-bg);
  padding: 1.5rem;
}
.favorite-card:hover {
  background: rgba(255, 255, 255, 0.03); /* ごくわずかに明るくなる */
}
.favorite-card a {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: none;
}
.favorite-card-title {
  font-family: var(--font-family-latin), var(--font-family-japanese);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.6rem;
  letter-spacing: 0.02em;
}
.favorite-card-note {
  font-size: 12px;
  color: var(--color-gray);
  line-height: 1.7;
}
.favorite-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}
.tag {
  font-size: 10px;
  color: rgba(138, 138, 138, 0.7);
  border: 1px solid rgba(138, 138, 138, 0.2);
  padding: 2px 6px;
  letter-spacing: 0.06em;
}

/* ==================== ABOUT / FAQ ==================== */
.main-about {
  padding: 18vh 8vw;
  overflow: hidden;
}
/* .faq-list に負のマージンを使って section のパディングを突き破らせてる
   Q が section 幅いっぱいに広がって見えるように */
.faq-list {
  margin: 0 -8vw;
}
.faq-item {
  border-top: 1px solid rgba(138, 138, 138, 0.18);
}
.faq-item:last-child {
  border-bottom: 1px solid rgba(138, 138, 138, 0.18);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 8vw; /* 負のマージン分だけ padding で戻す */
  cursor: pointer;
  font-size: clamp(15px, 1.8vw, 21px);
  font-weight: var(--font-weight-japanese);
  color: var(--color-white);
  transition: color 0.3s;
  user-select: none;
  gap: 1rem;
}
.faq-question:hover {
  color: var(--color-gray);
}
/* "+" アイコン。CSS で rotate させるだけ */
.faq-icon {
  font-family: var(--font-family-latin);
  font-size: 18px;
  color: var(--color-gray);
  transition: transform 0.4s ease;
  flex-shrink: 0;
  font-weight: var(--font-weight-latin);
  line-height: 1;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg); /* "+" → "×" */
}
/* アコーディオンの高さは GSAP で 0 ↔ innerHeight にアニメする */
.faq-answer {
  overflow: hidden;
  height: 0;
}
.faq-answer-inner {
  padding: 0 8vw 1.5rem;
  font-size: 13px;
  color: var(--color-gray);
  line-height: 1.9;
}

/* ==================== FOOTER ==================== */
.main-footer {
  padding: 14vh 8vw;
  position: relative;
  overflow: hidden; /* アウトロゴのはみ出しをクリップ */
  border-top: 1px solid rgba(138, 138, 138, 0.12);
  min-height: 100vh; /* 最後までスクロールした時に中身がビューポート中央にくるように、フッター自体を1画面ぶんの高さにしてある */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 中央にうっすら浮かぶ超デカい "Ske" アウトロゴ */
.footer-outline-logo {
  font-family: var(--font-family-latin);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(100px, 22vw, 340px);
  color: var(--color-bg);                           /* 塗りを背景色と同色に */
  -webkit-text-stroke: 1px rgba(138, 138, 138, 0.12);
  font-weight: 900;
  letter-spacing: -0.03em;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
/* フッターのコンテンツ。アウトロゴより前面に */
.footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.5rem;
  width: 100%;
}
.footer-headline {
  font-family: var(--font-family-latin), var(--font-family-japanese);
  font-size: clamp(22px, 3.5vw, 52px);
  font-weight: var(--font-weight-latin);
  color: var(--color-white);
  letter-spacing: -0.01em;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
/* メールアドレスはコピーボタン。<button> のデフォルトスタイルをリセットした上で
   テキストリンクっぽく見せてる */
.footer-email {
  font-family: var(--font-family-latin);
  font-size: clamp(13px, 1.3vw, 18px);
  color: var(--color-white);
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(250, 250, 250, 0.25);
  padding-bottom: 3px;
  /* <button> リセット */
  appearance: none;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none;
}
.footer-email:hover {
  border-color: var(--color-white);
}
.footer-links {
  display: flex;
  gap: 2rem;
}
.footer-links a {
  font-family: var(--font-family-latin);
  font-size: 12px;
  color: var(--color-gray);
  text-decoration: none;
  letter-spacing: 0.08em;
}
.footer-links a:hover {
  color: var(--color-white);
}
.footer-copy {
  font-family: var(--font-family-latin);
  font-size: 11px;
  color: rgba(138, 138, 138, 0.4);
  letter-spacing: 0.04em;
  margin-top: 2rem;
}

/* ==================== LIGHTBOX ==================== */
/* z-index: loader(9998) より下、cursor(9999) より下で前面に出る */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  /* ほぼ透明な黒でサイトのコンテンツを引き立てる。
     どのテーマでも画像が映えるようにハードコードしてある */
  background: rgba(10, 10, 10, 0.95);
  z-index: 9997;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.lightbox-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* 画像 + キャプションをまとめるラッパー */
.lightbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.lightbox-img {
  max-width: 88vw;
  max-height: 78vh;
  object-fit: contain;
  display: block;
  /* scale/opacity は GSAP が管理する。CSS transition との競合を避けるため記述しない */
}

/* キャプション：サイトのラベルスタイルと統一 */
.lightbox-caption {
  font-family: var(--font-family-latin);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1;
}

/* 閉じ方ヒント：右下に小さく表示。overlay が open になったら CSS transition で出す */
.lightbox-hint {
  position: absolute;
  bottom: 2rem;
  right: 2.5rem;
  font-family: var(--font-family-latin);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease 0.35s, transform 0.35s ease 0.35s;
  /* delay を入れてオーバーレイ本体のフェード後に現れる */
}
.lightbox-overlay.open .lightbox-hint {
  opacity: 1;
  transform: translateY(0);
}

/* ロードスピナー：絶対位置で overlay の中央に固定
   GSAP が opacity を制御するので CSS では opacity を持たない */
.lightbox-loader {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* track（薄い輪）と progress（動く部分）を border で表現 */
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.65);
  animation: lightbox-spin 0.85s linear infinite;
  pointer-events: none;
  opacity: 0; /* GSAP が管理するので初期値は 0 */
}

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

/* ==================== PAPER THEME OVERRIDES ==================== */
/* Paper テーマは背景が明るいのでダーク向けの rgba ボーダーが見えなくなる
   ダークの rgba(138,138,138,X) を rgba(0,0,0,X) に置き換えて視認性を確保する */
html[data-theme="paper"] .works-item,
html[data-theme="paper"] .works-item:last-child       { border-color: rgba(0,0,0,0.14); }
html[data-theme="paper"] .faq-item,
html[data-theme="paper"] .faq-item:last-child         { border-color: rgba(0,0,0,0.14); }
html[data-theme="paper"] .favorites-group-label       { border-color: rgba(0,0,0,0.14); }
html[data-theme="paper"] .favorites-items             { background: rgba(0,0,0,0.07); }
html[data-theme="paper"] .favorite-card:hover         { background: rgba(0,0,0,0.04); }
html[data-theme="paper"] .works-item-cat              { border-color: rgba(0,0,0,0.2); }
html[data-theme="paper"] .tag                         { border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.5); }
html[data-theme="paper"] .main-footer                 { border-color: rgba(0,0,0,0.1); }
html[data-theme="paper"] .footer-email                { border-color: rgba(0,0,0,0.22); }
html[data-theme="paper"] .outline-logo                { -webkit-text-stroke-color: rgba(0,0,0,0.1); }
html[data-theme="paper"] .footer-outline-logo         { -webkit-text-stroke-color: rgba(0,0,0,0.08); }
/* モバイルのナビバーも Paper 用に調整 */
@media (max-width: 768px) {
  html[data-theme="paper"] .side-nav {
    background: rgba(240,238,230,0.96);
    border-color: rgba(0,0,0,0.1);
  }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  /* モバイルはネイティブカーソルに戻す */
  body {
    cursor: auto;
  }
  .cursor-wrap {
    display: none;
  }

  /* サイドナブを下部バーに切り替える */
  .side-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;           /* デスクトップの拡張 padding を上書き */
    background: rgba(36, 36, 36, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(138, 138, 138, 0.12);
  }
  /* 下部バーは必要最低限の 1 行：Home / Works / About / Contact だけ。
     ロゴ（Home と重複）・Photography（Works 一覧から行ける）・テーマ切り替えはモバイルでは隠す */
  .side-nav ul {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
  }
  .nav-brand,
  .nav-extra,
  .theme-picker {
    display: none;
  }

  /* 横一列の下部バーには収まらないので、呼び出しリンクは隠す（デスクトップ向け機能） */
  .theme-custom-toggle {
    display: none;
  }

  .scroll-label {
    left: 1.5rem;
    top: 1rem;
    font-size: 10px;
  }

  /* セクションのパディングをモバイル用に調整 */
  .main-intro {
    padding: 10vh 6vw 14vh; /* 下に nav バー分のスペースを確保 */
  }
  .main-philosophy,
  .main-works,
  .main-favorites {
    padding: 8vh 6vw;
  }
  .main-about {
    padding: 14vh 6vw;
  }

  /* FAQ の負マージンをモバイル用の vw に合わせる */
  .faq-list {
    margin: 0 -6vw;
  }
  .faq-question {
    padding: 1.5rem 6vw;
  }
  .faq-answer-inner {
    padding: 0 6vw 1.5rem;
  }

  .main-footer {
    padding: 10vh 6vw 14vh;
  }

  /* カテゴリーバッジはスペースが狭いので非表示 */
  .works-item-cat {
    display: none;
  }

  /* Favorites は1カラムに */
  .favorites-items {
    grid-template-columns: 1fr;
  }

  /* フッターのアウトロゴはモバイルでは邪魔なので非表示 */
  .footer-outline-logo {
    display: none;
  }
}