/* ==========================================================================
   Somkeeper Design Tokens & Variables (Victorian Dark Wood & Silver Concept)
   ========================================================================== */
:root {
    /* Color Palette */
    --color-bg-base: #120a06;         /* Deepest dark wood background */
    --color-wood-dark: #1b120c;       /* Victorian dark wood brown */
    --color-wood-medium: #2e1f14;     /* Polished mahogany */
    --color-wood-light: #423023;      /* Warm wood accent */
    
    /* Silver & Gold Metallic Accents */
    --color-silver-light: #f8fafc;
    --color-silver-main: #e2e8f0;
    --color-silver-dark: #94a3b8;
    --color-silver-border: rgba(226, 232, 240, 0.18);
    --gradient-silver: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 50%, #94a3b8 100%);
    --gradient-silver-text: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
    --color-gold-accent: #c5b358;
    --color-gold-bright: #ffd700;
    --color-bronze-accent: #cd7f32;
    
    /* Dynamic Theme Shadows */
    --shadow-gold: rgba(212, 175, 55, 0.35);
    --shadow-silver: rgba(226, 232, 240, 0.35);
    --shadow-bronze: rgba(205, 127, 50, 0.35);
    
    /* Typography */
    --font-serif: 'Cinzel', 'Noto Serif KR', serif;
    --font-sans: 'Outfit', sans-serif;
    
    /* Glassmorphism & Geometry */
    --glass-bg: rgba(27, 18, 12, 0.78);
    --glass-blur: blur(15px);
    --border-radius-lg: 20px;
    --border-radius-md: 10px;
    --border-radius-sm: 6px;
    
    /* Parallax Defaults */
    --rx: 0deg;
    --ry: 0deg;
    --mx: 0px;
    --my: 0px;
}

/* ==========================================================================
   Base Styles & Reset (CSS Native Scroll Snap)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* 네이티브 스냅과 smooth 스크롤은 GSAP ScrollTrigger와 충돌해 제거했습니다.
       핀/스냅/애니메이션은 js/frameworks/gsapAnimations.js 가 전담합니다. */
    overflow-y: scroll;
}

body {
    background-color: var(--color-bg-base);
    color: var(--color-silver-main);
    font-family: var(--font-sans);
    /* 한국어 줄바꿈: 기본값은 어절 중간을 끊어서 "환영합니
다" 처럼 보입니다.
       keep-all 이면 어절 단위로만 끊습니다. 긴 영문/URL은 break-word 로 흘립니다. */
    word-break: keep-all;
    overflow-wrap: break-word;
    min-height: 100vh;
    /* [주의] 여기를 overflow-x: hidden 으로 되돌리지 마십시오.
       hidden 을 주면 CSS 규격상 overflow-y: visible 이 auto 로 바뀌어
       body 가 자기 자신의 스크롤 컨테이너가 됩니다. 그러면 안쪽의
       position: sticky 가 뷰포트가 아니라 body 기준이 되어 화면 고정이 아예 안 됩니다.
       clip 은 스크롤 컨테이너를 만들지 않으므로 가로 넘침만 잘라내고 sticky 는 살아 있습니다. */
    overflow-x: clip;
    position: relative;
    line-height: 1.6;
}

/* Ambient vignette & background light */
.ambient-glow {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vh;
    background: radial-gradient(circle, rgba(66, 48, 35, 0.2) 0%, rgba(27, 18, 12, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.vignette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
    pointer-events: none;
    z-index: 2;
}

#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
}

#app {
    position: relative;
    z-index: 10;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Natural document flow when showcase step is active for ScrollTrigger */
#app:has(#showcase-step.active) {
    display: block;
}

/* ==========================================================================
   플로팅 저택 색인 (Floating Estate Index)
   ========================================================================== */
.floating-index {
    position: fixed;
    bottom: 35px;
    right: 35px;
    z-index: 999;
    padding: 18px 22px;
    width: 220px;
    background: rgba(27, 18, 12, 0.88);
    border: 1px solid rgba(197, 179, 88, 0.35);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    transition: opacity 0.5s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.floating-index.visible {
    opacity: 1;
    pointer-events: auto;
}

.floating-index:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 40px rgba(197, 179, 88, 0.3);
    border-color: rgba(197, 179, 88, 0.65);
}

.index-header {
    font-family: var(--font-serif);
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--color-gold-accent);
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(197, 179, 88, 0.2);
    padding-bottom: 6px;
    text-shadow: 0 0 6px rgba(197, 179, 88, 0.3);
}

.floating-index ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.floating-index li {
    margin: 8px 0;
}

.index-link {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    color: #a3968b;
    text-decoration: none;
    font-family: var(--font-serif);
    transition: color 0.2s ease, transform 0.2s ease;
}

.index-link:hover {
    color: #f3efe6;
    transform: translateX(4px);
}

.indicator-dot {
    width: 6px;
    height: 6px;
    background-color: #5c5249;
    border-radius: 50%;
    margin-right: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.index-link.active {
    color: #ffffff;
    font-weight: 600;
}

.index-link.active .indicator-dot {
    background-color: var(--color-gold-accent);
    transform: scale(1.4);
    box-shadow: 0 0 8px rgba(197, 179, 88, 0.9);
}

/* ==========================================================================
   Push Notification Banner (Slide-down Virtual Alert)
   ========================================================================== */
.push-banner {
    position: fixed;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 580px;
    z-index: 10000;
    background: rgba(27, 18, 12, 0.92);
    border: 1px solid var(--color-silver-border);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--border-radius-md);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.2);
    transition: top 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.push-banner.active {
    top: 25px;
}

.push-banner-inner {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    gap: 16px;
}

.push-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-silver-border);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.push-crest {
    font-size: 1.3rem;
    color: var(--color-gold-bright);
}

.push-text-box {
    flex: 1;
}

.push-text-box h5 {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #ffffff;
    margin-bottom: 2px;
}

.push-text-box p {
    font-size: 0.85rem;
    color: var(--color-silver-main);
    line-height: 1.4;
}

.push-close {
    background: none;
    border: none;
    color: var(--color-silver-dark);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.push-close:hover {
    color: #ffffff;
}

/* ==========================================================================
   Typography & Ornaments
   ========================================================================== */
.serif-title {
    font-family: var(--font-serif);
    font-weight: 700;
    color: #ffffff;
    background: var(--gradient-silver-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
}

.serif-text {
    font-family: var(--font-serif);
}

.subtitle {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--color-silver-dark);
    font-size: 0.95rem;
    margin-top: 8px;
    letter-spacing: 0.5px;
}

.ornament {
    display: block;
    font-family: var(--font-serif);
    color: var(--color-silver-dark);
    font-size: 1.2rem;
    margin-bottom: 12px;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    letter-spacing: 4px;
}

.text-center {
    text-align: center;
}

/* Glass Panels */
.glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--color-silver-border);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Step Container */
.step-container {
    display: none;
    opacity: 0;
    width: 100%;
    max-width: 1200px;
    padding: 40px 20px;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.8s ease-in-out;
}

