/* ============================
   Light Mode Base
   ============================ */

:root {
    --bg: #f7f8fa;
    --text: #1a1a1a;
    --subtext: #555;
    --border: rgba(0, 0, 0, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --shadow: rgba(0, 0, 0, 0.08);
}

/* 背景と文字色 */
body {
    background: var(--bg);
    color: var(--text);
}

/* ============================
   Hero Name
   ============================ */

.hero-name {
    background: linear-gradient(120deg, #ff4fa8, #ffb84f);
    -webkit-background-clip: text;
    color: transparent;
}

/* ============================
   Photo Chip（ライト版）
   ============================ */

.hero-photo-chip {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    box-shadow:
        0 0 20px rgba(255, 107, 203, 0.15),
        0 12px 40px var(--shadow);
}

/* 平行四辺形の傾きはそのまま */
.hero-photo-chip img {
    filter: brightness(1.02) contrast(1.02);
}

/* ============================
   セクションタイトル
   ============================ */

.section-title {
    color: var(--text);
}

/* ============================
   テキスト
   ============================ */

p,
li,
.hero-sub,
.hero-meta {
    color: var(--subtext);
}

/* ============================
   ビジュアル
   ============================ */

.hero-visual {
    background: radial-gradient(circle at top, #ffffff 0, #f3f4f7 60%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.hero-orbit {
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: radial-gradient(circle at top left, #ffffff 0, #f0f1f5 70%);
}

.hero-orbit::before {
    background: radial-gradient(circle, rgba(255, 107, 203, 0.25), transparent 70%);
    filter: blur(4px);
}

/* グリッドをライトモード向けに薄いグレーへ */
.hero-orbit-grid {
    background-image: linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
    opacity: 0.5;
    mix-blend-mode: normal;
}

/* ピル（左上のラベル） */
.hero-pill {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.7);
    color: #444;
    backdrop-filter: blur(12px);
}

/* カード（右下のUIカード） */
.hero-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.75);
    color: #444;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.hero-card-title {
    color: #222;
}

.hero-card-bar {
    background: rgba(0, 0, 0, 0.08);
}

.hero-card-tag {
    background: rgba(0, 0, 0, 0.06);
    color: #444;
}

/* リング（中央の回転リング） */
.hero-orbit-ring {
    border: 1px dashed rgba(0, 0, 0, 0.15);
    opacity: 0.8;
}

/* ノード（リング上の光る点） */
.hero-orbit-node {
    background: linear-gradient(120deg, #ff6bcb, #ffd66b);
    box-shadow: 0 0 12px rgba(255, 107, 203, 0.5);
}


/* ============================
   グラスカード（共通）
   ============================ */

.card,
.glass,
.panel,
.work-card,
.timeline-card,
.qual-card,
.contact-card,
.hero-tag,
.logo,
.btn-ghost {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px var(--shadow);
    backdrop-filter: blur(12px);
}

.btn-primary {
    box-shadow: 0 4px 20px var(--shadow);
    color: var(--glass-bg);
}

.work-card:hover {
    box-shadow: 0 4px 20px var(--shadow);
}

.pill,
.qual-item,
.contact-link {
    background-color: var(--bg);
}

.wt1 {
    background: radial-gradient(circle at top left, #ff6bcb 0, #f7f8fa 60%);
}

.wt2 {
    background: radial-gradient(circle at top, #6b9bff 0, #f7f8fa 60%);
}

.wt3 {
    background: radial-gradient(circle at top, #ffd66b 0, #f7f8fa 60%);
}

/* ============================
   ナビゲーション
   ============================ */

nav a {
    color: var(--text);
}

nav a:hover {
    color: #ff4fa8;
}