/* ===========================================================
   인터프로 상품안내 / 작업가이드 공용 스타일
   Figma 디자인 토큰 기준 (main_color #006BB9, Noto Sans CJK KR)
   =========================================================== */

:root{
  --main_color:#006bb9;
  --text_main:#525252;
  --line_color:#dee2e6;
  --white:#fff;

  /* 가이드 콜아웃 색상 (Figma 변수명 그대로) */
  --guide1:#ff9a00;   /* a 내지     */
  --guide2:#d952d0;   /* b 내지추가 */
  --guide3:#457ae4;   /* c 면지     */
  --guide4:#46b3bf;   /* d 간지     */

  --new_color:#ff5b59;  /* Figma 변수 '메인_new-color' — 생산 유의사항 강조/버튼 */

  --page-width:756px;
}

/* 좁은 화면 분기점은 디자인 폭(756px) 바로 아래인 755px 이다.
   주문폼 iframe 의 내부 폭이 764px 라서, 예전 값(800px)이면 데스크톱 폭인데도
   모바일 레이아웃으로 떨어졌다(인쇄용지 4열 → 2열). 756px 이 들어가는 폭이면
   데스크톱 레이아웃을 그대로 쓰도록 맞춘 값이니 함부로 올리지 말 것. */

*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  background:#fff;
  color:var(--text_main);
  font-family:"Noto Sans CJK KR","Noto Sans KR","Malgun Gothic",sans-serif;
  font-size:15px;
  line-height:1.6;
  letter-spacing:-0.02em;
  -webkit-text-size-adjust:100%;
}

img{display:block;max-width:100%;}

.page{
  width:var(--page-width);
  max-width:100%;
  margin:0 auto;
}

/* ── 상단 탭 ───────────────────────────────────────────── */
.tabs{
  display:flex;
  height:45px;
  border:1px solid var(--line_color);
}
.tabs a{
  flex:1 1 25%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  letter-spacing:-0.02em;
  color:var(--text_main);
  text-decoration:none;
  border-bottom:4px solid transparent;
}
.tabs a + a{border-left:1px solid var(--line_color);}
.tabs a.is-active{
  color:var(--main_color);
  border-bottom-color:var(--main_color);
}

/* ── 섹션 공통 ─────────────────────────────────────────── */
/* 원본(1:7081) y 간격: 구분선→제목 96 / 제목→내용 44 / 내용→구분선 92.
   첫 섹션(탭 바로 아래)만 45 로 좁다 */
.section{padding:96px 0 0;}
.tabs + .section{padding-top:45px;}
.section-title{
  margin:0 0 44px;
  font-size:25px;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-0.02em;
  text-align:center;
  color:var(--text_main);
}
.divider{
  height:1px;
  margin:92px 0 0;
  background:var(--line_color);
  border:0;
}

/* ── 알파벳 / 숫자 배지 ────────────────────────────────── */
.badge{
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:700;
  line-height:1.1;
  color:var(--white);
}
.badge-a{background:var(--guide1);}
.badge-b{background:var(--guide2);}
.badge-c{background:var(--guide3);}
.badge-d{background:var(--guide4);}
.badge-num{
  width:20px;height:20px;
  font-size:12px;
  background:var(--main_color);
}

/* ===========================================================
   상품안내 전용
   =========================================================== */

/* 다양한 용도 : 3열 그리드 (237², 열 22 · 행 46) */
.usage-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:46px 22px;
}
.usage-item figure{margin:0;}
.usage-item img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.usage-item figcaption{
  margin-top:11px;
  font-size:16px;font-weight:500;line-height:1.5;text-align:center;
}

/* 인쇄용지 비교 : 4열 */
.paper-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;}
.paper-item img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.paper-item .grade{margin-top:5px;font-size:16px;font-weight:500;line-height:1.5;text-align:center;}
.paper-item .name{margin-top:2px;font-size:15px;font-weight:350;line-height:1.6;text-align:center;}

/* 내지옵션 : 2×2 (사진 132², 열 24 · 행 63) — 배지 아래 14px 색상 핀 선 */
.inner-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:63px 24px;}
.inner-item{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:start;}
.inner-item img{width:132px;height:132px;object-fit:cover;}
.inner-item .head{display:flex;align-items:center;gap:8px;margin:0 0 15px -6px;}
.inner-item .head .badge{position:relative;}
.inner-item .head .badge::after{
  content:"";position:absolute;left:50%;top:100%;width:1px;height:14px;
  background:inherit;
}
.inner-item .name{font-size:16px;font-weight:500;line-height:1.5;}
.inner-item p{margin:0;font-size:15px;font-weight:350;line-height:1.6;}

/* 주문서 콜아웃 — 머리줄 42px, 본문 테두리 안에 캡처가 3~4px 여백을 두고 들어간다 */
.callout{margin-top:51px;}
.callout-head{
  display:flex;align-items:center;gap:16px;
  min-height:42px;padding:0 7px;
  border:1px solid currentColor;
  font-size:15px;line-height:1.6;
}
.callout-head .badge{color:var(--white);}
.callout-head strong{font-weight:700;}
.callout-shot{border:1px solid currentColor;border-top:0;padding:4px 2px;}
.callout-shot img{width:100%;}
.callout-a{color:var(--guide1);margin-top:49px;} .callout-a .callout-head{background:rgba(255,154,0,.05);}
.callout-b{color:var(--guide2);} .callout-b .callout-head{background:rgba(217,82,208,.05);}
.callout-c{color:var(--guide3);} .callout-c .callout-head{background:rgba(69,122,228,.05);}
.callout-d{color:var(--guide4);} .callout-d .callout-head{background:rgba(70,179,191,.05);}

/* a 콜아웃 아래 추가 버튼 3개 (177×33, 간격 17) — 왼쪽 끝에 배지가 반쯤 겹친다 */
.order-add{display:flex;justify-content:center;gap:17px;margin:12px 0 0;}
.order-add .btn{
  position:relative;width:177px;height:33px;
  display:flex;align-items:center;justify-content:center;
  background:#e9ebef;border:1px solid;
  font-size:14px;font-weight:350;letter-spacing:-0.02em;color:var(--text_main);
}
.order-add .btn .badge{position:absolute;left:-12px;top:50%;margin-top:-12px;}
.order-add .is-b{border-color:var(--guide2);}
.order-add .is-c{border-color:var(--guide3);}
.order-add .is-d{border-color:var(--guide4);}

/* 인쇄방법 (Figma 1:7081) — 옵셋(#FF3630)/디지털(#006BB9) 2열 비교.
   가운데 점선(지름 2 점, 6 간격)은 그리드 전체 높이를 가른다 */