.step-container.active {
    display: flex;
    opacity: 1;
}

/* ==========================================================================
   Step 1: Victorian Glassmorphic Modal
   ========================================================================== */
.glass-modal {
    background: rgba(27, 18, 12, 0.85);
    border: 1px solid var(--color-silver-border);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--border-radius-lg);
    padding: 50px 40px;
    width: 100%;
    max-width: 580px;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
    position: relative;
}

.glass-modal::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px solid rgba(226, 232, 240, 0.05);
    pointer-events: none;
    border-radius: calc(var(--border-radius-lg) - 4px);
}

.modal-header {
    margin-bottom: 35px;
}

.modal-header h1 {
    font-size: 1.9rem;
    line-height: 1.3;
}

.title-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.title-options button:last-child {
    grid-column: span 2;
}

.btn-title {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(226, 232, 240, 0.12);
    color: var(--color-silver-main);
    font-family: var(--font-serif);
    padding: 14px 20px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: var(--border-radius-md);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
    letter-spacing: 1px;
}

.btn-title:hover {
    background: rgba(226, 232, 240, 0.08);
    border-color: rgba(226, 232, 240, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.custom-input-wrapper {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

#custom-title-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(226, 232, 240, 0.15);
    padding: 12px 16px;
    border-radius: var(--border-radius-md);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    outline: none;
}

#custom-title-input:focus {
    border-color: rgba(226, 232, 240, 0.5);
}

#btn-custom-confirm {
    background: var(--gradient-silver);
    color: var(--color-bg-base);
    border: none;
    padding: 12px 24px;
    border-radius: var(--border-radius-md);
    font-family: var(--font-serif);
    font-weight: 600;
    cursor: pointer;
}

/* ==========================================================================
   Step 2: Butler Selection & Parallax
   ========================================================================== */
.selection-header {
    text-align: center;
    margin-bottom: 50px;
}

.selection-header h2 {
    font-size: 2rem;
}

.butler-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}

.butler-card {
    background: var(--paper, #b5ada4); /* content.js의 paper 값 */
    border: 1px solid var(--color-silver-border);
    border-radius: var(--border-radius-lg);
    padding: 0;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
    transform: rotateY(var(--ry)) rotateX(var(--rx));
}

.butler-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
    z-index: 3;
}

.parallax-container {
    width: 100%;
    height: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* 집사 이미지 컨테이너 */
.butler-image-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: var(--paper, #b5ada4); /* content.js의 paper 값 */
}

/* 이미지: CSS 기반 크롭 (object-fit) */
.butler-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 캐릭터별 크롭 값은 content.js의 BUTLERS[].crop 에서 주입됩니다.
       치마폭이 넓은 캐릭터(butler3/4)는 --crop-scale 을 키워 얼굴 크기를 맞춥니다. */
    /* 머리 꼭대기가 원본 y=0 에 붙어 있으므로 Y는 반드시 0% 여야 잘리지 않습니다.
       머리 위 여백은 translateY(--crop-y) 로 만듭니다. */
    object-position: 50% 0%;
    transform: translateY(var(--crop-y, 0px)) scale(var(--crop-scale, 1));
    transform-origin: center top;
    display: block;
    transition: transform 0.5s ease;
}

.butler-card:hover .butler-img {
    transform: translateY(var(--crop-y, 0px)) scale(calc(var(--crop-scale, 1) * 1.05));
}

/* 테두리 비네팅: 잘리는 경계를 다크우드 배경으로 부드럽게 페이드 */
.butler-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background:
        /* 상단 페이드 */
        linear-gradient(to bottom, rgba(27, 18, 12, 0.5) 0%, transparent 18%),
        /* 하단 페이드 */
        linear-gradient(to top, rgba(27, 18, 12, 0.85) 0%, transparent 25%),
        /* 좌측 페이드 */
        linear-gradient(to right, rgba(27, 18, 12, 0.6) 0%, transparent 15%),
        /* 우측 페이드 */
        linear-gradient(to left, rgba(27, 18, 12, 0.6) 0%, transparent 15%);
}

/* 테마별 호버 효과 */
.butler-card[data-theme="gold"]:hover {
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 20px 40px -10px var(--shadow-gold);
}

.butler-card[data-theme="silver"]:hover {
    border-color: rgba(226, 232, 240, 0.5);
    box-shadow: 0 20px 40px -10px var(--shadow-silver);
}

.butler-card[data-theme="bronze"]:hover {
    border-color: rgba(205, 127, 50, 0.5);
    box-shadow: 0 20px 40px -10px var(--shadow-bronze);
}

/* ==========================================================================
   Step 3: One-Page Scroll Layout & Sequential Pinned Sections
   ========================================================================== */
#showcase-step {
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
    width: 100%;
}

/* Hero Brand Mark */
.hero-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.hero-brand-mark .brand-crest {
    font-size: 1.6rem;
    color: var(--color-gold-bright);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.hero-brand-mark .brand-name {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: #ffffff;
    background: var(--gradient-silver-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 01. Hero Section (Scroll Snap) */
.showcase-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    width: 100%;
    align-items: center;
    min-height: 100vh;
    /* #showcase-step의 padding을 0으로 만든 탓에 텍스트가 화면 왼쪽 끝에 붙었습니다.
       좌우 여백은 여기서 되돌리고, 넓은 화면에서는 가운데로 모읍니다. */
    padding: 0 clamp(28px, 6vw, 110px);
    max-width: 1500px;
    margin: 0 auto;
    box-sizing: border-box;
}

.showcase-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.silver-badge {
    background: rgba(226, 232, 240, 0.05);
    border: 1px solid rgba(226, 232, 240, 0.15);
    color: var(--color-silver-main);
    padding: 6px 14px;
    font-size: 0.75rem;
    font-family: var(--font-serif);
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 10px;
}

.greeting-section h1 {
    font-size: 2.8rem;
    line-height: 1.2;
}

.greeting-subtitle {
    margin-top: 10px;
    font-size: 1.1rem;
    color: var(--color-silver-dark);
}

.greeting-subtitle strong {
    color: #ffffff;
}

.selected-butler-reveal {
    background: rgba(27, 18, 12, 0.5);
    border-left: 2px solid var(--color-silver-main);
    padding: 16px 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

.butler-mini-silhouette {
    width: 48px;
    height: 48px;
    background: #1b120c;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.crest-mini {
    font-size: 1.2rem;
    color: var(--color-gold-accent);
}

.reveal-desc .serif-text {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--color-silver-main);
}

.hero-actions {
    display: flex;
    gap: 16px;
}

/* 3D Mockup Frame */
.showcase-mockup {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mockup-frame {
    width: 100%;
    max-width: 420px;
    height: 560px;
    border-radius: 36px;
    background: rgba(27, 18, 12, 0.4);
    border: 1px solid rgba(226, 232, 240, 0.15);
    backdrop-filter: var(--glass-blur);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
    transition: transform 0.1s linear;
}



/* ==========================================================================
   Scroll Sections Common (100vh Fullpage Snap Viewports)
   ========================================================================== */
.scroll-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px clamp(20px, 5vw, 80px);   /* 섹션이 100vh를 넘으면 핀이 걸리지 않습니다 */
    box-sizing: border-box;
}

.section-header {
    margin-bottom: 8px;
}

.section-header h2 {
    font-size: 2.2rem;
}

.badge-pro {
    display: inline-block;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--color-gold-accent);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-family: var(--font-serif);
    margin-top: 6px;
}

/* ==========================================================================
   [Core Feature 1] 수면 시뮬레이터
   ========================================================================== */
.simulator-card {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 40px;
    transition: box-shadow 0.3s ease;
}

.simulator-inputs {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-bottom: 35px;
}

.input-group label {
    display: block;
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--color-silver-main);
    margin-bottom: 10px;
}

