@charset "utf-8";
/* 공정 기술 전용 — 공용 바탕·타이포·문의 영역은 hn-page.css. 색은 hn-shell.css 의 --hn-* 토큰만 쓴다.
   '실험 노트': ① 큰 제목 + 표 1. 공정 변수 정의 ② 잉크 바탕 — 그림 1. 등고선 차트 + 표 2. 실험 설계 예시
   ③ 종이 바탕 — 큰 사진 + 하나씩 체크되는 세 단계 ④ 리넨 바탕 자주 묻는 질문 (⑤ 크래프트 문의는 hn-page.css) */

.hn-proc em { font-style: normal; color: var(--hn-caramel); }

/* 큰 사진 — 액자 안에서 스크롤에 맞춰 천천히 움직인다(process.php 인라인 스크립트가 --hp-shift 를 준다) */
.hn-proc .hp-photo { overflow: hidden; }
.hn-proc .hp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--hp-shift, 0%)) scale(1.1); will-change: transform; }
.fl-reveal-on .hn-proc .hp-photo[data-fl-reveal] { transition: opacity 1.4s var(--hn-ease); }
.fl-reveal-on .hn-proc .hp-photo[data-fl-reveal]:not(.is-in) { transform: none; }

/* ---------- ① 도입: 모눈종이 ---------- */
.hn-proc .hp-open { padding: 120px var(--ab-gutter) 136px; background: var(--hn-paper); }
.hn-proc .hp-open-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 64px; max-width: 1440px; margin: 0 auto; }
.hn-proc .hp-open-title { margin-top: 8px; font-family: var(--hn-serif); font-size: clamp(40px, 4.2vw, 60px); line-height: 1.2; font-weight: 600; letter-spacing: -.05em; color: var(--hn-ink); }
.hn-proc .hp-open-desc { justify-self: end; max-width: 30em; font-size: 18px; line-height: 1.8; color: var(--hn-ink-700); }
/* 표·그림 머리말 — 기술 문서처럼 번호를 붙인다 */
.hn-proc .hp-fig-cap { font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--hn-ink-700); }
/* 표 1. 공정 변수 정의 */
.hn-proc .hp-spec { max-width: 1440px; margin: 112px auto 0; }
.hn-proc .hp-table { width: 100%; margin-top: 16px; border-collapse: collapse; border-top: 2px solid var(--hn-ink); border-bottom: 2px solid var(--hn-ink); font-size: 16px; line-height: 1.6; }
.hn-proc .hp-table th, .hn-proc .hp-table td { padding: 18px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--hn-ink-200); }
.hn-proc .hp-table thead th { padding-top: 14px; padding-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--hn-ink-500); border-bottom: 1px solid var(--hn-ink); }
.hn-proc .hp-table tr.is-group > * { border-top: 1px solid var(--hn-ink); }
.hn-proc .hp-table tbody tr:first-child > * { border-top: 0; }
.hn-proc .hp-table-group { width: 120px; font-family: var(--hn-serif); font-size: 18px; font-weight: 600; color: var(--hn-ink); background: var(--hn-linen); }
.hn-proc .hp-table-group small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--hn-ink-500); }
.hn-proc .hp-table .hp-table-sym, .hn-proc .hp-table thead th:nth-child(2) { text-align: center; }
.hn-proc .hp-table-sym { width: 72px; font: italic 500 18px/1 "Lora", serif; color: var(--hn-caramel); }
.hn-proc .hp-table-name { width: 160px; font-family: var(--hn-serif); font-size: 19px; font-weight: 600; letter-spacing: -.035em; white-space: nowrap; }
.hn-proc .hp-table td:not([class]) { color: var(--hn-ink-700); }
.hn-proc .hp-table-lv { width: 260px; white-space: nowrap; }
.hn-proc .hp-table-lv span { display: inline-block; margin-right: 6px; padding: 3px 10px; font-size: 13px; line-height: 1.5; color: var(--hn-ink-700); border: 1px solid var(--hn-ink-300); border-radius: 2px; }
.hn-proc .hp-table-goal { font-size: 15px; font-weight: 600; color: var(--hn-caramel); border-left: 1px solid var(--hn-ink-200); }