.pm-grid{
  position:relative;
  display:grid;grid-template-columns:360px 360px;column-gap:36px;
  margin:3.5px 0 0;   /* .section-title 아래 44 + 3.5 = 원본 47.5 */
}
.pm-grid::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  background-image:radial-gradient(circle, var(--line_color) 1px, transparent 1.4px);
  background-size:2px 6px;background-repeat:repeat-y;
}
.pm-head{
  height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:500;letter-spacing:-0.02em;color:var(--text_main);
}
.pm-col.is-offset .pm-head{background:rgba(255,54,48,.05);}
.pm-col.is-digital .pm-head{background:rgba(0,107,185,.05);}
.pm-desc{
  margin:26px auto 0;font-size:15px;font-weight:350;line-height:22px;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);
}
.is-offset .pm-desc{max-width:330px;}
.is-digital .pm-desc{max-width:352px;}
.pm-order{
  margin:30px 0 0;font-size:16px;font-weight:500;line-height:1.2;
  letter-spacing:-0.02em;text-align:center;
}
.is-offset .pm-order{color:#ff3630;}
.is-digital .pm-order{color:var(--main_color);}
.pm-steps{list-style:none;margin:11px 0 0;padding:0;}
.pm-step{height:64px;border:1px solid;border-radius:9.5px;text-align:center;}
.is-offset .pm-step{border-color:#ff3630;}
.is-digital .pm-step{border-color:var(--main_color);}
.pm-step .lb{
  display:inline-flex;align-items:center;gap:10px;height:21px;padding:0 8px;
  border-radius:7px;margin-top:10.5px;
  font-size:14px;font-weight:500;letter-spacing:-0.02em;
}
.pm-step .lb b{font-size:13px;font-weight:700;}
.is-offset .pm-step .lb{background:#ffeaea;color:#ff3630;}
.is-digital .pm-step .lb{background:#e7f2fb;color:var(--main_color);}
.pm-step .tx{
  margin:7px 0 0;font-size:13px;font-weight:350;line-height:1.3;
  letter-spacing:-0.02em;color:var(--text_main);
}
.pm-arrow{height:37px;display:flex;align-items:center;justify-content:center;}
.pm-arrow span{
  width:16px;height:16px;border-radius:50%;background:rgba(82,82,82,.2);
  display:flex;align-items:center;justify-content:center;
}
.pm-arrow svg{width:11px;height:7px;display:block;}

/* ===========================================================
   작업가이드 전용
   =========================================================== */

.guide-lead{
  margin:0 0 8px;
  font-size:16px;font-weight:500;line-height:1.5;
  text-align:center;color:var(--main_color);
}
/* 하위 탭 (프로그램별 기본 체크 리스트 / 생산 유의사항) */
.g-subtabs{display:flex;justify-content:center;gap:30px;margin:22px 0 0;}
.g-subtabs a{
  flex:0 0 199px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line_color);border-radius:16px;
  font-size:14px;letter-spacing:-0.02em;
  color:var(--text_main);text-decoration:none;
}
.g-subtabs a.is-active{border-color:var(--main_color);color:var(--main_color);}

/* 프로그램 선택 아이콘 — 원본 아이콘 이미지에 라벨이 포함돼 있어
   위 47px(그래픽)만 남기고 잘라낸 뒤, 라벨은 HTML 텍스트로 표시한다 */
.g-progs{display:flex;justify-content:center;align-items:flex-start;gap:25px;margin:24px 0 0;}
.g-progs a{width:76px;text-decoration:none;color:var(--text_main);text-align:center;}
.g-progs a.is-wide{width:102px;}
.g-progs .ico{display:block;overflow:hidden;aspect-ratio:76 / 52;}
.g-progs a.is-wide .ico{aspect-ratio:102 / 52;}
.g-progs .ico img{display:block;width:100%;}
.g-progs .nm{display:block;margin-top:5px;font-size:13px;line-height:1.4;}
.g-progs a.is-active .nm{color:var(--main_color);font-weight:700;}

.guide-sub{
  margin:0 0 40px;
  font-size:15px;font-weight:350;line-height:1.6;
  text-align:center;
}

/* 섹션 제목 + 설명 */
.g-sec{padding:52px 0 0;}
.g-sec > h2{
  margin:0 0 16px;
  font-size:25px;font-weight:500;line-height:1.1;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);
}
.g-desc{
  margin:0 auto 28px;
  max-width:700px;
  font-size:15px;font-weight:350;line-height:1.6;
  text-align:center;
}
.g-desc .cmd{
  display:inline-block;
  margin-top:6px;
  color:var(--main_color);
  font-weight:500;
}

/* 도해 이미지 */
.g-fig{margin:0 0 28px;}
.g-fig img{width:100%;height:auto;}
.g-fig figcaption{
  margin-top:10px;
  font-size:14px;line-height:1.6;text-align:center;color:#8a8a8a;
}
.g-fig.is-narrow{max-width:460px;margin-left:auto;margin-right:auto;}
/* 원본 크기 유지 — Figma 노드를 1:1 로 캡처했으므로 이미지의 자연 크기가 곧 원본 크기다.
   페이지 폭(756)까지 늘리면 흐려지므로 늘리지 않고 가운데 정렬만 한다. */
.g-fig.is-orig{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;}
.g-fig.is-orig img{width:auto;max-width:100%;}

/* 도해 이미지에서 제목 영역을 잘라내기 위한 래퍼 (Figma 노드에 제목이 포함된 경우).
   폭이 줄어들면 이미지도 같이 줄어들므로 잘라낼 양은 반드시 '비율'로 지정한다.
   - 래퍼   : aspect-ratio = 756 / (원본높이 − 잘라낼높이)
   - 이미지 : translateY(−잘라낼높이 / 원본높이)  ← 자기 높이 기준 % 라 축소돼도 유지됨 */
.g-crop{overflow:hidden;margin:0 0 28px;width:100%;}
.g-crop img{display:block;width:100%;}

/* 좌우 비교 배치 */
.g-compare{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-bottom:28px;
}
.g-compare figure{margin:0;}
.g-compare img{width:100%;}
.g-compare figcaption{
  margin-top:10px;font-size:15px;font-weight:500;line-height:1.5;text-align:center;
}

/* 번호 안내 목록 */
.g-steps{
  list-style:none;margin:0 0 28px;padding:0;
  display:grid;gap:12px;
}
.g-steps li{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:10px;
  align-items:start;
  font-size:15px;line-height:1.6;
}
.g-steps .badge-num{margin-top:2px;}
.g-steps strong{display:block;font-weight:500;color:var(--text_main);}
.g-steps span{font-weight:350;}

/* 도해(좌) + 번호 안내(우) 2단 배치 — 원본이 좌우로 짝지어 놓은 섹션용.
   도해 폭 323px 은 Figma 원본 캡처 폭과 같다. */
.g-rows{margin:0 0 28px;display:grid;gap:28px;}
.g-rows .row{display:grid;grid-template-columns:323px minmax(0,1fr);gap:22px;align-items:start;}
.g-rows .row figure{margin:0;}
.g-rows .row figure img{width:100%;}
.g-rows .row .txt{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;}
.g-rows .row .txt .badge-num{margin-top:3px;}
.g-rows .row .txt strong{display:block;font-size:16px;font-weight:500;line-height:1.5;color:var(--text_main);}
.g-rows .row .txt p{margin:8px 0 0;font-size:15px;font-weight:350;line-height:1.6;}
.g-rows .row .txt .cmd{display:block;margin-top:8px;font-size:15px;color:var(--main_color);font-weight:500;line-height:1.6;}
.g-rows .row .txt .shot{margin-top:16px;}

/* Tip 박스 */
.g-tip{
  border:1px solid var(--line_color);
  border-radius:6px;
  padding:16px 18px;
  margin-bottom:28px;
}
.g-tip .tip-label{
  font-size:16px;font-weight:700;color:var(--main_color);
  margin-bottom:8px;
}
.g-tip dl{margin:0;display:grid;grid-template-columns:60px 1fr;gap:4px 10px;}
.g-tip dt{font-weight:500;}
.g-tip dd{margin:0;font-weight:350;}
.g-tip p{margin:0;font-weight:350;}

/* 도해 아래 보충 설명 — 원본은 상자·강조 없이 가운데 정렬한 본문 그대로다.
   (주황 박스인 .g-note 와 다르므로 혼동하지 말 것) */
.g-fine{
  margin:24px 0 28px;
  font-size:15px;font-weight:350;line-height:1.6;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);
}
.g-fine .blank{display:block;height:1.6em;}

/* 주의 문구 */
.g-note{
  margin:0 0 28px;
  padding:12px 16px;
  border-left:3px solid var(--guide1);
  background:rgba(255,154,0,.05);
  font-size:15px;font-weight:350;line-height:1.6;
}

/* 목차 */
.g-toc{
  border:1px solid var(--line_color);
  border-radius:6px;
  padding:18px 20px;
  margin-bottom:8px;
}
.g-toc ol{
  margin:0;padding-left:20px;
  columns:2;column-gap:24px;
  font-size:14px;line-height:1.9;
}
.g-toc a{color:var(--text_main);text-decoration:none;}
.g-toc a:hover{color:var(--main_color);text-decoration:underline;}

/* ===========================================================
   작업가이드 — Illustrator 리뉴얼 (Figma 1:7361, 폭 756)
   벡터 도해·스크린샷은 assets/ai/ 에 2배 해상도 캡처로 담았고
   본문 텍스트만 HTML 로 옮겼다. 섹션 리듬: 구분선→제목 96 /
   제목→설명 28 / 설명→내용 40~60
   =========================================================== */

/* 서브탭 필 (199×32) — 활성 파랑 채움 */
.ai-subtabs{display:flex;justify-content:center;gap:30px;margin:49px 0 0;}
.ai-subtabs a{
  width:199px;height:32px;border-radius:16px;background:#f5f5f5;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;letter-spacing:-0.02em;color:var(--text_main);text-decoration:none;
}
.ai-subtabs a.is-active{background:var(--main_color);color:#fff;}

/* 프로그램 아이콘 줄 (47px 아이콘, 피치 101) — 비활성은 원본처럼
   아이콘+라벨 전체를 opacity 0.3 으로 흐린다 */
.ai-progs{display:flex;justify-content:center;gap:54px;margin:38px 0 0;}
.ai-progs a{text-decoration:none;text-align:center;opacity:.3;}
.ai-progs a.is-active{opacity:1;}
.ai-progs .ico{display:block;height:47px;margin:0 auto;}
.ai-progs .ico img{height:47px;width:auto;display:block;margin:0 auto;}
.ai-progs .nm{display:block;margin-top:8px;font-size:14px;font-weight:350;color:var(--text_main);}
.ai-progs a.is-active .nm{font-weight:500;}

.ai-title{margin:70px 0 0;font-size:25px;font-weight:500;line-height:1.1;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);}
.ai-lead{margin:39px 0 0;font-size:15px;font-weight:350;line-height:24px;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);}