.label-with-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.highlight-val {
    color: var(--color-gold-accent);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.1rem;
}



/* --------------------------------------------------------------------------
   목표 수면 시간 슬라이더
   --fill(0~100)은 main.js가 값에 맞춰 갱신합니다. 지나온 구간을 골드로 채워
   지금 어디를 잡고 있는지 눈에 바로 보이게 합니다.
   -------------------------------------------------------------------------- */
.slider-custom {
    width: 100%;
    height: 26px;              /* 트랙은 8px이지만 잡기 쉽도록 히트 영역을 키웁니다 */
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: grab;
    touch-action: none;        /* 세로 스크롤에 드래그를 뺏기지 않도록 */
}

.slider-custom:active {
    cursor: grabbing;
}

/* 트랙 (WebKit) */
.slider-custom::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 5px;
    background:
        linear-gradient(90deg, rgba(197, 179, 88, 0.85) 0%, rgba(197, 179, 88, 0.85) var(--fill, 50%),
                       rgba(255, 255, 255, 0.1) var(--fill, 50%), rgba(255, 255, 255, 0.1) 100%);
}

.slider-custom::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -8px;          /* (8px 트랙 - 24px 썸) / 2 */
    border-radius: 50%;
    background: var(--gradient-silver);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    /* 드래그 중 크기가 변하면 손가락과 어긋나 보이므로 트랜지션을 두지 않습니다 */
}

.slider-custom:active::-webkit-slider-thumb {
    box-shadow: 0 0 16px rgba(197, 179, 88, 0.9);
}

/* 트랙 (Firefox) */
.slider-custom::-moz-range-track {
    height: 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
}

.slider-custom::-moz-range-progress {
    height: 8px;
    border-radius: 5px;
    background: rgba(197, 179, 88, 0.85);
}

.slider-custom::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--gradient-silver);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.slider-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-silver-dark);
    margin-top: 6px;
    font-family: var(--font-serif);
}

/* Toggle Switch & Tooltip */
.toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.25);
    padding: 16px 20px;
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(226, 232, 240, 0.08);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-serif);
    font-size: 0.95rem;
}

.tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.tooltip-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(226, 232, 240, 0.15);
    color: var(--color-silver-main);
    font-size: 0.75rem;
    font-family: var(--font-sans);
    font-weight: 600;
}

.tooltip-box {
    visibility: hidden;
    opacity: 0;
    width: 280px;
    background: rgba(20, 14, 10, 0.95);
    border: 1px solid var(--color-silver-border);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--border-radius-md);
    padding: 12px 16px;
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 100;
}

.tooltip-container:hover .tooltip-box {
    visibility: visible;
    opacity: 1;
}

.tooltip-text {
    font-size: 0.8rem;
    color: var(--color-silver-main);
    line-height: 1.4;
}

.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider.round {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .4s;
    border-radius: 34px;
    border: 1px solid var(--color-silver-border);
}

.slider.round:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--gradient-silver);
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider.round {
    background-color: rgba(197, 179, 88, 0.3);
    border-color: var(--color-gold-accent);
}

input:checked + .slider.round:before {
    transform: translateX(22px);
    background: var(--color-gold-accent);
}

/* Simulator Result Box */
.simulator-result {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(197, 179, 88, 0.3);
    border-radius: var(--border-radius-md);
    padding: 24px 30px;
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 25px;
}

.result-crest-box {
    font-size: 2rem;
    color: var(--color-gold-accent);
}

.result-tag {
    font-size: 0.75rem;
    font-family: var(--font-serif);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-silver-dark);
}

.result-time-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 4px 0;
}

.res-period {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--color-gold-accent);
}

.res-time {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: #ffffff;
    font-weight: 700;
}

.res-advice {
    font-size: 0.9rem;
    color: var(--color-silver-main);
}

.simulator-footer {
    text-align: center;
}

.btn-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-silver-border);
    color: var(--color-silver-main);
    padding: 14px 28px;
    border-radius: var(--border-radius-md);
    font-family: var(--font-serif);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-action:hover {
    background: rgba(226, 232, 240, 0.12);
    border-color: var(--color-gold-accent);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   [Core Feature 2] 심화 대시보드
   ========================================================================== */
.dashboard-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    width: 100%;
}

.dash-card {
    padding: 35px;
}

.card-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.1);
}

.dash-item {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.95rem;
}

.dash-label {
    color: var(--color-silver-dark);
    font-family: var(--font-serif);
}

.dash-value {
    color: #ffffff;
    font-weight: 500;
}

.dash-value.highlight {
    color: var(--color-gold-accent);
}

/* Timeline */
.timeline-list {
    list-style: none;
    position: relative;
    padding-left: 20px;
}

.timeline-list::before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 6px;
    width: 2px;
    background: rgba(226, 232, 240, 0.15);
}

.timeline-node {
    position: relative;
    margin-bottom: 24px;
    padding-left: 20px;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.timeline-node::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-silver-dark);
    border: 2px solid var(--color-bg-base);
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.timeline-node.active-node::before {
    background: var(--color-gold-accent);
    box-shadow: 0 0 10px var(--color-gold-accent);
}

.time-badge {
    font-size: 0.75rem;
    font-family: var(--font-serif);
    color: var(--color-gold-accent);
    display: block;
    margin-bottom: 2px;
}

