/* =========================
   기본 셋팅
   ========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

:root {
    --bg-page: #f3f5fb;
    --bg-card: #ffffff;
    --border-card: #d7dbe8;
    --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.15);
    --text-main: #111827;
    --accent: #2156d1;

    --page-max-width: 1200px;
    --card-max-width: 550px;
    --page-padding-x: 16px;
}

/* =========================
   접근성 요소
   ========================= */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: #111827;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    z-index: 1000;
}

.skip-link:focus {
    top: 12px;
}

/* =========================
   페이지 레이아웃
   ========================= */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Malgun Gothic", "Noto Sans KR", sans-serif;
    color: var(--text-main);
    background: radial-gradient(circle at top, #e0ecff 0, #f3f5fb 40%, #eef2ff 100%);
}

.page-wrap {
    max-width: var(--page-max-width);
    margin: 0 auto;
    /* ▼ bottom 패딩만 220px 로 늘림 (기존 150px) */
    padding: 24px var(--page-padding-x) 220px; /* 모바일: 하단 고정 메뉴 여백 + 추가 공간 */
}

/* 메인 카드 영역 */
.site-main {
    max-width: var(--card-max-width);
    margin: 0 auto;
}

.card-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.card {
    margin: 0;
    background: var(--bg-card);
    border-radius: 22px;
    padding: 10px;
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    /* ▼ 여기만 수정: 80px → 16px (상단 여백 줄이기) */
    scroll-margin-top: 16px;
}

.card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* =========================
   하단 고정 / 좌측 메뉴
   ========================= */

/* 기본: 모바일 하단 고정 */
.card-quick-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(209, 213, 219, 0.9);
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.18);
    /* padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); */
}

/* 모바일 기본: 한 줄씩 */
.card-quick-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* row-gap: 8px; */
}

/* 버튼 공통 스타일 */
.card-quick-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #c3c3c3;
    background: #f9fafb;
    color: #111827;
    font: inherit;
    cursor: pointer;

    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    /* border-radius: 999px; */
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    transition: background-color 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease, transform 0.1s ease;
    white-space: normal;
}

.card-quick-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* 활성 버튼 */
.card-quick-btn.is-active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    border-color: transparent;
}


/* =========================
   ✅ 여기부터 추가: 첫번째 버튼 위 클릭 아이콘
========================= */

/* 기본은 숨김(PC 포함) */
.mobile-first-hint{ display:none; }

/* 모바일에서만 표시 + 첫번째 버튼 위 고정 */
@media (max-width: 768px){
  .card-quick-nav-list li:first-child{
	position: relative; /* ✅ 기준점 */
  }

  .card-quick-nav-list li:first-child .mobile-first-hint{
	display: block;
	position: absolute;
	left: 96%;
	top: 20px;                /* ✅ 아이콘 높이/위치(더 올리려면 -값 더 크게) */
	transform: translateX(-50%);
	z-index: 5;
	width: 60px;               /* ✅ 아이콘 크기 */
	height: auto;
	pointer-events: none;      /* ✅ 버튼 클릭 방해 X */
	user-select: none;
	-webkit-user-drag: none;

	filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
  }
}



/* =========================
   반응형
   ========================= */
