@charset "utf-8";

/* 공통값(폰트크기/컬러값) */
:root {
    --h2: 32px;
    --h3: 25px;
    --h4: 20px;
    --background-gray: #EEEEEE;
}

html {
    scroll-behavior: smooth;
}

#wrap {
    margin: 0;
    min-height: 100vh;
    background: var(--background);
    background-attachment: fixed;
}

/* 공통 */
h2 {
    margin-bottom: 25px;
    font-family: "Press Start 2P", system-ui;
    font-size: var(--h2);
    line-height: 46px;
    text-align: center;
    color: var(--font-white);
    -webkit-text-stroke: 1px var(--font-black);
    text-shadow: 2px 2px 0 var(--font-black);
}

.sub {
    text-align: center;
    font-size: 20px;
    margin-bottom: 50px;
    line-height: 26px;
}

/* mainIntro */
#mainIntro {
    width: 100%;
    height: 100vh;
}

#mainIntro .contents {
    height: 100%;
    padding: 170px 100px 80px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#mainIntro .contents .bigTitle {
    font-family: "Press Start 2P", system-ui;
    font-size: 40px;
    line-height: 60px;
}

#mainIntro .contents .bigTitle strong {
    font-family: "Press Start 2P", system-ui;
    font-size: 85px;
    font-weight: 400;
    color: var(--font-black);
    -webkit-text-stroke: 3px var(--font-white);
    text-shadow: 7px 7px 0 var(--font-black);
}

#mainIntro .contents .subText {
    font-size: 20px;
    line-height: 34px;
    visibility: hidden;
    margin: 0;
    overflow: hidden;
}

#mainIntro .contents .subText strong {
    font-weight: 400;
    font-size: 40px;
}

#mainIntro .contents .btnArea {
    display: flex;
    justify-content: center;
    gap: 30px;
}

#mainIntro .contents .btnArea a {
    width: 210px;
    padding: 17px 0;
    background: var(--button-color);
    border: 1px solid var(--font-black);
    border-radius: 40px;
    box-shadow: 2px 2px 2px var(--font-black);
    font-family: 'DungGeunMo', sans-serif;
    font-size: 17px;
    text-align: center;
    color: var(--font-black);
}

/* newtroLook */
#newtroLook {
    background: url(../img/fs_background_sparkling01.png) no-repeat center/cover;
}

#newtroLook .contents {
    padding: 130px 0 80px;
    box-sizing: border-box;
}

#newtroLook .contents .sub {
    margin-bottom: 0;
}

#newtroLook .swipeArea {
    width: 100%;
    --speed: 40;
    overflow-x: hidden;
    overflow-y: visible;
    padding-block: 85px;
}

#newtroLook .swipeArea ul {
    display: inline-flex;
    gap: 50px;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateX(0);
    animation: marquee linear infinite;
    animation-duration: var(--duration, 60s);
    /* JS에서 계산해 넣음 */
    list-style: none;
    padding: 0;
    margin: 0;
}

#newtroLook .swipeArea ul li {
    position: relative;
    width: 350px;
    padding: 25px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    box-shadow: 0 0 15px 10px rgba(255, 255, 255, 0.5);
    transform: translateY(var(--y, 0px));
    transition: all 0.2s;
}

#newtroLook .swipeArea ul li:hover {
    transform: translateY(var(--y, 0px)) scale(1.03);
    box-shadow: 0 0 15px 15px rgba(255, 255, 255, 0.9);
    border: 2px;
    cursor: pointer;
}

#newtroLook .swipeArea ul li img {
    width: 298px;
    height: 422px;
    border: 1px solid var(--font-white);
    border-radius: 15px;
    margin-bottom: 20px;
}

#newtroLook .swipeArea ul li h3 {
    font-family: "Press Start 2P", system-ui;
    font-size: var(--h3);
    font-weight: 400;
    color: var(--font-white);
    -webkit-text-stroke: 1px var(--font-black);
    text-shadow: 2px 2px 0 var(--font-black);
    margin-bottom: 7px;
}

#newtroLook .swipeArea ul li .hashtag {
    font-size: 22px;
    text-shadow: 2px 2px var(--font-white)
}

/* 높이 변주(원하면 각 li에 style="--y:값"으로 개별 제어해도 됨) */
.swipeArea li:nth-child(odd) {
    --y: -40px;
}