.node-info strong {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #ffffff;
    display: block;
}

.node-info p {
    font-size: 0.85rem;
    color: var(--color-silver-dark);
}

/* ==========================================================================
   [Core Feature 3] 사전예약 폼
   ========================================================================== */
#preorder-section {
    min-height: 80vh;
}

.preorder-card {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 40px;
}

.form-group label {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: var(--color-silver-main);
    margin-bottom: 10px;
}

.form-group input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-silver-border);
    padding: 14px 18px;
    border-radius: var(--border-radius-md);
    color: #ffffff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.form-group input:focus {
    border-color: rgba(226, 232, 240, 0.6);
}

.consent-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 22px 0 30px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-silver-main);
    user-select: none;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-silver-border);
    border-radius: 4px;
    transition: all 0.2s;
}

.checkbox-container:hover input ~ .checkmark {
    border-color: var(--color-silver-main);
}

.checkbox-container input:checked ~ .checkmark {
    background-color: var(--color-gold-accent);
    border-color: var(--color-gold-accent);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #120a06;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.btn-text-link {
    background: none;
    border: none;
    color: var(--color-silver-dark);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.btn-text-link:hover {
    color: #ffffff;
}

.btn-block {
    width: 100%;
}

/* Core Buttons */
.btn-primary {
    background: var(--gradient-silver);
    color: var(--color-bg-base);
    border: none;
    padding: 16px 36px;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    border-radius: var(--border-radius-md);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 255, 255, 0.2);
}

.btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(80%);
    box-shadow: none;
    transform: none;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-silver-border);
    color: var(--color-silver-main);
    padding: 16px 30px;
    font-family: var(--font-serif);
    font-size: 1rem;
    cursor: pointer;
    border-radius: var(--border-radius-md);
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Footer */
.showcase-footer {
    text-align: center;
    padding: 60px 0 40px;
    border-top: 1px solid rgba(226, 232, 240, 0.08);
    color: var(--color-silver-dark);
    font-size: 0.85rem;
    font-family: var(--font-serif);
}

/* Modals */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-dialog {
    width: 100%;
    max-width: 520px;
    padding: 35px 30px;
}

.dialog-header {
    margin-bottom: 20px;
    text-align: center;
}

.dialog-header h3 {
    font-size: 1.5rem;
}