@media (max-width: 1023px) {
	.card-quick-btn {background: #eef2ff;}
}

@media (max-width: 767px) {
	.page-wrap {max-width: 370px;}
}

/* PC: 메뉴 왼쪽, 카드 오른쪽 + 카드 이미지 높이 = 화면에 맞추기 */
@media (min-width: 1024px) {
    :root {
        --page-padding-x: 24px;
    }

    .page-wrap {
        display: flex;
        flex-direction: row-reverse; /* nav 왼쪽, main 오른쪽 */
        align-items: flex-start;
        justify-content: center;
        gap: 32px;
        padding: 40px var(--page-padding-x) 40px;
    }

    .site-main {
        max-width: var(--card-max-width);
        margin: 0;
        flex: 1 1 auto;
    }

    /* 카드: 화면 높이에 맞게 이미지가 한눈에 들어오도록 */
    .card-list {
        gap: 40px;
    }

    .card {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        /* 카드 자체 높이를 대략 뷰포트에 맞춤 (상하 여백 100px 정도 남김) */
        /* min-height: calc(100vh - 100px); */
    }

    .card img {
        width: auto;              /* 가로는 자동 */
        max-width: 100%;          /* 부모 너비 초과 방지 */
        max-height: calc(100vh - 100px); /* 창 높이에서 여백 빼고 맞춤 */
        border-radius: 18px;
        margin: 0 auto;
    }

    /* 메뉴를 세로배치 + sticky */
    .card-quick-nav {
        position: sticky;
        top: 80px;
        left: auto;
        right: auto;
        bottom: auto;
        align-self: flex-start;
        background: transparent;
        backdrop-filter: none;
        border-top: none;
        box-shadow: none;
        padding: 0;
        width: 280px;
    }

    .card-quick-nav-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .card-quick-nav-list > li:last-child {
        grid-column: auto;
    }

    .page-wrap {
        padding-bottom: 40px;
    }
}


:root{
	--quick-bg: rgba(255,255,255,.92);
	--quick-border: rgba(0,0,0,.08);

	--btn-bg: #eef3ff;
	--btn-border: rgba(31,91,255,.35);
	--btn-text: #0b2b7a;

	--btn-active-bg: #1f5bff;
	--btn-active-text: #ffffff;
	--btn-active-border: rgba(31,91,255,.95);
}

@media(max-width: 1023px){
	/* 스크롤 화살표 */
	.scroll-hint{
		--scroll-hint-color: #878787;
		position: fixed !important;
		top: 40% !important;
		right: calc(4px + env(safe-area-inset-right)) !important;
		transform: translateY(-50%) !important;
		z-index: 999999 !important;
		width: 24px !important;
		height: 120px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 12px !important;
		pointer-events: none !important;
		opacity: 1 !important;
		background: rgba(255,255,255,.75) !important;
		/* border: 2px solid rgb(34 82 156) !important; */
		border-radius: 999px !important;
		padding: 10px 6px !important;
		box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
	}
	.card-quick-nav-list li:nth-child(odd) .card-quick-btn {border-right: 0;}
	.card-quick-nav-list li:nth-child(n+3) .card-quick-btn {border-top: 0;}
}
.scroll-hint__arrow{
	width: 10px !important;
	height: 10px !important;
	border-right: 4px solid var(--scroll-hint-color) !important;
	border-bottom: 4px solid var(--scroll-hint-color) !important;
}
.scroll-hint__arrow--up{ transform: rotate(-135deg); animation: scrollHintUp 1.1s ease-in-out infinite; animation-delay: .50s;}
.scroll-hint__arrow--down{ transform: rotate(45deg); animation: scrollHintDown 1.1s ease-in-out infinite; animation-delay: .50s;}
.scroll-hint__line{
	width: 4px !important;
	height: 42px !important;
	background: var(--scroll-hint-color) !important;
	border-radius: 999px !important;
	opacity: .9 !important;
	animation: scrollHintLine 1.1s ease-in-out infinite;
}
@keyframes scrollHintUp{ 0%,100%{transform:translateY(0) rotate(-135deg);opacity:.75} 50%{transform:translateY(-4px) rotate(-135deg);opacity:1} }
@keyframes scrollHintDown{ 0%,100%{transform:translateY(0) rotate(45deg);opacity:.75} 50%{transform:translateY(4px) rotate(45deg);opacity:1} }
@keyframes scrollHintLine{ 0%,100%{opacity:.55} 50%{opacity:1} }
@media (prefers-reduced-motion: reduce){
	.scroll-hint__arrow,.scroll-hint__line{ animation:none !important; }
}

/* 하단 메뉴가 카드 내용을 가리지 않게 여유 */
.site-main{ padding-bottom: 120px !important; }

/* 활성 버튼 */
.card-quick-btn.is-active{
	background: var(--btn-active-bg) !important;
	border-color: var(--btn-active-border) !important;
	color: var(--btn-active-text) !important;
	box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 12px 26px rgba(31,91,255,.28) !important;
}

/* 키보드 접근성 */
.card-quick-btn:focus-visible{
	outline: 4px solid rgba(31,91,255,.35) !important;
	outline-offset: 2px !important;
}

/* 마우스 환경에서만 */
.card-quick-btn:active{ transform: translateY(0); }