/* =========================================================
   미니 프로젝트 — main.css
   ─────────────────────────────────────────────────────────
   ①  웹폰트 (Pretendard)
   ②  색 변수 (:root)
   ③  기본 요소 (body·제목·문단·구분선·링크)
   ④  버튼 공통 효과 (Uiverse 원 퍼짐)
   ⑤  레이아웃 (컨테이너·헤더·내비게이션·맨위 버튼)
   ⑥  섹션 카드
   ⑦  사이트 분석 섹션 (#site)
   ⑧  정리 섹션 (#til) — 용어목록·코드·미리보기
   ⑨  퀴즈 섹션 (#quiz)
   ⑩  꼬리말
   ⑪  애니메이션 (제목 타이핑·스크롤 슬라이드)
   ⑫  반응형
   ========================================================= */


/* =========================================================
   ①  웹폰트 — Pretendard (100~900)
   ========================================================= */
/* 실제 사용 굵기: 400(본문) · 600(버튼) · 700(소제목·강조) · 800(대제목) */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}


/* =========================================================
   ②  색 변수 — 한 곳에서 관리
   ========================================================= */
:root {
    --blue: rgb(40, 144, 241);
    --blue-dark: #1b6fc0;
    --yellow: #f7c600;   /* 진한 개나리 노랑 — 보조 포인트 색 */
    --ink: #1f2937;      /* 기본 글자색 */
    --muted: #6b7280;    /* 흐린 글자색 */
    --line: #e5e7eb;     /* 옅은 테두리/구분선 */
    --bg: #eef3f9;       /* 아주 연한 하늘색 배경 */
    --card: #ffffff;     /* 카드 배경 */
    --code-bg: #0f172a;  /* 코드 블록 배경 */
}


/* =========================================================
   ③  기본 요소 — 글꼴·배경·제목·문단·구분선·링크
   ========================================================= */
body {
    font-family: 'Pretendard', "Malgun Gothic", system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 26px;   /* 정수 px 줄높이 — 요소가 소수점 픽셀에 놓이지 않게 (1px 선 또렷) */
}

/* 페이지 제목 (Yun:D 미니 프로젝트) */
h1 {
    text-align: center;
    margin: 20px;
    font-weight: 800;
    font-size: 30px;
    line-height: 40px;
    color: var(--blue-dark);
}
/* 제목 속 D 만 노랑 포인트 */
h1 span {
    color: var(--yellow);
}

/* 섹션 제목 (왼쪽 파란 강조선) */
h2 {
    font-size: 24px;
    font-weight: 800;
    padding-left: 12px;
    margin-bottom: 18px;
    border-left: 5px solid var(--yellow);
    line-height: 32px;
}

/* 소제목 (APPLE·정리 아이콘 등) — 가운데 정렬 */
h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 16px 0 4px;
    text-align: center;
}

h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--blue-dark);
    margin: 20px 0 6px;
}

p {
    margin: 8px 0;
}

hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 16px 0;
}

/* 본문 링크 (내비·버튼 제외)는 파란 밑줄 링크 */
main a:not(.nav-btn):not(.up) {
    color: var(--blue);
    text-decoration: none;
}
main a:not(.nav-btn):not(.up):hover {
    color: var(--blue-dark);
}
/* APPLE 링크는 hover 시 노랑 */
#site h3 a:hover {
    color: var(--yellow);
}


/* =========================================================
   ④  버튼 공통 효과 — Uiverse 원 퍼짐 (button·nav·맨위 버튼)
   ========================================================= */
button,
.nav-btn,
.up {
    display: inline-block;
    background: transparent;
    position: relative;
    padding: 5px 15px;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--blue);
    border-radius: 25px;
    outline: none;
    overflow: hidden;
    color: var(--blue);
    transition: color 0.3s 0.1s ease-out;
    text-align: center;
}
/* hover 시 안쪽에서 퍼지는 원 */
button::before,
.nav-btn::before,
.up::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5em;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: 20em;
    height: 20em;
    border-radius: 50%;
    transition: box-shadow 0.5s ease-out;
    z-index: -1;
}
button:hover,
.nav-btn:hover,
.up:hover {
    color: #fff;
    border: 1px solid var(--blue);
}
button:hover::before,
.nav-btn:hover::before,
.up:hover::before {
    box-shadow: inset 0 0 0 10em var(--blue);
}


/* =========================================================
   ⑤  레이아웃 — 컨테이너·헤더·내비게이션·맨위 버튼
   ========================================================= */
/* 가운데 정렬 컨테이너 */
.wrap {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px 90px;
}

header {
    text-align: center;
}