.swipeArea li:nth-child(even) {
    --y: 40px;
}

/* 키프레임: 오른쪽 -> 왼쪽 */
@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(var(--toX, -50%));
    }

    /* JS가 픽셀값으로 세팅 */
}

/* findStyle */
#findStyle .contents {
    height: 100%;
    padding: 130px 0 80px;
    box-sizing: border-box;
}

#findStyle .sub {
    margin-bottom: 20px;
}

#findStyle .contents .container {
    width: 1000px;
    background: url(../img/cyworld_background.png) no-repeat center center;
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 3/2;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#findStyle .contents .paper {
    position: absolute;
    top: 105px;
    left: 50%;
    transform: translateX(-31%);
}

#findStyle .contents .paper h3 {
    font-size: var(--h4);
    font-weight: 400;
    color: var(--main-color);
    margin-bottom: 50px;
}

#findStyle .contents .paper h3::after {
    content: '';
    width: 560px;
    height: 1px;
    background: var(--border-gray);
    display: block;
    margin-top: 7px;
}

/* test card */
.card.step {
    width: 560px;
    padding: 20px 25px;
    box-sizing: border-box;
    background: rgb(105, 147, 254, 0.5);
    border-radius: 20px;
    border: 1px solid var(--font-black);
    box-shadow: inset 3px 3px 3px 1px rgba(255, 255, 255, 0.7),
        inset -3px -3px 3px 1px rgba(0, 0, 0, 0.2);
}

.card.step .card_fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.card.step .card_fieldset .card_legend {
    font-size: 17px;
    margin-bottom: 20px;
}

.card.step .card_fieldset strong {
    font-weight: 400;
    font-size: 25px;
}

.card.step .card_fieldset .option input[type="radio"] {
    display: none;
}

.card.step .card_fieldset .option {
    width: 508px;
    padding: 15px 0;
    border: 1px solid var(--font-black);
    border-radius: 10px;
    background: var(--background-gray);
    text-align: center;
    box-shadow: inset 3px 3px 2px 1px rgba(255, 255, 255, 0.7),
        inset -3px -3px 2px 1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.option.is-selected {
    color: var(--main-color);
}

.card.step .btnArea {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.card.step .btnArea .btn {
    padding: 12px 22px;
    border: 1px solid var(--font-black);
    border-radius: 40px;
    background: var(--button-color);
    box-shadow: 2px 2px 2px var(--font-black);
    font-family: 'DungGeunMo';
    font-size: 16px;
}

/* testcard result */
#resultSection {
    width: 560px;
    padding: 25px 25px 20px;
    box-sizing: border-box;
    background: rgb(105, 147, 254, 0.5);
    border-radius: 20px;
    border: 1px solid var(--font-black);
    box-shadow: inset 3px 3px 3px 1px rgba(255, 255, 255, 0.7),
        inset -3px -3px 3px 1px rgba(0, 0, 0, 0.2);
}

#resultSection #resultText {
    text-align: center;
    font-size: 17px;
    margin-bottom: 20px;
}

#resultSection .result_card {
    width: 508px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--background-gray);
    border: 1px solid var(--font-black);
    border-radius: 10px;
    box-shadow: inset 3px 3px 3px 1px rgba(255, 255, 255, 0.7),
        inset -3px -3px 3px 1px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

#resultSection #resultImage {
    width: 211px;
    height: 211px;
    border: 1px solid var(--font-black);
    border-radius: 7px;
}

#resultSection .result_body {
    width: 234px;
}

#resultSection #resultTitle {
    text-align: center;
    font-family: 'DungGeunMo', sans-serif;
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 30px;
}

#resultSection #resultDesc {
    text-align: center;
    line-height: 24px;
}

#resultSection .result_actions {
    display: flex;
    justify-content: center;
}

#resultSection .result_actions #restartBtn {
    padding: 12px 22px;
    border: 1px solid var(--font-black);
    border-radius: 40px;
    background: var(--button-color);
    box-shadow: 2px 2px 2px var(--font-black);
    font-family: 'DungGeunMo';
    font-size: 16px;
}


/* timeline */
#timeline {
    padding: 130px 0 80px;
    box-sizing: border-box;
    background: url(../img/fs_background_sparkling02.png) no-repeat top -80px center/cover;
}

.timelineSlide {
    touch-action: pan-y;
    overflow-x: hidden;
    white-space: nowrap;
    cursor: grab;
    user-select: none;
    padding: 0 100px;
    box-sizing: border-box;
}