.dialog-body {
    font-size: 0.9rem;
    color: var(--color-silver-main);
    line-height: 1.6;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dialog-body .notice {
    font-size: 0.8rem;
    color: var(--color-silver-dark);
    margin-top: 10px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.dialog-footer.justify-center {
    justify-content: center;
}

/* Responsive Queries */
@media (max-width: 960px) {
    .butler-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .parallax-container {
        height: 300px;
    }
    .showcase-hero {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .hero-actions {
        justify-content: center;
    }
    .showcase-mockup {
        order: -1;
    }
    .dashboard-preview-grid {
        grid-template-columns: 1fr;
    }
    .floating-index {
        display: none;
    }
}

@media (max-width: 560px) {
    .butler-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   쇼케이스 컨테이너 보정
   --------------------------------------------------------------------------
   .step-container 의 flex / max-width / padding 이 쇼케이스에도 걸리면서
   각 100vh 섹션의 시작점이 40px씩 밀려 스냅 좌표가 어긋났습니다.
   쇼케이스일 때만 순수 블록 흐름으로 되돌립니다.
   ========================================================================== */
#showcase-step.active {
    display: block;
    max-width: none;
    padding: 0;
    width: 100%;
    opacity: 1;
}

/* ==========================================================================
   히어로 — 선택한 집사 캐릭터 무대 (기존 Spline 3D 뷰어 대체)
   ========================================================================== */
.mockup-frame {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* 원본 그림의 종이색으로 컨테이너 전체를 칠합니다.
       이렇게 해야 이미지가 창백한 사각형처럼 따로 떠 보이지 않고
       한 장의 초상화 패널처럼 읽힙니다. (색은 content.js의 paper) */
    background: var(--paper, #b1aea6);
}

/* 종이색 패널의 가장자리를 어둠으로 녹여 페이지 배경과 이어 줍니다 */
.mockup-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 50% 42%,
            rgba(27, 18, 12, 0) 42%,
            rgba(27, 18, 12, 0.42) 78%,
            rgba(27, 18, 12, 0.88) 100%),
        linear-gradient(to bottom,
            rgba(27, 18, 12, 0.55) 0%,
            rgba(27, 18, 12, 0) 18%,
            rgba(27, 18, 12, 0) 74%,
            rgba(27, 18, 12, 0.8) 100%);
}

/* 뒤편 후광 — 선택한 집사의 테마 색을 따라갑니다 */
.stage-halo {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: 96%;
    height: 78%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        color-mix(in srgb, var(--stage-accent, #ffd700) 26%, transparent) 0%,
        rgba(27, 18, 12, 0) 68%);
    filter: blur(10px);
    opacity: 0.55;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 3;
}

.stage-frame-ornament {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--stage-accent, #ffd700);
    opacity: 0.55;
    letter-spacing: 0.5em;
    font-size: 0.9rem;
    z-index: 3;
    pointer-events: none;
}

.stage-frame-ornament.top { top: 22px; }
.stage-frame-ornament { z-index: 5; }

/* 캐릭터 전신을 잘리지 않게 담는 무대 */
.butler-portrait {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 54px 0 0;
    box-sizing: border-box;
}

/*
 * 캐릭터별 가로 한계는 content.js의 heroMaxWidth 로 주입됩니다.
 * 원본 비율이 캐릭터마다 크게 달라(남성 0.28~0.35 / 여성 0.53~0.59)
 * 한 가지 값으로는 치마가 잘리거나 남성 캐릭터가 과하게 작아집니다.
 * object-fit: contain 이라 잘림 없이 전신이 들어갑니다.
 */
.hero-butler-img {
    height: 100%;
    width: auto;
    max-width: 62%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    /* drop-shadow 금지: 원본 PNG에 배경이 있어(불투명 사각형)
       그림자가 인물이 아니라 이미지 사각형에 걸려 경계선이 생깁니다. */
}

/* 발밑 그림자 — 캐릭터가 무대에 서 있는 느낌 */
/* .stage-floor: 불투명 이미지 뒤에 깔려 가로 경계로만 보여 비활성화했습니다. */
.stage-floor {
    display: none;
}

/* 집사 카드 위 문양 배지 (이름 대신 문양으로 구분) */
.butler-card-crest {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 4;
    font-size: 1.15rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    opacity: 0.85;
    pointer-events: none;
}

/* ==========================================================================
   커스텀 휠 타임피커 (기존 <input type="time"> 대체)
   --------------------------------------------------------------------------
   .tp-list li 의 height 는 TimePicker.js 의 ITEM_HEIGHT(44) 와
   반드시 같아야 합니다. 한쪽만 바꾸면 선택 위치가 어긋납니다.
   ========================================================================== */
.time-picker {
    position: relative;
    width: 100%;
    height: 132px;                    /* 44px * 3칸 — 5칸(220px)이면 시뮬레이터 섹션이 100vh를 넘겨 핀이 안 걸립니다 */
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid var(--color-silver-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    user-select: none;
}

.tp-columns {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    height: 100%;
}

/* 가운데 선택 밴드 */
.tp-selection-band {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 44px;                        /* (132 - 44) / 2 */
    height: 44px;
    border-top: 1px solid rgba(197, 179, 88, 0.55);
    border-bottom: 1px solid rgba(197, 179, 88, 0.55);
    background: linear-gradient(90deg,
        rgba(197, 179, 88, 0.04) 0%,
        rgba(197, 179, 88, 0.13) 50%,
        rgba(197, 179, 88, 0.04) 100%);
    pointer-events: none;
    z-index: 1;
}

/* 위/아래 페이드 — 드럼처럼 보이게 */
.tp-fade {
    position: absolute;
    left: 0;
    right: 0;
    height: 44px;
    pointer-events: none;
    z-index: 3;
}

.tp-fade.top {
    top: 0;
    background: linear-gradient(to bottom, rgba(20, 13, 9, 0.95) 0%, rgba(20, 13, 9, 0) 100%);
}

.tp-fade.bottom {
    bottom: 0;
    background: linear-gradient(to top, rgba(20, 13, 9, 0.95) 0%, rgba(20, 13, 9, 0) 100%);
}

/* 각 열은 독립된 스크롤 컨테이너 — 휠/드래그/키보드가 기본 지원됩니다 */
.tp-col {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    outline: none;
    flex: 0 0 auto;
    min-width: 74px;
    /* 드래그를 JS가 직접 처리합니다. touch-action을 none으로 둬야
       터치에서 브라우저 기본 스크롤과 손가락을 서로 뺏지 않습니다. */
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.tp-col.is-dragging {
    cursor: grabbing;
}

/* 드래그 중에는 항목 확대 트랜지션을 꺼서 손가락에 딱 붙게 만듭니다 */
.tp-col.is-dragging .tp-list li {
    transition: none;
}

.tp-col::-webkit-scrollbar { display: none; }

.tp-col[data-unit="meridiem"] { min-width: 86px; }

.tp-col:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(197, 179, 88, 0.7);
    border-radius: 8px;
}

.tp-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tp-list li {
    height: 44px;                     /* TimePicker.js ITEM_HEIGHT 와 동일 */
    line-height: 44px;
    text-align: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: rgba(226, 232, 240, 0.32);
    transition: color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
    transform: scale(0.86);
}

.tp-list li.is-near {
    color: rgba(226, 232, 240, 0.6);
    transform: scale(0.94);
}

.tp-list li.is-active {
    color: #fff;
    transform: scale(1.06);
    text-shadow: 0 0 14px rgba(197, 179, 88, 0.65);
}

.tp-colon {
    align-self: center;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: rgba(197, 179, 88, 0.8);
    padding-bottom: 2px;
}

.tp-hint {
    margin-top: 4px;
    font-size: 0.7rem;
    line-height: 1.3;
    color: rgba(226, 232, 240, 0.42);
    text-align: center;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   반응형 — 캐릭터 무대 & 타임피커
   ========================================================================== */
@media (max-width: 992px) {
    .hero-butler-img { max-width: 74%; }
}

@media (max-width: 640px) {
    .mockup-frame { height: 440px; }
    .hero-butler-img { max-width: 82%; }
    .tp-col { min-width: 64px; }
    .tp-col[data-unit="meridiem"] { min-width: 72px; }
}


/* ==========================================================================
   한국어 타이포그래피 — 줄바꿈 다듬기
   --------------------------------------------------------------------------
   word-break: keep-all 은 body에 걸어 두었습니다(어절 중간 끊김 방지).
   여기서는 줄 길이를 고르게 나눠 "고아 단어"가 혼자 남는 것을 막습니다.
   ========================================================================== */
h1, h2, h3, h4,
.serif-title,
.modal-header .subtitle {
    text-wrap: balance;      /* 제목: 각 줄 길이를 비슷하게 */
}

p,
.subtitle,
.serif-text,
.res-advice,
.consent-text,
.tooltip-text {
    text-wrap: pretty;       /* 본문: 마지막 줄에 한 단어만 남는 것 방지 */
}

/* 제목이 화면 폭에 눌려 어색하게 접히지 않도록 줄당 길이를 제한 */
.glass-modal .serif-title {
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
}

.selection-header .serif-title,
.section-header .serif-title {
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
}

.section-header .subtitle,
.selection-header .subtitle {
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
}

/* 히어로 인사말은 좌측 정렬이라 가운데 정렬을 넣지 않습니다 */
#dynamic-greeting {
    max-width: 18ch;
}

.greeting-subtitle {
    max-width: 34ch;
}

/* ==========================================================================
   모바일 반응형 보정
   --------------------------------------------------------------------------
   모바일에서는 섹션이 화면보다 커집니다(당연). 그래서 핀은 자동으로 꺼지고
   일반 스크롤로 동작합니다 — gsapAnimations.js의 canPin() 가드가 처리합니다.
   여기서는 레이아웃/터치 관련 문제만 잡습니다.
   ========================================================================== */

/* 툴팁이 화면 밖으로 밀려나는 문제.
   아이콘(18px) 기준 left:50% + width:280px 이라 좁은 화면에서 오른쪽으로 넘칩니다.
   기준을 토글 카드로 옮기고 카드 폭에 맞춥니다. */
.tooltip-box {
    max-width: calc(100vw - 24px);
}

@media (max-width: 720px) {
    .toggle-group { position: relative; }
    .tooltip-container { position: static; }

    .tooltip-box {
        width: auto;
        left: 12px;
        right: 12px;
        transform: none;
        bottom: calc(100% + 10px);
    }
}

@media (max-width: 960px) {
    /* 히어로가 1단으로 바뀌며 가운데 정렬되므로, 줄바꿈용 폭 제한도 가운데로 모읍니다.
       (안 그러면 가운데 정렬 안에서 글 덩어리만 왼쪽에 붙습니다) */
    #dynamic-greeting,
    .greeting-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .selected-butler-reveal {
        justify-content: center;
    }

    .hero-brand-mark {
        justify-content: center;
    }

    /* 세로 공간이 귀하므로 초상화 무대를 줄입니다 */
    .mockup-frame {
        height: clamp(320px, 46vh, 460px);
    }
}

@media (max-width: 640px) {
    .mockup-frame {
        height: clamp(280px, 40vh, 400px);
    }

    .hero-butler-img { max-width: 86%; }

    /* 버튼이 좁은 화면에서 찌그러지지 않도록 세로로 */
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .simulator-card,
    .preorder-card,
    .dash-card {
        padding: 18px 14px;
    }

    /* 슬라이더 눈금이 겹쳐 읽히지 않는 문제 */
    .slider-ticks {
        font-size: 0.66rem;
    }
}

@media (max-width: 400px) {
    /* 타임피커 3열이 눌리지 않도록 최소폭을 낮춥니다 */
    .tp-col { min-width: 56px; }
    .tp-col[data-unit="meridiem"] { min-width: 64px; }
    .tp-list li { font-size: 1.02rem; }
    .slider-ticks span:nth-child(even) { display: none; }
}

/* 터치 기기에서는 hover가 없으므로, 툴팁을 탭으로도 열 수 있게 */
@media (hover: none) {
    .tooltip-container:focus-within .tooltip-box,
    .tooltip-container:active .tooltip-box {
        visibility: visible;
        opacity: 1;
    }
}


/* 호칭 선택 모달 — 제목 위 태그라인 (문구는 content.js의 COPY.modal.tagline) */
.modal-tagline {
    font-family: var(--font-serif);
    font-size: 1.24rem;
    letter-spacing: 0.16em;
    color: var(--color-gold, #c5b358);
    opacity: 0.85;
    margin-bottom: 10px;
    text-transform: none;
}

/* ==========================================================================
   Sticky Feature Section (토스 랜딩 방식)
   --------------------------------------------------------------------------
   .sticky-section  : 높이 = 항목수 × 100vh — 스크롤 거리를 만드는 껍데기
   .sticky-inner    : position: sticky 로 화면에 붙는 실제 화면
   ScrollTrigger의 pin을 쓰지 않으므로 문서 높이가 변하지 않고,
   다른 트리거·스냅과 좌표가 어긋나지 않습니다.
   ========================================================================== */
/* 토스 스크롤리텔링 구조
     바깥(.sticky-section): height = 항목수 x 100vh  -> 스크롤 거리를 만드는 껍데기
     안(.sticky-inner)   : position: sticky        -> 그 구간 내내 화면에 붙어 있음
   (토스 실제: .xpfnii0 { height:1085vh } + .xpfnii3 { position:sticky; top:0; height:100vh })
   --steps 는 StickyFeature.js 가 항목 수로 채웁니다. */
.sticky-section {
    position: relative;
    width: 100%;
    /* 층당 스크롤 거리를 정하는 값입니다.
       100vh로 두면 한 층 바뀌는 데 약 680px을 굴려야 해서 "고정만 되고 안 변하는" 느낌이 납니다.
       65vh면 화면 이동 거리 = (65 x 4) - 100 = 160vh, 층당 40vh(약 360px) -> 휠 한 번에 한 층.
       더 천천히 넘기고 싶으면 이 값만 키우십시오. */
    height: calc(var(--steps, 4) * 65vh);
    overflow-x: clip;
    padding: 0;
}

.sticky-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(24px, 5vw, 80px);
    padding: 0 clamp(28px, 6vw, 110px);
    max-width: 1500px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

.sticky-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sticky-heading {
    margin: 10px 0 6px;
    max-width: 16ch;
}

/* 제목 단어별 등장 (StickyFeature.js splitWords가 감쌉니다) */
.sticky-heading .word {
    display: inline-block;
    overflow: hidden;
}

.sticky-heading .word-inner {
    display: inline-block;
    will-change: transform, opacity, filter;
}

/* --------------------------------------------------------------- 항목 목록 */
.sticky-items {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    width: 100%;
    max-width: 520px;
}

.sticky-item {
    border-top: 1px solid rgba(226, 232, 240, 0.1);
}

/* 비활성 항목은 글자 색만 흐리게 (토스는 color: rgba(51,56,64,.2) 로 처리).
   항목 전체 opacity를 낮추면 구분선까지 흐려져 지저분해집니다. */
.sticky-item .sticky-item-trigger,
.sticky-item .sticky-item-time {
    transition: color 0.45s ease;
}

.sticky-item:not(.is-active) .sticky-item-trigger {
    color: rgba(226, 232, 240, 0.28);
}

.sticky-item:not(.is-active) .sticky-item-time {
    color: rgba(197, 179, 88, 0.25);
}

.sticky-item:last-child {
    border-bottom: 1px solid rgba(226, 232, 240, 0.1);
}

.sticky-item-trigger {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 14px;
    background: none;
    border: 0;
    padding: 18px 0;
    text-align: left;
    cursor: pointer;
    color: var(--color-silver-main);
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    transition: color 0.35s ease;
}

.sticky-item.is-active .sticky-item-trigger {
    color: #fff;
}

.sticky-item-time {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: rgba(197, 179, 88, 0.75);
    flex: 0 0 auto;
    min-width: 76px;
}

.sticky-item.is-active .sticky-item-time {
    color: #c5b358;
}

/* 아코디언 본문: height를 px로 제어해야 트랜지션이 걸립니다 (auto는 안 됩니다) */
.sticky-item-body {
    height: 0;
    overflow: hidden;
    transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-item-body-inner {
    padding: 0 0 20px;
}

.sticky-item-body p {
    color: var(--color-silver-dark);
    font-size: 0.94rem;
    line-height: 1.65;
    max-width: 42ch;
}

/* ------------------------------------------------------------- 오른쪽 목업 */
.sticky-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-frame {
    position: relative;
    width: clamp(240px, 22vw, 320px);
    aspect-ratio: 9 / 19;
    border-radius: 40px;
    background: linear-gradient(160deg, #2a1d14 0%, #14100c 100%);
    border: 1px solid rgba(197, 179, 88, 0.28);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75), inset 0 0 0 6px rgba(0, 0, 0, 0.55);
    padding: 14px;
    box-sizing: border-box;
    overflow: hidden;
}

.phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 18px;
    border-radius: 0 0 12px 12px;
    background: rgba(0, 0, 0, 0.85);
    z-index: 3;
}

.phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    background: radial-gradient(circle at 50% 20%, rgba(197, 179, 88, 0.12) 0%, rgba(20, 14, 10, 0.98) 62%);
    overflow: hidden;
}

/*
 * 크로스페이드용 레이어.
 * 이전 층과 새 층이 "동시에" 존재해야 교차 페이드가 성립하므로 절대배치로 겹쳐 쌓습니다.
 * (문서 흐름에 두면 두 층이 위아래로 밀려나 크로스페이드가 아니라 자리이동이 됩니다.)
 * 생성/제거는 js/main.js의 renderPhoneStep 이 담당합니다.
 */
.phone-layer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 30px 20px;
    box-sizing: border-box;
    text-align: center;
    will-change: opacity, transform;
}

.phone-step-crest {
    font-size: 1.5rem;
    color: #c5b358;
}

.phone-step-time {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    color: #fff;
}

.phone-step-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--color-silver-main);
}

.phone-step-desc {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--color-silver-dark);
    max-width: 26ch;
}