/* 섹션 공통 */
.ai-sec{padding:96px 0 0;}
.ai-sec > h2{margin:0;font-size:25px;font-weight:500;line-height:1.1;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);}
.ai-desc{margin:28px 0 0;font-size:15px;font-weight:350;line-height:24px;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);}

/* 번호 항목 (주황 22×22 r3 배지) */
.ai-item .hd{display:flex;align-items:flex-start;gap:13px;}
.ai-item .no{
  flex:0 0 22px;width:22px;height:22px;border-radius:3px;background:var(--guide1);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;
}
.ai-item h3{margin:1px 0 0;font-size:16px;font-weight:700;line-height:1.35;
  letter-spacing:-0.02em;color:var(--text_main);}
.ai-item p{margin:11px 0 0;font-size:15px;font-weight:350;line-height:24px;
  letter-spacing:-0.02em;color:var(--text_main);}

/* 대지 만들기 — 좌 캡처 315 + 우 항목, 행 간격 37 */
.ai-rows{display:grid;row-gap:37px;margin:57px 0 0;}
.ai-row{display:grid;grid-template-columns:315px minmax(0,1fr);column-gap:30px;align-items:start;}
.ai-row > img{width:100%;height:auto;display:block;}
.ai-row .shot{width:100%;height:auto;display:block;}
.ai-row .calc{display:block;width:100%;height:auto;margin:8px 0 0;}

/* Tip 태그 + 연분홍 상자 */
.ai-tag{
  display:inline-flex;align-items:center;height:21px;padding:0 10px;
  background:var(--new_color);border-radius:0 8px 8px 0;
  font-size:12px;font-weight:700;color:#fff;
}
.ai-tipbox{margin:4px 0 0;background:#fff1f1;padding:9px 12px;}
.ai-tipbox p{margin:0;font-size:15px;font-weight:350;line-height:25px;
  letter-spacing:-0.02em;color:var(--text_main);}
.ai-tipbox b{font-weight:700;}

/* 제본 표지 도해 2열 + 가운데 점선 */
.ai-pill{
  width:170px;height:24px;margin:0 auto;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:500;letter-spacing:-0.02em;color:#fff;
}
.ai-pill.is-blue{background:var(--main_color);}
.ai-pill.is-red{background:var(--new_color);}
.ai-bind{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:71px 0 0;}
.ai-bind::before{
  content:"";position:absolute;left:50%;top:-7px;bottom:0;width:2px;margin-left:-1px;
  background-image:radial-gradient(circle, var(--line_color) 1px, transparent 1.4px);
  background-size:2px 6px;background-repeat:repeat-y;
}
.ai-bind .col img{display:block;margin:31px 0 0;width:94.2%;height:auto;}
.ai-bind .col.is-r img{margin-left:auto;}

/* Tip 밴드 (연분홍 전폭) */
.ai-tipband{position:relative;margin:82px 0 0;background:#fff1f1;padding:11px 0 20px;}
.ai-tipband .ai-tag{position:absolute;left:0;top:-19px;}
.ai-tipband img{display:block;width:100%;height:auto;}

/* 아트보드 안내 (패널 + 페이지 도해) */
.ai-boards{display:flex;gap:43px;margin:44px 0 0;padding-left:95px;}
.ai-boards img{display:block;height:auto;}

/* 내지 여백 도해 + 펼침 사진 */
.ai-inner{display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:4px;
  margin:12px 0 0;align-items:start;}
.ai-inner .diag{margin:33px 0 0 10px;width:340px;}
.ai-inner .photo{width:402px;justify-self:end;}
.ai-inner img{display:block;width:100%;height:auto;}

/* 이미지 나란히 + 캡션 + O/X 마크 */
.ai-pair{display:flex;justify-content:space-between;align-items:flex-start;}
.ai-pair figure{margin:0;text-align:center;}
.ai-pair img{display:block;margin:0 auto;height:auto;}
.ai-cap{margin:8px 0 0;font-size:15px;font-weight:350;line-height:24px;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);}
.ai-cap.is-b{font-weight:700;font-size:16px;}
.ai-mark{display:flex;justify-content:center;margin:10px 0 0;}
.ai-mark svg{width:26px;height:26px;display:block;}

/* 회색/연분홍 전폭 밴드 */
.ai-band{margin:28px 0 0;background:#f3f3f3;}

/* 연결 패널 밴드 내부 (패널 + 번호 항목) */
.ai-links{display:grid;grid-template-columns:290px minmax(0,1fr);column-gap:35px;
  padding:0 0 32px 55px;align-items:start;}
.ai-links .items{display:grid;row-gap:24px;margin:7px 0 0;}
.ai-links img{display:block;width:100%;height:auto;}

/* 레스터화 패널 — 항목을 원본 y 좌표에 맞춰 절대 배치 */
.ai-raster{position:relative;margin:81px 0 0;min-height:312px;}
.ai-raster > img{display:block;width:400px;height:auto;}
.ai-raster .ai-item{position:absolute;left:404px;right:0;}
.ai-raster .ai-item.i1{top:10px;}
.ai-raster .ai-item.i2{top:41px;}
.ai-raster .ai-item.i3{top:275px;}

/* 투명도 병합 패널 + 항목 */
.ai-trans{display:grid;grid-template-columns:446px minmax(0,1fr);column-gap:3px;
  margin:40px 0 0;align-items:start;}
.ai-trans > img{display:block;width:100%;height:auto;}
.ai-trans .ai-item{margin:45px 0 0;}

/* 오버프린트 예시 2×2 (361×265, 열 34 · 행 54) */
.ai-ops{display:grid;grid-template-columns:repeat(2,361px);gap:54px 34px;margin:69px 0 0;}
.ai-ops figure{margin:0;}
.ai-ops img{display:block;width:100%;height:auto;}
.ai-ops .t{margin:24px 0 0;font-size:16px;font-weight:700;line-height:1.35;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);}
.ai-ops p{margin:8px 0 0;font-size:15px;font-weight:350;line-height:21px;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);}

/* 오버프린트 작업화면 + 특성 패널 한 줄 (Illustrator·InDesign 공통) */
.ai-oprow{display:flex;justify-content:space-between;align-items:flex-start;margin:57px 0 0;}
.ai-oprow img{display:block;}
.ai-oprow .shot{width:450px;}
.ai-oprow .panel{width:251px;margin-top:-9px;}

/* 클리핑마스크 전/후 한 장 — 원본은 좌우 45px 안쪽으로 들여 놓았다 */
.ai-cliprow{display:block;width:642px;max-width:100%;margin:29px 0 0 45px;}

/* 별색 — 좌 패널 + 우 설명 블록 */
.ai-spot{display:grid;grid-template-columns:290px minmax(0,1fr);column-gap:3px;
  margin:59px 0 0;align-items:start;}
.ai-spot img{display:block;width:100%;height:auto;}
.ai-spot .blocks{display:grid;row-gap:20px;}
.ai-spot h3{margin:0;font-size:15px;font-weight:700;line-height:24px;
  letter-spacing:-0.02em;color:var(--text_main);}
.ai-spot p{margin:0;font-size:15px;font-weight:350;line-height:24px;
  letter-spacing:-0.02em;color:var(--text_main);}
.ai-spot-note{margin:16px 0 0 150px;font-size:15px;font-weight:350;line-height:24px;
  letter-spacing:-0.02em;color:var(--text_main);}

/* 2열 도해 + 캡션 (작업/재단선) */
.ai-guides{display:grid;grid-template-columns:355px minmax(0,1fr);margin:44px 0 0;align-items:start;}
.ai-guides figure{margin:0;text-align:center;}
.ai-guides img{display:block;height:auto;}

/* UV/박 3열 이미지 + 캡션 */
.ai-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:21px 0 0;}
.ai-trio img{display:block;width:100%;height:auto;}
.ai-trio figure{margin:0;}
.ai-trio figcaption{margin:12px 0 0;font-size:15px;font-weight:350;line-height:1.6;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);}
.ai-brk{margin:76px 0 0;font-size:16px;font-weight:700;line-height:1.35;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);}
.ai-brk + .ai-desc{margin-top:12px;}

/* 스코딕스 주의사항 밴드 */
.ai-warnband{margin:30px 0 0;background:#f3f3f3;padding:25px 0 27px;}
.ai-warnband h3{margin:0;font-size:16px;font-weight:700;line-height:1.35;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);}
.ai-warnband p{margin:10px 0 0;font-size:15px;font-weight:350;line-height:24px;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);}