/* ---------- ② 반응표면: 잉크 바탕 ---------- */
.hn-proc .hp-rsm { color: var(--hn-paper); background: var(--hn-ink); }
.hn-proc .hp-rsm-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(56px, 6vw, 96px); max-width: 1440px; margin: 0 auto; }
.hn-proc .hp-rsm-body .ab-label { color: var(--hn-amber); }
.hn-proc .hp-rsm-title { margin-top: 12px; font-family: var(--hn-serif); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.3; font-weight: 600; letter-spacing: -.04em; color: var(--hn-paper); }
.hn-proc .hp-rsm-title em { color: var(--hn-amber); }
.hn-proc .hp-rsm-lead { margin-top: 32px; font-size: 18px; line-height: 1.8; color: var(--hn-linen); }
.hn-proc .hp-rsm-text { margin-top: 16px; font-size: 16px; line-height: 1.85; color: var(--hn-ink-100); }
/* 그림 1. 등고선 차트 — 종이 패널 위 정돈된 축·눈금·범례 */
.hn-proc .hp-chart { padding: 32px 32px 24px; background: var(--hn-paper); }
.hn-proc .hp-chart svg { display: block; width: 100%; height: auto; margin-top: 20px; overflow: visible; }
.hn-proc .hp-chart figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--hn-ink-500); }
.hn-proc .hp-chart text { font-family: var(--hn-serif); font-size: 13px; fill: var(--hn-ink-700); }
.hn-proc .hp-chart .hp-chart-axis { font-size: 14px; font-weight: 600; fill: var(--hn-ink); }
.hn-proc .hp-chart-bg { fill: var(--hn-caramel); fill-opacity: .04; }
.hn-proc .hp-band { fill: var(--hn-caramel); fill-opacity: calc(.1 + var(--k) * .13); stroke: var(--hn-paper); stroke-width: 1; }
.hn-proc .hp-chart-grid path { fill: none; stroke: var(--hn-ink); stroke-opacity: .16; stroke-dasharray: 3 4; }
.hn-proc .hp-chart-frame { fill: none; stroke: var(--hn-ink); stroke-width: 1; }
.hn-proc .hp-chart-guide { fill: none; stroke: var(--hn-ink); stroke-width: 1; stroke-dasharray: 4 4; }
.hn-proc .hp-chart-dot { fill: var(--hn-paper); stroke: var(--hn-ink); stroke-width: 2; }
.hn-proc .hp-chart-tag { fill: var(--hn-ink); }
.hn-proc .hp-chart .hp-chart-tagt { font-size: 12px; font-weight: 600; fill: var(--hn-paper); }
.fl-reveal-on .hn-proc .hp-band { opacity: 0; transition: opacity .9s var(--hn-ease) calc(.3s + var(--k) * .15s); }
.fl-reveal-on .hn-proc .hp-chart.is-in .hp-band { opacity: 1; }
.fl-reveal-on .hn-proc .hp-chart-opt { opacity: 0; transition: opacity .8s var(--hn-ease) 1.4s; }
.fl-reveal-on .hn-proc .hp-chart.is-in .hp-chart-opt { opacity: 1; }
/* 표 2. 실험 설계 예시 */
.hn-proc .hp-design { max-width: 1440px; margin: 120px auto 0; }
.hn-proc .hp-design-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.hn-proc .hp-design .hp-fig-cap { color: var(--hn-linen); }
.hn-proc .hp-design-key { display: flex; gap: 20px; font-size: 13px; color: var(--hn-ink-100); }
.hn-proc .hp-design-key li { display: flex; align-items: center; gap: 8px; }
.hn-proc .hp-design-scroll { margin-top: 20px; overflow-x: auto; }
.hn-proc .hp-design-table { width: 100%; min-width: 760px; border-collapse: collapse; border-top: 1px solid var(--hn-amber); border-bottom: 1px solid var(--hn-amber); }
.hn-proc .hp-design-table th, .hn-proc .hp-design-table td { padding: 14px 4px; text-align: center; border-bottom: 1px solid rgba(246, 242, 236, .12); }
.hn-proc .hp-design-table thead th { font: italic 500 14px/1 "Lora", serif; color: var(--hn-amber); }
.hn-proc .hp-design-table thead th:first-child { font: 600 13px/1 var(--hn-serif); }
.hn-proc .hp-design-table tbody th { padding-right: 20px; font-size: 15px; font-weight: 600; text-align: left; white-space: nowrap; color: var(--hn-paper); }
.hn-proc .hp-design-table th:first-child { width: 150px; text-align: left; }
.hn-proc .hp-design-table td:nth-last-child(-n+3), .hn-proc .hp-design-table thead th:nth-last-child(-n+3) { background: rgba(246, 242, 236, .05); }
.hn-proc .hp-design i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.hn-proc .hp-design i.is-lo { border: 1.5px solid var(--hn-amber); }
.hn-proc .hp-design i.is-mid { border: 1.5px solid var(--hn-amber); background: linear-gradient(90deg, var(--hn-amber) 50%, transparent 50%); }
.hn-proc .hp-design i.is-hi { background: var(--hn-paper); border: 1.5px solid var(--hn-paper); }
.hn-proc .hp-design-note { margin-top: 16px; font-size: 15px; line-height: 1.7; color: var(--hn-ink-100); }