/* 내비게이션 — 스크롤해도 상단 고정 */
nav {
    display: flex;
    text-align: center;
    margin: 20px auto 50px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
}
nav a {
    flex: 1;
}
/* nav 버튼 — 흰 배경, 테두리 없음, 칸을 꽉 채우는 사각형 */
nav .nav-btn {
    width: 100%;
    border-radius: 0;
    padding: 12px 0;
    background: #fff;
    border: none;
    color: var(--blue);
    z-index: 0;   /* 독립 스택 문맥 → 원(::before)이 흰 배경 위·글자 아래에 놓임 */
}
/* 원이 가운데서부터 커지는 hover (scale 0 → 1) */
nav .nav-btn::before {
    width: 40em;
    height: 40em;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
    background: var(--yellow);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.9s ease;
}
nav .nav-btn:hover {
    color: #fff;
    border: none;
}
nav .nav-btn:hover::before {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: none;   /* 공통 버튼의 파란 채움 제거 (노란 원만 보이게) */
}

/* 맨 위로 가는 고정 버튼 (position:fixed 는 버튼 공통의 relative 를 덮어야 하므로 뒤에) */
.up {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 5px 10px;
    z-index: 10;
}


/* =========================================================
   ⑥  섹션 카드
   ========================================================= */
section {
    background: var(--card);
    border-radius: 16px;
    padding: 28px 30px;
    margin-bottom: 28px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    scroll-margin-top: 70px;   /* 고정 nav에 가리지 않게 앵커 이동 여유 */
}

/* 소제목 속 아이콘 이미지 — 가운데 정렬 */
section h3 img {
    height: 44px;
    width: auto;
    display: block;
    margin: 0 auto;
}


/* =========================================================
   ⑦  사이트 분석 섹션 (#site) — 카드 + 뒤에 겹친 컬러 박스
   ========================================================= */
/* 애플 스크린샷 — 1초 딜레이 후 2초 동안 서서히 나타남 */
#site > img {
    display: block;
    max-width: 100%;
    border-radius: 12px;
    margin: 14px auto;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    animation: fade-in 2s 1s both;
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 분석·의견 카드 (흰 카드 + 파란 오프셋 박스) */
#site article {
    position: relative;
    max-width: 82%;
    margin: 0 0 52px 0;                   /* 왼쪽 정렬 + 오른쪽에 컬러 박스 공간 */
    padding: 30px 34px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 22px 22px 0 var(--blue);  /* 뒤에 겹친 파란 박스 */
}
#site article:first-of-type {
    margin-top: 150px;     /* 스크린샷 ↔ 사이트 분석 */
    margin-bottom: 100px;  /* 사이트 분석 ↔ 의견 */
}

/* 소제목 (사이트 분석 / 의견) — 가운데 + 아래 액센트 라인 */
#site article h4 {
    display: block;
    width: fit-content;
    margin: 0 auto 40px;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    padding-bottom: 3px;
    border-bottom: 3px solid var(--yellow);
}

/* 본문 */
#site article p {
    font-size: 16px;
    line-height: 30px;
    color: #374151;
    margin: 0 0 52px;
}
#site article p:last-child {
    margin-bottom: 0;
}

/* 라벨 — 가운데 정렬 알약 배지 (1. 정보 구조 / 좋은 점 등) */
#site article p strong {
    display: block;
    width: fit-content;
    margin: 0 auto 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background: var(--blue);
    padding: 4px 13px;
    border-radius: 999px;
}

/* 배지 옆 강조 문구 — 기울임 인용구 (위·아래 따옴표) */
.pull-quote {
    display: block;
    font-style: italic;
    text-align: center;
    color: var(--blue-dark);
    font-size: 18px;
    line-height: 26px;
    margin: 16px auto;
}
.pull-quote::before,
.pull-quote::after {
    display: block;
    font-size: 30px;
    line-height: 0.7;
    color: var(--yellow);
    font-style: normal;
}
.pull-quote::before { content: "\201C"; }
.pull-quote::after  { content: "\201D"; }

/* 의견 카드 — 오른쪽 배치, 본문 왼쪽 정렬, 컬러 박스 왼쪽 */
#site article.opinion {
    margin: 0 0 52px auto;
    text-align: left;
    box-shadow: -22px 22px 0 var(--blue);
}
#site article.opinion p {
    max-width: none;
}
/* 의견 라벨은 색으로 구분 */
#site article.opinion p:nth-of-type(1) strong { background: #16a34a; }   /* 좋은 점 — 초록 */
#site article.opinion p:nth-of-type(2) strong { background: #dc2626; }   /* 아쉬운 점 — 빨강 */
#site article.opinion p:nth-of-type(3) strong { background: var(--blue); } /* 한 줄 평가 — 파랑 */