/* PDF 만들기 — 좌 캡처 + 우 체크 항목 */
.ai-pdf{display:grid;grid-template-columns:465px minmax(0,1fr);column-gap:16px;
  margin:26px 0 0;align-items:start;}
.ai-pdf > img{display:block;width:100%;height:auto;}
.ai-pdf .items{display:grid;row-gap:22px;margin:47px 0 0;}

/* PDF 순서 확인 — 좌(무선 2열) + 우(중철 1열), 가운데 점선 */
.ai-pdfseq{position:relative;display:grid;grid-template-columns:495px minmax(0,1fr);
  margin:108px 0 0;}
.ai-pdfseq::before{
  content:"";position:absolute;left:501px;top:-24px;bottom:120px;width:2px;
  background-image:radial-gradient(circle, var(--line_color) 1px, transparent 1.4px);
  background-size:2px 6px;background-repeat:repeat-y;
}
/* align-items 기본값(stretch)이면 짧은 열 이미지가 긴 열 높이로 늘어나므로 반드시 flex-start */
.ai-pdfseq .imgs{display:flex;align-items:flex-start;gap:5px;margin:39px 0 0;}
.ai-pdfseq .imgs img{display:block;height:auto;flex:0 0 auto;}
.ai-pdfseq .col-r .imgs{justify-content:flex-end;}
.ai-pdfseq .ai-pill{width:210px;}

/* ── InDesign 페이지 전용 (Figma 134:7) — 포인트 컬러 #FF3366 ── */
.pg-id .ai-item .no{background:#ff3366;}

/* ── Photoshop 페이지 전용 (Figma 142:1514) — 포인트 컬러 #268AD3 ── */
.pg-ps .ai-item .no{background:#268ad3;}

/* 페이지 마주보기 2열 (점선 x423) */
.id-facing{position:relative;display:grid;grid-template-columns:423px minmax(0,1fr);
  margin:87px 0 0;}
.id-facing::before{
  content:"";position:absolute;left:423px;top:0;bottom:0;width:2px;
  background-image:radial-gradient(circle, var(--line_color) 1px, transparent 1.4px);
  background-size:2px 6px;background-repeat:repeat-y;
}
.id-facing figure{margin:0;text-align:center;}
.id-facing img{display:block;}

/* PDF 도련 안내 — 고래 2열 (점선 x379) */
.id-whales{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:64px 0 0;}
.id-whales::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  background-image:radial-gradient(circle, var(--line_color) 1px, transparent 1.4px);
  background-size:2px 6px;background-repeat:repeat-y;
}
.id-whales img{display:block;}
.id-whales .cap{margin:18px 0 0;font-size:15px;font-weight:350;line-height:24px;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);}

/* 화면표시성능 3종 비교 */
.id-disp{display:flex;justify-content:center;gap:60px;margin:43px 0 0;}
.id-disp figure{margin:0;text-align:center;width:200px;}
.id-disp img{display:block;margin:0 auto;}
.id-disp .t{margin:14px 0 0;font-size:16px;font-weight:700;line-height:1.35;
  letter-spacing:-0.02em;color:var(--text_main);}
.id-disp p{margin:8px 0 0;font-size:15px;font-weight:350;line-height:21px;
  letter-spacing:-0.02em;color:var(--text_main);}
.id-disp .key{margin:9px 0 0;font-size:13px;font-weight:350;letter-spacing:-0.02em;
  color:var(--text_main);}

/* 파란 강조 바 + 회색 라운드 박스 */
.id-bluebar{
  margin:35px auto 0;width:590px;max-width:100%;height:30px;border-radius:5px;
  background:#f4f5f7;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:500;letter-spacing:-0.02em;color:var(--main_color);
}
.id-graybox{
  margin:21px auto 0;width:590px;max-width:100%;border-radius:10px;
  background:#f4f5f7;padding:11px 15px 20px;
}
.id-graybox img{display:block;width:100%;height:auto;}
.id-graybox p{margin:16px 0 0;font-size:14px;font-weight:350;line-height:1.6;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);}
.id-graybox .key{margin:5px 0 0;font-size:13px;}

/* 별색/PDF — 좌 캡처 + 우 설명 행 */
.id-row{display:grid;grid-template-columns:445px minmax(0,1fr);column-gap:13px;
  align-items:start;}
.id-row > img{display:block;width:100%;height:auto;}
.id-row h3{margin:0;font-size:15px;font-weight:700;line-height:24px;
  letter-spacing:-0.02em;color:var(--text_main);}
.id-row p{margin:0;font-size:15px;font-weight:350;line-height:24px;
  letter-spacing:-0.02em;color:var(--text_main);}

/* PDF 만들기 — 좌 캡처 + 우 번호 항목 절대 배치 */
.id-pdfrow{position:relative;}
.id-pdfrow > img{display:block;}
.id-pdfrow .ai-item{position:absolute;left:413px;right:0;}

@media (max-width:755px){
  .id-facing,.id-whales{grid-template-columns:1fr;row-gap:40px;}
  .id-facing::before,.id-whales::before{display:none;}
  .id-disp{flex-wrap:wrap;gap:24px;}
  .id-row{grid-template-columns:1fr;row-gap:16px;}
  .id-pdfrow > img{width:100%;}
  .id-pdfrow .ai-item{position:static;margin-top:14px;}
}

@media (max-width:755px){
  .ai-oprow{flex-direction:column;align-items:center;gap:20px;}
  .ai-oprow .shot,.ai-oprow .panel{width:100%;max-width:450px;margin-top:0;}
  .ai-cliprow{margin-left:0;}
  .ai-progs{flex-wrap:wrap;gap:20px;}
  .ai-row,.ai-links,.ai-trans,.ai-spot,.ai-guides,.ai-pdf{grid-template-columns:1fr;row-gap:20px;}
  .ai-bind{grid-template-columns:1fr;row-gap:40px;}
  .ai-bind::before{display:none;}
  .ai-bind .col img{width:100%;margin-left:0;}
  .ai-boards{padding-left:0;flex-wrap:wrap;}
  .ai-inner{grid-template-columns:1fr;row-gap:20px;}
  .ai-inner .diag,.ai-inner .photo{margin-left:0;width:100%;justify-self:start;}
  .ai-pair{flex-direction:column;gap:28px;align-items:center;}
  .ai-ops{grid-template-columns:1fr;gap:40px;}
  .ai-raster{min-height:0;}
  .ai-raster > img{width:100%;}
  .ai-raster .ai-item{position:static;margin-top:16px;}
  .ai-trio{grid-template-columns:1fr;}
  .ai-pdfseq{grid-template-columns:1fr;row-gap:60px;}
  .ai-pdfseq::before{display:none;}
  .ai-pdfseq .imgs{flex-wrap:wrap;}
  .ai-spot-note{margin-left:0;}

  /* ── 인라인 style 되돌리기 ───────────────────────────────
     작업가이드 페이지들은 원본 좌표를 맞추려고 요소마다 인라인 style 로
     고정 그리드폭·좌측여백·절대위치를 줬다. 인라인은 미디어쿼리보다 세서
     좁은 화면에서도 그대로 남아 가로 스크롤을 만든다 — 여기서만 풀어 준다 */
  .ai-row,.id-row,.id-pdfrow,.ai-inner,.ai-links,.ai-trans,.ai-spot,
  .ai-pdf,.ai-pdfseq,.ai-guides,.id-facing,.id-whales{
    grid-template-columns:1fr !important;
  }
  .ai-sec img[style],.ai-sec figure[style]{margin-left:0 !important;margin-right:0 !important;}
  .ai-sec figure[style]{width:auto !important;}
  .id-pdfrow .ai-item[style]{position:static !important;top:auto !important;margin-top:14px;}
}

/* ===========================================================
   합본 페이지 (index.html) — 20개 가이드를 탭으로 전환
   _build/build.js 가 생성한다. 원본 페이지들은 그대로 두고
   본문만 .gv-panel 로 옮겨 담기 때문에 아래 몇 가지만 보정한다.
   =========================================================== */

.gv-panel[hidden]{display:none;}
.gv-off{display:none !important;}

/* 원본에서는 .tabs 바로 다음 형제였던 첫 섹션이 합본에서는 패널 안으로 들어가
   `.tabs + .section` 선택자가 닿지 않는다 — 같은 여백을 여기서 준다 */
.gv-panel > .section:first-child{padding-top:45px;}

/* 원본 생산 유의사항 페이지들이 인라인으로 주던 값 */
#gv .pn-tabs{margin-top:44px;}

.gv-foot{height:80px;}
.gv-empty{
  padding:160px 0;text-align:center;
  font-size:15px;font-weight:350;color:var(--text_main);
}

