/* ══════════════════════════════════════════════════════════
   마무리 레이어 — 읽기 쉬움과 손가락

   base.css 와 pages.css 는 그대로 두고 여기서 덮는다. 둘 다 압축된
   파일이라 안에서 고치면 되돌리기 어렵고, 무엇을 왜 바꿨는지도
   남지 않는다. 이 파일은 마지막에 읽히므로 같은 선택자면 여기가 이긴다.

   고친 근거는 전부 실제로 잰 값이다.
   ══════════════════════════════════════════════════════════ */


/* ── 1. 글자 색 대비 ───────────────────────────────────────
   WCAG AA 는 본문 글자에 4.5:1 을 요구한다. 재 보니 모자랐다.

     저작권 #969990 / #f7f7f4   2.70  ✗
     푸터   #8a8d87 / #f7f7f4   3.14  ✗
     힌트   #85857b / 흰색      3.72  ✗
     muted  #737772 / 크림      4.24  ✗

   회색을 조금 어둡게 한다. 색감은 그대로 두고 명도만 내렸다. */

:root {
    --muted: #666a65;      /* 흰색 위 5.37 · 크림 위 5.00 */
    --muted-soft: #6b6f6a; /* 크림 위 4.76 — 덜 중요한 글에 */
}

.footgrid p,
.footlinks,
.copyright,
.scene-caption,
.hero-note {
    color: var(--muted-soft);
}

/* 사양 폼의 설명글. 가장 많이 읽히는 작은 글씨다 */
.help,
.spec-lead,
.quote-note,
.spec-summary-note,
.detail-visual-note {
    color: #5f635e;        /* 흰색 위 6.12 */
}


/* ── 2. 한글 가독성 ────────────────────────────────────────
   자간 -.035em 은 라틴 글꼴 기준이라 한글에서는 글자가 붙어 보인다.
   본문만 조금 풀어 주고 제목은 그대로 둔다 — 제목의 좁은 자간은
   이 디자인의 성격이다. */

body {
    letter-spacing: -.02em;
}

h1, h2, h3, .logo, .hero-book strong, .orange-sheet strong {
    letter-spacing: inherit;
}

/* 여러 줄로 읽는 글은 행간을 넉넉히. 한글은 라틴보다 더 필요하다 */
.intro,
.section-head p,
.feature-card p,
.step p,
.promise p,
.footgrid p,
.modal p,
.article-note,
.spec-lead,
.help {
    line-height: 1.8;
}


/* ── 3. 모바일 — 글자가 너무 작다 ──────────────────────────
   390px 에서 재 보니 10px 이 열 곳 넘게, 11px 이 스무 곳 넘게
   있었다. 한글은 같은 크기라도 라틴보다 작아 보여서 10px 은
   읽히지 않는다. **12px 을 바닥으로 둔다.** */

@media (max-width: 760px) {
    .announcement { font-size: 11.5px; }

    .shortcut      { font-size: 12.5px; }
    .more          { font-size: 12px; }
    .product p     { font-size: 12px; line-height: 1.7; }
    .product-bottom { font-size: 12px; }
    .product h3    { font-size: 16px; }
    .badge         { font-size: 10px; }
    .step p        { font-size: 12.5px; }
    .promise p     { font-size: 12.5px; }
    .cta p         { font-size: 13px; }
    .copyright     { font-size: 11.5px; }
    .footgrid p,
    .footlinks     { font-size: 12.5px; }
    .intro         { font-size: 14px; }
    .section-head p { font-size: 12.5px; max-width: none; }
    .nav.open      { font-size: 13px; }
    .tab           { font-size: 12.5px; }

    /* 사양 폼 */
    .spec-lead,
    .help,
    .quote-note,
    .spec-summary-note { font-size: 12px; }

    .spec-option span  { font-size: 13px; }
    .spec-summary dt,
    .spec-summary dd   { font-size: 12.5px; }

    /* 남아 있던 것들 — 재서 하나씩 찾았다 */
    .hero-aside p      { font-size: 12.5px; line-height: 1.8; }
    .hero-caption span { font-size: 11.5px; }
    .editorial-link    { font-size: 12.5px; }
    .actions .btn      { font-size: 12.5px; }
    .category-number   { font-size: 10px; }
}


/* ── 3-2. 크기를 따로 봐야 하는 것들 ───────────────────────
   아래는 화면 폭과 상관없이 너무 작았다.

   영문 대문자 라벨(.eyebrow, .section-index) 은 자간을 넓게 준
   편집 장치라 8~10px 이 어울린다 — 그대로 둔다. 읽는 글만 키운다. */