/* ---------- ③ 감각을 기록으로: 종이 바탕 ---------- */
.hn-proc .hp-record { background: var(--hn-paper); }
.hn-proc .hp-record-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(56px, 7vw, 120px); max-width: 1440px; margin: 0 auto; }
.hn-proc .hp-record-photo { aspect-ratio: 4 / 5; }
.hn-proc .hp-record-lead { margin-top: 24px; font-size: 17px; line-height: 1.8; color: var(--hn-ink-700); }
.hn-proc .hp-checks { margin-top: 56px; border-top: 1px solid var(--hn-ink); }
.hn-proc .hp-checks li { display: grid; grid-template-columns: 32px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--hn-ink-200); }
.hn-proc .hp-check { width: 32px; height: 32px; overflow: visible; }
.hn-proc .hp-check rect { fill: none; stroke: var(--hn-ink); stroke-width: 1.4; }
.hn-proc .hp-check path { fill: none; stroke: var(--hn-caramel); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hn-proc .hp-checks b { display: block; font-family: var(--hn-serif); font-size: 22px; line-height: 32px; font-weight: 600; letter-spacing: -.038em; }
.hn-proc .hp-checks b span { font: italic 500 18px/1 "Lora", serif; color: var(--hn-caramel); }
.hn-proc .hp-checks p { margin-top: 8px; font-size: 16px; line-height: 1.75; color: var(--hn-ink-700); }
/* 체크 표시가 하나씩 그어진다 */
.fl-reveal-on .hn-proc .hp-checks[data-fl-reveal]:not(.is-in) { opacity: 1; transform: none; }
.fl-reveal-on .hn-proc .hp-check path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease-out; }
.fl-reveal-on .hn-proc .hp-checks.is-in .hp-check path { stroke-dashoffset: 0; }
.fl-reveal-on .hn-proc .hp-checks.is-in li:nth-child(1) .hp-check path { transition-delay: .5s; }
.fl-reveal-on .hn-proc .hp-checks.is-in li:nth-child(2) .hp-check path { transition-delay: 1.1s; }
.fl-reveal-on .hn-proc .hp-checks.is-in li:nth-child(3) .hp-check path { transition-delay: 1.7s; }

/* ---------- ④ 자주 묻는 질문: 리넨 바탕 ---------- */
.hn-proc .hp-faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; max-width: 1440px; margin: 0 auto; }
.hn-proc .hp-faq-head .ab-h2 { margin-top: 8px; }
.hn-proc .hp-faq-list { border-top: 1px solid var(--hn-ink); }
.hn-proc .hp-qa { border-bottom: 1px solid var(--hn-ink-200); }
.hn-proc .hp-qa summary { display: grid; grid-template-columns: 36px 1fr 20px; align-items: center; gap: 12px; padding: 28px 0; cursor: pointer; list-style: none; }
.hn-proc .hp-qa summary::-webkit-details-marker { display: none; }
.hn-proc .hp-qa-q { font: italic 500 22px/1 "Lora", serif; color: var(--hn-caramel); }
.hn-proc .hp-qa-text { font-family: var(--hn-serif); font-size: 21px; line-height: 1.45; font-weight: 600; letter-spacing: -.035em; transition: color .3s; }
.hn-proc .hp-qa summary:hover .hp-qa-text { color: var(--hn-caramel); }
.hn-proc .hp-qa summary i { position: relative; width: 20px; height: 20px; }
.hn-proc .hp-qa summary i::before, .hn-proc .hp-qa summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 1.5px; background: var(--hn-ink); transition: transform .4s var(--hn-ease); }
.hn-proc .hp-qa summary i::after { transform: rotate(90deg); }
.hn-proc .hp-qa summary i { transition: transform .5s var(--hn-ease); }
.hn-proc .hp-qa[open]:not(.is-closing) summary i { transform: rotate(180deg); }
.hn-proc .hp-qa[open]:not(.is-closing) summary i::after { transform: rotate(0deg); }
.hn-proc .hp-qa[open]:not(.is-closing) .hp-qa-text { color: var(--hn-caramel); }
.hn-proc .hp-qa-a { overflow: hidden; }
.hn-proc .hp-qa p { padding: 0 32px 32px 48px; font-size: 16px; line-height: 1.85; color: var(--hn-ink-700); }
/* 질문이 한 줄씩 차례로 올라온다(펼치고 접는 움직임은 process.php 인라인 스크립트) */
.fl-reveal-on .hn-proc .hp-faq-list[data-fl-reveal]:not(.is-in) { opacity: 1; transform: none; }
.fl-reveal-on .hn-proc .hp-faq-list .hp-qa { transition: opacity .8s ease, transform .8s var(--hn-ease); }
.fl-reveal-on .hn-proc .hp-faq-list:not(.is-in) .hp-qa { opacity: 0; transform: translateY(32px); }
.fl-reveal-on .hn-proc .hp-faq-list .hp-qa:nth-child(2) { transition-delay: .12s; }
.fl-reveal-on .hn-proc .hp-faq-list .hp-qa:nth-child(3) { transition-delay: .24s; }
.fl-reveal-on .hn-proc .hp-faq-list .hp-qa:nth-child(4) { transition-delay: .36s; }
.fl-reveal-on .hn-proc .hp-faq-list .hp-qa:nth-child(5) { transition-delay: .48s; }

