:root {
    --primary-gradient: linear-gradient(135deg, #ff00cc, #3333ff);
    --bg-color: #f5f5f7;
}

body {
    font-family: "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-color);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    touch-action: manipulation;
}

.container {
    background: white;
    width: 90%;
    max-width: 400px;
    border-radius: 24px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ステップ表示 */
/* ステップ表示（横並びの修正） */
.steps {
    display: flex;          /* 横並びにする */
    justify-content: center; /* 中央に寄せる */
    align-items: flex-start; /* 上端で揃える */
    gap: 20px;              /* ステップ同士の間隔 */
    margin-bottom: 30px;
    width: 100%;            /* 横幅いっぱい使う */
}

/* 各ステップの塊 */
.step-item {
    flex: 1;                /* 幅を均等に広げる */
    display: flex;          /* 中身（数字と文字）を制御 */
    flex-direction: column; /* 数字と文字は縦に並べる */
    align-items: center;    /* 中央揃え */
    font-size: 11px;
    color: #bbb;            /* 通常時の文字色 */
}

/* 数字の円 */
.step {
    width: 30px;
    height: 30px;
    background: #ccc;       /* 通常時の背景色 */
    border-radius: 50%;
    line-height: 30px;
    color: white;
    font-weight: bold;
    margin-bottom: 5px;     /* 文字との間隔 */
}

/* アクティブ状態 */
.step-item.active {
    color: #d81b60;         /* アクティブ時の文字色 */
}

.step-item.active .step {
    background: #d81b60;    /* アクティブ時の背景色 */
}

/* 吹き出し */
.bubble {
    background: #c2185b;
    color: white;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}

/* キャンバス周辺 */
.canvas-outer {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* style.css の修正箇所 */
.canvas-container {
    width: 280px;  /* サイズは適宜調整 */
    height: 280px;
    margin: 0 auto 20px;
    border-radius: 50%; /* ここで円形に切り抜く */
    overflow: hidden;   /* これが重要！はみ出しを隠す */
    position: relative;
    border: none;       /* 枠線が不要なら消す */
}

#mainCanvas {
    width: 100%;
    height: 100%;
    cursor: move;
}

.sample-frame {
    width: 200px;
    height: 200px;
    object-fit: contain;
    margin-bottom: 20px;
}

/* 操作UI */
.controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

#zoomRange {
    width: 70%;
}

/* ボタン */
.btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
}

.main-btn {
    background: var(--primary-gradient);
    color: white;
}

.main-btn:active {
    transform: scale(0.98);
}

.btn-link {
    background: none;
    border: none;
    color: #888;
    margin-top: 15px;
    text-decoration: underline;
    cursor: pointer;
}

/* Step 3 の結果画像の設定 */
#result-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.result-img {
    width: 250px;           /* 表示したい横幅 */
    height: 250px;          /* 横幅と同じ値を指定して正方形に */
    aspect-ratio: 1 / 1;    /* 比率を 1:1 に固定 */
    object-fit: contain;    /* 中身を潰さずに収める */
    border-radius: 50%;     /* 正円にする */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}