/* 진행 표시 점 */
.phone-dots {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}

.phone-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(226, 232, 240, 0.22);
    transition: background 0.3s ease, transform 0.3s ease;
}

.phone-dots span.on {
    background: #c5b358;
    transform: scale(1.3);
}

/* --------------------------------------------------------------- 반응형 */
@media (max-width: 960px) {
    .sticky-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        align-content: center;
        padding: 0 clamp(20px, 5vw, 48px);
    }

    .sticky-left { align-items: center; text-align: center; }
    .sticky-heading { max-width: 22ch; }
    .sticky-items { margin-top: 16px; }
    .sticky-item-trigger { justify-content: center; }
    .sticky-item-body p { margin: 0 auto; }

    .phone-frame { width: clamp(180px, 42vw, 240px); }
}

@media (max-width: 640px) {
    /* 모바일에서는 sticky 구간을 짧게 잡아 스크롤이 늘어지지 않게 */
    .sticky-section { height: calc(var(--steps, 4) * 58vh); }
    .phone-frame { display: none; }   /* 세로 공간 확보 */
}

/* ==========================================================================
   ScrollSteps — 모든 화면 공통 "핀 + 한 층씩"
   --------------------------------------------------------------------------
   .pin-outer     : JS(ScrollSteps)가 섹션을 감싸며 만든 바깥 래퍼. 스크롤 거리를 만듭니다.
   .pinned-screen : 섹션 자신. sticky로 화면에 붙습니다.
   층당 스크롤 거리는 아래 65vh 하나로 조절합니다. (키우면 천천히)
   ========================================================================== */
