@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;600&family=Inter:wght@300;400;500;600&display=swap");

/* ═══════════════════════════════════════════════════════════
   DailyMission3 — Bone 스킨 (공용)

   호텔 인쇄물 톤.  이모지 · 둥근 카드 · 색 배지를 쓰지 않는다.
   만드는 재료는 세 가지뿐이다 :  여백 · 1px 가는 선 · 명조 세리프
   색은 두 가지뿐이다        :  잉크(--tx) · 브라스(--acc)

   말씀 · 퀴즈 · 기도 · 암송 화면이 이 파일 하나를 같이 쓴다.
   화면마다 다른 부분만 그 화면의 <style> 에 둔다.
   ═══════════════════════════════════════════════════════════ */

/* 이 프로젝트에는 box-sizing 리셋이 없다.
   그래서 width:100% 에 좌우 padding 이 더해져 화면 밖으로 넘친다.
   Bone 화면 안에서만 border-box 로 맞춰 준다. */
.qz,
.qz *,
.qz *::before,
.qz *::after { box-sizing: border-box; }

.qz {
    --bg:   #F7F6F3;
    --tx:   #16181C;
    --dim:  #83868C;
    --dim2: #5C5F66;
    --rule: #E2E0DB;
    --acc:  #9A7B4F;
    --mark: #EDE5D8;
    --pad:  22px;

    background: var(--bg);
    color: var(--tx);
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 20px var(--pad) 0;
    font-family: "Gothic A1", "Malgun Gothic", system-ui, sans-serif;
    min-height: 78vh;
    display: flex;
    flex-direction: column;

    /* 공용 레이아웃이 body 를 text-align:center 로 잡고 있다.
       읽는 화면이므로 여기서는 왼쪽 정렬로 되돌린다. */
    text-align: left;
}

.qz .qzBody { flex: 1; }

/* ── 상단 : 단계 번호 + 날짜 + 머리카락 진행선 ── */
.qz .qzBar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--rule);
}
.qz .qzStepNo { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; color: var(--dim); }
.qz .qzStepNo em { font-style: normal; color: var(--tx); }
.qz .qzDate {
    font-size: 10.5px; font-weight: 500; letter-spacing: .12em; color: var(--dim);
    font-variant-numeric: tabular-nums; text-decoration: none;
}

/* ── 글자 크기 4단계 (Partials/_FontSizeCtl) ──
   상단 바·진행선·아래 미션 탭을 뺀 본문 전체를 --dm3fs 배율로 키운다. */
.qz .qzFs { display: flex; border: 1px solid var(--rule); flex: 0 0 auto; }
.qz .qzFs button {
    font-family: "Noto Serif KR", serif; background: none; border: 0; color: var(--dim);
    padding: 3px 8px; cursor: pointer; line-height: 1.35;
}
.qz .qzFs button:nth-child(1) { font-size: 11px; }
.qz .qzFs button:nth-child(2) { font-size: 13px; }
.qz .qzFs button:nth-child(3) { font-size: 15px; }
.qz .qzFs button:nth-child(4) { font-size: 18px; }
.qz .qzFs button.on { background: var(--tx); color: var(--bg); }
.qz .qzBody > :not(.qzBar):not(.qzProg):not(.qzNav) { zoom: var(--dm3fs, 1); }