/* 사업자 정보는 법으로 "쉽게 알 수 있도록" 표시하게 되어 있다.
   9.5px 으로 깔아 두면 그 요건을 지켰다고 보기 어렵다 */
.bizinfo,
.bizinfo span {
    font-size: 11.5px;
    line-height: 1.85;
}

.guide-link-group,
.guide-link-more {
    font-size: 11.5px;
}

/* 사진 위에 얹는 라벨. 장식이지만 5~7px 은 글자로 보이지 않는다 */
.visual-note,
.photo-label,
.editorial-foot,
.paper-sample,
.paper-sample small,
.photo-label span {
    font-size: 9.5px;
}

/* 연출 이미지라는 고지 — 읽으라고 둔 글이다 */
.hero-caption span:last-child {
    font-size: 10.5px;
}


/* ── 4. 모바일 — 손가락이 닿는 크기 ────────────────────────
   누를 수 있는 것은 44px 가 기준이다(애플·구글 둘 다). 재 보니
   select 가 17px, 링크가 13~20px 이었다. 글자만 키워서는 안 되고
   누를 수 있는 넓이를 따로 줘야 한다. */

@media (max-width: 760px) {
    .btn,
    .searchbox button,
    .searchbox input {
        min-height: 46px;
    }

    select,
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"] {
        min-height: 46px;
        font-size: 16px;   /* 16px 미만이면 iOS 가 화면을 확대한다 */
    }

    .paper-picker select,
    .spec-group select,
    .spec-quantity select,
    .spec-quantity input {
        min-height: 46px;
        font-size: 16px;
    }

    /* 줄로 늘어선 링크 — 글자는 그대로 두고 위아래로 넓힌다 */
    .footlinks a,
    .nav.open a,
    .more,
    .editorial-link,
    .textlink {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .shortcut {
        min-height: 72px;
        align-content: center;
    }

    .tab {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
    }

    .mobile-menu,
    .search-toggle,
    .logo {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* 사양 고르는 칩 */
    .spec-option span {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* 푸터 약관 링크 */
    .bizlinks a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* 체크박스·라디오 자체를 누르는 경우 */
    .spec-option input[type="checkbox"],
    .spec-option input[type="radio"] {
        min-width: 22px;
        min-height: 22px;
    }
}


/* ── 5. 넓은 화면 ──────────────────────────────────────────
   1320px 틀에 글이 한 줄로 길게 늘어지면 읽기 어렵다.
   읽는 글만 폭을 잡아 준다. */

@media (min-width: 1024px) {
    .intro,
    .section-head p,
    .page-lead {
        max-width: 62ch;
    }

    .article-note,
    .spec-lead {
        max-width: 72ch;
    }
}


/* ── 6. 사양 선택 — 줄 수를 줄인다 ─────────────────────────
   1440px 에서 재 보니 책자 폼이 1,724px 였다. 그 가운데

     표지 339 + 내지 339 = 678px (39%)
     후가공 8줄 × 70     = 560px (32%)

   후가공은 대부분의 주문에서 "선택 안 함" 으로 지나간다. 32% 를
   그것에 쓰고 나면 정작 중요한 제본·용지가 아래로 밀린다. */


/* 6-1. 묶음 제목 — 12줄을 단계로 나눈다 */
.spec-step {
    margin: 34px 0 0;
    padding-top: 26px;
    border-top: 2px solid var(--ink);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.spec-step:first-of-type {
    margin-top: 26px;
}

.spec-step b {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.03em;
}

.spec-step span {
    font-size: 11.5px;
    color: var(--muted);
}

/* 단계 바로 다음 칸은 위 선을 지운다 — 선이 겹쳐 두 줄로 보였다 */
.spec-step + .spec-group {
    border-top: 0;
}


/* 6-2. 접히는 후가공.
   재단은 기본값이 있어 "선택 안 함" 이 아니다. 접어 두면 그것을 못
   보므로 머리글에 지금 상태를 적는다(글은 자바스크립트가 채운다). */
.spec-fold {
    border-top: 1px solid var(--line);
}

.spec-fold > summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
}

.spec-fold > summary::-webkit-details-marker { display: none; }

.spec-fold > summary::after {
    content: '＋';
    margin-left: auto;
    font-weight: 400;
    color: var(--muted);
}

.spec-fold[open] > summary::after { content: '－'; }

.spec-fold > summary em {
    font-style: normal;
    font-weight: 400;
    font-size: 11.5px;
    color: var(--muted);
}

/* 두 칸으로 — 8줄이 4줄이 된다 */
.spec-fold-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    padding-bottom: 8px;
}

.spec-fold-body .spec-group {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
}

.spec-fold-body .spec-group legend {
    width: 78px;
    font-size: 11.5px;
}

/* 설명은 칸 아래로 내린다. 옆에 두니 칸이 눌려 좁아졌다 */
.spec-fold-body .help {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.7;
}

.spec-fold-body select { width: 100%; }

@media (max-width: 860px) {
    .spec-fold-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
}


/* 6-3. 표지·내지 속 작은 묶음(인쇄면·도수).
   라벨이 없어 "단면 양면 컬러 흑백" 이 한 줄로 붙어 있었다 —
   어디까지가 한 묶음인지 보이지 않는다. */
.spec-sub {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.spec-sub > b {
    flex: 0 0 52px;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
}

@media (max-width: 760px) {
    .spec-sub { align-items: flex-start; gap: 8px; }
    .spec-sub > b { flex-basis: 44px; padding-top: 13px; }
}


/* 6-4. 용지 고르는 칸 — 종류·색·평량을 한 줄에 */
.paper-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.paper-picker label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.paper-picker label > span {
    font-size: 11px;
    color: var(--muted);
}

.paper-picker select { min-width: 148px; }

@media (max-width: 760px) {
    .paper-picker { gap: 10px; }
    .paper-picker label { flex: 1 1 100%; }
    .paper-picker select { width: 100%; }
}


/* 6-5. 모바일 — 3번에서 정한 12px 바닥을 새로 만든 칸에도 지킨다.
   390px 에서 재 보니 11~11.5px 이 네 군데 있었다. */
@media (max-width: 760px) {
    .paper-picker label > span,
    .spec-fold > summary em,
    .spec-fold-body .spec-group legend,
    .spec-fold-body .help {
        font-size: 12px;
    }

    .spec-fold > summary { font-size: 13px; min-height: 48px; }

    .spec-sub > b { font-size: 12px; }

    /* 두 칸으로 접은 격자는 좁은 화면에서 한 칸이 된다(6-2).
       그 안의 라벨 폭도 되돌린다 — 78px 이면 "표지 부분코팅" 이 잘린다 */
    .spec-fold-body .spec-group,
    .spec-fold-body .spec-group legend {
        width: auto;
    }

    .spec-fold-body .spec-group { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}


/* 6-6. 칸 아래 덧붙이는 설명.
   뷰에 style="font-size:11.5px" 로 박혀 있어 모바일 12px 바닥을
   CSS 로 덮을 수가 없었다. 클래스로 빼낸다. */
.spec-note {
    margin: 9px 0 0;
    font-size: 11.5px;
    line-height: 1.85;
    color: var(--muted);
}

@media (max-width: 760px) {
    .spec-note { font-size: 12px; }
    .spec-step span { font-size: 12px; }
}


/* 6-7. 두 단 레이아웃과 접힌 블록이 부딪치는 곳.
   pages.css 는 넓은 화면에서 `.spec-group { grid-column: 1 }` 로
   사양 칸을 왼쪽 단에 고정한다. 그 규칙이 접힌 블록 **안쪽**까지
   따라 들어가 7칸이 전부 1열에 쌓였다 — 두 칸으로 만든 뜻이
   사라졌다. 안쪽은 흐르게 둔다.

   접는 블록과 단계 제목도 왼쪽 단에 못 박는다. 지금은 오른쪽 단이
   요약으로 꽉 차 있어 저절로 왼쪽에 놓이지만, 기대고 있을 일이 아니다. */
@media (min-width: 1024px) {
    .spec-step,
    .spec-fold {
        grid-column: 1;
    }

    .spec-fold-body .spec-group {
        grid-column: auto;
    }
}


/* 6-8. 단계 제목이 좁은 화면에서 쪼개졌다.
   flex 라 제목과 설명이 한 줄을 나눠 쓰는데, 419px 에서 "제본" 이
   "제 / 본" 으로 접혔다. 제목은 줄이지 말고 설명을 아래로 내린다. */
.spec-step { flex-wrap: wrap; }

.spec-step b { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 560px) {
    .spec-step { gap: 4px; }
    .spec-step span { flex: 1 0 100%; }
}