.pin-outer {
    position: relative;
    width: 100%;
    height: calc(var(--span, 1.9) * 100vh);
}

.pinned-screen {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
}

/* 히어로는 grid 레이아웃이므로 sticky가 되어도 원래 정렬을 유지해야 합니다 */
.showcase-hero.pinned-screen {
    display: grid;
    align-content: center;
}

/* 세로로 쌓이는 섹션은 가운데 정렬 유지 */
.scroll-section.pinned-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 640px) {
    .pin-outer { height: calc(var(--span, 1.9) * 88vh); }
}

/* ==========================================================================
   24시간 다이얼 (방사형 타임차트)
   --------------------------------------------------------------------------
   [마커가 원호를 따라 도는 원리]
   점의 cx/cy 를 트랜지션하면 CSS가 두 좌표를 직선으로 보간해서,
   점이 원을 가로질러 질러갑니다. 그래서 좌표는 고정하고 **각도를 트랜지션**합니다.
   .dial-orbit 을 회전시키고, 글자는 .dial-counter 로 같은 각도만큼 역회전시킵니다.
   ========================================================================== */
.sleep-dial {
    display: flex;
    justify-content: center;
    margin: 4px 0 10px;
}

.dial-svg {
    width: min(260px, 62vw);
    height: auto;
    overflow: visible;
}

/*
 * [색을 변수로 묶는 이유]
 * 금색 옆에 성격이 다른 색(녹청 등)을 놓으면 두 구간이 남남처럼 보입니다.
 * 그래서 모든 다이얼 색을 아래 변수에서 파생시키고, 구간끼리는 같은 계열의
 * 명도 차이로만 구분합니다(모노크로매틱). 통일감이 생깁니다.
 *
 * 토글하면 .is-latency-on 이 붙어 변수 묶음이 통째로 바뀝니다.
 * 한 구간만 색이 튀는 게 아니라 다이얼 전체의 톤이 함께 옮겨갑니다.
 */
.sleep-dial,
.dash-dial {
    --dial-1: #B8A544;   /* 주 구간 (수면) */
    --dial-2: #6E6330;   /* 보조 구간 */
    --dial-3: #8A7C3C;   /* 3번째 구간 */
    --dial-ring: rgba(184, 165, 68, 0.09);
    --dial-tick: rgba(184, 165, 68, 0.3);
    --dial-tick-major: rgba(184, 165, 68, 0.6);
}

/* 잠드는 시간 켜짐 — 같은 계열에서 한 단계 밝고 따뜻한 쪽으로 전체 이동 */
.sleep-dial.is-latency-on,
.dash-dial.is-latency-on {
    --dial-1: #E3CE72;
    --dial-2: #A08F49;
    --dial-3: #C2AE5D;
    --dial-ring: rgba(227, 206, 114, 0.14);
    --dial-tick: rgba(227, 206, 114, 0.38);
    --dial-tick-major: rgba(227, 206, 114, 0.75);
}

.dial-track {
    fill: none;
    stroke: var(--dial-ring);
    stroke-width: 14;
    transition: stroke 0.45s ease;
}

.dial-arc {
    fill: none;
    stroke-width: 14;
    stroke-linecap: butt;
    transition: stroke-dasharray 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                stroke 0.45s ease;
}

.dial-arc-sleep   { stroke: var(--dial-1); }
.dial-arc-latency { stroke: var(--dial-2); }
.dial-arc-prep    { stroke: var(--dial-3); }
.dial-arc-travel  { stroke: var(--dial-2); }