/* ===========================================================
   좁은 화면 대응
   =========================================================== */
@media (max-width:755px){
  .page{width:100%;padding:0 12px;}

  .usage-grid{gap:36px 12px;}
  .paper-grid{grid-template-columns:repeat(2,1fr);gap:24px 12px;}
  .inner-grid{grid-template-columns:1fr;gap:28px;}
  .pm-grid{grid-template-columns:1fr;row-gap:40px;}
  .pm-grid::before{display:none;}
  .order-add{flex-direction:column;align-items:center;gap:14px;}

  .g-subtabs{gap:10px;}
  .g-subtabs a{flex:1 1 0;min-width:0;font-size:12px;}
  .g-progs{flex-wrap:wrap;gap:16px;}

  .g-rows .row{grid-template-columns:1fr;gap:14px;}
  .g-compare{grid-template-columns:1fr;gap:28px;}
  .g-toc ol{columns:1;}

  .section-title,.method h3,.g-sec > h2{font-size:21px;}
  .tabs a{font-size:13px;}
}

/* ===========================================================
   생산 유의사항 전용 (prodution_notes_*) — 페이지 폭 756 기준
   =========================================================== */
/* ===========================================================
   생산 유의사항 전용 — Figma prodution_notes_1_dbook (202:6077)
   페이지 폭 756 기준으로 원본 좌표를 그대로 옮겼다.
   =========================================================== */

/* 유의사항 8개 탭 : 94px 씩, 활성 탭만 검정 글자 + 2px 밑줄 */
.pn-tabs{display:flex;margin:24px 0 0;border-bottom:1px solid var(--line_color);}
.pn-tabs a{
  flex:0 0 94px;height:28px;
  display:flex;align-items:flex-start;justify-content:center;
  font-size:14px;letter-spacing:-0.02em;line-height:1.2;
  color:#4d4d4d;text-decoration:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.pn-tabs a.is-active{color:#000;border-bottom-color:#000;}

/* 섹션 제목 / 설명 — 원본 y 좌표 간격을 그대로 재현 */
.pn-h2{
  margin:0;font-size:25px;font-weight:500;line-height:1.1;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);
}
.pn-lead{
  margin:22px 0 0;font-size:15px;font-weight:350;line-height:1.6;
  text-align:center;color:var(--text_main);
}
.pn-lead.is-first{margin-top:34px;}
.pn-rule{height:1px;margin:0;background:var(--line_color);border:0;}

