/* 神ドクタータイム 固有スタイル（Bootstrap5補完） */

/* スマホ優先: 全ページを狭い1カラムに揃える */
.app-container {
    max-width: 720px;
}

/* ヒーロー */
.hero {
    background: linear-gradient(135deg, #6f42c1, #d63384);
    color: #fff;
    border-radius: 1rem;
}

/* 写真アップロード枠（4枠） */
.upload-slot {
    display: block;
    aspect-ratio: 3 / 4;
    border: 2px dashed #adb5bd;
    border-radius: .75rem;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.upload-slot:active {
    background: #f1f3f5;
}
.upload-slot.is-filled {
    border-style: solid;
    border-color: #6f42c1;
}
.upload-slot.is-error {
    border-color: #dc3545;
    border-style: solid;
}
.upload-slot .slot-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    padding: .5rem;
}
.upload-slot .slot-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.upload-slot.is-filled .slot-preview { display: block; }
.upload-slot.is-filled .slot-placeholder { display: none; }
.upload-slot .slot-badge {
    position: absolute;
    top: .4rem;
    left: .4rem;
    z-index: 2;
}

/* 進捗ステップ */
.progress-steps .step {
    opacity: .45;
}
.progress-steps .step.active {
    opacity: 1;
    font-weight: 700;
}
.progress-steps .step.done {
    opacity: 1;
    color: #198754;
}

/* ビフォーアフター */
.ba-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: .75rem;
}
.ba-label {
    letter-spacing: .1em;
}

/* AIドクターの講評（吹き出し風） */
.doctor-comment {
    border-left: 4px solid #6f42c1;
    background: #fff;
}

/* カメラ撮影モーダル（KYC風ガイド） */
.camera-stage {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 3 / 4;
    background: #000;
    overflow: hidden;
}
.camera-stage video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.camera-stage video.mirrored {
    transform: scaleX(-1); /* インカメラは鏡像表示（保存画像は非反転） */
}
.camera-stage svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.camera-hint {
    position: absolute;
    bottom: .6rem;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 6px rgba(0, 0, 0, .9);
    padding: 0 .5rem;
}
.shutter-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.guide-mask {
    fill: rgba(0, 0, 0, .45);
    fill-rule: evenodd;
}
.guide-line {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-dasharray: 8 6;
}
.guide-line-thin {
    stroke: #fff;
    stroke-width: 1;
    stroke-dasharray: 4 6;
    opacity: .7;
}