/* =========================================================
   ⑧  정리 섹션 (#til) — 카드·용어목록·코드·미리보기
   ========================================================= */
/* 정리 카드 (가로 꽉 참, 그림자 없음) */
#til article {
    position: relative;
    background: var(--card);
    border: 1px solid var(--blue);
    border-radius: 14px;
    padding: 22px 26px;
    max-width: none;
    margin: 40px 0 48px 0;
    text-align: left;
}
/* 정리 소제목(아이콘 + 제목) — 가운데 + 노랑 밑줄 (글자 폭에 맞춤) */
#til h3 {
    width: fit-content;
    margin: 16px auto;
    padding-bottom: 3px;
    border-bottom: 3px solid var(--yellow);
}

/* 미리보기 1px 테두리가 소수점 픽셀 위치에서 흐려지지 않도록
   정리 섹션 안 모든 글자 줄높이를 정수 px 로 고정 (요소가 정수 픽셀에 떨어지게) */
#til          { line-height: 26px; }
#til h2       { line-height: 32px; }
#til h3       { line-height: 30px; }
#til pre      { line-height: 20px; }
#til .preview h1 { line-height: 30px; }

/* 용어 목록 (dl) */
dt {
    font-weight: 700;
    font-size: 19px;
    color: var(--blue-dark);
    margin: 44px 0 14px;            /* 항목(번호) 사이 여백 + dt↔dd 간격 */
}
dd {
    margin: 0 0 12px;
    padding-left: 12px;
    border-left: 2px solid var(--line);
    color: #374151;
}

/* 코드 블록 */
pre {
    background: var(--code-bg);
    color: #e2e8f0;
    padding: 14px 16px;
    border-radius: 10px;
    overflow-x: auto;
    margin: 8px 0 16px;   /* 아래 미리보기와 확실히 간격 확보 */
    font-size: 13px;
    line-height: 20px;
}
/* 문장 속 인라인 코드 */
code {
    font-family: ui-monospace, "Consolas", monospace;
    background: #eef2f7;
    color: #c026d3;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.9em;
}
/* pre 안의 code 는 배경·색 초기화 */
pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