/* 안내 상자 — 5px #dee2e6 테두리, 가운데 1px 세로 구분선(x378, 높이 140) */
.pn-cal{
  margin:85px 0 0;
  display:grid;grid-template-columns:1fr 1fr;
  border:5px solid var(--line_color);
}
.pn-cal .col{display:grid;grid-template-columns:76px minmax(0,1fr);padding:11px 0 0;}
.pn-cal .col.is-left{padding-left:14px;column-gap:16px;}
.pn-cal .col.is-right{padding-left:17px;column-gap:24px;position:relative;}
.pn-cal .col.is-right::before{
  content:"";position:absolute;left:0;top:12px;width:1px;height:140px;
  background:var(--line_color);
}
.pn-cal .key{
  margin:0;font-size:16px;font-weight:400;line-height:1.35;letter-spacing:-0.02em;
}
.pn-cal .key.is-blue{color:#1279bd;}
.pn-cal .key.is-red{color:var(--new_color);text-decoration:underline;}
.pn-cal .body p{margin:0;font-size:15px;font-weight:350;line-height:1.6;max-width:230px;}
.pn-cal .warn{margin:6px 0 0 !important;max-width:256px !important;
  font-size:13px;line-height:1.42;color:var(--new_color);}
.pn-cal .btns{display:flex;gap:9px;margin-top:5px;}
.pn-cal .btn{
  height:22px;padding:0 7px 0 8px;
  display:inline-flex;align-items:center;
  border:1px solid var(--new_color);
  font-size:12px;font-weight:350;letter-spacing:-0.02em;
  color:var(--new_color);text-decoration:none;
}

/* 2단 도해 — 원본 x 좌표/간격 그대로 */
.pn-pair{display:grid;align-items:start;}
.pn-pair img{width:100%;height:auto;}
.pn-pair.is-ink{grid-template-columns:344px 348px;column-gap:61px;margin:60px 0 0 3px;}
.pn-pair.is-cmp{grid-template-columns:312px 325px;column-gap:68px;margin:59px 0 0 42px;}

.pn-band{margin:78px 0 0;}
.pn-band img{width:100%;height:auto;}

/* 마무리 안내 상자 — 1px #525252 */
.pn-box{
  margin:79px 0 0;padding:23px 0;
  border:1px solid var(--text_main);
  font-size:15px;font-weight:350;line-height:1.6;
  text-align:center;color:var(--text_main);
}

@media (max-width:755px){
  .pn-tabs{flex-wrap:wrap;border-bottom:0;}
  .pn-tabs a{flex:1 1 25%;font-size:12px;}
  .pn-cal{grid-template-columns:1fr;}
  .pn-cal .col.is-right{padding-left:14px;border-top:1px solid var(--line_color);padding-top:16px;margin-top:12px;}
  .pn-cal .col.is-right::before{display:none;}
  .pn-cal .body p,.pn-cal .warn{max-width:none !important;}
  .pn-pair.is-ink,.pn-pair.is-cmp{grid-template-columns:1fr;row-gap:24px;margin-left:0;margin-right:0;}
}

/* 체크마크 배지 — "이렇게 해결 할 수 있어요." (157:435, 188×22) */
.pn-badge{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:49px 0 0;
}
.pn-badge img{width:20px;height:15px;}
.pn-badge span{
  font-size:16px;font-weight:400;line-height:1.35;letter-spacing:-0.02em;
  color:var(--new_color);text-decoration:underline;
}

/* 도해 아래 캡션 — 원본이 이미지 중앙이 아닌 고유 x 좌표에 놓여 있어 그대로 재현 */
.pn-caps{position:relative;height:24px;margin:14px 0 0;}
.pn-caps span{
  position:absolute;top:0;
  font-size:15px;font-weight:350;line-height:1.6;
  text-align:center;color:var(--text_main);white-space:nowrap;
}
.pn-pair.is-pin{grid-template-columns:314px 312px;column-gap:71px;margin:63px 0 0 40px;}

@media (max-width:755px){
  .pn-pair.is-pin{grid-template-columns:1fr;row-gap:24px;margin-left:0;}
  .pn-caps{position:static;height:auto;display:grid;gap:8px;text-align:center;}
  .pn-caps span{position:static;left:auto !important;width:auto !important;}
}

/* ===========================================================
   생산 유의사항 — 후가공 오류 (Figma prodution_notes_4 / 202:6208)
   페이지 폭 756 기준. 도해·카드는 원본 좌표를 % 로 환산해 두었으므로
   컨테이너가 줄어들면 내부 요소도 같은 비율로 함께 줄어든다.
   =========================================================== */

/* 이 프레임만 페이지 제목이 검정(#000)이다 — 섹션 제목은 그대로 --text_main */
.pn-h2.is-page{color:#000;}

/* 재단 사진 2컷 (155:? → 202:6178 / 202:6179) */
.pn-cuts{
  display:grid;grid-template-columns:repeat(2,360.603px);column-gap:34.794px;
  margin:58px 0 0;
}
.pn-cuts img{width:100%;height:auto;}

/* 재단선 도해(좌 360.653) + 설명(우) */
.pn-trim{
  display:grid;grid-template-columns:360.653px minmax(0,1fr);column-gap:34.744px;
  margin:78px 0 0;align-items:start;
}
.pn-trim p{margin:0;font-size:15px;font-weight:350;line-height:1.6;color:var(--text_main);}
.pn-trim p.is-warn{margin-top:12px;color:var(--new_color);}
.pn-trim p.is-warn .in{padding-left:8px;}   /* 원본의 둘째 줄 들여쓰기 */

/* 도해 — 좌상단 모서리만 보이는 페이지 모형 (오른쪽·아래는 잘려 나간다) */
.pn-diag{
  position:relative;overflow:hidden;
  background:#e9ecef;aspect-ratio:360.653 / 264.692;
}
.pn-diag span{position:absolute;display:block;}
.pn-diag .r-work{left:21.156%;top:35.774%;width:78.746%;height:64.226%;
  background:#ffd175;border-left:1px solid #e60012;border-top:1px solid #e60012;}
.pn-diag .r-cut {left:25.709%;top:42.161%;width:74.194%;height:57.839%;
  background:#ffd175;border-left:1px solid #000;border-top:1px solid #000;}
.pn-diag .r-safe{left:35.055%;top:54.991%;width:64.848%;height:45.009%;
  background:#ffd175;border-left:1.5px dashed #189e49;border-top:1.5px dashed #189e49;}
.pn-diag .logo{left:36.104%;top:56.348%;width:62.109%;height:20.724%;}
.pn-diag .logo img{width:100%;height:100%;}

/* 지시선 라벨 + 세로 지시선(끝에 5.3px 점) */
.pn-diag .lb{font-size:15px;font-weight:500;line-height:1.3;letter-spacing:-0.02em;white-space:nowrap;}
.pn-diag .lb-work{left:20.082%;top:3.401%;color:#e60012;}
.pn-diag .lb-cut {left:35.055%;top:11.712%;color:#000;}
.pn-diag .lb-safe{left:50.028%;top:20.023%;color:#189e49;}
.pn-diag .ld{width:1px;}
.pn-diag .ld::after{
  content:"";position:absolute;left:50%;bottom:0;width:5.333px;height:5.333px;
  margin:0 0 -2.667px -2.667px;border-radius:50%;background:inherit;
}
.pn-diag .ld-work{left:22.023%;top:11.712%;height:24.194%;background:#e60012;}
.pn-diag .ld-cut {left:36.703%;top:20.023%;height:22.138%;background:#000;}
.pn-diag .ld-safe{left:52.865%;top:28.125%;height:26.866%;background:#189e49;}

/* 오류 사례 카드 3장 (240×345.2, 간격 18) */
.pn-cards{
  display:grid;grid-template-columns:repeat(3,240px);column-gap:18px;
  margin:17.5px 0 0;
}
.pn-card{position:relative;overflow:hidden;background:#e9ecef;aspect-ratio:240 / 345.199;}
.pn-card span{position:absolute;display:block;}
.pn-card img{width:100%;height:100%;}
.pn-card .warn {left:0;top:0;width:10.318%;height:7.173%;}
.pn-card .arrow{top:43.552%;width:12.083%;height:8.401%;}
.pn-card .zoom {left:22.917%;top:56.091%;width:54.167%;height:37.659%;}
.pn-card .r-work{left:10.031%;top:7.571%;width:79.938%;height:33.008%;
  border-left:1px solid #e60012;border-top:1px solid #e60012;}
.pn-card .r-cut {left:14.847%;top:10.674%;width:75.122%;height:29.883%;
  border-left:1px solid #000;border-top:1px solid #000;}
.pn-card .r-safe{left:24.442%;top:17.35%;width:65.527%;height:23.207%;
  border-left:1.5px dashed #189e49;border-top:1.5px dashed #189e49;}
.pn-card .is-fill {background:#ffd175;}
.pn-card .is-white{background:#fff;}
.pn-card .logo{width:62.929%;height:10.715%;}

/* ① 재단선에 걸친 텍스트 */
.pn-card.c1 .logo {left:14.847%;top:10.674%;}
.pn-card.c1 .arrow{left:43.958%;}
/* ② 작업사이즈까지 채우지 않은 배경 */
.pn-card.c2 .logo {left:25.45%;top:18.009%;}
.pn-card.c2 .arrow{left:46.366%;}
/* ③ 여유 없는 테두리 */
.pn-card.c3 .r-box{left:28.355%;top:19.07%;width:61.405%;height:21.508%;background:#ffd175;}
.pn-card.c3 .logo {left:31.558%;top:21.791%;width:55%;height:9.365%;}
.pn-card.c3 .arrow{left:43.958%;}

/* 카드 아래 설명 — 원본 x 좌표 그대로 */
.pn-cardcaps{position:relative;height:63px;margin:10px 0 0;}
.pn-cardcaps span{
  position:absolute;top:0;
  font-size:13px;font-weight:350;line-height:1.6;letter-spacing:-0.02em;
  text-align:center;color:var(--text_main);
  /* 원본이 nowrap 이라 줄나눔은 <br> 로만 준다. 폭이 모자라 자동 줄바꿈되면
     원본 3줄이 4줄로 늘어나므로 데스크톱에서는 막아 둔다 (좁은 화면은 아래 해제) */
  white-space:nowrap;
}

/* 전폭 도해 */
.pn-shot{margin:58px 0 0;}
.pn-shot img{width:100%;height:auto;}

/* 디지털 부분 UV / 디지털박 — 설명 한 줄이 도해 중간 여백에 겹쳐 놓여 있다 */
.pn-uv{position:relative;margin:66px 0 0;}
.pn-uv img{width:100%;height:auto;}
.pn-uv span{
  position:absolute;top:39.514%;
  font-size:15px;font-weight:350;line-height:1.6;letter-spacing:-0.02em;
  text-align:center;color:var(--text_main);white-space:nowrap;
}

@media (max-width:755px){
  .pn-cuts{grid-template-columns:1fr;row-gap:24px;}
  .pn-trim{grid-template-columns:1fr;row-gap:24px;}
  .pn-cards{grid-template-columns:1fr;row-gap:24px;}
  .pn-cardcaps{position:static;height:auto;display:grid;gap:10px;text-align:center;}
  .pn-cardcaps span{position:static;left:auto !important;width:auto !important;white-space:normal;}
  .pn-uv span{position:static;display:block;margin:8px 0 0;left:auto !important;width:auto !important;
    white-space:normal;}
}

/* ===========================================================
   생산 유의사항 — 고스트 현상 (Figma prodution_notes_5 / 202:6210)
   =========================================================== */

/* 2단 도해 (343×238, 간격 70) */
.pn-ghost{display:grid;grid-template-columns:repeat(2,343px);column-gap:70px;margin:72.6px 0 0;}
.pn-ghost img{width:100%;height:auto;}

/* 지시선 + 캡션 — 원본 x 좌표 그대로, 지시선은 도해 위로 올라간다 */
.pn-ghostcap{position:relative;height:24px;margin:14px 0 0;}
.pn-ghostcap .cap{
  position:absolute;top:0;left:64.31%;width:26.72%;
  font-size:15px;font-weight:350;line-height:1.6;letter-spacing:-0.02em;
  color:var(--text_main);white-space:nowrap;
}
.pn-ghostcap .ld{position:absolute;left:63.86%;top:-28px;width:19.69px;height:41.79px;overflow:visible;}

@media (max-width:755px){
  .pn-ghost{grid-template-columns:1fr;row-gap:24px;}
  .pn-ghostcap{position:static;height:auto;text-align:center;}
  .pn-ghostcap .cap{position:static;left:auto;width:auto;white-space:normal;}
  .pn-ghostcap .ld{display:none;}
}

/* ===========================================================
   생산 유의사항 — 종이 갈라짐 (Figma 163:1048)
   =========================================================== */

/* 2단 사진 (343×238, 간격 70) + 각 사진 아래 캡션.
   좁은 화면에서 캡션이 자기 사진을 따라가도록 figure 로 묶는다 */
.pn-crack{display:grid;grid-template-columns:repeat(2,343px);column-gap:70px;margin:72.6px 0 0;}
.pn-crack figure{margin:0;}
.pn-crack img{width:100%;height:auto;display:block;}
.pn-crack figcaption{
  margin-top:16px;
  font-size:15px;font-weight:350;line-height:1.6;letter-spacing:-0.02em;
  text-align:center;color:var(--text_main);
}

/* 후가공 선택 안내 상자 2개 — 제목·본문 위, 주문서 캡처는 상자 하단에 꽉 채워 붙는다 */
.pn-crack-boxes{display:grid;grid-template-columns:repeat(2,343px);column-gap:70px;margin:38px 0 0;}
.pn-crack-box{
  display:flex;flex-direction:column;
  min-height:237.6px;padding:27px 0 0;background:#f4f5f7;
}
.pn-crack-box h3{
  margin:0;font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-0.02em;
  text-align:center;color:var(--text_main);
}
.pn-crack-box p{
  margin:15px 0 0;font-size:15px;font-weight:350;line-height:1.6;letter-spacing:-0.02em;
  text-align:center;color:var(--text_main);
}
.pn-crack-box .shot{margin-top:auto;}   /* 상자 하단에 붙임 */
.pn-crack-box .shot img{width:100%;height:auto;display:block;}

@media (max-width:755px){
  .pn-crack,.pn-crack-boxes{grid-template-columns:1fr;row-gap:24px;}
  .pn-crack-box{min-height:0;padding-bottom:0;}
}

/* ===========================================================
   생산 유의사항 — 스크래치 (Figma 188:1536)
   =========================================================== */

/* 좌 사진(343×238) + 우 설명 — 설명이 사진보다 6.5px 위에서 시작한다 */
.pn-scratch{
  display:grid;grid-template-columns:343px minmax(0,1fr);column-gap:17px;
  margin:43.5px 0 0;align-items:start;
}
.pn-scratch img{width:100%;height:auto;display:block;margin-top:6.5px;}
.pn-scratch p{
  /* 원본 텍스트박스 폭(≈380). 브라우저 글꼴이 조금 넓어 386 이어야 원본과 같은 3줄로 끊긴다 */
  margin:0;max-width:386px;
  font-size:15px;font-weight:350;line-height:1.6;letter-spacing:-0.02em;
  color:var(--text_main);
}

@media (max-width:755px){
  .pn-scratch{grid-template-columns:1fr;row-gap:20px;}
  .pn-scratch img{margin-top:0;}
  .pn-scratch p{max-width:none;}
}

/* ===========================================================
   생산 유의사항 — 포장 및 배송 (Figma 166:1157)
   글자 크기는 원본 문자열 폭을 재서 맞췄다: 강조줄 14px / 상세줄 13px /
   빨간 주의문 13px(행간 18) / 불릿·캡션 15px / 하단 상자 본문 14px(행간 24)
   =========================================================== */

/* 좌 사진(246.3×183) + 우 배송수단 설명 */
.pn-ship{
  display:grid;grid-template-columns:246.324px minmax(0,1fr);column-gap:22.676px;
  margin:38px 0 0;align-items:start;
}
.pn-ship > img{width:100%;height:auto;display:block;}

/* 배송수단 한 줄 : 라벨 + 내용 */
.pn-ship-row{display:grid;grid-template-columns:75px minmax(0,1fr);align-items:start;}
.pn-ship-row + .pn-ship-row{margin-top:18px;}
.pn-ship-row .lb{
  font-size:14px;font-weight:700;line-height:21px;letter-spacing:-0.02em;color:var(--text_main);
  white-space:nowrap;
}
.pn-ship-row p{margin:0;letter-spacing:-0.02em;color:var(--text_main);}
.pn-ship-row .hd{font-size:14px;font-weight:500;line-height:21px;margin-bottom:3px;}     /* - 방문 후 빠르게 출고 가능. */
.pn-ship-row .em{font-size:14px;font-weight:500;line-height:21px;}     /* 굵게 강조되는 줄 */
.pn-ship-row .em.is-gap{margin-top:4px;}
.pn-ship-row .dt{font-size:13px;font-weight:350;line-height:21px;}     /* 상세 설명줄 */
.pn-ship-row .dt2{font-size:14px;font-weight:350;line-height:24px;}    /* 충무로 퀵 상세줄 */

/* 파란 테두리 링크 버튼 (원본 높이 18.47, 라운드 4.5) */
.pn-ship-btn{
  display:inline-flex;align-items:center;height:18.47px;padding:0 5px;margin-left:5px;
  border:1px solid var(--main_color);border-radius:4.5px;
  font-size:12px;font-weight:400;line-height:1;letter-spacing:-0.02em;
  color:var(--main_color);text-decoration:none;vertical-align:middle;
}

/* 빨간 주의문 — 행간이 본문보다 좁다.
   선택자에 p 를 붙여 위의 .pn-ship-row p (색상 회색) 보다 우선하게 한다 */
.pn-ship-row p.pn-ship-warn{
  /* 줄나눔은 원본대로 <br> 로만 준다 — 폭이 아슬아슬해 자동 줄바꿈되면 줄 수가 늘어난다 */
  margin:4px 0 0;font-size:13px;font-weight:350;line-height:18px;letter-spacing:-0.02em;
  color:var(--new_color);white-space:nowrap;
}
.pn-ship-warn b{font-weight:700;}

/* 결제/문의 안내 불릿 */
.pn-ship-notes{
  list-style:none;margin:30px 0 0;padding:0 0 0 271px;
  font-size:15px;font-weight:350;line-height:24px;letter-spacing:-0.02em;color:var(--text_main);
}
.pn-ship-notes li{padding-left:7px;text-indent:-7px;}

/* 파손/AS 안내 — 3px 테두리 상자 */
.pn-ship-box{margin:38px 0 0;border:3px solid var(--line_color);padding:3px 0 15px;}
.pn-ship-box .hd{display:grid;grid-template-columns:138px minmax(0,1fr);align-items:start;}
.pn-ship-box .ttl{
  display:flex;align-items:center;gap:4px;
  font-size:14px;font-weight:700;line-height:24px;letter-spacing:-0.02em;color:var(--new_color);
  white-space:nowrap;
}
.pn-ship-box .ttl img{width:13.75px;height:12.75px;}
.pn-ship-box p{
  margin:0;font-size:14px;font-weight:350;line-height:24px;letter-spacing:-0.02em;color:var(--text_main);
}

/* 파손 접수용 사진 3장 (200×200) + 번호 배지 */
.pn-ship-shots{
  display:grid;grid-template-columns:repeat(3,200px);column-gap:28.232px;
  margin:13.5px 0 0 49.768px;
}
.pn-ship-shots figure{margin:0;position:relative;}
.pn-ship-shots img{width:200px;height:200px;object-fit:cover;display:block;}
.pn-ship-shots .no{
  position:absolute;left:5.305px;top:6.47px;width:24.762px;height:24.762px;border-radius:5px;
  background:var(--new_color);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;line-height:1;
}
.pn-ship-shots figcaption{
  margin-top:7.5px;font-size:15px;font-weight:350;line-height:24px;letter-spacing:-0.02em;
  text-align:center;color:var(--text_main);
}

/* AS 불가 안내 — 회색 박스 + 우측 사진 */
.pn-ship-as{
  position:relative;margin:29.4px 20.476px 0;min-height:161.053px;
  padding:8.5px 0 0;background:#eff1f3;
}
.pn-ship-as .hd{grid-template-columns:122.5px minmax(0,1fr);display:grid;align-items:start;}
.pn-ship-as .hd > .ttl{padding-left:8px;}
.pn-ship-as p{max-width:400px;}
.pn-ship-as > img{position:absolute;right:8.48px;top:8.53px;width:174.776px;height:144px;}

@media (max-width:755px){
  .pn-ship{grid-template-columns:1fr;row-gap:20px;}
  .pn-ship-row{grid-template-columns:1fr;}
  .pn-ship-row .lb{margin-bottom:4px;}
  .pn-ship-notes{padding-left:0;}
  .pn-ship-box .hd,.pn-ship-as .hd{grid-template-columns:1fr;}
  .pn-ship-box{padding-left:12px;padding-right:12px;}
  .pn-ship-shots{grid-template-columns:1fr;row-gap:20px;margin-left:0;justify-items:center;}
  .pn-ship-as{margin-left:0;margin-right:0;padding:12px;}
  .pn-ship-as > img{position:static;margin:12px auto 0;}
  .pn-ship-as p{max-width:none;}
  /* 위의 `.pn-ship-row p.pn-ship-warn` 보다 선택자 힘이 세야 nowrap 이 풀린다 —
     안 풀리면 가장 긴 줄(416px)이 그리드 폭을 벌려 가로 스크롤이 생긴다 */
  .pn-ship-row p.pn-ship-warn{white-space:normal;}
}

/* ===========================================================
   후가공안내 — 표지코팅 (Figma 188:1351)
   페이지 폭 756 기준. 원본 좌표: 필 탭 y94(높이 32) ·
   카드 360×272.25, 열 간격 36 · 행 간격 49
   =========================================================== */

/* 후가공 항목 필 탭 : 140px 5개, 간격 14 — 활성 탭만 파랑 채움 + 흰 글자 */
.fin-tabs{display:flex;gap:14px;margin:49px 0 0;}
.fin-tabs a{
  flex:1 1 140px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:16px;background:#f5f5f5;
  font-size:14px;letter-spacing:-0.02em;
  color:var(--text_main);text-decoration:none;
}
.fin-tabs a.is-active{background:var(--main_color);color:var(--white);}

/* 섹션 제목/설명 — 원본 y 간격: 탭 아래 97 / 제목 아래 39 / 설명 아래 22 */
.fin-h2{
  margin:97px 0 0;font-size:25px;font-weight:500;line-height:1.1;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);
}
.fin-lead{
  margin:39px 0 0;font-size:15px;font-weight:350;line-height:1.6;
  text-align:center;color:var(--text_main);
}

/* 코팅 종류 카드 : 2열 (사진 360×272.25 · 이름 16px/500 · 설명 15px/350) */
.fin-grid{
  display:grid;grid-template-columns:repeat(2,360px);gap:49px 36px;
  margin:22px 0 0;
}
.fin-grid figure{margin:0;}
.fin-grid img{width:100%;aspect-ratio:360/272.25;object-fit:cover;}
.fin-grid figcaption{margin-top:13px;text-align:center;}
.fin-grid .nm{display:block;font-size:16px;font-weight:500;line-height:1.5;color:var(--text_main);}
.fin-grid .desc{display:block;margin-top:3px;font-size:15px;font-weight:350;line-height:1.6;color:var(--text_main);}

/* 캡션 없는 사진 2장 나란히 (귀도리 등) — 원본은 설명 아래 45 간격 */
.fin-grid.is-plain{margin-top:45px;}

/* 전폭 사진 (디지털부분UV 등) — 설명 아래 45 간격 */
.fin-shot{margin:45px 0 0;}
.fin-shot img{width:100%;height:auto;}

/* 디지털 박 (Figma 195:2413) — 행 간격 40, 사진 좌하단에 흰 라벨 필 오버레이.
   컬러 견본 구슬은 사진 안에 포함돼 있고 라벨 필만 오버레이다.
   필은 원본 좌표(x45.06, 하단여백 13.7, 77.22×17.98)를 % 로 환산했다 */
.fin-grid.is-foil{gap:40px 36px;}
.fin-grid .shot{position:relative;margin:0;}
.fin-grid .tag{
  position:absolute;left:12.52%;bottom:5.03%;
  width:77.22px;height:17.98px;border-radius:9px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:350;letter-spacing:-0.02em;
  color:var(--text_main);white-space:nowrap;
}

/* 제본 (Figma 195:2503) — 4종 카드: 사진 + 이름 + 용도 칩 + 설명 (+버튼).
   행 간격 80 은 원본 y 좌표(행 피치 510.16) 기준이다 */
.fin-bind{
  display:grid;grid-template-columns:repeat(2,360px);gap:80px 36px;
  margin:40px 0 0;
}
.fin-bind figure{margin:0;}
.fin-bind img{width:100%;aspect-ratio:360/272.25;object-fit:cover;}
.fin-bind h3{
  margin:16px 0 0;font-size:16px;font-weight:500;line-height:1.5;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);
}
/* 칩 줄나눔은 원본과 동일하게 .row 로 고정한다 (자동 줄바꿈 금지) */
.fin-bind .chips{margin:12.5px 0 0;}
.fin-bind .chips .row{display:flex;justify-content:center;gap:10px;}
.fin-bind .chips .row + .row{margin-top:10.5px;}
.fin-bind .chips span{
  height:21px;padding:0 12px;border-radius:10.5px;
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:350;letter-spacing:-0.02em;color:#000;
  white-space:nowrap;
}
.fin-bind .c-blue span{background:#d4f2ff;}
.fin-bind .c-pink span{background:#ffd9d9;}
.fin-bind .c-orange span{background:#ffcaab;}
.fin-bind .c-cyan span{background:#bae8ee;}
/* 줄나눔은 원본대로 <br> 로만 준다 — 브라우저 글꼴이 조금 넓어 자동 줄바꿈되면
   원본보다 줄 수가 늘어나므로 데스크톱에서는 막아 둔다 (좁은 화면은 아래 해제).
   원본은 15px 지만 가장 긴 줄(350px)이 열 폭 360 을 넘쳐 옆 칼럼과 겹치므로
   14px 로 낮춰 원본과 같은 줄 구조를 유지한다 */
.fin-bind p{
  margin:20px 0 0;font-size:14px;font-weight:350;line-height:1.71;
  letter-spacing:-0.02em;text-align:center;color:var(--text_main);
  white-space:nowrap;
}

/* 자세히 보기 버튼 — 177×24(테두리 2px 포함 28), 우하단 2.7px 그림자 입체 효과 */
.fin-bind .more{
  width:181.455px;height:28px;margin:22px auto 0;
  display:flex;align-items:center;justify-content:center;
  background:#ffcaab;border:2px solid #51250c;border-radius:4px;
  box-shadow:2.73px 2.5px 0 0 #51250c;
  font-size:14px;font-weight:500;letter-spacing:-0.02em;
  color:#000;text-decoration:none;white-space:nowrap;
}

/* '자세히 보기' 로 펼치는 상세 이미지 — 카드 2×2 아래에 페이지 폭으로 붙는다 */
.fin-more{margin:34px 0 0;}
.fin-more[hidden]{display:none;}
.fin-more img{display:block;width:100%;height:auto;}

@media (max-width:755px){
  .fin-bind{grid-template-columns:1fr;gap:40px;}
  .fin-bind .chips .row{flex-wrap:wrap;row-gap:10.5px;}
  .fin-bind p{white-space:normal;}
}

/* 하단 안내 필 박스 — 287.25×32, r5, #F4F5F7 */
.fin-note{
  width:287.25px;height:32px;margin:33px auto 0;border-radius:5px;
  background:#f4f5f7;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:350;letter-spacing:-0.02em;
  color:var(--text_main);white-space:nowrap;
}

/* 귀도리 상세 (Figma 195:1717) — 좌 도해 306×389 + 우 설명·사이즈 도해.
   사이즈 도해 3장(135.736²)은 원본 y 간격(텍스트 아래 137)을 그대로 둔다 */
.fin-round{
  display:grid;grid-template-columns:306px minmax(0,1fr);column-gap:21px;
  margin:78px 0 0;align-items:start;
}
.fin-round > img{width:100%;height:auto;}
.fin-round p{
  margin:10px 0 0;font-size:15px;font-weight:350;line-height:1.6;
  letter-spacing:-0.02em;color:var(--text_main);
}
.fin-round .sizes{display:flex;gap:9px;margin:137px 0 0 4px;}
.fin-round .sizes img{width:135.736px;height:135.736px;}

@media (max-width:755px){
  .fin-tabs{flex-wrap:wrap;gap:8px;}
  .fin-tabs a{flex:1 1 30%;}
  .fin-grid{grid-template-columns:1fr;gap:32px;}
  .fin-round{grid-template-columns:1fr;row-gap:20px;}
  .fin-round .sizes{margin:24px 0 0;flex-wrap:wrap;justify-content:center;}
}

/* 좌 도해 + 우 설명 2단 (prodution_notes_3) — 원본 좌표 그대로 */
.pn-split{
  display:grid;grid-template-columns:365px 377px;column-gap:14px;
  margin:34px 0 0;align-items:start;
}
.pn-split .shot{position:relative;margin:3px 0 0;}
.pn-split .shot img{width:100%;height:auto;}
.pn-split .shot figcaption{
  position:absolute;left:60.48%;top:85.97%;width:32.89%;
  display:flex;align-items:center;justify-content:center;
  height:8.82%;min-height:24px;
  background:#fff;border-radius:50px;
  font-size:15px;font-weight:350;line-height:1.6;
  color:var(--text_main);white-space:nowrap;
}
.pn-body{margin:0;font-size:15px;font-weight:350;line-height:1.6;color:var(--text_main);}
.pn-badge.is-left{justify-content:flex-start;margin:23px 0 0;}

@media (max-width:755px){
  .pn-split{grid-template-columns:1fr;row-gap:24px;}
  .pn-split .shot{margin-top:0;}
}


/* ═══ 하드커버 전용 ══════════════════════════════════════ */

/* 2일 출고 배너 — 상단 탭 바로 아래 */
.hv-banner{margin-top:14px;}
.hv-banner .bar{
  display:flex;align-items:center;justify-content:center;gap:12px;
  height:38px;background:#e9ecf8;border-radius:4px;
  font-size:14px;color:var(--text_main);
}
.hv-banner .bar b{color:#2c3e70;font-weight:700;}
.hv-banner .bar .sep{width:1px;height:14px;background:#c3c9e2;}
.hv-banner .note{
  margin:6px 2px 0;font-size:11.5px;color:#9a9a9a;letter-spacing:-0.02em;
}

/* 변형(각양장/스프링)별 콘텐츠 블록 — ?v=spr 유무로 body 클래스가 정해진다(탭 없음) */
.gv-var{display:none;}
body.v-case .gv-var-case{display:block;}
body.v-spr  .gv-var-spr {display:block;}

@media (max-width:755px){
  .hv-banner .bar{height:auto;padding:8px 12px;flex-wrap:wrap;gap:4px 10px;}
}

/* 내지옵션 상단 단면 다이어그램 */
.inner-diagram{margin:10px 0 26px;display:flex;justify-content:center;}
.inner-diagram img{width:520px;max-width:100%;}

/* 하드커버 섹션 공용 */
.hv-pill{
  display:table;margin:34px auto 22px;padding:6px 18px;border-radius:16px;
  background:#29b6b0;color:#fff;font-size:14px;line-height:1.4;
}
.hv-figure{display:flex;justify-content:center;margin-top:10px;}
.hv-figure img{max-width:100%;}
.hv-figure.is-band{margin-top:26px;}
.hv-figure.is-band img{width:100%;}
figure.hv-figure{flex-direction:column;align-items:center;}
.hv-note{font-size:13px;color:#9a9a9a;}