/* ── 제목 옆 달력 쪽지 (Partials/_DateChip) ── */
.qz .qzTitleRow { display: flex; align-items: flex-start; gap: 14px; }
.qz .qzTitleRow > .qzTitleTx { flex: 1 1 auto; min-width: 0; }
.qz .qzCal { flex: 0 0 auto; width: 60px; border: 1px solid var(--rule); background: #fff; text-align: center; margin-top: 4px; }
.qz .qzCalM { font-family: "Inter", sans-serif; font-size: 10px; letter-spacing: .08em; background: var(--tx); color: var(--bg); padding: 3px 0; }
.qz .qzCalD { font-family: "Inter", sans-serif; font-weight: 300; font-size: 26px; line-height: 1.1; padding-top: 3px; color: var(--tx); }
.qz .qzCalW { font-size: 10.5px; font-weight: 600; color: var(--acc); padding-bottom: 5px; }
.qz .qzCalW.sun { color: #B4531F; }
.qz .qzCalW.sat { color: #3B6EA8; }
.qz a.qzDate:hover { color: var(--acc); }
.qz .qzProg { height: 1px; background: var(--rule); margin-bottom: 24px; }
.qz .qzProg i { display: block; height: 1px; background: var(--acc); transition: width .3s ease; }

/* ── 제목 · 머리말 ── */
.qz .qzKicker {
    font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
    text-transform: uppercase; color: var(--acc); margin-bottom: 14px;
}
.qz h2.qzTitle {
    font-family: "Noto Serif KR", serif; font-weight: 400;
    font-size: 27px; line-height: 1.42; letter-spacing: -.01em; margin: 0 0 16px;
}
.qz .qzRef {
    font-size: 11.5px; font-weight: 500; letter-spacing: .12em; color: var(--dim);
    padding-bottom: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 22px;
}

/* ── 줄 링크 (접힘 토글) ── */
.qz .qzRow {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 0; border-top: 1px solid var(--rule);
    font-size: 13px; font-weight: 500; color: var(--dim);
    cursor: pointer; user-select: none;
    background: none; border-left: 0; border-right: 0; border-bottom: 0;
    width: 100%; font-family: inherit; text-align: left;
}
.qz .qzRow b { font-family: "Inter", sans-serif; font-weight: 300; font-size: 15px; }
.qz .qzRow:hover { color: var(--tx); }
.qz .qzFold {
    font-family: "Noto Serif KR", serif; font-weight: 300;
    font-size: 13.5px; line-height: 2; color: var(--dim2);
    padding: 2px 0 18px; word-break: break-word;
}
/* 안에 '글만' 들어가는 경우에만 줄바꿈을 살린다.
   태그를 넣는 경우에 pre-line 을 쓰면 마크업의 줄바꿈까지 빈 줄이 되어 붕 뜬다. */
.qz .qzFold.txt { white-space: pre-line; }

/* ── 읽는 글(본문 · 해설 · 요약) ── */
.qz .qzRead {
    font-family: "Noto Serif KR", serif; font-weight: 300;
    font-size: 15px; line-height: 2.05; color: var(--tx);
    white-space: pre-line; word-break: break-word;
}
.qz .qzSmall {
    font-family: "Noto Serif KR", serif; font-weight: 300;
    font-size: 13.5px; line-height: 2; color: var(--dim2);
    white-space: pre-line; word-break: break-word;
}
.qz .qzLabel {
    font-size: 12.5px; font-weight: 600; letter-spacing: .2em;
    text-transform: uppercase; color: var(--dim); margin-bottom: 12px;
}
.qz .qzNote { font-size: 11.5px; color: var(--dim); letter-spacing: .02em; margin-top: 12px; line-height: 1.7; }
.qz .qzHr { height: 1px; background: var(--rule); margin: 28px 0 24px; }

/* ── 안내 · 빈 상태 ── */
.qz .qzLock {
    font-size: 12px; line-height: 1.8; color: var(--dim);
    border-left: 1px solid var(--acc); padding: 2px 0 2px 14px; margin-bottom: 24px;
}
.qz .qzLock b { color: var(--tx); font-weight: 600; }
.qz .qzEmpty {
    font-family: "Noto Serif KR", serif; font-weight: 300;
    font-size: 15px; line-height: 2; color: var(--dim2); padding: 40px 0;
}

/* ── 선으로 된 보조 버튼 (한 줄 꽉 채움) ── */
/* 완료 전(해야 할 일) = 옅은 초록 · 완료 = 베이지(.done) — 한눈에 구별되게 (2026-09-26 A안) */
.qz .qzLine {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    border: 1px solid #B9D2C2; background: #EAF2ED; color: #1F5A3F;
    padding: 15px; font-family: inherit; font-size: 15px; font-weight: 600;
    letter-spacing: .14em; text-decoration: none; border-radius: 1px; cursor: pointer;
}
.qz .qzLine:hover { border-color: #2F6B4F; background: #DFEBE3; color: #1F5A3F; }

/* ── 수행(포인트) 버튼 : 나란히 두 개 ── */
.qz .qzMarks { display: flex; gap: 9px; }
.qz .qzMarks form { flex: 1 1 0; margin: 0; }
.qz .qzMark {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    border: 1px solid #B9D2C2; background: #EAF2ED; color: #1F5A3F;
    padding: 14px 8px; font-family: inherit; font-size: 15.0px; font-weight: 600;
    letter-spacing: .08em; border-radius: 1px; cursor: pointer; line-height: 1.5;
}
.qz .qzMark:hover:not(:disabled) { border-color: #2F6B4F; background: #DFEBE3; color: #1F5A3F; }
.qz .qzMark:disabled { cursor: default; }
.qz .qzMark.done { border-color: var(--acc); color: var(--acc); background: var(--mark); opacity: 1; }
.qz .qzMark:disabled:not(.done) { opacity: .4; }

/* ── 하단 고정 액션 ── */
.qz .qzFoot {
    position: sticky; bottom: 0; z-index: 5;
    margin: 24px calc(var(--pad) * -1) 0;
    padding: 16px var(--pad) 22px;
    background: var(--bg); border-top: 1px solid var(--rule);
}
.qz .qzTwo { display: flex; gap: 9px; }
.qz .qzBtn {
    display: block; width: 100%; box-sizing: border-box;
    border: 1px solid var(--tx); background: var(--tx); color: var(--bg);
    padding: 16px; font-family: inherit; font-size: 15px; font-weight: 600;
    letter-spacing: .2em; border-radius: 1px; text-align: center;
    cursor: pointer; text-decoration: none;
}
.qz .qzBtn.out { background: transparent; color: var(--tx); }
.qz .qzBtn.out:hover { background: var(--mark); }
.qz .qzBtn:disabled { opacity: .35; cursor: not-allowed; }

/* ── 상단 왼쪽 : 홈 · 미션홈 (10.5 → 13 : 너무 작아서 키움) ── */
.qz .qzHome {
    font-size: 13px; font-weight: 600; letter-spacing: .08em;
    color: var(--dim2); text-decoration: none;
}
.qz .qzHome:hover { color: var(--acc); }
.qz .qzHomeSep { color: var(--rule); margin: 0 8px; font-size: 13px; }

/* ── 하단 미션 내비 (B안) ──
   칸은 언제나 4개. 현재 화면은 위쪽 브라스 선으로 표시. */
.qz .qzNav {
    display: flex;
    margin: 0 calc(var(--pad) * -1);
    background: var(--bg);
    border-top: 1px solid var(--rule);
}
.qz .qzNav a {
    flex: 1 1 0;
    text-align: center;
    padding: 12px 2px 15px;
    text-decoration: none;
    color: var(--dim);
    border-right: 1px solid var(--rule);
    position: relative;
}
.qz .qzNav a:last-child { border-right: 0; }
.qz .qzNav a:hover .qzNavL { color: var(--tx); }
.qz .qzNavL { display: block; font-size: 16px; font-weight: 600; letter-spacing: .04em; }   /* 12.5 → 14 : 하단 미션 탭 글자 조금 크게 */
.qz .qzNavS {
    display: block; font-size: 15px; margin-top: 5px;
    letter-spacing: .1em; color: var(--rule);
}
.qz .qzNavS.done { color: var(--acc); }
.qz .qzNav a.on .qzNavL { color: var(--tx); }
.qz .qzNav a.on::before {
    content: ""; position: absolute; top: -1px; left: 0; right: 0;
    height: 2px; background: var(--acc);
}

/* 액션 버튼이 있는 화면에서는 내비가 그 아래에 붙는다.
   액션 영역의 sticky 가 내비를 덮지 않도록 아래 여백을 지운다. */
.qz .qzFoot + .qzNav { margin-top: 0; }

.qz .qzStep[hidden] { display: none; }

@media (max-width: 640px) {
    /* 화면을 꽉 쓰고, 좌우 여백은 글이 답답하지 않을 만큼만 남긴다. */
    .qz { --pad: 16px; max-width: none; min-height: 100vh; padding-top: 16px; }
    .qz h2.qzTitle { font-size: 24px; }

    /* 긴 영문·URL 이 가로로 삐져나가지 않게 */
    .qz { overflow-x: hidden; }
    .qz h2.qzTitle,
    .qz .qzTitle,
    .qz .qzRef { overflow-wrap: anywhere; }
}