/* "적용 결과" 미리보기 박스 */
.preview {
    margin-top: 26px;
    padding: 14px 16px 16px;
    border: 1px dashed #d19a00;
    border-radius: 8px;
    background: #fffdf2;
}
.preview::before {
    content: "▶ 적용 결과";
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #a16207;              /* 짙은 골드 라벨 (연노랑 위에서 잘 보이게) */
    margin-bottom: 10px;
}
/* 미리보기 안에서는 리스트·표 기본 모양을 되살림 */
.preview ul { list-style: disc; padding-left: 22px; margin: 4px 0; }
.preview ol { list-style: decimal; padding-left: 22px; margin: 4px 0; }
.preview table { border-collapse: collapse; }
.preview th, .preview td { border: 1px solid #cbd5e1; padding: 4px 12px; }
.preview h1 { font-size: 26px; line-height: 34px; color: var(--ink); font-weight: 800; margin: 4px 0; text-align: left; }

/* 미리보기 데모 — 라이브 효과 (hover·회전·별) */
@keyframes demo-spin { to { transform: rotate(360deg); } }
.demo-spin  { animation: demo-spin 2.5s linear infinite; }
.demo-hover { display: inline-block; border: 1px solid var(--blue); padding: 6px 14px; border-radius: 6px; cursor: pointer; transition: 0.3s; }
.demo-hover:hover { background: skyblue; }
.demo-scale { display: inline-block; transition: 0.3s; }
.demo-scale:hover { transform: rotate(10deg) scale(1.1); }
.demo-star::before { content: "★ "; color: #f0a; }

/* 미리보기 데모 — 정적 요소 (인라인 스타일에서 옮긴 클래스) */
.pv-line { margin: 4px 0; }
.pv-icon { height: 36px; margin-top: 6px; }
.pv-red  { color: red; margin: 0; }
.pv-gray { color: gray; margin: 2px 0; }
.pv-24   { font-size: 24px; margin: 2px 0; }
/* 시맨틱 구조 미리보기 */
.pv-layout    { border: 1px solid #bbb; border-radius: 6px; overflow: hidden; font-size: 13px; text-align: center; }
.pv-band      { background: #e3effd; padding: 6px; }
.pv-band-main { background: #f5f9ff; padding: 16px 6px; }
/* 박스 모델·크기·색 */
.pv-box     { display: inline-block; padding: 20px; border: 2px solid navy; margin: 20px; background: #fff; }
.pv-hotpink { width: 200px; height: 100px; color: #fff; background: hotpink; display: flex; align-items: center; justify-content: center; }
/* flex · grid */
.pv-flex      { display: flex; gap: 10px; justify-content: center; }
.pv-blue-box  { background: #48f; color: #fff; padding: 10px 16px; border-radius: 6px; }
.pv-grid      { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pv-green-box { background: #0a8; color: #fff; padding: 12px; text-align: center; border-radius: 6px; }
/* position */
.pv-pos       { position: relative; height: 70px; background: #eef3f9; border-radius: 6px; }
.pv-pos-badge { position: absolute; right: 8px; bottom: 8px; background: var(--blue); color: #fff; padding: 4px 10px; border-radius: 4px; }
/* 변형·효과 */
.pv-spin-box { width: 46px; height: 46px; background: var(--blue); border-radius: 8px; display: inline-block; vertical-align: middle; }
.pv-pink-box { background: #f0a; color: #fff; padding: 8px 12px; border-radius: 6px; }
.pv-gradient { width: 120px; height: 80px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); background: linear-gradient(45deg, #f06, #48f); }
.pv-var      { background: #ff0066; color: #fff; padding: 4px 10px; border-radius: 4px; }


/* =========================================================
   ⑨  퀴즈 섹션 (#quiz) — 문항 카드 + 정답 펼치기
   ========================================================= */
#quiz article {
    border: 1px solid var(--blue);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 30px;
    background: #fbfdff;
}
#quiz h4 {
    margin-top: 0;
    color: var(--ink);
}

/* 정답 펼치기 (details/summary) */
details {
    background: #fffdf2;
    border: 1px dashed #d19a00;
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 10px;
}
summary {
    cursor: pointer;
    font-weight: 700;
    color: #a16207;               /* 짙은 골드 */
    list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸ "; }
details[open] summary::before { content: "▾ "; }
details p { margin-bottom: 0; }


/* =========================================================
   ⑩  꼬리말
   ========================================================= */
footer {
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    padding: 30px 0;
    margin-top: 24px;
    border-top: 1px solid var(--line);
}
footer p {
    margin: 4px 0;
}
.footer-links {
    margin-bottom: 10px;
}
.footer-links a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
    margin: 0 10px;
}
.footer-links a:hover {
    color: var(--yellow);
}


/* =========================================================
   ⑪  애니메이션
   ========================================================= */
/* 페이지 제목(h1) — 로드 1초 뒤 한 글자씩 타이핑
   width:fit-content 로 글자폭에 맞추고, clip-path 를 steps(글자수) 로 열어 타이핑처럼 */
@keyframes type-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}
.typing {
    display: inline-block;
    width: fit-content;
    animation: type-reveal 1.4s steps(13) 1s both;
}

/* 스크롤로 화면에 들어올 때 방향별 슬라이드 인 (크롬·엣지 전용, 순수 CSS) */
@keyframes slide-from-left {
    from { opacity: 0; transform: translateX(-90px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-from-right {
    from { opacity: 0; transform: translateX(90px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-from-bottom {
    from { opacity: 0; transform: translateY(280px); }
    to   { opacity: 1; transform: translateY(0); }
}
@supports (animation-timeline: view()) {
    /* 분석 카드: 왼쪽에서 */
    #site article {
        animation: slide-from-left linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 35%;
    }
    /* 의견 카드: 오른쪽에서 */
    #site article.opinion {
        animation-name: slide-from-right;
    }
    /* 정리 카드: 아래에서 위로 (반쯤 들어오면 다 나타남) */
    #til article {
        animation-name: slide-from-bottom;
        animation-range: entry 0% entry 50%;
    }
}


/* =========================================================
   ⑫  반응형
   ========================================================= */
/* 중간 이하 화면 — 분석·의견 카드 꽉 차게 */
@media (max-width: 820px) {
    #site article {
        max-width: 100%;
        margin: 0 0 42px 0;
        box-shadow: 12px 12px 0 var(--blue);
    }
    #site article.opinion {
        margin: 0 0 42px 0;
        box-shadow: -12px 12px 0 var(--blue);
    }
}

/* 모바일 — 여백·컬러 박스 축소 */
@media (max-width: 600px) {
    section { padding: 20px 18px; }
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    #site article { padding: 22px 20px; box-shadow: 8px 8px 0 var(--blue); }
    #site article.opinion { box-shadow: -8px 8px 0 var(--blue); }
    #site article p { max-width: 100%; }
}