/* --------------------------------------------------- 마커 (각도 회전) */
.dial-orbit,
.dial-counter {
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.dial-mark {
    stroke: #14100c;
    stroke-width: 2;
}

.dial-mark { transition: fill 0.45s ease; }
.dial-mark-bed    { fill: var(--dial-2); }
.dial-mark-wake   { fill: #fff; }
.dial-mark-depart { fill: var(--dial-3); }
.dial-mark-arrive { fill: var(--dial-1); }

.dial-label {
    fill: rgba(226, 232, 240, 0.72);
    font-family: var(--font-sans);
    font-size: 8.5px;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* --------------------------------------------------------- 눈금·중앙 */
.dial-tick { stroke: var(--dial-tick); stroke-width: 1; transition: stroke 0.45s ease; }
.dial-tick.major { stroke: var(--dial-tick-major); stroke-width: 1.6; }

.dial-hour {
    fill: rgba(226, 232, 240, 0.45);
    font-family: var(--font-sans);
    font-size: 9px;
    text-anchor: middle;
    dominant-baseline: middle;
}

.dial-center-value {
    fill: #fff;
    font-family: var(--font-serif);
    font-size: 22px;
    text-anchor: middle;
    dominant-baseline: middle;
}

.dial-center-sub {
    fill: var(--dial-1);
    transition: fill 0.45s ease;
    font-family: var(--font-sans);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-anchor: middle;
    dominant-baseline: middle;
}

@media (max-width: 640px) {
    .dial-svg { width: min(220px, 68vw); }
}

/* ==========================================================================
   심화 기능 — 세그먼트 컨트롤 + 직접 입력 폼
   --------------------------------------------------------------------------
   [입력값 보존]
   '예시 화면'으로 바꿔도 폼을 지우지 않고 .is-hidden 으로 감추기만 합니다.
   DOM을 다시 그리면 입력값이 날아갑니다.
   height/opacity로 접어야 트랜지션이 걸리므로 display:none 은 쓰지 않습니다.
   ========================================================================== */
.seg-control {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin: 14px 0 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(226, 232, 240, 0.1);
}

.seg-btn {
    border: 0;
    background: none;
    cursor: pointer;
    padding: 7px 16px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.5);
    transition: background 0.28s ease, color 0.28s ease;
}

.seg-btn.is-on {
    background: rgba(197, 179, 88, 0.16);
    color: #e6dba8;
}

.seg-btn:focus-visible {
    outline: 2px solid rgba(197, 179, 88, 0.7);
    outline-offset: 2px;
}

.plan-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    width: 100%;
    max-width: 520px;
    margin-top: 12px;
    overflow: hidden;
    max-height: 220px;
    opacity: 1;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease, margin-top 0.4s ease;
}

.plan-form.is-hidden {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

.plan-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plan-field > span {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(226, 232, 240, 0.5);
}

.plan-field input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 8px;
    padding: 8px 10px;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;   /* 숫자 자릿수가 흔들리지 않게 */
    outline: none;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.plan-field input:focus {
    border-color: rgba(197, 179, 88, 0.6);
    background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 640px) {
    .plan-form { grid-template-columns: 1fr; max-height: 340px; }
}

/* ==========================================================================
   시뮬레이터 카드 — 2단 배치
   --------------------------------------------------------------------------
   입력을 세로로 쭉 쌓으면 카드가 너무 길어져 한 화면을 넘깁니다.
   왼쪽에 입력, 오른쪽에 24시간 다이얼과 결과를 나란히 둡니다.
   ========================================================================== */
.simulator-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    grid-template-areas:
        "left right"
        "foot foot";
    gap: 20px 28px;
    align-items: start;
}

.sim-col-left  { grid-area: left; min-width: 0; }
.sim-col-right { grid-area: right; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.simulator-card .simulator-footer { grid-area: foot; }

/* 2단이 되었으니 다이얼과 여백을 줄여 세로 길이를 더 아낍니다 */
.sim-col-right .dial-svg { width: min(215px, 100%); }
.sim-col-right .sleep-dial { margin: 0; }

.simulator-card .simulator-inputs { gap: 14px; }
.simulator-card .simulator-result { margin-top: 0; }

@media (max-width: 900px) {
    /* 좁아지면 다시 한 줄로 쌓습니다 */
    .simulator-card {
        grid-template-columns: 1fr;
        grid-template-areas: "left" "right" "foot";
    }
    .sim-col-right { align-items: center; }
}


/* 사전예약 버튼 아래 안내 */
.preorder-note {
    margin-top: 10px;
    text-align: center;
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.42);
    letter-spacing: 0.01em;
}

/* ==========================================================================
   심화(Pro) 화면 — 입력 2개 + 그래프 뷰
   ========================================================================== */
#advanced-dashboard-section .plan-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    width: 100%;
    max-width: 320px;
    margin: 14px 0 4px;
}

/* 폰 화면 안: 그래프 뷰는 상시 유지, 아래 문구만 교체됩니다 (퍼시스턴트 셸) */
.phone-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 26px 14px 18px;
}

.dash-dial {
    width: 100%;
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
}

.dash-dial .dial-svg { width: min(160px, 78%); }
.dash-dial .dial-center-value { font-size: 26px; }
.dash-dial .dial-hour { font-size: 11px; }
.dash-dial .dial-label { font-size: 10px; }

/* 크로스페이드가 겹쳐 일어나는 영역 */
.phone-steps {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 118px;
}

.phone-steps .phone-layer { padding: 6px 8px; gap: 4px; justify-content: flex-start; }
.phone-steps .phone-step-crest { display: none; }
.phone-steps .phone-step-time { font-size: 1.15rem; }
.phone-steps .phone-step-title { font-size: 0.86rem; }
.phone-steps .phone-step-desc { font-size: 0.72rem; }

/* 호칭 다시 선택 — 쇼케이스 위에 덮어씌우는 모달 */
#modal-step.as-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(12, 9, 6, 0.82);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    max-width: none;
}


/* ==========================================================================
   심화(Pro) 고정 예시값
   ========================================================================== */
.plan-fixed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 14px 0 6px;
    padding: 10px 14px;
    border: 1px dashed rgba(226, 232, 240, 0.16);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    max-width: 520px;
}

.plan-fixed-badge {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    padding: 3px 9px;
    border-radius: 99px;
    background: rgba(197, 179, 88, 0.16);
    color: #e6dba8;
}

.plan-fixed-row { display: flex; align-items: baseline; gap: 7px; }

.plan-fixed-label { font-size: 0.74rem; color: rgba(226, 232, 240, 0.45); }

.plan-fixed-value {
    font-size: 0.86rem;
    color: rgba(226, 232, 240, 0.9);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   집사의 약속 — 한 문장짜리 전환 화면
   --------------------------------------------------------------------------
   문장 하나뿐이므로 여백과 글줄 길이가 전부입니다.
   ch 단위로 줄당 글자 수를 제한하고, text-wrap: balance 로 줄 길이를 고르게 나눕니다.
   ========================================================================== */
.promise-outer .pinned-screen,
#promise-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.promise-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promise-line {
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 3.4vw, 2.5rem);
    line-height: 1.62;
    font-weight: 300;
    color: #fff;
    max-width: 20ch;
    margin: 0 auto;
    text-wrap: balance;
    letter-spacing: -0.01em;
}

/* 앞뒤로 장식선을 두어 '전환 화면'임을 드러냅니다 */
.promise-line::before,
.promise-line::after {
    content: '';
    display: block;
    width: 46px;
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, rgba(197, 179, 88, 0.65), transparent);
}
.promise-line::before { margin-bottom: 28px; }
.promise-line::after  { margin-top: 28px; }

@media (max-width: 640px) {
    .promise-line { max-width: 15ch; }
}