.timelineSlide.active {
    cursor: grabbing;
}

.timelineSlide .timeline_years {
    margin-left: 130px;
    display: flex;
    gap: 287px;
    font-family: 'Press Start 2p';
    font-size: 20px;
    color: var(--point-color);
    -webkit-text-stroke: 1px var(--font-black);
    text-shadow: 2px 2px 0 var(--font-black);
    margin-bottom: 20px;
}

.timelineSlide .timeline_track {
    position: relative;
    width: 1910px;
    height: 20px;
    border: 1px solid var(--font-black);
    border-radius: 50px;
    background: var(--font-white);
    margin-bottom: 30px;
}

.timelineSlide .timeline_track_fill {
    position: absolute;
    inset: 0 auto 0 0;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    width: 0%;
    height: 10px;
    border-radius: 50px;
    background: var(--main-color);
    box-shadow: inset 3px 3px 2px 1px rgba(255, 255, 255, 0.7),
        inset -3px -3px 2px 1px rgba(0, 0, 0, 0.2);
    transition: width .28s ease;
}

.timelineWrap:has(~ .timeline_card ul li:nth-of-type(1):hover) .timeline_track_fill {
    width: 9%;
}

.timelineWrap:has(~ .timeline_card ul li:nth-of-type(2):hover) .timeline_track_fill {
    width: 29%;
}

.timelineWrap:has(~ .timeline_card ul li:nth-of-type(3):hover) .timeline_track_fill {
    width: 49.5%;
}

.timelineWrap:has(~ .timeline_card ul li:nth-of-type(4):hover) .timeline_track_fill {
    width: 70%;
}

.timelineWrap:has(~ .timeline_card ul li:nth-of-type(5):hover) .timeline_track_fill {
    width: 90%;
}

.timelineWrap:has(~ .timeline_card ul:not(:hover)) .timeline_track_fill {
    width: 0%;
}

.timeline_card ul {
    display: flex;
    gap: 40px;
    overflow: visible;
}

.timeline_card ul::after {
    content: '';
    display: block;
    /* flex 안이니까 block 대신 flex-item 효과 */
    flex: 0 0 60px;
    /* ← 원하는 오른쪽 여백 */
}

.timeline_card ul li {
    min-width: 350px;
    height: 480px;
    border-radius: 10px;
    position: relative;
    transition: all 0.2s;
    background: no-repeat center/contain;
}

.timeline_card ul li:nth-child(1) {
    background: url(../img/timelineCard_1960.png);
}

.timeline_card ul li:nth-child(2) {
    background: url(../img/timelineCard_1970.png);
}

.timeline_card ul li:nth-child(3) {
    background: url(../img/timelineCard_1980.png);
}

.timeline_card ul li:nth-child(4) {
    background: url(../img/timelineCard_1990.png);
}

.timeline_card ul li:nth-child(5) {
    background: url(../img/timelineCard_2000.png);
}

.timeline_card ul li:hover {
    box-shadow: 0 0 15px 10px var(--font-white);
}

.timeline_card ul li .card_title {
    position: absolute;
    top: 37px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    white-space: nowrap;
}

.timeline_card ul li .card_hashtag {
    position: absolute;
    top: 78px;
    left: 11px;
    border: 1px solid var(--border-gray);
    padding: 5px 10px;
}

.timeline_card .card_slider {
    position: absolute;
    top: 133px;
    left: 80px;
    width: 242px;
    height: 316px;
    border: 1px solid var(--border-gray);
    border-radius: 5px;
    overflow: hidden;
}

.timeline_card .card_slider button {
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-gray);
    border-radius: 3px;
    background: var(--font-white);
    box-shadow: inset 1px 1px 2px 0.5px rgba(255, 255, 255, 0.7),
        inset -1px -1px 2px 0.5px rgba(0, 0, 0, 0.2);
    color: var(--border-gray);
    font-size: 11px;
    text-align: center;
}

.timeline_card .card_slider .card_nav_prev {
    position: absolute;
    top: 5px;
    left: 5px;
}

.timeline_card .card_slider .card_nav_next {
    position: absolute;
    top: 5px;
    right: 5px;
}

.timeline_card .card_slider .card_slides img {
    min-width: 242px;
    max-width: 316px;
    -webkit-user-drag: none;
    user-select: none;

}