/* ===============================
   🗻 富士山 실루엣 (우키요에 감성 강화)
================================ */
.intro-container::before {
    content: "";
    position: absolute;
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 58%;
    z-index: 2;

    background:
        /* 설산 (명확하게) */
        radial-gradient(
            ellipse at 50% 24%,
            rgba(255,255,255,0.95) 0%,
            rgba(255,255,255,0.75) 22%,
            rgba(255,255,255,0.0) 48%
        ),
        /* 산 본체 */
        linear-gradient(
            to top,
            #6f5d4f 0%,
            #8b7767 38%,
            #a89281 62%,
            rgba(255,255,255,0.0) 100%
        );

    /* 능선형 후지산 (삼각형 제거) */
    clip-path: polygon(
        0% 100%,
        10% 84%,
        20% 72%,
        34% 58%,
        50% 30%,
        66% 58%,
        80% 72%,
        90% 84%,
        100% 100%
    );

    filter: blur(3px);
    opacity: 0.95;
}

/* ===============================
   🌫 富士山 안개 레이어
================================ */
.intro-container::after {
    content: "";
    position: absolute;
    bottom: 22%;
    left: -15%;
    right: -15%;
    height: 44%;
    z-index: 3;

    background: linear-gradient(
        to top,
        rgba(255,255,255,0.8),
        rgba(255,255,255,0.5),
        rgba(255,255,255,0.0)
    );

    animation: fuji-mist 26s ease-in-out infinite;
}

@keyframes fuji-mist {
    0%,100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(-16px); opacity: 0.85; }
}

/* ===============================
   ☀ 太陽 (민화 느낌 / 고정)
================================ */
.sun {
    position: absolute;
    top: 4.5%; /* 🔥 더 위 */
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    z-index: 1;

    background: radial-gradient(
        circle at 38% 36%,
        #fff4c2 0%,
        #ffd77a 34%,
        #f2b44b 62%,
        #d88c2f 82%,
        #b66a1f 100%
    );

    /* 민화 특유의 번짐 */
    box-shadow:
        0 0 0 5px rgba(216,140,47,0.15),
        0 0 24px rgba(216,140,47,0.35),
        0 0 80px rgba(216,140,47,0.18);
}

/* ==================================================
   ⛩ 鳥居 (실제 구조 기반 / 도형감 제거)
================================================== */
:root {
    --torii-red-main: #b12f24;
    --torii-red-deep: #8f241c;
    --torii-highlight: #c64a3d;
    --torii-shadow: rgba(0,0,0,0.45);
}

.torii {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

/* ===============================
   기둥 (목재 원통 느낌)
================================ */
.torii .pillar {
    position: absolute;
    bottom: 0;
    width: 30px;
    height: 74%;
    background:
        linear-gradient(
            to right,
            var(--torii-red-deep),
            var(--torii-red-main),
            var(--torii-highlight),
            var(--torii-red-main),
            var(--torii-red-deep)
        );
    border-radius: 18px;
    box-shadow:
        inset -6px 0 0 rgba(0,0,0,0.25),
        inset 4px 0 0 rgba(255,255,255,0.15),
        0 12px 28px rgba(0,0,0,0.35);
}

.torii .pillar.left  { left: 26%; }
.torii .pillar.right { right: 26%; }

/* ===============================
   누키 (관통보)
================================ */
.torii::before {
    content: "";
    position: absolute;
    bottom: 58%;
    left: 22%;
    right: 22%;
    height: 12px;

    background:
        linear-gradient(
            to bottom,
            #7c1f18,
            #a03227
        );

    border-radius: 8px;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.2),
        0 6px 14px rgba(0,0,0,0.45);
}

/* ===============================
   시마키 + 카사기 (겹 구조)
================================ */
.torii .lintel {
    position: absolute;
    bottom: 74%;
    left: 14%;
    right: 14%;
    height: 20px;

    background:
        linear-gradient(
            to bottom,
            #d25b4b,
            var(--torii-red-main)
        );

    border-radius: 14px;
    box-shadow:
        inset 0 3px 0 rgba(255,255,255,0.25),
        0 10px 20px var(--torii-shadow);
}

/* 카사기 – 곡률 강조 */
.torii .lintel::after {
    content: "";
    position: absolute;
    top: -16px;
    left: -10%;
    right: -10%;
    height: 22px;

    background:
        linear-gradient(
            to bottom,
            #e0705f,
            #b12f24
        );

    border-radius: 20px;
    box-shadow:
        inset 0 4px 0 rgba(255,255,255,0.3),
        0 14px 28px rgba(0,0,0,0.45);
}

/* ===============================
   🛤 참도 (안쪽으로 빨려들어가는 느낌)
================================ */
.torii::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 34%;
    right: 34%;
    height: 76%;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.85),
            rgba(215,195,175,0.55),
            rgba(120,100,85,0.75)
        );

    box-shadow:
        inset 0 0 42px rgba(0,0,0,0.35),
        0 -16px 28px rgba(0,0,0,0.45);
}