@media (max-width: 1024px) {
    .hn-proc .hp-open { padding-top: 96px; padding-bottom: 112px; }
    .hn-proc .hp-open-head { grid-template-columns: 1fr; gap: 32px; }
    .hn-proc .hp-open-desc { justify-self: start; }
    .hn-proc .hp-spec { margin-top: 80px; }
    .hn-proc .hp-table th, .hn-proc .hp-table td { padding: 16px 12px; }
    .hn-proc .hp-table-lv { width: auto; }
    .hn-proc .hp-rsm-in { grid-template-columns: 1fr; gap: 56px; }
    .hn-proc .hp-rsm-body { order: -1; }
    .hn-proc .hp-record-in { grid-template-columns: 1fr; gap: 56px; }
    .hn-proc .hp-record-photo { aspect-ratio: 16 / 10; }
    .hn-proc .hp-faq-in { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 767px) {
    .hn-proc .hp-open { padding-top: 72px; padding-bottom: 88px; background-size: 22px 22px; }
    .hn-proc .hp-open-title { font-size: 34px; }
    .hn-proc .hp-open-desc { font-size: 16px; }
    .hn-proc .hp-br { display: none; }
    .hn-proc .hp-spec { margin-top: 56px; }
    .hn-proc .hp-table thead { display: none; }
    .hn-proc .hp-table, .hn-proc .hp-table tbody, .hn-proc .hp-table tr { display: block; }
    .hn-proc .hp-table tr { display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--hn-ink-200); }
    .hn-proc .hp-table tr.is-group > * { border-top: 0; }
    .hn-proc .hp-table th, .hn-proc .hp-table td { display: block; width: auto; padding: 0; border: 0; }
    .hn-proc .hp-table .hp-table-group { grid-column: 1 / -1; margin: -16px 0 16px; padding: 10px 12px; font-size: 16px; }
    .hn-proc .hp-table-group small { display: inline; margin-left: 8px; }
    .hn-proc .hp-table-sym { grid-row: span 3; align-self: center; }
    .hn-proc .hp-table-name { font-size: 18px; }
    .hn-proc .hp-table td:not([class]) { margin-top: 4px; font-size: 15px; }
    .hn-proc .hp-table-lv { margin-top: 10px; }
    .hn-proc .hp-table-goal { display: none !important; }
    .hn-proc .hp-rsm-lead { font-size: 16px; }
    .hn-proc .hp-rsm-text { font-size: 15px; }
    .hn-proc .hp-chart { margin: 0 calc(var(--ab-gutter) * -1); padding: 24px 16px 16px; }
    .hn-proc .hp-chart text { font-size: 17px; }
    .hn-proc .hp-chart .hp-chart-axis { font-size: 18px; }
    .hn-proc .hp-design { margin-top: 72px; }
    .hn-proc .hp-design-key { gap: 14px; font-size: 13px; }
    .hn-proc .hp-record-photo { aspect-ratio: 4 / 3; }
    .hn-proc .hp-record-lead { font-size: 15px; }
    .hn-proc .hp-checks { margin-top: 40px; }
    .hn-proc .hp-checks li { gap: 16px; padding: 22px 0; }
    .hn-proc .hp-checks b { font-size: 19px; }
    .hn-proc .hp-checks p { font-size: 15px; }
    .hn-proc .hp-qa summary { grid-template-columns: 28px 1fr 18px; padding: 22px 0; }
    .hn-proc .hp-qa-text { font-size: 17px; }
    .hn-proc .hp-qa p { padding: 0 0 24px 40px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .hn-proc .hp-photo img { transform: none; }
    .hn-proc .hp-band, .hn-proc .hp-chart-opt, .hn-proc .hp-check path { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}